import { render, screen } from '@testing-library/react';
import { Post16DestinationsSection } from '@/components/school/Post16DestinationsSection';
import type { DestinationPhase } from '@/lib/types';

const phase: DestinationPhase = {
  cohort_year: '2022/23',
  groups: {
    all: {
      cohort: 96,
      categories: [
        { category: 'higher_education', pupils: 56, percentage: 58.3, status: 'published' },
        { category: 'further_education', pupils: 12, percentage: 12.5, status: 'published' },
        { category: 'apprenticeship', pupils: 9, percentage: 9.4, status: 'published' },
        { category: 'employment', pupils: 13, percentage: 13.5, status: 'published' },
        { category: 'not_sustained', pupils: 6, percentage: 6.3, status: 'published' },
      ],
    },
  },
};

describe('Post16DestinationsSection', () => {
  it('names the Year 13 cohort, not Year 11', () => {
    const { container } = render(<Post16DestinationsSection destinations={phase} />);
    expect(container.textContent).toMatch(/Year 13/);
    expect(container.textContent).not.toMatch(/Year 11/);
  });

  it('reports higher education destinations', () => {
    render(<Post16DestinationsSection destinations={phase} />);
    expect(screen.getByText(/UK higher education/i)).toBeInTheDocument();
  });

  it('uses its own anchor so the nav does not collide with After Year 11', () => {
    const { container } = render(<Post16DestinationsSection destinations={phase} />);
    expect(container.querySelector('#post16-destinations')).toBeTruthy();
    expect(container.querySelector('#destinations')).toBeNull();
  });

  it('renders nothing when no group carries categories', () => {
    const empty: DestinationPhase = { cohort_year: '2022/23', groups: {} };
    const { container } = render(<Post16DestinationsSection destinations={empty} />);
    expect(container.firstChild).toBeNull();
  });
});