/* Runner - bloc input : ecoute de dialogue, comprehension avec preuve. Extrait de runner.jsx (decoupage 2026-06-12, sans changement de logique). */

function RunnerInputBlock({ exercise, glossFor, onDone }) {
  const p = exercise.prompt || {};
  const e = exercise.expected || {};
  const f = exercise.feedback || {};
  const rawChoices = (p.choices && p.choices.length) ? p.choices : null;
  const [picked, setPicked] = useState(null);
  const [proofShown, setProofShown] = useState(false);
  const [heard, setHeard] = useState(false);
  // Les choix arrivent avec la bonne réponse en position 0 : on mélange (stable par
  // exercice) et on suit la bonne réponse, sinon « toujours cliquer la 1re » suffit.
  const [choices, setChoices] = useState(null);
  const line = p.firstLine || {};
  const lineKr = p.kr || line.kr || p.title || "";
  const audioUrl = p.audioUrl || (line.audio && line.audio.url) || "";
  const audioRef = p.audioRef || (line.audio && (line.audio.ref || line.audio.id)) || lineKr || p.title || "";
  const promptText = polishRunnerPrompt(p.q);
  const proof = inputProofText(p, e, f, line);
  const revealGlosses = proofShown || picked != null;
  const audioFirst = p.mode === "audio_to_meaning" || p.mode === "listen_repeat";
  useEffect(() => {
    setPicked(null);
    setProofShown(false);
    setHeard(false);
    if (!rawChoices) { setChoices(null); return; }
    const arr = rawChoices.map((c, i) => ({ c, correct: typeof e.answer === "number" ? i === e.answer : c === e.answer }));
    for (let i = arr.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); const t = arr[i]; arr[i] = arr[j]; arr[j] = t; }
    setChoices(arr);
  }, [exercise.id]);
  if (audioFirst) {
    const selected = picked == null || !choices ? null : choices[picked];
    const correct = !!(selected && selected.correct);
    const revealed = picked != null || proofShown;
    const reviewTags = (exercise.errorTags && exercise.errorTags.length) ? exercise.errorTags : ["comprehension"];
    return (
      <div style={{ display: "grid", gap: 16 }}>
        <div className="card" style={{ padding: 24, display: "grid", gap: 14 }}>
          <Eyebrow>{choices ? "Écoute active" : "Écoute guidée"}</Eyebrow>
          {p.title && <div style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--accent-deep)" }}>{polishRunnerText(p.title)}</div>}
          <div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
            <SpeakBtn text={lineKr} audioRef={audioRef} audioUrl={audioUrl} size={46} title="Écouter sans lire" onPlayed={() => setHeard(true)} />
            <span className="faint" style={{ fontSize: 13.5 }}>{heard ? (choices ? "Choisissez le sens avant de voir le texte." : "Répétez, puis révélez le modèle.") : "Écoutez d'abord, sans lire le coréen."}</span>
          </div>
          {heard && choices && picked == null && (
            <div className="fade-up" style={{ display: "grid", gap: 8 }}>
              {choices.map((opt, idx) => (
                <button key={idx} onClick={() => setPicked(idx)} style={{ padding: "12px 15px", borderRadius: "var(--radius-sm)", border: "1px solid var(--rule)", background: "var(--card)", color: "var(--ink)", fontFamily: "var(--serif)", fontSize: 17, textAlign: "left", cursor: "pointer" }}>{opt.c}</button>
              ))}
            </div>
          )}
          {picked != null && choices && (
            <div className="fade-up" style={{ display: "grid", gap: 8 }}>
              {choices.map((opt, idx) => {
                let bg = "var(--card)", col = "var(--ink)";
                if (opt.correct) { bg = "var(--good-tint)"; col = "var(--good)"; }
                else if (picked === idx) { bg = "var(--warn-tint)"; col = "var(--warn)"; }
                return <div key={idx} style={{ padding: "10px 13px", borderRadius: "var(--radius-sm)", border: "1px solid var(--rule)", background: bg, color: col, fontFamily: "var(--serif)", fontSize: 16 }}>{opt.c}</div>;
              })}
            </div>
          )}
          {heard && !choices && !revealed && <Btn kind="secondary" icon="eye" onClick={() => setProofShown(true)} style={{ justifySelf: "start" }}>Afficher le modèle</Btn>}
          {revealed && (
            <div className="fade-up" style={{ display: "grid", gap: 8, padding: "12px 14px", borderRadius: "var(--radius-sm)", background: choices ? (correct ? "var(--good-tint)" : "var(--warn-tint)") : "var(--card-2)", border: "1px solid var(--rule)" }}>
              {choices && <div style={{ fontWeight: 700, color: correct ? "var(--good)" : "var(--warn)" }}>{correct ? "Juste" : "À revoir"}</div>}
              {lineKr && <PhraseWords text={lineKr} glossFor={glossFor} glossRevealed audioUrl={audioUrl} audioRef={audioRef} size={30} justify="flex-start" />}
              {p.reading && <div className="faint" style={{ fontFamily: "var(--mono)", fontSize: 13 }}>{p.reading}</div>}
              {proof && <div style={{ fontFamily: "var(--serif)", fontSize: 19, color: "var(--ink)" }}>{proof}</div>}
            </div>
          )}
        </div>
        <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, flexWrap: "wrap" }}>
          {choices && picked != null && <Btn kind="primary" icon="check" onClick={() => onDone({ correct, answer: selected ? selected.c : "", errorTags: correct ? [] : reviewTags, feedbackShown: true })}>Continuer</Btn>}
          {!choices && revealed && (
            <>
              <Btn kind="secondary" icon="refresh" onClick={() => onDone({ correct: false, answer: proof || lineKr, errorTags: reviewTags, feedbackShown: true })}>À revoir · continuer</Btn>
              <Btn kind="primary" icon="check" onClick={() => onDone({ correct: true, answer: proof || lineKr, feedbackShown: true })}>Répété · continuer</Btn>
            </>
          )}
        </div>
      </div>
    );
  }
  return (
    <div style={{ display: "grid", gap: 16 }}>
      <div className="card" style={{ padding: 24, display: "grid", gap: 12 }}>
        {p.title && <Eyebrow>{polishRunnerText(p.title)}</Eyebrow>}
        {promptText
          ? (hasHangul(promptText)
              ? <MixedGlossText text={promptText} glossFor={glossFor} glossRevealed={revealGlosses} style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--accent-deep)" }} />
              : <div style={{ fontFamily: "var(--serif)", fontSize: 22, color: "var(--accent-deep)" }}>{promptText}</div>)
          : (
            <>
              <PhraseWords text={lineKr} glossFor={glossFor} glossRevealed={revealGlosses} audioUrl={p.audioUrl} audioRef={p.audioRef} size={40} justify="flex-start" />
              <GlossAid text={lineKr} glossFor={glossFor} />
            </>
          )}
        {promptText && hasHangul(promptText) && <GlossAid text={promptText} glossFor={glossFor} />}
        {p.reading && <div className="faint" style={{ fontFamily: "var(--mono)", fontSize: 14 }}>{p.reading}</div>}
        {choices && (
          <div style={{ display: "grid", gap: 8, marginTop: 6 }}>
            {choices.map((opt, idx) => {
              const reveal = picked != null;
              let bg = "var(--card)", col = "var(--ink)";
              if (reveal && opt.correct) { bg = "var(--good-tint)"; col = "var(--good)"; }
              else if (reveal && picked === idx && !opt.correct) { bg = "var(--warn-tint)"; col = "var(--warn)"; }
              return <button key={idx} onClick={() => picked == null && setPicked(idx)} disabled={reveal} style={{ padding: "12px 15px", borderRadius: "var(--radius-sm)", border: "1px solid var(--rule)", background: bg, color: col, fontFamily: "var(--serif)", fontSize: 17, textAlign: "left", cursor: reveal ? "default" : "pointer" }}>{opt.c}</button>;
            })}
          </div>
        )}
        {!choices && proofShown && (
          <div className="fade-up" style={{ display: "grid", gap: 6, padding: "12px 14px", borderRadius: "var(--radius-sm)", background: "var(--card-2)", border: "1px solid var(--rule)" }}>
            <div className="eyebrow">Preuve de compréhension</div>
            {proof
              ? <div style={{ fontFamily: "var(--serif)", fontSize: 18, color: "var(--ink)" }}>{proof}</div>
              : <p className="muted" style={{ fontSize: 14, margin: 0 }}>Reformulez le sens mentalement avant de valider.</p>}
          </div>
        )}
      </div>
      <div style={{ display: "flex", justifyContent: "flex-end", gap: 8, flexWrap: "wrap" }}>
        {choices
          ? <Btn kind="primary" icon="check" disabled={picked == null} onClick={() => {
              const sel = choices[picked] || {};
              onDone({ correct: !!sel.correct, answer: sel.c, errorTags: sel.correct ? [] : ["comprehension"], feedbackShown: true });
            }}>Valider et continuer</Btn>
          : proofShown
            ? <>
                <Btn kind="secondary" icon="refresh" onClick={() => onDone({ correct: false, answer: proof, errorTags: ["comprehension"], feedbackShown: true })}>À revoir · continuer</Btn>
                <Btn kind="primary" icon="check" onClick={() => onDone({ correct: true, answer: proof, feedbackShown: true })}>Compris · continuer</Btn>
              </>
            : <Btn kind="secondary" icon="eye" onClick={() => setProofShown(true)}>Vérifier le sens</Btn>}
      </div>
    </div>
  );
}