/* PRAXIS Loop — Altitude 3 & 4: Star dossier + Mission ritual */
/* global React, Kicker, Chip, MasteryBar, Btn */
const { useState: useStateM, useEffect: useEffectM, useRef: useRefM } = React;

/* ════════════════════════════════════════════════════════════════════════
   STAR — the dossier altitude. One concept, fully traceable.
   ════════════════════════════════════════════════════════════════════════ */
function StarScreen({ lex, onEngage }) {
  const { STARS, MISSION, ramp } = window.PRAXIS;
  const star = STARS.networking.find(s => s.id === 'net-bgp');
  const prereq = STARS.networking.find(s => s.id === 'net-ip');

  return (
    <div className="lp-screen lp-starview">
      {/* hero: the decaying star itself */}
      <div className="lp-starview__hero dock dock-1">
        <div className="lp-bigstar is-decay" aria-hidden="true">
          <span className="lp-bigstar__halo"></span>
          <span className="lp-bigstar__core"></span>
          <span className="lp-bigstar__flare"></span>
        </div>
        <Kicker tone="var(--decay)" style={{ marginTop: 'var(--s6)' }}>● decaying · drilled {star.lastDrill} · due today</Kicker>
        <h1 className="display lp-starview__name">{star.name}</h1>
        <p className="lp-starview__gist">{star.gist}</p>

        <div className="lp-chain dock dock-4">
          <Kicker style={{ marginBottom: 'var(--s3)' }}>prerequisite path</Kicker>
          <div className="lp-chain__row">
            <span className="lp-chain__node is-done">
              <i className="lp-chain__dot" style={{ background: ramp(prereq.mastery) }}></i>
              {prereq.name} <b className="data">{prereq.mastery}</b>
            </span>
            <span className="lp-chain__arrow mono">━━▶</span>
            <span className="lp-chain__node is-here">
              <i className="lp-chain__dot" style={{ background: ramp(star.mastery) }}></i>
              {star.name} <b className="data" style={{ color: 'var(--decay)' }}>{star.mastery}</b>
            </span>
          </div>
        </div>
      </div>

      {/* dossier panel */}
      <aside className="lp-inspector lp-inspector--wide panel panel--glass dock-l" aria-label="Mission inspector">
        <Kicker>today's trajectory</Kicker>
        <div className="lp-traj">
          {MISSION.stages.map((st, i) => (
            <div key={st} className={`lp-traj__row ${i === 0 ? 'is-next' : ''}`} style={{ animationDelay: `${i * 70}ms` }}>
              <span className="lp-traj__dot" aria-hidden="true"></span>
              <span className="lp-traj__name">{st}</span>
              <span className="lp-traj__eta mono">{['~2m', '~3m', '~2m', '90s', '~1m'][i]}</span>
            </div>
          ))}
        </div>

        <div className="lp-divider"></div>

        <Kicker>evidence log · {star.evidence} entries</Kicker>
        <div className="lp-evidence">
          <div className="lp-evrow">
            <span className="lp-evrow__date mono">May 20</span>
            <span className="lp-evrow__txt">Explained AS path loop-prevention correctly under pressure.</span>
          </div>
          <div className="lp-evrow is-flagged">
            <span className="lp-evrow__date mono">May 20</span>
            <span className="lp-evrow__txt">⚠ Inverted LOCAL_PREF vs AS_PATH in best-path order — flagged for source repair.</span>
          </div>
        </div>

        <div className="lp-divider"></div>

        <div className="lp-payoff">
          <span className="kicker">projected after this {lex.mission.toLowerCase()}</span>
          <div className="lp-payoff__nums">
            <span className="data" style={{ fontSize: '1.6rem', color: 'var(--decay)' }}>31</span>
            <span className="lp-payoff__arrow mono">──▶</span>
            <span className="data" style={{ fontSize: '1.6rem', color: 'var(--m-3)' }}>~48</span>
          </div>
        </div>

        <Btn primary style={{ width: '100%', marginTop: 'var(--s5)' }} onClick={onEngage}>{lex.cta}</Btn>
      </aside>
    </div>
  );
}

/* ════════════════════════════════════════════════════════════════════════
   MISSION — the ritual altitude. Five stages. The cosmos goes quiet.
   ════════════════════════════════════════════════════════════════════════ */
function MissionScreen({ lex, onComplete }) {
  const { MISSION } = window.PRAXIS;
  const [stage, setStage] = useStateM(0);           // 0..4
  const [recallIdx, setRecallIdx] = useStateM(0);
  const [revealed, setRevealed] = useStateM(false);
  const [picked, setPicked] = useStateM(null);       // drill choice index
  const [chainShown, setChainShown] = useStateM(false);
  const [note, setNote] = useStateM('');
  const [gauntletT, setGauntletT] = useStateM(90);

  // gauntlet countdown
  useEffectM(() => {
    if (stage !== 3) return;
    const iv = setInterval(() => setGauntletT(t => Math.max(0, t - 1)), 1000);
    return () => clearInterval(iv);
  }, [stage]);

  const next = () => { window.PraxisSound.tick(); setStage(s => s + 1); setRevealed(false); };

  const gradeRecall = ok => {
    ok ? window.PraxisSound.correct() : window.PraxisSound.wrong();
    if (recallIdx < MISSION.recall.length - 1) { setRecallIdx(i => i + 1); setRevealed(false); }
    else next();
  };

  const r = MISSION.recall[recallIdx];
  const d = MISSION.drill;

  return (
    <div className="lp-screen lp-mission">
      {/* stage rail */}
      <aside className="lp-rail dock dock-1" aria-label="Mission progress">
        <Kicker style={{ marginBottom: 'var(--s4)' }}>{lex.mission} · bgp-and-internet-routing</Kicker>
        {MISSION.stages.map((st, i) => (
          <div key={st} className={`lp-rail__row ${i < stage ? 'is-done' : ''} ${i === stage ? 'is-now' : ''}`}>
            <span className="lp-rail__dot" aria-hidden="true">{i < stage ? '✓' : ''}</span>
            <span className="lp-rail__name">{st}</span>
          </div>
        ))}
        <div className="lp-rail__line" aria-hidden="true">
          <i style={{ height: `${(stage / (MISSION.stages.length - 1)) * 100}%` }}></i>
        </div>
      </aside>

      {/* ritual card */}
      <div className="lp-ritual" key={stage}>
        {stage === 0 ? (
          <div className="lp-card panel dock">
            <div className="lp-card__head">
              <Kicker tone="var(--cyan)">warm recall · {recallIdx + 1} / {MISSION.recall.length}</Kicker>
              <span className="caption mono">no notes · from memory</span>
            </div>
            <h2 className="lp-card__q">{r.q}</h2>
            {revealed ? (
              <div className="lp-card__a dock">
                <Kicker tone="var(--mastery)" style={{ marginBottom: 'var(--s2)' }}>canonical answer</Kicker>
                <p>{r.a}</p>
                <div className="lp-card__grade">
                  <Btn onClick={() => gradeRecall(false)}>MISSED IT</Btn>
                  <Btn onClick={() => gradeRecall(true)}>SHAKY</Btn>
                  <Btn primary onClick={() => gradeRecall(true)}>HAD IT ✓</Btn>
                </div>
              </div>
            ) : (
              <Btn primary style={{ marginTop: 'var(--s6)' }} onClick={() => { setRevealed(true); }}>REVEAL ANSWER</Btn>
            )}
          </div>
        ) : null}

        {stage === 1 ? (
          <div className="lp-card panel dock">
            <div className="lp-card__head">
              <Kicker tone="var(--signal)">source repair</Kicker>
              <span className="caption mono">{MISSION.source.cite}</span>
            </div>
            <h2 className="lp-card__q" style={{ fontSize: '1.3rem' }}>{MISSION.source.title}</h2>
            <blockquote className="lp-chunk">{MISSION.source.chunk}</blockquote>
            <div className="lp-gap">
              <Kicker tone="var(--decay)" style={{ marginBottom: 'var(--s2)' }}>your recorded gap</Kicker>
              <p>{MISSION.source.gap}</p>
            </div>
            <Btn primary style={{ marginTop: 'var(--s5)' }} onClick={next}>REPAIRED — CONTINUE ↓</Btn>
          </div>
        ) : null}

        {stage === 2 ? (
          <div className="lp-card panel dock">
            <div className="lp-card__head">
              <Kicker tone="var(--cyan)">application drill</Kicker>
              <span className="caption mono">one shot</span>
            </div>
            <h2 className="lp-card__q" style={{ fontSize: '1.25rem' }}>{d.prompt}</h2>
            <div className="lp-opts">
              {d.options.map((o, i) => (
                <button key={i}
                  className={`lp-opt ${picked !== null && o.ok ? 'is-right' : ''} ${picked === i && !o.ok ? 'is-wrong' : ''}`}
                  disabled={picked !== null}
                  onClick={() => { setPicked(i); o.ok ? window.PraxisSound.correct() : window.PraxisSound.wrong(); }}>
                  <span className="lp-opt__key mono">{String.fromCharCode(65 + i)}</span>
                  {o.t}
                </button>
              ))}
            </div>
            {picked !== null ? (
              <div className="lp-card__a dock">
                <p>{d.explain}</p>
                <Btn primary style={{ marginTop: 'var(--s4)' }} onClick={next}>CONTINUE ↓</Btn>
              </div>
            ) : null}
          </div>
        ) : null}

        {stage === 3 ? (
          <div className="lp-card panel dock is-pressure">
            <div className="lp-card__head">
              <Kicker tone="var(--decay)">pressure gauntlet</Kicker>
              <span className={`lp-timer data ${gauntletT <= 15 ? 'is-low' : ''}`}>{String(Math.floor(gauntletT / 60))}:{String(gauntletT % 60).padStart(2, '0')}</span>
            </div>
            <h2 className="lp-card__q" style={{ fontSize: '1.25rem' }}>{MISSION.gauntlet.prompt}</h2>
            {chainShown ? (
              <ol className="lp-bullets">
                {MISSION.gauntlet.bullets.map((b, i) => (
                  <li key={i} className="dock" style={{ animationDelay: `${i * 130}ms` }}>{b}</li>
                ))}
              </ol>
            ) : (
              <p className="caption" style={{ marginTop: 'var(--s4)' }}>Say it out loud. Then check yourself against the chain.</p>
            )}
            {chainShown
              ? <Btn primary style={{ marginTop: 'var(--s5)' }} onClick={next}>I COVERED THE CHAIN ✓</Btn>
              : <Btn style={{ marginTop: 'var(--s5)' }} onClick={() => { window.PraxisSound.tick(); setChainShown(true); }}>REVEAL THE CHAIN</Btn>}
          </div>
        ) : null}

        {stage === 4 ? (
          <div className="lp-card panel dock">
            <div className="lp-card__head">
              <Kicker tone="var(--mastery)">evidence capture</Kicker>
              <span className="caption mono">sealed into the log</span>
            </div>
            <h2 className="lp-card__q" style={{ fontSize: '1.25rem' }}>{MISSION.evidence.prompt}</h2>
            <textarea className="lp-note" rows="5" placeholder={MISSION.evidence.placeholder}
              value={note} onChange={e => setNote(e.target.value)}></textarea>
            <Btn primary disabled={note.trim().length < 12} style={{ marginTop: 'var(--s4)' }}
              onClick={() => { window.PraxisSound.ignite(); onComplete(); }}>
              SEAL EVIDENCE — CLOSE THE LOOP ✦
            </Btn>
          </div>
        ) : null}
      </div>
    </div>
  );
}

Object.assign(window, { StarScreen, MissionScreen });