import { describe, it, expect, vi, beforeAll } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import QuizAnswers from '@/Components/quiz/QuizAnswers';

type Props = React.ComponentProps<typeof QuizAnswers>;

const answers: Props['answers'] = [
  {
    text: 'Somewhat true--the foliage repelled the rain, but was ineffective against the splash.',
    is_correct: false,
    letter: 'A',
    original_index: 0,
  },
  {
    text: 'True--his quick action ensured his coat remained immaculate.',
    is_correct: true,
    letter: 'B',
    original_index: 1,
  },
  {
    text: 'A well-known high-end velvet garment.',
    is_correct: false,
    letter: 'C',
    original_index: 2,
  },
];

function renderAnswers(overrides: Partial<Props> = {}) {
  return render(
    <QuizAnswers
      answers={answers}
      answerStates={{}}
      answersLoading={false}
      highlightedAnswer={null}
      showCorrectFeedback={false}
      questionId={4}
      currentQuestionIndex={0}
      onAnswerSelect={vi.fn()}
      pendingAnswerKey={null}
      {...overrides}
    />
  );
}

beforeAll(() => {
  window.matchMedia ??= ((query: string) => ({
    matches: false,
    media: query,
    onchange: null,
    addEventListener: vi.fn(),
    removeEventListener: vi.fn(),
    addListener: vi.fn(),
    removeListener: vi.fn(),
    dispatchEvent: vi.fn(),
  })) as never;
});

describe('QuizAnswers em-dash rendering', () => {
  // Regression for ENG-2037. The question text, the story text and the PDF report all
  // converted a package's `--` to an em-dash; the answer options did not, so students
  // saw the raw double hyphen.
  it('renders a double hyphen in an answer option as an em-dash', () => {
    renderAnswers();

    expect(
      screen.getByText(
        'Somewhat true—the foliage repelled the rain, but was ineffective against the splash.'
      )
    ).toBeInTheDocument();
    expect(
      screen.getByText('True—his quick action ensured his coat remained immaculate.')
    ).toBeInTheDocument();
  });

  it('leaves hyphenated words in an answer option alone', () => {
    renderAnswers();

    expect(screen.getByText('A well-known high-end velvet garment.')).toBeInTheDocument();
  });

  it('renders no literal &mdash; and no leftover double hyphen', () => {
    const { container } = renderAnswers();

    expect(container.textContent).not.toContain('&mdash;');
    expect(container.textContent).not.toContain('--');
  });

  // The conversion is display-only. `answer.text` is handed to onAnswerSelect and
  // persisted as `selected_answer`, which the PDF report converts on its own — a
  // normalised string here would double-convert or store an HTML entity.
  it('hands the raw text to onAnswerSelect so the stored answer keeps its double hyphen', () => {
    const onAnswerSelect = vi.fn();
    renderAnswers({ onAnswerSelect });

    fireEvent.click(
      screen.getByText('True—his quick action ensured his coat remained immaculate.')
    );

    expect(onAnswerSelect).toHaveBeenCalledTimes(1);
    expect(onAnswerSelect.mock.calls[0][0].text).toBe(
      'True--his quick action ensured his coat remained immaculate.'
    );
    expect(answers[1].text).toBe('True--his quick action ensured his coat remained immaculate.');
  });
});