// Quiz screen: single question, options, submit -> feedback.
(function () {
  const NS = window.MineSafeGlobalDesignSystem_760fd2;
  const { Card, QuizOption, Button, Icon, Alert, ProgressBar, Badge } = NS;

  function Quiz({ onBack, onDone }) {
    const q = window.MSA_DATA.quiz;
    const [choice, setChoice] = React.useState(null);
    const [submitted, setSubmitted] = React.useState(false);
    const correct = choice === q.correct;

    const stateFor = (i) => {
      if (!submitted) return choice === i ? 'selected' : 'default';
      if (i === q.correct) return 'correct';
      if (i === choice) return 'incorrect';
      return 'default';
    };

    return (
      <div style={{ maxWidth: 760, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 18 }}>
        <button onClick={onBack} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, border: 'none', background: 'none', cursor: 'pointer', color: 'var(--text-muted)', fontSize: 14, alignSelf: 'flex-start', fontFamily: 'var(--font-body)' }}>
          <Icon name="arrow-left" size={17} />Exit assessment
        </button>

        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div style={{ flex: 1 }}>
            <span className="ms-overline">{q.context}</span>
            <div style={{ marginTop: 8 }}><ProgressBar value={30} size="sm" /></div>
          </div>
          <Badge tone="ink" icon="clock">04:12</Badge>
        </div>

        <Card padding="26px" style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
          <h2 style={{ fontSize: 24, lineHeight: 1.25 }}>{q.q}</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
            {q.options.map((opt, i) => (
              <QuizOption key={i} index={i} state={stateFor(i)} selected={choice === i}
                onClick={() => !submitted && setChoice(i)}>{opt}</QuizOption>
            ))}
          </div>

          {submitted && (
            <Alert tone={correct ? 'safe' : 'danger'} title={correct ? 'Correct' : 'Not quite'}>
              {correct
                ? 'Level 9 applies a controlled automated stop when the operator does not respond in time.'
                : 'Level 9 does more than warn — it applies a controlled automated stop when the operator does not respond.'}
            </Alert>
          )}

          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderTop: '1px solid var(--border-subtle)', paddingTop: 16 }}>
            <span style={{ fontSize: 13, color: 'var(--text-muted)' }}>Question 3 of 10</span>
            {!submitted
              ? <Button variant="primary" disabled={choice === null} onClick={() => setSubmitted(true)}>Submit answer</Button>
              : <Button variant="primary" iconRight="arrow-right" onClick={onDone}>Next question</Button>}
          </div>
        </Card>
      </div>
    );
  }

  Object.assign(window, { Quiz });
})();