/* Review session — FSRS-driven, multi-shape items, mid-flow
   The session is the platform's own thing, not Anki bolted on. */

const ReviewSession = () => {
  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} />;
  };

  // Queue showing item-shape variation:
  //  derive — re-derive a result
  //  problem — work a fresh problem
  //  identify — name the concept's role
  //  spot — find the misapplication
  //  recall — card-style
  const queue = [
    { n:1, shape:"recall",   concept:"slope_line",      done:true,  rating:"good" },
    { n:2, shape:"identify", concept:"limit_compose",   done:true,  rating:"hard" },
    { n:3, shape:"spot",     concept:"chain_rule",      done:false, current:true },  // mid-flow
    { n:4, shape:"derive",   concept:"sequence",        done:false },
    { n:5, shape:"problem",  concept:"limit_product",   done:false },
    { n:6, shape:"recall",   concept:"slope_line",      done:false },
    { n:7, shape:"derive",   concept:"composition",     done:false },
  ];

  const shapeMeta = {
    derive:   { label:"Derive",        glyph:"∂", desc:"re-derive from definition" },
    problem:  { label:"Problem",       glyph:"§", desc:"work a fresh instance" },
    identify: { label:"Identify",      glyph:"◇", desc:"name the role" },
    spot:     { label:"Spot the error", glyph:"⊘", desc:"find the misapplication" },
    recall:   { label:"Recall",        glyph:"○", desc:"card-style" },
  };

  return (
    <div className="rs">
      {/* Mode bar — review is paced, focused */}
      <header className="rs__top">
        <div className="rs__top-l">
          <span className="rs__mode">REVIEW</span>
          <span className="rs__mode-sep">·</span>
          <span className="t-ui">Session 412 · started 14:18</span>
        </div>
        <div className="rs__top-r">
          <span className="t-meta">Pace</span>
          <span className="t-mono">avg 38s · target 12 items</span>
          <span className="cp__top-divider"/>
          <button className="btn btn--ghost cp__top-btn">End session</button>
        </div>
      </header>
      <hr className="rule" />

      {/* Progress queue — visualizes session structure */}
      <div className="rs__queue">
        <span className="t-meta rs__queue-h">Queue</span>
        <div className="rs__queue-bar">
          {queue.map((q, i) => (
            <div key={i} className={"rs__queue-item rs__queue-item--" + (q.done?"done":q.current?"current":"upcoming")}>
              <span className="rs__queue-n t-mono">{q.n.toString().padStart(2,"0")}</span>
              <span className="rs__queue-shape" title={shapeMeta[q.shape].label}>{shapeMeta[q.shape].glyph}</span>
              {q.current && <span className="rs__queue-now t-mono">NOW</span>}
              {q.done && <span className={"rs__queue-rate t-mono rs__queue-rate--"+q.rating}>{q.rating}</span>}
            </div>
          ))}
        </div>
        <span className="t-mono rs__queue-meta">02 / 07 · ~04:30 left</span>
      </div>

      <hr className="rule-2" />

      {/* Current item — "spot the misapplication" shape */}
      <div className="rs__layout">
        <main className="rs__item">
          <div className="rs__item-head">
            <div className="rs__item-shape">
              <span className="rs__item-glyph">⊘</span>
              <div>
                <div className="t-meta">Spot the error · review item</div>
                <div className="t-mono rs__item-id">item.review.spot.0117 · concept · chain_rule</div>
              </div>
            </div>
            <div className="rs__item-meta">
              <div className="rs__item-meta-row"><span className="t-meta">Last seen</span><span className="t-mono">11d ago</span></div>
              <div className="rs__item-meta-row"><span className="t-meta">Retention</span><span className="t-mono" style={{color:"var(--accent)"}}>46%</span></div>
              <div className="rs__item-meta-row"><span className="t-meta">Stability</span><span className="t-mono">8.4d</span></div>
            </div>
          </div>

          <hr className="rule-3" />

          <p className="t-lead rs__item-lead">
            A student wrote the following derivation. <strong>One step is wrong.</strong> Click on the line that contains the error.
          </p>

          <div className="rs__derivation">
            <div className="rs__deriv-line">
              <span className="t-mono rs__deriv-n">01</span>
              <span className="rs__deriv-body"><Tex tex="\text{Let } y = \sin(x^2)"/></span>
              <span className="rs__deriv-mark"/>
            </div>
            <div className="rs__deriv-line">
              <span className="t-mono rs__deriv-n">02</span>
              <span className="rs__deriv-body"><Tex tex="\text{Let } u = x^2,\ \text{so } y = \sin(u)"/></span>
              <span className="rs__deriv-mark"/>
            </div>
            <div className="rs__deriv-line">
              <span className="t-mono rs__deriv-n">03</span>
              <span className="rs__deriv-body"><Tex tex="\frac{dy}{du} = \cos(u),\quad \frac{du}{dx} = 2x"/></span>
              <span className="rs__deriv-mark"/>
            </div>
            <div className="rs__deriv-line rs__deriv-line--selected">
              <span className="t-mono rs__deriv-n">04</span>
              <span className="rs__deriv-body"><Tex tex="\frac{dy}{dx} = \cos(u) + 2x"/></span>
              <span className="rs__deriv-mark rs__deriv-mark--selected">▶ selected</span>
            </div>
            <div className="rs__deriv-line rs__deriv-line--muted">
              <span className="t-mono rs__deriv-n">05</span>
              <span className="rs__deriv-body"><Tex tex="\frac{dy}{dx} = \cos(x^2) + 2x"/></span>
              <span className="rs__deriv-mark"/>
            </div>
          </div>

          <hr className="rule-3" />

          <div className="rs__explain">
            <span className="t-meta">Now explain</span>
            <div className="rs__explain-input">
              <span className="t-body" style={{color:"var(--ink)"}}>
                The chain rule requires multiplication, not addition. Step 04 added <Tex tex="\frac{dy}{du}"/> and <Tex tex="\frac{du}{dx}"/> instead of multiplying them.
              </span>
              <span className="au__caret"/>
            </div>
            <div className="t-mono rs__explain-meta">22 / 200 chars · checked against rubric</div>
          </div>

          <hr className="rule-3" />

          {/* FSRS rating */}
          <div className="rs__rate">
            <div className="t-meta rs__rate-h">How was this?</div>
            <div className="rs__rate-row">
              <button className="rs__rate-btn rs__rate-btn--again">
                <span className="rs__rate-key t-mono">1</span>
                <span className="rs__rate-label">Again</span>
                <span className="rs__rate-next t-mono">10m</span>
              </button>
              <button className="rs__rate-btn rs__rate-btn--hard">
                <span className="rs__rate-key t-mono">2</span>
                <span className="rs__rate-label">Hard</span>
                <span className="rs__rate-next t-mono">2d</span>
              </button>
              <button className="rs__rate-btn rs__rate-btn--good is-on">
                <span className="rs__rate-key t-mono">3</span>
                <span className="rs__rate-label">Good</span>
                <span className="rs__rate-next t-mono">9d</span>
              </button>
              <button className="rs__rate-btn rs__rate-btn--easy">
                <span className="rs__rate-key t-mono">4</span>
                <span className="rs__rate-label">Easy</span>
                <span className="rs__rate-next t-mono">22d</span>
              </button>
            </div>
            <div className="t-mono rs__rate-meta">FSRS-6 · stability will update from 8.4d → 14.1d on Good</div>
          </div>
        </main>

        <aside className="rs__rail">
          <div className="t-meta">Item shapes · this session</div>
          <hr className="rule-3" />
          <ul className="rs__shapes">
            {Object.entries(shapeMeta).map(([k, v]) => {
              const count = queue.filter(q => q.shape === k).length;
              const isCurrent = queue.find(q => q.current)?.shape === k;
              return (
                <li key={k} className={"rs__shape " + (isCurrent?"is-on":"")}>
                  <span className="rs__shape-g">{v.glyph}</span>
                  <div>
                    <div className="t-ui rs__shape-l">{v.label}</div>
                    <div className="t-mono rs__shape-d">{v.desc}</div>
                  </div>
                  <span className="t-mono rs__shape-n">×{count}</span>
                </li>
              );
            })}
          </ul>

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

          <div className="t-meta">Implicates</div>
          <p className="t-ui rs__rail-text">
            A struggle on this item involves these concepts. The graph routes review accordingly.
          </p>
          <ul className="rs__implicates">
            <li><span className="mastery-dot mastery-dot--review"/><span className="t-ui">Chain rule</span></li>
            <li><span className="mastery-dot mastery-dot--mastered"/><span className="t-ui">Composition</span></li>
            <li><span className="mastery-dot mastery-dot--learning"/><span className="t-ui">Derivative · operator algebra</span></li>
          </ul>

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

          <div className="t-meta">Session impact</div>
          <ul className="rs__impact">
            <li><span className="t-ui">Avg retention</span><span className="t-mono">71% → 73%</span></li>
            <li><span className="t-ui">Stability gained</span><span className="t-mono">+ 12.4d</span></li>
            <li><span className="t-ui">Map state</span><span className="t-mono">2 nodes ↑</span></li>
          </ul>
          <button className="btn btn--ghost cp__top-btn" style={{width:"100%",justifyContent:"center",marginTop:"10px"}}>View map →</button>
        </aside>
      </div>
    </div>
  );
};

window.ReviewSession = ReviewSession;