/* Language review session — Stroke shape mid-flow
   Parallel to ReviewSession (math). Item shapes are language-specific.
   Stroke is the active item: write the kanji as feedback evaluates the trace. */

const LanguageReviewSession = () => {
  const queue = [
    { n:1, shape:"recognize", concept:"kanji.jp.食",   done:true,  rating:"good" },
    { n:2, shape:"recall",    concept:"vocab.jp.飲む", done:true,  rating:"hard" },
    { n:3, shape:"listen",    concept:"vocab.jp.行く", done:true,  rating:"again" },
    { n:4, shape:"stroke",    concept:"kanji.jp.動",   done:false, current:true },
    { n:5, shape:"cloze",     concept:"grammar.jp.particle.を", done:false },
    { n:6, shape:"recognize", concept:"kanji.jp.達",   done:false },
    { n:7, shape:"recall",    concept:"vocab.jp.美味しい", done:false },
    { n:8, shape:"listen",    concept:"vocab.jp.友達", done:false },
  ];

  const shapeMeta = {
    recognize: { label:"Recognize",  glyph:"視", desc:"kanji → reading" },
    recall:    { label:"Recall",     glyph:"記", desc:"meaning → word" },
    listen:    { label:"Listen",     glyph:"聴", desc:"audio → transcription" },
    stroke:    { label:"Stroke",     glyph:"書", desc:"write the kanji" },
    cloze:     { label:"Cloze",      glyph:"空", desc:"fill the gap" },
  };

  // 動 stroke skeleton — abbreviated for the trace target
  const strokes = [
    "M 90 60 L 180 60",
    "M 110 60 L 110 100 L 165 100 L 165 60",
    "M 95 100 L 180 100",
    "M 138 30 L 138 200",
    "M 80 130 L 195 130",
    "M 95 160 L 180 160",
    "M 110 130 L 110 195",
    "M 165 130 L 165 195",
    "M 70 195 L 200 195",
    "M 230 65 L 230 170 L 290 170",
    "M 230 90 L 285 90",
  ];
  const strokesDone = 7;

  return (
    <div className="rs">
      <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 217 · started 09:42</span>
        </div>
        <div className="rs__top-r">
          <span className="t-meta">Pace</span>
          <span className="t-mono">avg 24s · target 15 items</span>
          <span className="cp__top-divider"/>
          <button className="btn btn--ghost cp__top-btn">End session</button>
        </div>
      </header>
      <hr className="rule" />

      <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 lr__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">03 / 08 · ~03:10 left</span>
      </div>

      <hr className="rule-2" />

      <div className="rs__layout">
        <main className="rs__item">
          <div className="rs__item-head">
            <div className="rs__item-shape">
              <span className="rs__item-glyph lr__item-glyph">書</span>
              <div>
                <div className="t-meta">Stroke · review item</div>
                <div className="t-mono rs__item-id">item.review.stroke.0301 · concept · kanji.jp.動</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">8d ago</span></div>
              <div className="rs__item-meta-row"><span className="t-meta">Retention</span><span className="t-mono" style={{color:"var(--accent)"}}>52%</span></div>
              <div className="rs__item-meta-row"><span className="t-meta">Stability</span><span className="t-mono">6.2d</span></div>
            </div>
          </div>

          <hr className="rule-3" />

          <p className="t-lead rs__item-lead">
            Write the kanji for <span className="t-mono">うご-く</span> (<em>to move</em>). The system tracks stroke order, direction, and proportion in real time.
          </p>

          {/* Trace canvas */}
          <div className="lr__stroke-area">
            <div className="lr__stroke-canvas">
              <svg viewBox="0 0 320 240" className="kp__svg" preserveAspectRatio="xMidYMid meet">
                <rect x="20" y="20" width="280" height="200" fill="var(--paper-2)" stroke="var(--rule-2)"/>
                <line x1="160" y1="20" x2="160" y2="220" stroke="var(--rule-3)" strokeWidth="0.5" strokeDasharray="2 4"/>
                <line x1="20" y1="120" x2="300" y2="120" stroke="var(--rule-3)" strokeWidth="0.5" strokeDasharray="2 4"/>

                {/* completed user strokes */}
                {strokes.slice(0, strokesDone).map((d, i) => (
                  <path key={i} d={d} stroke="var(--ink)" strokeWidth="6" fill="none"
                        strokeLinecap="round" strokeLinejoin="round" opacity="0.85"/>
                ))}
                {/* active stroke — partial trace in accent */}
                <path d={strokes[strokesDone]} stroke="var(--accent)" strokeWidth="6"
                      fill="none" strokeLinecap="round" pathLength="100" strokeDasharray="60 100"/>
                {/* future strokes — ghosted */}
                {strokes.slice(strokesDone+1).map((d, i) => (
                  <path key={i} d={d} stroke="var(--ink-5)" strokeWidth="2" fill="none"
                        strokeDasharray="3 3" opacity="0.4"/>
                ))}
                <text x="22" y="14" fontFamily="var(--font-mono)" fontSize="10" fill="var(--ink-4)">trace target · 11 strokes</text>
              </svg>
            </div>
            <div className="lr__stroke-side">
              <div className="t-meta">Live feedback</div>
              <hr className="rule-3"/>
              <div className="kp__feedback-row"><span className="t-meta">Stroke</span><span className="t-mono">{strokesDone+1} / 11</span></div>
              <div className="kp__feedback-row"><span className="t-meta">Order</span><span className="t-mono kp__feedback-ok">✓ correct</span></div>
              <div className="kp__feedback-row"><span className="t-meta">Direction</span><span className="t-mono kp__feedback-ok">✓ top→bottom</span></div>
              <div className="kp__feedback-row"><span className="t-meta">Proportion</span><span className="t-mono kp__feedback-warn">! 重 too narrow</span></div>
              <div className="kp__feedback-row"><span className="t-meta">Match</span><span className="t-mono">71% / 80% target</span></div>
              <hr className="rule-3" style={{margin:"12px 0"}}/>
              <div className="t-meta">Action</div>
              <div className="lr__stroke-actions">
                <button className="btn btn--ghost cp__top-btn">Undo stroke</button>
                <button className="btn btn--ghost cp__top-btn">Show ghost</button>
                <button className="btn cp__top-btn">Submit →</button>
              </div>
            </div>
          </div>

          <hr className="rule-3" />

          <div className="rs__rate">
            <div className="t-meta rs__rate-h">Self-rate after submit</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 is-on">
                <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">
                <span className="rs__rate-key t-mono">3</span><span className="rs__rate-label">Good</span><span className="rs__rate-next t-mono">7d</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">18d</span>
              </button>
            </div>
            <div className="t-mono rs__rate-meta">FSRS-6 · stability 6.2d → 9.0d on Hard · proportion warning weighted in</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 lr__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 here implicates these graph nodes. Review may be re-routed.</p>
          <ul className="rs__implicates">
            <li><span className="mastery-dot mastery-dot--review"/><span className="t-ui">kanji.jp.動 · stroke order</span></li>
            <li><span className="mastery-dot mastery-dot--mastered"/><span className="t-ui">radical.力</span></li>
            <li><span className="mastery-dot mastery-dot--learning"/><span className="t-ui">component.重 · phonetic</span></li>
            <li><span className="mastery-dot mastery-dot--mastered"/><span className="t-ui">vocab.jp.動く</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">68% → 71%</span></li>
            <li><span className="t-ui">Stability gained</span><span className="t-mono">+ 8.6d</span></li>
            <li><span className="t-ui">Map state</span><span className="t-mono">1 node ↑</span></li>
          </ul>
        </aside>
      </div>
    </div>
  );
};

window.LanguageReviewSession = LanguageReviewSession;