// transition.jsx — Phase 2: subject → analyst. The recognition beat.

const { useState: useStateT, useEffect: useEffectT } = React;

const TRANS_COPY = {
  quiet: {
    pre: [
      "CLERK 0447 — session closed.",
      "You believed today was about letters.",
      "Every disposition was a question. You answered all of them.",
      "The mail was the instrument. You were the subject.",
    ],
    seal: "BEHAVIORAL PROFILE — COMPLETE",
    recruit: [
      "The system does not need another clerk.",
      "It has measured something rarer: a mind that understands a machine of power from inside its smallest gear.",
      "There is a chair at the top of that machine. It has just been vacated.",
      "You are no longer the one being sorted. You are the one who sorts.",
    ],
    cta: "Take the chair ▌",
  },
  sharp: {
    pre: [
      "STOP.",
      "Analysis complete.",
      "You were never escaping. You were being measured.",
      "Every choice fed a profile. The profile is finished.",
    ],
    seal: "SUBJECT RECLASSIFIED",
    recruit: [
      "You are no longer the subject.",
      "Whatever you proved you could survive, you will now be asked to impose.",
      "The desk is bigger. The mail is a nation. The disposition is still yours.",
    ],
    cta: "Assume control ▌",
  },
  ambiguous: {
    pre: [
      "Session logged.",
      "Your handling of the day's mail has been... noted.",
      "Certain patterns recommend you for advancement.",
      "It is not for you to know who is reading this.",
    ],
    seal: "ASSESSMENT ON FILE",
    recruit: [
      "A position has opened. You have been selected.",
      "The work is the same as the mail, at a different altitude: read, decide, dispose, live with it.",
      "Congratulations are not the right word. There is no right word.",
    ],
    cta: "Proceed ▌",
  },
};

function TransitionPhase({ result, style = "quiet", onComplete }) {
  const copy = TRANS_COPY[style] || TRANS_COPY.quiet;
  const norm = normalizeProfile(result.raw || {}, result.flags || {});
  const bars = profileBars(norm.n);

  const [step, setStep] = useStateT(0);    // 0 pre, 1 bars, 2 read, 3 recruit
  const [fillBars, setFillBars] = useStateT(false);
  const SFX_T = window.SFX || { glitch(){}, reveal(){}, select(){} };

  useEffectT(() => { SFX_T.glitch(); }, []);

  useEffectT(() => {
    if (step === 1) {
      SFX_T.reveal();
      const id = setTimeout(() => setFillBars(true), 250);
      const id2 = setTimeout(() => setStep(2), 2100);
      return () => { clearTimeout(id); clearTimeout(id2); };
    }
    if (step === 2) {
      const id = setTimeout(() => setStep(3), 1900);
      return () => clearTimeout(id);
    }
  }, [step]);

  return (
    <div className="trans">
      <div className="trans__scan" />
      <div className="trans__inner">
        {step === 0 && (
          <div className="trans__pre">
            <LineStream lines={copy.pre} speed={15} lineGap={260}
              onDone={() => setStep(1)} className="trans-stream" />
          </div>
        )}

        {step >= 1 && (
          <div className={"trans__panel" + (step >= 1 ? " in" : "")}>
            <div className="trans__seal">
              <span className="trans__eye"><Glyph name="eye" size={15} /></span>
              {copy.seal}
            </div>
            <div className="profile-grid">
              {bars.map((b) => (
                <div key={b.key} className="pbar">
                  <div className="pbar__top">
                    <span className="pbar__label">{b.label}</span>
                    <span className="pbar__poles"><i>{b.lo}</i><i>{b.hi}</i></span>
                  </div>
                  <div className="pbar__track">
                    <div className="pbar__center" />
                    <div className="pbar__fill" style={{
                      width: fillBars ? Math.abs(b.v - 50) + "%" : "0%",
                      left: b.v >= 50 ? "50%" : (fillBars ? b.v + "%" : "50%"),
                      background: b.v >= 50 ? "var(--teal)" : "var(--amber)",
                    }} />
                  </div>
                </div>
              ))}
            </div>

            {step >= 2 && (
              <div className="trans__read in">
                <div className="trans__arch">{norm.archetype}</div>
                <p className="trans__readtext">{norm.read}</p>
              </div>
            )}

            {step >= 3 && (
              <div className="trans__recruit in">
                {copy.recruit.map((l, i) => <p key={i} className="trans__rline">{l}</p>)}
                <button className="btn btn--seize" onClick={() => { SFX_T.select(); onComplete(norm); }}>
                  {copy.cta}
                </button>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}

window.TransitionPhase = TransitionPhase;