import { HeaderNavigation } from '@/components/app-shell/HeaderNavigation';
import { ThemedAccountCreateLink } from '@/components/app-shell/ThemedAccountCreateLink';
import { act, render, screen } from '@testing-library/react';
import { describe, expect, it, vi } from 'vitest';

vi.mock('next/navigation', () => ({
  usePathname: () => '/en/light',
}));

const labels = {
  product: 'Product',
  workflow: 'Workflow',
  modules: 'Modules',
  pricing: 'Pricing',
  faq: 'FAQ',
};

describe('HeaderNavigation', () => {
  it('updates destinations when the client theme preference changes', async () => {
    document.documentElement.dataset.themePreference = 'light';

    render(
      <HeaderNavigation
        locale="en"
        mode="light"
        label="Primary navigation"
        labels={labels}
      />,
    );

    const product = screen.getByRole('link', { name: 'Product' });
    expect(product).toHaveAttribute('href', '/en/light#product');

    await act(async () => {
      document.documentElement.dataset.themePreference = 'dark';
      window.dispatchEvent(
        new CustomEvent('rentaldrivego:theme-preference', { detail: 'dark' }),
      );
    });

    expect(product).toHaveAttribute('href', '/en/dark#product');
  });

  it('updates account creation destinations when the client theme preference changes', async () => {
    document.documentElement.dataset.themePreference = 'light';

    render(
      <ThemedAccountCreateLink locale="en" initialPreference="light">
        Create account
      </ThemedAccountCreateLink>,
    );

    const link = screen.getByRole('link', { name: 'Create account' });
    expect(link).toHaveAttribute('href', '/dashboard/sign-up?lang=en&theme=light');

    await act(async () => {
      document.documentElement.dataset.themePreference = 'dark';
      window.dispatchEvent(
        new CustomEvent('rentaldrivego:theme-preference', { detail: 'dark' }),
      );
    });

    expect(link).toHaveAttribute('href', '/dashboard/sign-up?lang=en&theme=dark');
  });
});