// Briefing screen — case picker, then typewriter case file reveal
const { useState, useEffect, useRef } = React;

function Briefing({ caseData, cases, onPickCase, onBegin }) {
  const lines = caseData.briefing;
  const [revealed, setRevealed] = useState(0);
  const [charIdx, setCharIdx] = useState(0);

  // Reset typewriter when case changes
  useEffect(() => {
    setRevealed(0);
    setCharIdx(0);
  }, [caseData.id]);

  useEffect(() => {
    if (revealed >= lines.length) return;
    const target = lines[revealed].length;
    if (charIdx >= target) {
      const t = setTimeout(() => {
        setRevealed(revealed + 1);
        setCharIdx(0);
      }, 240);
      return () => clearTimeout(t);
    }
    const t = setTimeout(() => setCharIdx(charIdx + 1), 18);
    return () => clearTimeout(t);
  }, [revealed, charIdx, lines]);

  const allDone = revealed >= lines.length;

  return (
    <div className="briefing">
      <div className="briefing-frame">
        <div className="briefing-stamp">
          <span>CONFIDENTIAL</span>
          <span>EYES ONLY</span>
        </div>

        {cases && cases.length > 1 && (
          <div className="case-picker">
            <div className="case-picker-label">SELECT FILE</div>
            <div className="case-picker-list">
              {cases.map(c => (
                <button
                  key={c.id}
                  className={"case-tab" + (c.id === caseData.id ? " on" : "")}
                  onClick={() => onPickCase(c.id)}
                >
                  <span className="case-tab-no">№ {c.id}</span>
                  <span className="case-tab-title">{c.title}</span>
                  <span className="case-tab-era">{c.era || "·"}</span>
                </button>
              ))}
            </div>
            {caseData.tagline && (
              <div className="case-tagline">{caseData.tagline}</div>
            )}
          </div>
        )}

        <div className="briefing-header">
          <div className="briefing-caseno">CASE No. {caseData.id}</div>
          <div className="briefing-title">— {caseData.title} —</div>
          <div className="briefing-meta">
            <span>OPENED 14·X·26</span>
            <span>ASSIGNED: YOU</span>
            <span>STATUS: OPEN</span>
          </div>
        </div>
        <div className="briefing-body">
          {lines.slice(0, revealed).map((l, i) => (
            <div key={i} className="briefing-line">
              <span className="briefing-prompt">›</span>
              <span>{l}</span>
            </div>
          ))}
          {revealed < lines.length && (
            <div className="briefing-line">
              <span className="briefing-prompt">›</span>
              <span>{lines[revealed].slice(0, charIdx)}</span>
              <span className="briefing-caret"> </span>
            </div>
          )}
        </div>
        <button
          className={"briefing-begin" + (allDone ? " ready" : "")}
          disabled={!allDone}
          onClick={onBegin}
        >
          <span>BEGIN INTERROGATION</span>
          <span className="briefing-arrow">→</span>
        </button>
      </div>
    </div>
  );
}

window.Briefing = Briefing;