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

// Mock react-i18next
vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    i18n: {
      language: 'en',
      changeLanguage: vi.fn(),
    },
  }),
}));

// Mock i18n module
vi.mock('../../i18n', () => ({
  supportedLanguages: [
    { code: 'en', name: 'English', flag: '🇺🇸' },
    { code: 'es', name: 'Español', flag: '🇪🇸' },
    { code: 'fr', name: 'Français', flag: '🇫🇷' },
  ],
}));

describe('LanguageSelector', () => {
  describe('dropdown variant', () => {
    it('renders dropdown button', () => {
      render(<LanguageSelector />);
      const button = screen.getByRole('button');
      expect(button).toBeInTheDocument();
    });

    it('shows current language flag by default', () => {
      render(<LanguageSelector />);
      expect(screen.getByText('🇺🇸')).toBeInTheDocument();
    });

    it('shows current language name on larger screens', () => {
      render(<LanguageSelector />);
      expect(screen.getByText('English')).toBeInTheDocument();
    });

    it('opens dropdown on click', () => {
      render(<LanguageSelector />);
      const button = screen.getByRole('button');
      fireEvent.click(button);
      expect(screen.getByRole('listbox')).toBeInTheDocument();
    });

    it('shows all languages when open', () => {
      render(<LanguageSelector />);
      const button = screen.getByRole('button');
      fireEvent.click(button);
      expect(screen.getByText('Español')).toBeInTheDocument();
      expect(screen.getByText('Français')).toBeInTheDocument();
    });

    it('hides flag when showFlag is false', () => {
      render(<LanguageSelector showFlag={false} />);
      expect(screen.queryByText('🇺🇸')).not.toBeInTheDocument();
    });

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

  describe('inline variant', () => {
    it('renders all language buttons', () => {
      render(<LanguageSelector variant="inline" />);
      const buttons = screen.getAllByRole('button');
      expect(buttons.length).toBe(3);
    });

    it('renders language names', () => {
      render(<LanguageSelector variant="inline" />);
      expect(screen.getByText(/English/)).toBeInTheDocument();
      expect(screen.getByText(/Español/)).toBeInTheDocument();
      expect(screen.getByText(/Français/)).toBeInTheDocument();
    });

    it('highlights current language', () => {
      render(<LanguageSelector variant="inline" />);
      const englishButton = screen.getByText(/English/).closest('button');
      expect(englishButton).toHaveClass('bg-brand-600');
    });

    it('shows flags by default', () => {
      render(<LanguageSelector variant="inline" />);
      expect(screen.getByText(/🇺🇸/)).toBeInTheDocument();
    });
  });
});
