// escape.jsx — Phase 1: the prologue. Three-phase days (morning news / work / evening),
// cipher decoding, behavioural profiling, stamp + sound feedback.

const { useState: useStateE, useEffect: useEffectE } = React;
const SFX_E = () => window.SFX || { key(){}, select(){}, stamp(){}, thunk(){}, statUp(){}, statDown(){}, setTension(){}, blip(){} };

const FLAG_MAP = {
  santos:   ["santos_reported", "santos_copied", "santos_protected"],
  denounce: ["denounced", "denounce_buried", "denounce_forged"],
  child:    ["child_smuggled", "child_confiscated", "child_evidence"],
  contact:  ["contact_joined", "contact_solo", "contact_reported"],
  bribe:    ["took_money", "took_money", "refused_bribe"],
};

function stampFor(label) {
  if (/report|forward|file|confiscate|evidence/i.test(label)) return { txt: "REPORTED", kind: "report" };
  if (/destroy|burn|lose/i.test(label)) return { txt: "DESTROYED", kind: "destroy" };
  if (/forge/i.test(label)) return { txt: "REROUTED", kind: "neutral" };
  return { txt: "RELEASED", kind: "release" };
}

function EscapePhase({ maxDay, difficulty, showMath, onComplete }) {
  const days = [1, 2, 3].filter((d) => d <= maxDay);
  const [stage, setStage] = useStateE("intro");   // intro | morning | work | evening | border | caught
  const [dayIdx, setDayIdx] = useStateE(0);
  const [lIdx, setLIdx] = useStateE(0);
  const [suspicion, setSuspicion] = useStateE(8);
  const [progress, setProgress] = useStateE(0);
  const [raw, setRaw] = useStateE({});
  const [flags, setFlags] = useStateE({});
  const [log, setLog] = useStateE([]);
  const [pending, setPending] = useStateE(null);
  const [decoded, setDecoded] = useStateE(false);

  const susMult = difficulty === "harsh" ? 1.35 : difficulty === "gentle" ? 0.7 : 1;
  const day = days[dayIdx];
  const dayLetters = LETTERS.filter((l) => l.day === day);

  // suspicion → ambient tension + screen vignette
  useEffectE(() => {
    const t = Math.max(0, Math.min(1, (suspicion - 20) / 80));
    SFX_E().setTension(t);
    document.body.style.setProperty("--tension", t.toFixed(2));
    return () => { document.body.style.setProperty("--tension", "0"); };
  }, [suspicion]);

  function feedbackTones(susDelta, progDelta) {
    if (susDelta > 0) SFX_E().statDown(); else if (susDelta < 0) SFX_E().statUp();
  }

  function chooseLetter(letter, ci) {
    const c = letter.choices[ci];
    const sd = Math.round((c.suspicion || 0) * susMult);
    const newSus = clamp(suspicion + sd);
    setSuspicion(newSus);
    setProgress(clamp(progress + (c.progress || 0)));
    setRaw(applyProfile(raw, c.profile));
    const f = { ...flags }; const fn = (FLAG_MAP[letter.id] || [])[ci]; if (fn) f[fn] = true;
    setFlags(f);
    setLog([...log, c.log]);
    SFX_E().stamp();
    feedbackTones(sd);
    setPending({ ...c, resolvedSus: newSus, stamp: stampFor(c.label) });
  }

  function advanceLetter() {
    const caught = pending.resolvedSus >= 100;
    setPending(null); setDecoded(false);
    if (caught) { setStage("caught"); return; }
    if (lIdx + 1 < dayLetters.length) { setLIdx(lIdx + 1); SFX_E().blip(); }
    else { setStage("evening"); SFX_E().blip(); }
  }

  function chooseEvening(ci) {
    const c = EVENINGS[day].choices[ci];
    const sd = Math.round((c.suspicion || 0) * susMult);
    setSuspicion(clamp(suspicion + sd));
    setProgress(clamp(progress + (c.progress || 0)));
    setRaw(applyProfile(raw, c.profile));
    setLog([...log, c.log]);
    SFX_E().thunk(); feedbackTones(sd);
    setPending({ ...c, evening: true });
  }

  function advanceEvening() {
    setPending(null);
    if (dayIdx + 1 < days.length) { setDayIdx(dayIdx + 1); setLIdx(0); setStage("morning"); SFX_E().blip(); }
    else { setStage("border"); SFX_E().blip(); }
  }

  function chooseBorder(ci) {
    const c = BORDER.choices[ci];
    const nraw = applyProfile(raw, c.profile);
    SFX_E().thunk();
    const escaped = suspicion < 78 || ci === 1;
    onComplete({ raw: nraw, flags: { ...flags, escaped }, suspicion, progress, escaped, log: [...log, c.log] });
  }

  // ── INTRO ──
  if (stage === "intro") {
    return (
      <div className="esc">
        <div className="esc__stationbar">
          <span className="dot dot--amber" /> {ESCAPE_INTRO.station}
          <span className="rec"><span className="rec__dot" />REC</span>
          <span className="esc__clerk">{ESCAPE_INTRO.clerk}</span>
        </div>
        <div className="esc__intro">
          <LineStream lines={ESCAPE_INTRO.lines} className="intro-stream" />
          <button className="btn btn--ghost esc__begin" onClick={() => { SFX_E().select(); setStage("morning"); }}>
            Begin the day's mail →
          </button>
        </div>
      </div>
    );
  }

  // ── CAUGHT ──
  if (stage === "caught") {
    return (
      <div className="esc esc--caught">
        <div className="caught-card glitch-box">
          <div className="caught-tag">SUSPICION 100 — DETAINED</div>
          <p>Two men in gray coats are standing at your desk. They are very polite. They already know your name, your route, and the contents of your coat pocket.</p>
          <p className="dim">You will not reach the border. But the day's data is complete.</p>
          <button className="btn btn--danger" onClick={() => { SFX_E().select(); onComplete({ raw, flags: { ...flags, escaped: false }, suspicion, progress, escaped: false, log }); }}>
            Continue ▌
          </button>
        </div>
      </div>
    );
  }

  // ── MORNING (state news) ──
  if (stage === "morning") {
    const news = NEWS[day];
    return (
      <div className="esc">
        <DayBar day={day} phase="MORNING — STATE BULLETIN" />
        <div className="bulletin">
          <div className="bulletin__head">
            <span className="bulletin__crest">◈</span>
            <span>{news.date}</span>
            <span className="bulletin__live"><span className="rec__dot" />BROADCAST</span>
          </div>
          <div className="bulletin__body">
            {news.items.map((it, i) => (
              <p key={i} className="bulletin__item"><span className="bulletin__no">{String(i + 1).padStart(2, "0")}</span>{it}</p>
            ))}
          </div>
          <div className="ticker"><div className="ticker__track">{news.items.join("   ◆   ")}　◆　{news.items.join("   ◆   ")}</div></div>
        </div>
        <button className="btn btn--ghost" onClick={() => { SFX_E().select(); setStage("work"); }}>Report to your desk →</button>
      </div>
    );
  }

  // ── EVENING (escape action) ──
  if (stage === "evening") {
    const ev = EVENINGS[day];
    return (
      <div className="esc">
        <DayBar day={day} phase="EVENING — ONE MOVE" />
        <MetersBar suspicion={suspicion} progress={progress} />
        <div className="evening-card">
          <div className="evening-card__title">{ev.title}</div>
          <div className="evening-card__sub">{ev.sub}</div>
          {!pending ? (
            <div className="choices">
              {ev.choices.map((c, i) => (
                <button key={i} className="choice" onClick={() => chooseEvening(i)} onMouseEnter={() => SFX_E().blip()}>
                  <span className="choice__index">{i + 1}</span>
                  <span className="choice__body">
                    <span className="choice__label">{c.label}</span>
                    <span className="choice__sub">{c.sub}</span>
                    {showMath && <span className="choice__meta"><Meta v={c.suspicion} kind="suspicion" /><Meta v={c.progress} kind="progress" /></span>}
                  </span>
                </button>
              ))}
            </div>
          ) : (
            <div className="aftermath">
              <div className="aftermath__log">{pending.log}</div>
              <button className="btn btn--ghost" onClick={advanceEvening}>
                {dayIdx + 1 < days.length ? "Sleep. Tomorrow comes. →" : "Thursday. The quarry road. →"}
              </button>
            </div>
          )}
        </div>
      </div>
    );
  }

  // ── BORDER ──
  if (stage === "border") {
    return (
      <div className="esc">
        <MetersBar suspicion={suspicion} progress={progress} />
        <div className="border-card glitch-soft">
          <div className="border-card__title">{BORDER.title}</div>
          {BORDER.body.map((b, i) => <p key={i} className="border-card__line">{b}</p>)}
          <div className="choices">
            {BORDER.choices.map((c, i) => (
              <button key={i} className="choice" onClick={() => chooseBorder(i)} onMouseEnter={() => SFX_E().blip()}>
                <span className="choice__index">{i + 1}</span>
                <span className="choice__body">
                  <span className="choice__label">{c.label}</span>
                  <span className="choice__sub">{c.sub}</span>
                </span>
              </button>
            ))}
          </div>
        </div>
      </div>
    );
  }

  // ── WORK (letters) ──
  const letter = dayLetters[lIdx];
  return (
    <div className="esc">
      <DayBar day={day} phase="WORK — DISPOSITION OF MAIL" />
      <MetersBar suspicion={suspicion} progress={progress} count={`LETTER ${lIdx + 1} / ${dayLetters.length}`} />
      <div className="letter-row">
        <div className={"envelope" + (pending ? " envelope--done" : "")}>
          <div className="envelope__flag">{letter.flag}</div>
          <div className="envelope__route">
            <span>FROM</span><b>{letter.from}</b>
            <span>TO</span><b>{letter.to}</b>
          </div>
          <div className={"paper" + (letter.hand ? " paper--hand" : "")}>
            {letter.body.map((line, i) => <p key={i} className="paper__line">{line}</p>)}
            {pending && pending.stamp && <Stamp label={pending.stamp.txt} kind={pending.stamp.kind} />}
          </div>
          {letter.cipher && (
            <div className="cipher">
              {!decoded ? (
                <button className="cipher__btn" onClick={() => { setDecoded(true); SFX_E().blip(); }}>▾ RUN DECRYPTION</button>
              ) : (
                <div className="cipher__out">
                  <span className="cipher__tag">DECRYPTED</span>
                  {letter.cipher.map((c, i) => <p key={i}>{c}</p>)}
                </div>
              )}
            </div>
          )}
          <div className="intel">
            <span className="intel__tag"><Glyph name="eye" size={13} /> CLERK NOTE</span>
            {letter.note}
          </div>
        </div>

        <div className="decision">
          {!pending ? (
            <React.Fragment>
              <div className="decision__prompt">Disposition?</div>
              <div className="choices">
                {letter.choices.map((c, i) => (
                  <button key={i} className="choice" onClick={() => chooseLetter(letter, i)} onMouseEnter={() => SFX_E().blip()}>
                    <span className="choice__index">{i + 1}</span>
                    <span className="choice__body">
                      <span className="choice__label">{c.label}</span>
                      <span className="choice__sub">{c.sub}</span>
                      {showMath && <span className="choice__meta"><Meta v={c.suspicion} kind="suspicion" /><Meta v={c.progress} kind="progress" /></span>}
                    </span>
                  </button>
                ))}
              </div>
            </React.Fragment>
          ) : (
            <div className="aftermath">
              <div className="aftermath__log">{pending.log}</div>
              <button className="btn btn--ghost" onClick={advanceLetter}>
                {lIdx + 1 < dayLetters.length ? "Next letter →" : "End of shift →"}
              </button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function Meta({ v, kind }) {
  if (!v) return null;
  const isSus = kind === "suspicion";
  const cls = isSus ? (v > 0 ? "meta meta--bad" : "meta meta--good") : "meta meta--prog";
  return <span className={cls}>{isSus ? "suspicion" : "escape"} {v > 0 ? "+" : ""}{v}</span>;
}

function DayBar({ day, phase }) {
  return (
    <div className="daybar">
      <span className="daybar__day">DAY {String(day).padStart(2, "0")}</span>
      <span className="daybar__phase">{phase}</span>
      <span className="daybar__dots">
        {["MORNING", "WORK", "EVENING"].map((p) => (
          <span key={p} className={"daybar__dot" + (phase.startsWith(p) ? " on" : "")} />
        ))}
      </span>
    </div>
  );
}

function MetersBar({ suspicion, progress, count }) {
  return (
    <div className="meters">
      <div className={"meter" + (suspicion >= 70 ? " meter--alarm" : "")}>
        <span className="meter__label">SUSPICION</span>
        <div className="meter__track"><div className="meter__fill meter__fill--sus" style={{ width: suspicion + "%" }} /></div>
        <span className="meter__num">{suspicion}</span>
      </div>
      {count && <div className="meter__count">{count}</div>}
      <div className="meter">
        <span className="meter__label">ESCAPE</span>
        <div className="meter__track"><div className="meter__fill meter__fill--prog" style={{ width: progress + "%" }} /></div>
        <span className="meter__num">{progress}</span>
      </div>
    </div>
  );
}

window.EscapePhase = EscapePhase;