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

// Default mock — three-language app (matches DEFAULT_LANGUAGES)
const defaultLanguages = [
  { code: 'pt-BR', label: 'Português (BR)', shortLabel: 'PT' },
  { code: 'en', label: 'English', shortLabel: 'EN' },
  { code: 'es', label: 'Español', shortLabel: 'ES' },
];

const useLanguageMock = vi.fn(() => ({
  language: 'pt-BR',
  setLanguage: vi.fn(),
  availableLanguages: defaultLanguages,
  isMonolingual: false,
}));

vi.mock('../../../contexts/LanguageContext', () => ({
  useLanguage: () => useLanguageMock(),
}));

vi.mock('react-i18next', () => ({
  useTranslation: () => ({
    t: (key: string, fallback?: string) => {
      const map: Record<string, string> = {
        'languageSelector.label': 'Selecionar idioma',
        'languageSelector.placeholder': 'Idioma',
        'languageSelector.ptBR': 'Português (BR)',
        'languageSelector.en': 'English',
        'languageSelector.es': 'Español',
      };
      return map[key] ?? fallback ?? key;
    },
  }),
}));

describe('LanguageSelector', () => {
  beforeEach(() => {
    // Reset to default three-language behavior between tests
    useLanguageMock.mockReturnValue({
      language: 'pt-BR',
      setLanguage: vi.fn(),
      availableLanguages: defaultLanguages,
      isMonolingual: false,
    });
  });

  it('renders with current language from context', () => {
    render(<LanguageSelector />);
    expect(screen.getByText('Português (BR)')).toBeInTheDocument();
  });

  it('renders the globe icon by default', () => {
    render(<LanguageSelector />);
    // Globe icon is rendered as SVG
    expect(document.querySelector('svg')).toBeInTheDocument();
  });

  it('applies the aria-label from i18n', () => {
    render(<LanguageSelector />);
    expect(screen.getByLabelText('Selecionar idioma')).toBeInTheDocument();
  });

  it('renders nothing when monolingual (default behavior)', () => {
    useLanguageMock.mockReturnValue({
      language: 'en',
      setLanguage: vi.fn(),
      availableLanguages: [{ code: 'en', label: 'English', shortLabel: 'EN' }],
      isMonolingual: true,
    });
    const { container } = render(<LanguageSelector />);
    expect(container.firstChild).toBeNull();
  });

  it('renders even when monolingual if showWhenMonolingual is true', () => {
    useLanguageMock.mockReturnValue({
      language: 'en',
      setLanguage: vi.fn(),
      availableLanguages: [{ code: 'en', label: 'English', shortLabel: 'EN' }],
      isMonolingual: true,
    });
    render(<LanguageSelector showWhenMonolingual />);
    expect(screen.getByText('English')).toBeInTheDocument();
  });

  it('shows custom languages added via availableLanguages', () => {
    useLanguageMock.mockReturnValue({
      language: 'fr',
      setLanguage: vi.fn(),
      availableLanguages: [
        ...defaultLanguages,
        { code: 'fr', label: 'Français', shortLabel: 'FR' },
      ],
      isMonolingual: false,
    });
    render(<LanguageSelector />);
    expect(screen.getByText('Français')).toBeInTheDocument();
  });
});