import { render, screen } from '@testing-library/react';
import type { NavItem } from '../model/types';
import { SidebarNav } from './SidebarNav';

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

import { usePathname } from 'next/navigation';

const ITEMS: NavItem[] = [
  { id: 'bio', label: 'Bio', number: '01' },
  { id: 'work', label: 'Work', number: '02' },
];

describe('SidebarNav', () => {
  describe('rendering', () => {
    beforeEach(() => {
      vi.mocked(usePathname).mockReturnValue('/bio');
    });

    it('renders a nav element', () => {
      render(<SidebarNav items={ITEMS} />);
      expect(screen.getByRole('navigation')).toBeInTheDocument();
    });

    it('renders "Index" heading', () => {
      render(<SidebarNav items={ITEMS} />);
      expect(screen.getByText('Index')).toBeInTheDocument();
    });

    it('renders "Digital Monograph" subtitle', () => {
      render(<SidebarNav items={ITEMS} />);
      expect(screen.getByText('Digital Monograph')).toBeInTheDocument();
    });

    it('renders each item label and number', () => {
      render(<SidebarNav items={ITEMS} />);
      expect(screen.getByText('Bio')).toBeInTheDocument();
      expect(screen.getByText('01')).toBeInTheDocument();
      expect(screen.getByText('Work')).toBeInTheDocument();
      expect(screen.getByText('02')).toBeInTheDocument();
    });

    it('renders "Quick Links" section', () => {
      render(<SidebarNav items={ITEMS} />);
      expect(screen.getByText('Quick Links')).toBeInTheDocument();
    });

    it('renders Email quick link', () => {
      render(<SidebarNav items={ITEMS} />);
      expect(screen.getByRole('link', { name: 'Email' })).toBeInTheDocument();
    });

    it('renders a link for each nav item', () => {
      render(<SidebarNav items={ITEMS} />);
      expect(screen.getByRole('link', { name: /Bio/i })).toBeInTheDocument();
      expect(screen.getByRole('link', { name: /Work/i })).toBeInTheDocument();
    });
  });

  describe('active state', () => {
    it('marks matching pathname item as active (no opacity-40)', () => {
      vi.mocked(usePathname).mockReturnValue('/bio');
      render(<SidebarNav items={ITEMS} />);
      const activeLink = screen.getByRole('link', { name: /Bio/i });
      expect(activeLink).not.toHaveClass('opacity-40');
    });

    it('marks non-matching item as inactive (opacity-40)', () => {
      vi.mocked(usePathname).mockReturnValue('/bio');
      render(<SidebarNav items={ITEMS} />);
      const inactiveLink = screen.getByRole('link', { name: /Work/i });
      expect(inactiveLink).toHaveClass('opacity-40');
    });

    it('marks first item active at root path', () => {
      vi.mocked(usePathname).mockReturnValue('/');
      render(<SidebarNav items={ITEMS} />);
      const firstLink = screen.getByRole('link', { name: /Bio/i });
      expect(firstLink).not.toHaveClass('opacity-40');
    });
  });
});