import * as React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { ValidationChecklist } from '../ValidationChecklist';
import type { ContentCheck } from '../checks';

const checks: ContentCheck[] = [
  { id: 'blog-words', label: 'Blog word count', status: 'pass', detail: '450 words' },
  { id: 'linkedin-words', label: 'LinkedIn word count', status: 'warn', detail: '100 words' },
  { id: 'no-hype', label: 'No hype words', status: 'fail', detail: 'revolutionary' },
];

describe('ValidationChecklist', () => {
  it('renders every check with its label and detail', () => {
    render(<ValidationChecklist checks={checks} />);
    expect(screen.getByText('Blog word count')).toBeInTheDocument();
    expect(screen.getByText('— 450 words')).toBeInTheDocument();
    expect(screen.getByText('No hype words')).toBeInTheDocument();
  });

  it('summarises passing count in the overall pill', () => {
    render(<ValidationChecklist checks={checks} />);
    expect(screen.getByText('1/3 passing')).toBeInTheDocument();
  });

  it('renders the judge verdict, scores, and expandable issues', () => {
    render(
      <ValidationChecklist
        checks={checks}
        judgeVerdict={{
          verdict: 'revise',
          summary: 'Reads well but sourcing is thin.',
          scores: { clarity: 8, accuracy: 6 },
          issues: [{ guardrail: 'sourcing', severity: 'high', problem: 'Unsupported claim', fix: 'Add a citation' }],
        }}
      />,
    );
    expect(screen.getByText('AI judge')).toBeInTheDocument();
    expect(screen.getByText('revise')).toBeInTheDocument();
    expect(screen.getByText('Reads well but sourcing is thin.')).toBeInTheDocument();
    expect(screen.getByText('clarity')).toBeInTheDocument();

    // issues collapsed by default, expand on click
    expect(screen.queryByText('Unsupported claim')).not.toBeInTheDocument();
    fireEvent.click(screen.getByText('1 issue'));
    expect(screen.getByText('Unsupported claim')).toBeInTheDocument();
    expect(screen.getByText('Fix: Add a citation')).toBeInTheDocument();
  });

  it('is read-only when no onOverride is provided', () => {
    render(<ValidationChecklist checks={checks} />);
    expect(screen.queryByText('Override checks (with reason)')).not.toBeInTheDocument();
  });

  it('drives the override flow when onOverride is provided', () => {
    const onOverride = jest.fn();
    render(<ValidationChecklist checks={checks} onOverride={onOverride} />);

    fireEvent.click(screen.getByText('Override checks (with reason)'));
    const textarea = screen.getByLabelText('Reason for overriding checks');
    // empty reason keeps the confirm disabled
    expect(screen.getByRole('button', { name: 'Override' })).toBeDisabled();

    fireEvent.change(textarea, { target: { value: 'Client approved the exception.' } });
    fireEvent.click(screen.getByRole('button', { name: 'Override' }));
    expect(onOverride).toHaveBeenCalledWith({ overridden: true, reason: 'Client approved the exception.' });
  });

  it('shows an overridden banner and can clear the override', () => {
    const onOverride = jest.fn();
    render(
      <ValidationChecklist
        checks={checks}
        override={{ overridden: true, reason: 'Approved by editor.' }}
        onOverride={onOverride}
      />,
    );
    expect(screen.getByText('Checks overridden')).toBeInTheDocument();
    expect(screen.getByText('Approved by editor.')).toBeInTheDocument();
    expect(screen.getByText('Overridden')).toBeInTheDocument();

    fireEvent.click(screen.getByText('Clear'));
    expect(onOverride).toHaveBeenCalledWith({ overridden: false });
  });
});