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

// `MarketingNavbar` embeds the design system's `LanguageSelector` by default,
// which reads from `LanguageContext` — most tests set `showLanguageSelector={false}`
// to exercise the navbar in isolation with a plain render, and only the
// language-selector-specific test uses `renderWithProviders`.

const links = [
  { label: 'Product', href: '/product' },
  { label: 'Pricing', href: '/pricing' },
];

describe('MarketingNavbar', () => {
  it('renders the logo and desktop navigation links', () => {
    render(
      <MarketingNavbar logo={<span>Xertica</span>} links={links} showLanguageSelector={false} />
    );

    expect(screen.getByText('Xertica')).toBeInTheDocument();
    expect(screen.getAllByRole('link', { name: 'Product' })).toHaveLength(1);
    expect(screen.getByRole('link', { name: 'Product' })).toHaveAttribute('href', '/product');
    expect(screen.getAllByRole('link', { name: 'Pricing' })).toHaveLength(1);
  });

  it('renders primary and secondary CTAs as links when href is provided', () => {
    render(
      <MarketingNavbar
        logo={<span>Xertica</span>}
        links={links}
        showLanguageSelector={false}
        cta={{ label: 'Get started', href: '/start' }}
        secondaryCta={{ label: 'Contact sales', href: '/contact' }}
      />
    );

    expect(screen.getByRole('link', { name: 'Get started' })).toHaveAttribute('href', '/start');
    expect(screen.getByRole('link', { name: 'Contact sales' })).toHaveAttribute(
      'href',
      '/contact'
    );
  });

  it('fires the CTA onClick handler when no href is provided', () => {
    const onClick = vi.fn();
    render(
      <MarketingNavbar
        logo={<span>Xertica</span>}
        links={links}
        showLanguageSelector={false}
        cta={{ label: 'Try free', onClick }}
      />
    );

    fireEvent.click(screen.getByRole('button', { name: 'Try free' }));
    expect(onClick).toHaveBeenCalledTimes(1);
  });

  it('toggles the mobile menu panel when the trigger is clicked', () => {
    render(
      <MarketingNavbar logo={<span>Xertica</span>} links={links} showLanguageSelector={false} />
    );

    expect(screen.getAllByRole('link', { name: 'Product' })).toHaveLength(1);

    const trigger = screen.getByRole('button', { name: 'Open menu' });
    fireEvent.click(trigger);

    expect(screen.getByRole('button', { name: 'Close menu' })).toHaveAttribute(
      'aria-expanded',
      'true'
    );
    expect(screen.getAllByRole('link', { name: 'Product' })).toHaveLength(2);

    fireEvent.click(screen.getByRole('button', { name: 'Close menu' }));
    expect(screen.getByRole('button', { name: 'Open menu' })).toHaveAttribute(
      'aria-expanded',
      'false'
    );
    expect(screen.getAllByRole('link', { name: 'Product' })).toHaveLength(1);
  });

  it('closes the mobile menu when a mobile nav link is clicked', () => {
    render(
      <MarketingNavbar logo={<span>Xertica</span>} links={links} showLanguageSelector={false} />
    );

    fireEvent.click(screen.getByRole('button', { name: 'Open menu' }));
    const mobileLink = screen.getAllByRole('link', { name: 'Product' })[1];
    fireEvent.click(mobileLink);

    expect(screen.getByRole('button', { name: 'Open menu' })).toBeInTheDocument();
    expect(screen.getAllByRole('link', { name: 'Product' })).toHaveLength(1);
  });

  it('supports custom open/close menu labels', () => {
    render(
      <MarketingNavbar
        logo={<span>Xertica</span>}
        links={links}
        showLanguageSelector={false}
        openMenuLabel="Menu"
        closeMenuLabel="Fechar"
      />
    );

    const trigger = screen.getByRole('button', { name: 'Menu' });
    fireEvent.click(trigger);
    expect(screen.getByRole('button', { name: 'Fechar' })).toBeInTheDocument();
  });

  it('renders the language selector by default', () => {
    renderWithProviders(<MarketingNavbar logo={<span>Xertica</span>} links={links} />);

    expect(screen.getByRole('combobox')).toBeInTheDocument();
  });

  it('omits the language selector when showLanguageSelector is false', () => {
    render(
      <MarketingNavbar logo={<span>Xertica</span>} links={links} showLanguageSelector={false} />
    );

    expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
  });
});