import React from 'react';
import { describe, expect, it, afterEach, vi } from 'vitest';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { I18nextProvider } from 'react-i18next';
import i18n from '../../i18n';
import WelcomeTeaserPage from '../WelcomeTeaserPage';

const navigateMock = vi.fn();

vi.mock('../../components/LanguageSwitcher', () => ({
  LanguageSwitcher: () => <div data-testid="language-switcher" />,
}));

vi.mock('../../lib/navigation', () => ({
  navigateToHref: (href: string) => navigateMock(href),
}));

vi.mock('../../auth/context', () => ({
  useAuth: () => ({ status: 'unauthenticated' }),
}));

vi.mock('@/hooks/use-appearance', async () => {
  const ReactImport = await import('react');
  return {
    useAppearance: () => {
      const [appearance, setAppearance] = ReactImport.useState<'light' | 'dark'>('light');
      return { appearance, updateAppearance: setAppearance };
    },
  };
});

describe('WelcomeTeaserPage', () => {
  const renderWithI18n = () => render(
    <I18nextProvider i18n={i18n}>
      <WelcomeTeaserPage />
    </I18nextProvider>
  );

  afterEach(() => {
    document.body.classList.remove('tenant-admin-theme', 'tenant-admin-welcome-theme');
    vi.clearAllMocks();
    navigateMock.mockReset();
  });

  it('applies the tenant admin theme classes while mounted', () => {
    const { unmount } = renderWithI18n();

    expect(document.body.classList.contains('tenant-admin-theme')).toBe(true);
    expect(document.body.classList.contains('tenant-admin-welcome-theme')).toBe(true);

    unmount();

    expect(document.body.classList.contains('tenant-admin-theme')).toBe(false);
    expect(document.body.classList.contains('tenant-admin-welcome-theme')).toBe(false);
  });

  it('shows the hero CTA and triggers the login redirect', async () => {
    renderWithI18n();
    const user = userEvent.setup();
    const loginButton = screen.getAllByRole('button', { name: /login/i })[0];
    await user.click(loginButton);

    expect(navigateMock).toHaveBeenCalledWith(expect.stringContaining('/event-admin/login'));
  });

  it('allows switching between light and dark presentation modes', async () => {
    renderWithI18n();

    const user = userEvent.setup();
    const toggle = screen.getByLabelText(/welcome\.theme\.aria|darstellung|appearance/i);

    expect(toggle).toHaveTextContent(/hell|light/i);

    await user.click(toggle);

    expect(toggle).toHaveTextContent(/dunkel|dark/i);
  });
});