// Lumen — Quiz / assessment screen
function QuizScreen({ onBack, onComplete }) {
  const D = window.LUMEN_DATA;
  const Q = D.QUIZ;
  const [stage, setStage] = React.useState("intro"); // intro | take | result
  const [idx, setIdx] = React.useState(0);
  const [answers, setAnswers] = React.useState({});
  const [picked, setPicked] = React.useState(null);
  const [submitted, setSubmitted] = React.useState(false);

  const totalQ = Q.questions.length;
  const cur = Q.questions[idx];

  const submit = () => {
    if (picked == null) return;
    setAnswers({ ...answers, [idx]: picked });
    setSubmitted(true);
  };
  const next = () => {
    setSubmitted(false);
    setPicked(null);
    if (idx + 1 < totalQ) setIdx(idx + 1);
    else setStage("result");
  };

  const correctCount = Object.entries(answers).filter(([i, a]) => a === Q.questions[i].correct).length;
  const score = Math.round((correctCount / totalQ) * 100);

  return (
    <div className="page" style={{ background: "var(--bg-elev)" }}>
      <div style={{ display: "flex", alignItems: "center", padding: "12px 24px", borderBottom: "1px solid var(--border)", background: "var(--bg)", gap: 16 }}>
        <button className="btn btn--ghost btn--sm" onClick={onBack}>← Course</button>
        <div style={{ width: 1, height: 20, background: "var(--border)" }}/>
        <div style={{ fontSize: 13, fontWeight: 500 }}>{Q.title}</div>
        <div className="spacer"/>
        {stage === "take" && (
          <>
            <span className="badge"><I.clock size={11}/> 3:42</span>
            <div className="mono" style={{ fontSize: 12, color: "var(--ink-3)" }}>Question {idx + 1} of {totalQ}</div>
          </>
        )}
      </div>

      <div className="page__body" style={{ maxWidth: 720 }}>
        {stage === "intro" && (
          <div className="card card__pad" style={{ padding: 40, textAlign: "center" }}>
            <div style={{ width: 56, height: 56, borderRadius: 12, background: "var(--bg-sunken)", display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 20 }}>
              <I.quiz size={26}/>
            </div>
            <h1 style={{ fontSize: 28, marginBottom: 8 }}>{Q.title}</h1>
            <p className="muted" style={{ fontSize: 14, marginBottom: 24, maxWidth: 440, margin: "0 auto 24px" }}>
              Test what you've learned about positioning. {totalQ} multiple-choice questions, ~5 minutes. You can review answers after each one.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12, maxWidth: 480, margin: "0 auto 28px" }}>
              <div style={{ padding: 14, border: "1px solid var(--border)", borderRadius: 8 }}>
                <div className="muted" style={{ fontSize: 11 }}>Questions</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600 }}>{totalQ}</div>
              </div>
              <div style={{ padding: 14, border: "1px solid var(--border)", borderRadius: 8 }}>
                <div className="muted" style={{ fontSize: 11 }}>Pass score</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600 }}>70%</div>
              </div>
              <div style={{ padding: 14, border: "1px solid var(--border)", borderRadius: 8 }}>
                <div className="muted" style={{ fontSize: 11 }}>Attempts left</div>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600 }}>3</div>
              </div>
            </div>
            <button className="btn btn--primary btn--lg" onClick={() => setStage("take")}>
              Start quiz <I.arrowRight size={14}/>
            </button>
          </div>
        )}

        {stage === "take" && (
          <div>
            {/* Progress dots */}
            <div className="row" style={{ marginBottom: 24, gap: 6 }}>
              {Q.questions.map((_, i) => (
                <div key={i} style={{
                  flex: 1, height: 4, borderRadius: 999,
                  background: i < idx ? "var(--ink)" : i === idx ? "var(--accent)" : "var(--border)"
                }}/>
              ))}
            </div>

            <div className="card card__pad" style={{ padding: 32 }}>
              <div style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 12, fontWeight: 600 }}>Question {idx + 1}</div>
              <h2 style={{ fontSize: 22, lineHeight: 1.4, marginBottom: 24, letterSpacing: "-0.02em" }}>{cur.q}</h2>

              <div className="col" style={{ gap: 10 }}>
                {cur.options.map((opt, i) => {
                  const isPicked = picked === i;
                  const isCorrect = i === cur.correct;
                  const showState = submitted;
                  let bg = "var(--bg)", border = "var(--border)", color;
                  if (showState) {
                    if (isCorrect) { bg = "var(--green-bg)"; border = "var(--green)"; }
                    else if (isPicked) { bg = "var(--red-bg)"; border = "var(--red)"; }
                  } else if (isPicked) {
                    border = "var(--ink)"; bg = "var(--bg-hover)";
                  }
                  return (
                    <div key={i} onClick={() => !submitted && setPicked(i)}
                      style={{
                        border: `1.5px solid ${border}`, background: bg,
                        borderRadius: 8, padding: 16,
                        display: "flex", alignItems: "center", gap: 14,
                        cursor: submitted ? "default" : "pointer",
                        transition: "all 120ms",
                      }}>
                      <div style={{
                        width: 24, height: 24, borderRadius: "50%",
                        border: `1.5px solid ${isPicked || (showState && isCorrect) ? "var(--ink)" : "var(--border-strong)"}`,
                        background: isPicked || (showState && isCorrect) ? "var(--ink)" : "transparent",
                        color: "var(--bg)", flexShrink: 0,
                        display: "flex", alignItems: "center", justifyContent: "center",
                        fontSize: 11, fontWeight: 600,
                      }}>
                        {showState && isCorrect ? <I.check size={13} stroke={2.6}/> :
                         showState && isPicked && !isCorrect ? <I.x size={13} stroke={2.4}/> :
                         String.fromCharCode(65 + i)}
                      </div>
                      <div style={{ fontSize: 14, lineHeight: 1.5, flex: 1 }}>{opt}</div>
                    </div>
                  );
                })}
              </div>

              {submitted && (
                <div className="fade-up" style={{ marginTop: 20, padding: 16, background: "var(--bg-sunken)", borderRadius: 8, fontSize: 13, lineHeight: 1.6 }}>
                  <div className="row" style={{ marginBottom: 6 }}>
                    {picked === cur.correct
                      ? <><I.checkCircle size={14} style={{ color: "var(--green)" }}/> <strong>Correct</strong></>
                      : <><I.closeCircle size={14} style={{ color: "var(--red)" }}/> <strong>Not quite</strong></>}
                  </div>
                  <div className="muted">{cur.explain}</div>
                </div>
              )}
            </div>

            <div className="row" style={{ marginTop: 20, justifyContent: "flex-end" }}>
              {!submitted ? (
                <button className="btn btn--primary btn--lg" onClick={submit} disabled={picked == null} style={{ opacity: picked == null ? 0.5 : 1 }}>
                  Submit answer
                </button>
              ) : (
                <button className="btn btn--primary btn--lg" onClick={next}>
                  {idx + 1 < totalQ ? "Next question" : "See results"} <I.arrowRight size={14}/>
                </button>
              )}
            </div>
          </div>
        )}

        {stage === "result" && (
          <div className="card card__pad fade-up" style={{ padding: 40, textAlign: "center" }}>
            <div style={{ fontSize: 11, color: "var(--ink-3)", textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 12, fontWeight: 600 }}>
              {score >= 70 ? "Passed" : "Try again"}
            </div>
            <div style={{ display: "inline-flex", margin: "0 auto 24px" }}>
              <Donut value={score} size={140} stroke={12} color={score >= 70 ? "var(--green)" : "var(--red)"}/>
            </div>
            <h1 style={{ fontSize: 28, marginBottom: 8 }}>
              {score >= 70 ? "Nice. You crushed it." : "Close — review and retry."}
            </h1>
            <p className="muted" style={{ fontSize: 14, marginBottom: 28 }}>
              You got {correctCount} of {totalQ} questions correct.
              {score >= 70 ? " Module 3 is now unlocked." : " You have 2 attempts left."}
            </p>
            <div className="row" style={{ justifyContent: "center" }}>
              <button className="btn btn--secondary" onClick={() => { setStage("intro"); setIdx(0); setAnswers({}); setPicked(null); setSubmitted(false); }}>
                Retake quiz
              </button>
              <button className="btn btn--primary" onClick={onComplete}>
                Continue to Module 3 <I.arrowRight size={14}/>
              </button>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

window.QuizScreen = QuizScreen;