// Accusation modal + Verdict screens
function Accusation({ suspects, flagged, onClose, onDeliver }) {
  const [pickedSuspect, setPickedSuspect] = React.useState(null);
  const [pickedLine, setPickedLine] = React.useState(null);

  const flagsForPicked = pickedSuspect
    ? Array.from(flagged.entries())
        .filter(([k]) => k.startsWith(pickedSuspect.id + ":"))
        .map(([k, l]) => l)
    : [];

  return (
    <div className="modal-bg">
      <div className="modal accusation">
        <div className="modal-head">
          <div className="modal-stamp">FINAL ACCUSATION · ONE ATTEMPT</div>
          <button className="modal-close" onClick={onClose}>× CLOSE</button>
        </div>

        <div className="modal-question">WHO IS THE KILLER?</div>

        <div className="acc-grid">
          {suspects.map((s, i) => (
            <button
              key={s.id}
              className={"acc-card" + (pickedSuspect && pickedSuspect.id === s.id ? " on" : "")}
              onClick={() => { setPickedSuspect(s); setPickedLine(null); }}
            >
              <div className="acc-card-portrait">
                <SuspectSilhouette id={s.id} />
              </div>
              <div className="acc-card-meta">
                <div className="acc-card-num">No. 0{i + 1}</div>
                <div className="acc-card-name">{s.name}</div>
                <div className="acc-card-role">— {s.role}</div>
              </div>
              <div className="acc-card-mark">
                {pickedSuspect && pickedSuspect.id === s.id ? "✕ ACCUSED" : "SELECT"}
              </div>
            </button>
          ))}
        </div>

        {pickedSuspect && (
          <div className="acc-line">
            <div className="acc-line-q">WHICH LINE GAVE THEM AWAY?</div>
            {flagsForPicked.length === 0 ? (
              <div className="acc-line-none">
                NO FLAGS ON {pickedSuspect.name.toUpperCase()}.<br />
                RETURN TO INTERROGATION AND FLAG THE SUSPICIOUS LINE.
              </div>
            ) : (
              <div className="acc-line-list">
                {flagsForPicked.map(l => (
                  <button
                    key={l.id}
                    className={"acc-line-row" + (pickedLine && pickedLine.id === l.id ? " on" : "")}
                    onClick={() => setPickedLine(l)}
                  >
                    <span className="acc-line-tc">{window.formatTime(l.start)}</span>
                    <span className="acc-line-text">“{l.text}”</span>
                    <span className="acc-line-radio">{pickedLine && pickedLine.id === l.id ? "●" : "○"}</span>
                  </button>
                ))}
              </div>
            )}
          </div>
        )}

        <div className="acc-foot">
          <div className="acc-warning">
            ⚠ This judgment is final. The wrong call sends an innocent to the chair.
          </div>
          <button
            className={"acc-deliver" + (pickedSuspect && pickedLine ? " ready" : "")}
            disabled={!pickedSuspect || !pickedLine}
            onClick={() => onDeliver(pickedSuspect, pickedLine)}
          >
            DELIVER VERDICT →
          </button>
        </div>
      </div>
    </div>
  );
}

function Verdict({ caseData, suspects, accused, accusedLine, onPlayAgain }) {
  const [phase, setPhase] = React.useState(0); // 0 fade, 1 word, 2 detail
  const correctSuspect = accused.id === caseData.killer;
  const correctLine = accusedLine.id === caseData.killerLineId;
  const fully = correctSuspect && correctLine;

  React.useEffect(() => {
    const t1 = setTimeout(() => setPhase(1), 900);
    const t2 = setTimeout(() => setPhase(2), 2600);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  const realKiller = suspects.find(s => s.id === caseData.killer);
  const realKillerLine = realKiller.lines.find(l => l.id === caseData.killerLineId);

  if (correctSuspect) {
    return (
      <div className={"verdict guilty phase-" + phase}>
        <div className="verdict-grain" />
        <div className="verdict-stamp top">CASE {caseData.id} · CLOSED</div>
        <div className="verdict-word">GUILTY.</div>
        {phase >= 2 && (
          <div className="verdict-detail">
            <div className="verdict-detail-label">CONVICTED</div>
            <div className="verdict-detail-name">{accused.name}</div>
            <div className="verdict-detail-role">— {accused.role}</div>
            <div className="verdict-tell">
              {fully ? "THE TELL" : "PARTIAL CREDIT · WRONG LINE"}
            </div>
            <div className="verdict-line">“{realKillerLine.text}”</div>
            <div className="verdict-confession-label">{realKiller.name.split(" ")[0]} CONFESSES:</div>
            <div className="verdict-confession">{caseData.confession}</div>
            <button className="verdict-again" onClick={onPlayAgain}>↻ PLAY AGAIN</button>
          </div>
        )}
      </div>
    );
  }

  return (
    <div className={"verdict innocent phase-" + phase}>
      <div className="verdict-grain" />
      <div className="verdict-stamp top">CASE {caseData.id} · CLOSED IN ERROR</div>
      <div className="verdict-word innocent-word">{accused.name.toUpperCase()}<br/>WAS EXECUTED.</div>
      {phase >= 2 && (
        <div className="verdict-detail">
          <div className="verdict-detail-label">THE STATE OFFERS NO REMEDY</div>
          <div className="verdict-realkiller-label">THE KILLER WAS</div>
          <div className="verdict-detail-name">{realKiller.name}</div>
          <div className="verdict-detail-role">— {realKiller.role}</div>
          <div className="verdict-tell">THE LINE YOU MISSED</div>
          <div className="verdict-line">“{realKillerLine.text}”</div>
          <button className="verdict-again muted" onClick={onPlayAgain}>TRY ANOTHER CASE</button>
        </div>
      )}
    </div>
  );
}

window.Accusation = Accusation;
window.Verdict = Verdict;