/* Assessment surface — derivative problem, non-MCQ, graph-aware
   Mode signaling: dense, evaluative, distinct from concept page. */

const AssessmentSurface = () => {
  const [step, setStep] = React.useState(2);  // we're partway through
  const [showHint, setShowHint] = React.useState(true);

  const Tex = ({ tex, display }) => {
    const ref = React.useRef(null);
    React.useEffect(() => {
      if (window.katex && ref.current) {
        try { window.katex.render(tex, ref.current, { displayMode: !!display, throwOnError: false }); } catch(e){}
      }
    }, [tex, display]);
    return <span ref={ref} />;
  };

  const steps = [
    { n:"i",   label:"Identify", status:"done",    title:"Recognize the structure" },
    { n:"ii",  label:"Decompose",status:"done",    title:"Find inner & outer functions" },
    { n:"iii", label:"Apply",    status:"current", title:"Differentiate each part" },
    { n:"iv",  label:"Combine",  status:"locked",  title:"Assemble the chain" },
    { n:"v",   label:"Verify",   status:"locked",  title:"Check at a known point" },
  ];

  return (
    <div className="as">
      {/* Mode bar — assessment is evaluative, not exploratory.
          Black band signals the mode shift. */}
      <header className="as__top">
        <div className="as__top-l">
          <span className="as__mode">ASSESSMENT</span>
          <span className="as__mode-sep">·</span>
          <span className="t-mono as__top-id">eval.calc.derivative.034</span>
          <span className="as__mode-sep">·</span>
          <span className="t-ui as__top-context">Construct · Chain rule application</span>
        </div>
        <div className="as__top-r">
          <span className="t-meta">Time</span>
          <span className="t-mono as__top-time">04:12 / 12:00</span>
          <span className="cp__top-divider as__divider-d"/>
          <span className="t-meta">Stake</span>
          <span className="t-mono as__top-stake">competency · graded</span>
          <span className="cp__top-divider as__divider-d"/>
          <button className="btn as__btn-d">Submit</button>
        </div>
      </header>

      <div className="as__layout">
        {/* Step rail */}
        <aside className="as__steps">
          <div className="t-meta as__steps-h">Construction · 5 steps</div>
          <hr className="rule-3" />
          <ol className="as__steplist">
            {steps.map((s, i) => (
              <li key={i} className={"as__step as__step--" + s.status}>
                <span className="t-mono as__step-n">{s.n}</span>
                <div className="as__step-body">
                  <div className="t-meta as__step-label">{s.label}</div>
                  <div className="t-ui as__step-title">{s.title}</div>
                </div>
                {s.status==="done" && <span className="as__step-tick">✓</span>}
                {s.status==="current" && <span className="as__step-tick as__step-tick--cur">▶</span>}
              </li>
            ))}
          </ol>
          <hr className="rule-3" />
          <div className="t-meta as__steps-h">Concepts in play</div>
          <ul className="as__concepts">
            <li><span className="mastery-dot mastery-dot--mastered"/><span className="t-ui">Power rule</span></li>
            <li><span className="mastery-dot mastery-dot--mastered"/><span className="t-ui">Trigonometric derivatives</span></li>
            <li><span className="mastery-dot mastery-dot--frontier"/><span className="t-ui">Chain rule</span></li>
          </ul>
        </aside>

        {/* Problem */}
        <main className="as__main">
          <div className="as__prob-head">
            <span className="type-chip" data-kind="theorem" style={{background:"var(--ink)",color:"var(--paper)",borderColor:"var(--ink)"}}>PROBLEM 03/05</span>
            <span className="t-mono as__prob-id">prob.calc.0843</span>
            <span className="t-mono as__prob-elo">difficulty · Elo 1420</span>
          </div>

          <h2 className="t-h2 as__prob-title">Derive an expression — chain rule</h2>
          <p className="t-lead as__prob-lead">
            Compute <Tex tex="\frac{d}{dx}\bigl[\sin(3x^2 + 1)\bigr]"/> from first principles of the chain rule. <em className="as__prob-em">Show your decomposition. Construct the answer; do not pattern-match.</em>
          </p>

          <hr className="rule-2" style={{marginTop:"24px"}}/>

          {/* Step iii — Apply, current */}
          <section className="as__step-active">
            <div className="as__step-active-head">
              <span className="t-mono as__step-mark">iii</span>
              <span className="t-meta">Apply · differentiate inner and outer</span>
            </div>

            <div className="as__construct">
              {/* outer */}
              <div className="as__field">
                <label className="t-meta">Outer · u ↦ sin(u). f'(u) =</label>
                <div className="as__field-input as__field-input--filled">
                  <Tex tex="\cos(u)"/>
                  <span className="as__field-tick">✓</span>
                </div>
              </div>

              {/* inner — current focus */}
              <div className="as__field as__field--active">
                <label className="t-meta">Inner · g(x) = 3x² + 1. g'(x) =</label>
                <div className="as__field-input as__field-input--editing">
                  <span className="as__field-typed"><Tex tex="6x"/></span>
                  <span className="au__caret"/>
                  <span className="as__field-status t-mono">checking…</span>
                </div>
                <div className="as__field-hint t-ui">
                  Write <Tex tex="g'(x)"/> as a single expression in <Tex tex="x"/>.
                </div>
              </div>

              {/* assemble — locked */}
              <div className="as__field as__field--locked">
                <label className="t-meta">Assemble · f'(g(x)) · g'(x) =</label>
                <div className="as__field-input as__field-input--locked">
                  <span className="t-ui" style={{color:"var(--ink-5)"}}>complete previous step</span>
                </div>
              </div>
            </div>
          </section>

          <hr className="rule-3" />

          {/* Past attempts trace */}
          <details className="as__trace" open>
            <summary className="as__trace-summary">
              <span className="t-meta">Trace</span>
              <span className="t-ui">step ii · 2 attempts · resolved 02:34</span>
            </summary>
            <div className="as__trace-body">
              <div className="as__trace-row as__trace-row--err">
                <span className="t-mono as__trace-t">02:01</span>
                <span className="t-ui">Attempted <Tex tex="g(x) = \sin"/>, <Tex tex="f(x) = 3x^2 + 1"/></span>
                <span className="t-mono as__trace-flag">inverted</span>
              </div>
              <div className="as__trace-row as__trace-row--ok">
                <span className="t-mono as__trace-t">02:34</span>
                <span className="t-ui">Corrected: outer = <Tex tex="\sin(u)"/>, inner = <Tex tex="3x^2 + 1"/></span>
                <span className="t-mono as__trace-flag as__trace-flag--ok">ok</span>
              </div>
            </div>
          </details>

          <div className="as__actions">
            <button className="btn btn--ghost">Save draft</button>
            <button className="btn btn--ghost">Skip step</button>
            <button className="btn btn--accent" style={{marginLeft:"auto"}}>Submit step iii →</button>
          </div>
        </main>

        {/* Right rail — graph-aware support, surfaces on stumble */}
        <aside className="as__support">
          <div className="as__support-head">
            <span className="t-meta">Adjacent · graph-aware</span>
            <span className="t-mono as__support-meta">surfaced on attempt</span>
          </div>
          <hr className="rule-3" />
          <div className="as__related">
            <div className="t-ui as__related-text">
              You inverted f and g in step ii. The graph suggests these adjacent concepts may help:
            </div>
            <ul className="as__related-list">
              <li className="as__related-item">
                <span className="mastery-dot mastery-dot--mastered"/>
                <a className="cp__prereq-link" href="#">Function composition</a>
                <span className="t-mono">d=0.04</span>
              </li>
              <li className="as__related-item">
                <span className="mastery-dot mastery-dot--frontier"/>
                <a className="cp__prereq-link" href="#">Outer vs. inner function</a>
                <span className="t-mono">d=0.06</span>
              </li>
              <li className="as__related-item">
                <span className="mastery-dot mastery-dot--review"/>
                <a className="cp__prereq-link" href="#">Chain rule · informal</a>
                <span className="t-mono">d=0.09</span>
              </li>
            </ul>
            <div className="as__related-actions">
              <button className="btn btn--ghost cp__top-btn">Pause &amp; review</button>
              <button className="btn btn--ghost cp__top-btn">Continue, revisit later</button>
            </div>
          </div>

          <hr className="rule-3" style={{margin:"18px 0"}}/>

          <div className="t-meta">Calibration</div>
          <div className="as__calib">
            <div className="as__calib-row">
              <span className="t-meta">Your Elo</span>
              <span className="t-mono">1392 ± 86</span>
            </div>
            <div className="as__calib-row">
              <span className="t-meta">Problem Elo</span>
              <span className="t-mono">1420</span>
            </div>
            <div className="as__calib-row">
              <span className="t-meta">P(solve)</span>
              <span className="t-mono">0.46</span>
            </div>
            <div className="as__calib-bar">
              <span className="as__calib-fill" style={{width:"46%"}}/>
              <span className="as__calib-mark" style={{left:"46%"}}/>
            </div>
          </div>

          <hr className="rule-3" style={{margin:"18px 0"}}/>

          <div className="t-meta">If you complete</div>
          <ul className="as__reward">
            <li><span className="t-ui">Chain rule</span><span className="t-mono">→ mastered</span></li>
            <li><span className="t-ui">3 downstream unlocked</span><span className="t-mono">MVT, l'Hôpital, Taylor</span></li>
          </ul>
        </aside>
      </div>
    </div>
  );
};

window.AssessmentSurface = AssessmentSurface;