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

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

describe('SandboxBanner', () => {
  const defaultProps = {
    isSandbox: true,
    onSwitchToLive: vi.fn(),
  };

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

  it('renders when in sandbox mode', () => {
    render(<SandboxBanner {...defaultProps} />);
    expect(screen.getByText('TEST MODE')).toBeInTheDocument();
  });

  it('returns null when not in sandbox mode', () => {
    const { container } = render(<SandboxBanner {...defaultProps} isSandbox={false} />);
    expect(container.firstChild).toBeNull();
  });

  it('renders banner description', () => {
    render(<SandboxBanner {...defaultProps} />);
    expect(screen.getByText(/You are viewing test data/)).toBeInTheDocument();
  });

  it('renders switch to live button', () => {
    render(<SandboxBanner {...defaultProps} />);
    expect(screen.getByText('Switch to Live')).toBeInTheDocument();
  });

  it('calls onSwitchToLive when button clicked', () => {
    const onSwitchToLive = vi.fn();
    render(<SandboxBanner {...defaultProps} onSwitchToLive={onSwitchToLive} />);
    fireEvent.click(screen.getByText('Switch to Live'));
    expect(onSwitchToLive).toHaveBeenCalled();
  });

  it('disables button when switching', () => {
    render(<SandboxBanner {...defaultProps} isSwitching />);
    expect(screen.getByText('Switching...')).toBeDisabled();
  });

  it('shows switching text when isSwitching is true', () => {
    render(<SandboxBanner {...defaultProps} isSwitching />);
    expect(screen.getByText('Switching...')).toBeInTheDocument();
  });

  it('renders dismiss button when onDismiss provided', () => {
    render(<SandboxBanner {...defaultProps} onDismiss={() => {}} />);
    expect(screen.getByTitle('Dismiss')).toBeInTheDocument();
  });

  it('does not render dismiss button when onDismiss not provided', () => {
    render(<SandboxBanner {...defaultProps} />);
    expect(screen.queryByTitle('Dismiss')).not.toBeInTheDocument();
  });

  it('calls onDismiss when dismiss button clicked', () => {
    const onDismiss = vi.fn();
    render(<SandboxBanner {...defaultProps} onDismiss={onDismiss} />);
    fireEvent.click(screen.getByTitle('Dismiss'));
    expect(onDismiss).toHaveBeenCalled();
  });

  it('has gradient background', () => {
    const { container } = render(<SandboxBanner {...defaultProps} />);
    expect(container.firstChild).toHaveClass('bg-gradient-to-r');
  });

  it('renders flask icon', () => {
    const { container } = render(<SandboxBanner {...defaultProps} />);
    const svg = container.querySelector('svg');
    expect(svg).toBeInTheDocument();
  });
});
