/* PRAXIS Loop — Altitude 5: Review / loop close. The ceremony. */
/* global React, Kicker, Btn, Ring, useCountUp */

function ReviewScreen({ lex, onAscend }) {
  const { MISSION } = window.PRAXIS;
  const delta = useCountUp(48, 1600, 31, 700);

  return (
    <div className="lp-screen lp-review">
      <div className="lp-review__col">
        <Kicker tone="var(--mastery)" style={{ letterSpacing: '0.22em' }}>✦ {lex.stageDone} ✦</Kicker>
        <h1 className="display lp-review__title dock dock-1">BGP and Internet Routing</h1>

        {/* the star, re-ignited */}
        <div className="lp-bigstar is-ignited dock dock-2" aria-hidden="true">
          <span className="lp-bigstar__halo"></span>
          <span className="lp-bigstar__core"></span>
          <span className="lp-bigstar__flare"></span>
        </div>

        <div className="lp-review__delta dock dock-3">
          <span className="data lp-review__from">31</span>
          <span className="lp-review__arrow mono" aria-hidden="true">━━━▶</span>
          <span className="data lp-review__to">{Math.round(delta)}</span>
          <span className="kicker" style={{ alignSelf: 'flex-end', paddingBottom: 6 }}>mastery</span>
        </div>

        <div className="lp-review__grid dock dock-4">
          <div className="lp-review__cell panel panel--glass">
            <Kicker>stages</Kicker>
            <div className="lp-review__stages">
              {MISSION.stages.map(s => (
                <span key={s} className="lp-review__stage mono">✓ {s}</span>
              ))}
            </div>
          </div>
          <div className="lp-review__cell panel panel--glass">
            <Kicker>{lex.readiness.toLowerCase()}</Kicker>
            <div className="lp-review__ringwrap">
              <Ring value={64} size={120} stroke={4} tone="var(--mastery)" delay={900} />
              <div>
                <div className="data" style={{ fontSize: '0.95rem', color: 'var(--mastery)' }}>▲ +2 today</div>
                <div className="caption" style={{ marginTop: 4 }}>next review <b className="data" style={{ color: 'var(--text-primary)' }}>Jun 14</b></div>
                <div className="caption" style={{ marginTop: 2 }}>evidence sealed · entry #7</div>
              </div>
            </div>
          </div>
        </div>

        <div className="lp-review__cta dock dock-6">
          <Btn primary onClick={onAscend}>RETURN TO {lex.universe.toUpperCase()} ↑</Btn>
          <span className="caption mono">loop <b style={{ color: 'var(--mastery)' }}>closed</b> · 1 of 1 due today</span>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ReviewScreen });