import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { InfoPopover } from '@/components/InfoPopover';

describe('InfoPopover', () => {
  it('renders nothing when there is no plain content', () => {
    const { container } = render(<InfoPopover label="X" />);
    expect(container).toBeEmptyDOMElement();
  });

  it('renders a labelled, collapsed trigger button', () => {
    render(<InfoPopover plain="what it means" ariaLabel="Reading score" />);
    const btn = screen.getByRole('button', { name: 'Reading score' });
    expect(btn).toHaveAttribute('aria-expanded', 'false');
    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
  });

  it('opens on click and shows label, plain and detail', async () => {
    const user = userEvent.setup();
    render(
      <InfoPopover
        label="Reading, Writing & Maths"
        plain="% reaching the expected standard"
        detail="National average ~60%"
        ariaLabel="RWM"
      />,
    );
    await user.click(screen.getByRole('button', { name: 'RWM' }));
    const tip = await screen.findByRole('tooltip');
    expect(tip).toHaveTextContent('Reading, Writing & Maths');
    expect(tip).toHaveTextContent('% reaching the expected standard');
    expect(tip).toHaveTextContent('National average ~60%');
    expect(screen.getByRole('button', { name: 'RWM' })).toHaveAttribute(
      'aria-expanded',
      'true',
    );
  });

  it('closes again on a second click', async () => {
    const user = userEvent.setup();
    render(<InfoPopover plain="body" ariaLabel="Info" />);
    const btn = screen.getByRole('button', { name: 'Info' });
    await user.click(btn);
    expect(await screen.findByRole('tooltip')).toBeInTheDocument();
    await user.click(btn);
    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
  });

  it('closes on Escape', async () => {
    const user = userEvent.setup();
    render(<InfoPopover plain="body" ariaLabel="Info" />);
    await user.click(screen.getByRole('button', { name: 'Info' }));
    expect(await screen.findByRole('tooltip')).toBeInTheDocument();
    await user.keyboard('{Escape}');
    expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
  });

  it('defaults the accessible name when no ariaLabel is given', () => {
    render(<InfoPopover plain="body" />);
    expect(
      screen.getByRole('button', { name: 'More information' }),
    ).toBeInTheDocument();
  });
});