// @vitest-environment jsdom

import { act } from 'react';
import { createRoot } from 'react-dom/client';
import { afterEach, expect, it, vi } from 'vitest';
import { aiOverviewResultValidationErrors } from '../../src/compliance/ai-overview';
import { AiOverviewResultView } from '../../src/compliance/ui/AiOverviewPanel';
import { validAiOverviewResult } from './ai-overview-fixtures';

afterEach(() => vi.unstubAllGlobals());

const many = (prefix: string, count: number) => Array.from({ length: count }, (_, index) => `${prefix} ${index + 1}?`);

it('accepts any number of questions and assumptions', () => {
  const result = validAiOverviewResult();
  result.questions = many('Synthetic question', 25);
  result.assumptions = many('Synthetic assumption', 30);
  expect(aiOverviewResultValidationErrors(result, new Set(['RULE-1']), new Set(['RULE-GAP']))).toEqual([]);
});

it('shows the first ten questions and expands the rest with the keyboard-accessible toggle', async () => {
  vi.stubGlobal('IS_REACT_ACT_ENVIRONMENT', true);
  const result = validAiOverviewResult();
  result.questions = many('Synthetic question', 25);
  result.assumptions = many('Synthetic assumption', 3);
  const container = document.createElement('div');
  document.body.append(container);
  const root = createRoot(container);
  const section = (title: string) => [...container.querySelectorAll('.ai-overview-section')]
    .find(element => element.querySelector('h2')?.textContent === title)!;

  try {
    await act(async () => root.render(<AiOverviewResultView result={result} />));
    const questions = section('Questions');
    expect(questions.querySelectorAll('li')).toHaveLength(10);
    const toggle = questions.querySelector('button')!;
    expect(toggle.textContent).toBe('Show all 25 questions');
    expect(toggle.getAttribute('aria-expanded')).toBe('false');
    // A short list needs no toggle.
    expect(section('Assumptions').querySelectorAll('li')).toHaveLength(3);
    expect(section('Assumptions').querySelector('button')).toBeNull();

    await act(async () => toggle.click());
    expect(questions.querySelectorAll('li')).toHaveLength(25);
    expect(toggle.textContent).toBe('Show first 10');
    expect(toggle.getAttribute('aria-expanded')).toBe('true');

    await act(async () => toggle.click());
    expect(questions.querySelectorAll('li')).toHaveLength(10);
  } finally {
    await act(async () => root.unmount());
    container.remove();
  }
});