import { render, screen } from '@testing-library/react';

jest.mock('@auth0/auth0-react', () => ({
  useAuth0: () => ({
    isAuthenticated: false,
    loginWithRedirect: jest.fn(),
  }),
}));

jest.mock('react-router-dom', () => ({
  useNavigate: () => jest.fn(),
}));

// Mock MUI Accordion to avoid jsdom layout issues
jest.mock('@mui/material', () => {
  const actual = jest.requireActual('@mui/material');
  return {
    ...actual,
    Accordion: ({ children, expanded }: any) => (
      <div data-testid="accordion" data-expanded={expanded}>
        {children}
      </div>
    ),
    AccordionSummary: ({ children }: any) => <div>{children}</div>,
    AccordionDetails: ({ children }: any) => <div>{children}</div>,
  };
});

jest.mock('@mui/icons-material/ExpandMore', () => ({
  __esModule: true,
  default: () => <span data-testid="expand-icon" />,
}));

import { GuidePage } from '../GuidePage/GuidePage';
import { guideSections } from '../GuidePage/guideTypes';

describe('GuidePage', () => {
  beforeEach(() => {
    jest.clearAllMocks();
  });

  it('renders page heading and subheading', () => {
    render(<GuidePage />);
    expect(screen.getByText('User Guide')).toBeInTheDocument();
    expect(
      screen.getByText(/Precision Vehicle Management/)
    ).toBeInTheDocument();
  });

  it('renders all 10 section headings', () => {
    render(<GuidePage />);

    const expectedHeadings = [
      '1. Getting Started',
      '2. Dashboard',
      '3. Vehicles',
      '4. Fuel Logs',
      '5. Maintenance',
      '6. Gas Stations',
      '7. Documents',
      '8. Settings',
      '9. Subscription Tiers and Pro Features',
      '10. Mobile Experience',
    ];

    expectedHeadings.forEach((heading) => {
      expect(screen.getByRole('heading', { name: heading })).toBeInTheDocument();
    });
  });

  it('renders TOC with correct section titles', () => {
    render(<GuidePage />);

    guideSections.forEach((section) => {
      const matches = screen.getAllByText(section.title);
      expect(matches.length).toBeGreaterThanOrEqual(1);
    });
  });

  it('renders navigation bar with Guide link highlighted', () => {
    render(<GuidePage />);

    const guideLinks = screen.getAllByText('Guide');
    expect(guideLinks.length).toBeGreaterThanOrEqual(1);
  });

  it('renders GuideScreenshot components with loading="lazy"', () => {
    render(<GuidePage />);

    const images = document.querySelectorAll('img[loading="lazy"]');
    expect(images.length).toBeGreaterThan(0);
  });

  it('renders footer with copyright', () => {
    render(<GuidePage />);
    expect(screen.getByText(/FB Technologies LLC/)).toBeInTheDocument();
  });
});
