import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import SandboxToggle from '../SandboxToggle';

// Mock react-i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string, defaultValue?: string) => defaultValue || key,
  }),
}));

describe('SandboxToggle', () => {
  const defaultProps = {
    isSandbox: false,
    sandboxEnabled: true,
    onToggle: vi.fn(),
  };

  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders when sandbox is enabled', () => {
    render(<SandboxToggle {...defaultProps} />);
    expect(screen.getByText('Live')).toBeInTheDocument();
    expect(screen.getByText('Test')).toBeInTheDocument();
  });

  it('returns null when sandbox not enabled', () => {
    const { container } = render(<SandboxToggle {...defaultProps} sandboxEnabled={false} />);
    expect(container.firstChild).toBeNull();
  });

  it('highlights Live button when not in sandbox mode', () => {
    render(<SandboxToggle {...defaultProps} isSandbox={false} />);
    const liveButton = screen.getByText('Live').closest('button');
    expect(liveButton).toHaveClass('bg-green-600');
  });

  it('highlights Test button when in sandbox mode', () => {
    render(<SandboxToggle {...defaultProps} isSandbox={true} />);
    const testButton = screen.getByText('Test').closest('button');
    expect(testButton).toHaveClass('bg-orange-500');
  });

  it('calls onToggle with false when Live clicked', () => {
    const onToggle = vi.fn();
    render(<SandboxToggle {...defaultProps} isSandbox={true} onToggle={onToggle} />);
    fireEvent.click(screen.getByText('Live'));
    expect(onToggle).toHaveBeenCalledWith(false);
  });

  it('calls onToggle with true when Test clicked', () => {
    const onToggle = vi.fn();
    render(<SandboxToggle {...defaultProps} isSandbox={false} onToggle={onToggle} />);
    fireEvent.click(screen.getByText('Test'));
    expect(onToggle).toHaveBeenCalledWith(true);
  });

  it('disables Live button when already in live mode', () => {
    render(<SandboxToggle {...defaultProps} isSandbox={false} />);
    const liveButton = screen.getByText('Live').closest('button');
    expect(liveButton).toBeDisabled();
  });

  it('disables Test button when already in sandbox mode', () => {
    render(<SandboxToggle {...defaultProps} isSandbox={true} />);
    const testButton = screen.getByText('Test').closest('button');
    expect(testButton).toBeDisabled();
  });

  it('disables both buttons when toggling', () => {
    render(<SandboxToggle {...defaultProps} isToggling />);
    const liveButton = screen.getByText('Live').closest('button');
    const testButton = screen.getByText('Test').closest('button');
    expect(liveButton).toBeDisabled();
    expect(testButton).toBeDisabled();
  });

  it('applies opacity when toggling', () => {
    render(<SandboxToggle {...defaultProps} isToggling />);
    const liveButton = screen.getByText('Live').closest('button');
    expect(liveButton).toHaveClass('opacity-50');
  });

  it('applies custom className', () => {
    const { container } = render(<SandboxToggle {...defaultProps} className="custom-class" />);
    expect(container.firstChild).toHaveClass('custom-class');
  });

  it('has title for Live button', () => {
    render(<SandboxToggle {...defaultProps} />);
    const liveButton = screen.getByText('Live').closest('button');
    expect(liveButton).toHaveAttribute('title', 'Live Mode - Production data');
  });

  it('has title for Test button', () => {
    render(<SandboxToggle {...defaultProps} />);
    const testButton = screen.getByText('Test').closest('button');
    expect(testButton).toHaveAttribute('title', 'Test Mode - Sandbox data');
  });

  it('renders icons', () => {
    const { container } = render(<SandboxToggle {...defaultProps} />);
    const svgs = container.querySelectorAll('svg');
    expect(svgs.length).toBe(2); // Zap and FlaskConical icons
  });
});
