import { describe, it, expect, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import EmailTemplateSelector from '../EmailTemplateSelector';

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

// Mock API client
vi.mock('../../api/client', () => ({
  default: {
    get: vi.fn(() => Promise.resolve({ data: [] })),
  },
}));

const createWrapper = () => {
  const queryClient = new QueryClient({
    defaultOptions: {
      queries: {
        retry: false,
      },
    },
  });
  return ({ children }: { children: React.ReactNode }) => (
    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
  );
};

describe('EmailTemplateSelector', () => {
  it('renders select element', () => {
    render(
      <EmailTemplateSelector value={undefined} onChange={() => {}} />,
      { wrapper: createWrapper() }
    );
    expect(screen.getByRole('combobox')).toBeInTheDocument();
  });

  it('shows placeholder text after loading', async () => {
    render(
      <EmailTemplateSelector
        value={undefined}
        onChange={() => {}}
        placeholder="Select a template"
      />,
      { wrapper: createWrapper() }
    );
    // Wait for loading to finish and placeholder to appear
    await screen.findByText('Select a template');
  });

  it('is disabled when disabled prop is true', () => {
    render(
      <EmailTemplateSelector value={undefined} onChange={() => {}} disabled />,
      { wrapper: createWrapper() }
    );
    expect(screen.getByRole('combobox')).toBeDisabled();
  });

  it('applies custom className', () => {
    const { container } = render(
      <EmailTemplateSelector 
        value={undefined} 
        onChange={() => {}} 
        className="custom-class"
      />,
      { wrapper: createWrapper() }
    );
    expect(container.firstChild).toHaveClass('custom-class');
  });

  it('shows empty state message when no templates', async () => {
    render(
      <EmailTemplateSelector value={undefined} onChange={() => {}} />,
      { wrapper: createWrapper() }
    );
    // Wait for loading to finish
    await screen.findByText('No email templates yet.');
  });
});
