import React from 'react';
import {render, screen, fireEvent} from '@testing-library/react';
import MobileMenu from '../MobileMenu';

jest.mock('next/link', () => {
  return ({children, href, onClick, ...props}: {children: React.ReactNode; href: string; onClick?: () => void; [key: string]: unknown}) => (
    <a href={href} onClick={onClick} {...props}>{children}</a>
  );
});

const mockUseAuth = jest.fn();
jest.mock('@/contexts/AuthContext', () => ({
  useAuth: () => mockUseAuth(),
}));

jest.mock('@/components/LocaleSwitcher', () => {
  return () => <div data-testid="locale-switcher">LocaleSwitcher</div>;
});

jest.mock('framer-motion', () => ({
  AnimatePresence: ({children}: {children: React.ReactNode}) => <>{children}</>,
  motion: {
    div: ({children, className, onClick, ...props}: React.HTMLAttributes<HTMLDivElement>) => (
      <div className={className} onClick={onClick}>{children}</div>
    ),
  },
}));

describe('MobileMenu', () => {
  const mockOnClose = jest.fn();

  beforeEach(() => {
    jest.clearAllMocks();
    mockUseAuth.mockReturnValue({isAuthenticated: false});
  });

  it('renders navigation links when open', () => {
    render(<MobileMenu isOpen={true} onClose={mockOnClose} locale="fr" />);
    expect(screen.getByText('agenda_link')).toBeInTheDocument();
    expect(screen.getByText('annuaire_link')).toBeInTheDocument();
    expect(screen.getByText('mag_link')).toBeInTheDocument();
    expect(screen.getByText('canalbreizh_link')).toBeInTheDocument();
  });

  it('does not render content when closed', () => {
    render(<MobileMenu isOpen={false} onClose={mockOnClose} locale="fr" />);
    expect(screen.queryByText('agenda_link')).not.toBeInTheDocument();
  });

  it('calls onClose when close button is clicked', () => {
    render(<MobileMenu isOpen={true} onClose={mockOnClose} locale="fr" />);
    fireEvent.click(screen.getByLabelText('aria_close_menu'));
    expect(mockOnClose).toHaveBeenCalledTimes(1);
  });

  it('shows login button when not authenticated', () => {
    mockUseAuth.mockReturnValue({isAuthenticated: false});
    render(<MobileMenu isOpen={true} onClose={mockOnClose} locale="fr" />);
    expect(screen.getByText('login_button')).toBeInTheDocument();
  });

  it('shows profile button when authenticated', () => {
    mockUseAuth.mockReturnValue({isAuthenticated: true});
    render(<MobileMenu isOpen={true} onClose={mockOnClose} locale="fr" />);
    expect(screen.getByText('profile_button')).toBeInTheDocument();
  });

  it('renders logo with Tamm and Kreiz', () => {
    render(<MobileMenu isOpen={true} onClose={mockOnClose} locale="fr" />);
    expect(screen.getByText('Tamm')).toBeInTheDocument();
    expect(screen.getByText('Kreiz')).toBeInTheDocument();
  });

  it('renders LocaleSwitcher', () => {
    render(<MobileMenu isOpen={true} onClose={mockOnClose} locale="fr" />);
    expect(screen.getByTestId('locale-switcher')).toBeInTheDocument();
  });

  it('shouldOfferSignUpToVisitorsAndListTheDomains', () => {
    render(<MobileMenu isOpen={true} onClose={mockOnClose} locale="fr" domaines={[{dprId: 1, dprNom: 'Danse'}]} />);
    expect(screen.getByText('signup_button').closest('a')).toHaveAttribute('href', '/fr/inscription');
    expect(screen.getByRole('link', {name: 'Danse'})).toHaveAttribute('href', '/fr/domaine/1/danse');
  });

  it('shouldHideSignUpFromAuthenticatedMembers', () => {
    mockUseAuth.mockReturnValue({isAuthenticated: true});
    render(<MobileMenu isOpen={true} onClose={mockOnClose} locale="fr" domaines={[]} />);
    expect(screen.queryByText('signup_button')).not.toBeInTheDocument();
  });
});