/* Kanji page · 動 (dō / ugoku, "move") — 11 strokes
   Distinct entity type from vocab. Stroke-order practice as the
   interactive primitive (parallel to derivative explorable explanation). */

const KanjiPageDou = () => {
  const [activeStroke, setActiveStroke] = React.useState(7);
  const [traceMode, setTraceMode] = React.useState("guided");

  // 動 = 重 (heavy, left/main) + 力 (strength, right). Phono-semantic.
  // Stroke order paths approximated; numbered 1..11.
  // We render simplified strokes as SVG paths, ordered.
  const strokes = [
    // 重 component (1-9)
    { d: "M 90 60 L 180 60",                                  k:"horizontal" },          // 1: top horiz
    { d: "M 110 60 L 110 100 L 165 100 L 165 60",            k:"box-top" },             // 2 (composite simplified)
    { d: "M 95 100 L 180 100",                                k:"horizontal" },          // 3
    { d: "M 138 30 L 138 200",                                k:"vertical" },            // 4: long vertical through
    { d: "M 80 130 L 195 130",                                k:"horizontal" },          // 5
    { d: "M 95 160 L 180 160",                                k:"horizontal" },          // 6
    { d: "M 110 130 L 110 195",                               k:"vertical" },            // 7 ← currently traced
    { d: "M 165 130 L 165 195",                               k:"vertical" },            // 8
    { d: "M 70 195 L 200 195",                                k:"horizontal" },          // 9: bottom
    // 力 component (10-11)
    { d: "M 230 65 L 230 170 L 290 170",                      k:"hook" },                // 10
    { d: "M 230 90 L 285 90",                                 k:"horizontal" },          // 11
  ];

  // Vocabulary words containing 動
  const containing = [
    { jp:"動く",      kana:"うごく",       roma:"ugoku",       gloss:"to move (intr.)",       freq:412,  jlpt:"N4", state:"mastered" },
    { jp:"動物",      kana:"どうぶつ",     roma:"dōbutsu",     gloss:"animal",                 freq:680,  jlpt:"N5", state:"mastered" },
    { jp:"自動",      kana:"じどう",       roma:"jidō",        gloss:"automatic",              freq:1014, jlpt:"N3", state:"learning" },
    { jp:"運動",      kana:"うんどう",     roma:"undō",        gloss:"exercise; movement",     freq: 562, jlpt:"N4", state:"mastered" },
    { jp:"行動",      kana:"こうどう",     roma:"kōdō",        gloss:"action, behavior",       freq: 720, jlpt:"N3", state:"learning" },
    { jp:"活動",      kana:"かつどう",     roma:"katsudō",     gloss:"activity",               freq: 480, jlpt:"N3", state:"frontier" },
    { jp:"感動",      kana:"かんどう",     roma:"kandō",       gloss:"emotion, being moved",   freq:1240, jlpt:"N3", state:"learning" },
    { jp:"動詞",      kana:"どうし",       roma:"dōshi",       gloss:"verb (gram.)",           freq:3804, jlpt:"N3", state:"locked" },
  ];

  return (
    <div className="kp">
      <header className="vp__top">
        <div className="vp__top-l">
          <span className="t-mono" style={{color:"var(--ink-4)"}}>§ JP · KANJI</span>
          <span className="cp__bc-sep">/</span>
          <a className="cp__bc-link" href="#">Jōyō · grade 3</a>
          <span className="cp__bc-sep">/</span>
          <span className="cp__bc-cur">動</span>
          <span className="cp__bc-sep">·</span>
          <span className="t-mono vp__top-id">kanji.jp.動</span>
        </div>
        <div className="vp__top-r">
          <span className="mastery-dot mastery-dot--learning" />
          <span className="t-meta">Learning · 4 reviews · stability 6.2d</span>
          <span className="cp__top-divider" />
          <button className="btn btn--ghost cp__top-btn">Hear it</button>
          <button className="btn cp__top-btn">Practice stroke →</button>
        </div>
      </header>
      <hr className="rule" />

      <div className="kp__hero">
        {/* Massive kanji glyph */}
        <div className="kp__glyph-block">
          <div className="kp__glyph">動</div>
          <div className="kp__glyph-meta">
            <div><span className="t-meta">Strokes</span><span className="t-mono"> 11</span></div>
            <div><span className="t-meta">Radical</span><span className="t-mono"> 力 · power</span></div>
            <div><span className="t-meta">Grade</span><span className="t-mono"> 3 · jōyō</span></div>
            <div><span className="t-meta">JLPT</span><span className="t-mono"> N4</span></div>
            <div><span className="t-meta">Freq.</span><span className="t-mono"> #138 / 2,500</span></div>
          </div>
        </div>

        {/* Readings table — same discipline as the conjugation table */}
        <div className="kp__readings">
          <div className="kp__rd-grid">
            <div className="kp__rd-h">Type</div>
            <div className="kp__rd-h">Reading</div>
            <div className="kp__rd-h">Romaji</div>
            <div className="kp__rd-h">Use</div>
            <div className="kp__rd-h vp__neigh-h--r">Freq.</div>

            <div className="kp__rd-cell kp__rd-type">on'yomi</div>
            <div className="kp__rd-cell kp__rd-reading">ドウ</div>
            <div className="kp__rd-cell t-mono">dō</div>
            <div className="kp__rd-cell">in compounds: 運動, 動物, 自動</div>
            <div className="kp__rd-cell t-mono kp__rd-freq">82%</div>

            <div className="kp__rd-cell kp__rd-type">kun'yomi</div>
            <div className="kp__rd-cell kp__rd-reading">うご-く</div>
            <div className="kp__rd-cell t-mono">ugo-ku</div>
            <div className="kp__rd-cell">native verb: 動く / 動かす</div>
            <div className="kp__rd-cell t-mono kp__rd-freq">17%</div>

            <div className="kp__rd-cell kp__rd-type">nanori</div>
            <div className="kp__rd-cell kp__rd-reading">いさむ</div>
            <div className="kp__rd-cell t-mono">isamu</div>
            <div className="kp__rd-cell">name reading · rare</div>
            <div className="kp__rd-cell t-mono kp__rd-freq">&lt;1%</div>
          </div>
        </div>
      </div>

      <hr className="rule-2" />

      {/* Decomposition + practice */}
      <div className="kp__split">
        {/* Left: structural decomposition */}
        <section className="kp__decomp">
          <div className="vp__sect-head">
            <span className="type-chip" data-kind="definition">STRUCTURE</span>
            <h2 className="t-h2">Decomposition</h2>
            <span className="t-meta vp__sect-id">phono-semantic · 形声</span>
          </div>

          <div className="kp__decomp-tree">
            <div className="kp__decomp-root">
              <div className="kp__decomp-glyph">動</div>
              <div className="t-meta">11 strokes</div>
            </div>
            <div className="kp__decomp-arrow">┬─</div>
            <div className="kp__decomp-children">
              <div className="kp__decomp-child kp__decomp-child--phon">
                <div className="kp__decomp-glyph">重</div>
                <div className="t-meta">phonetic component</div>
                <div className="t-mono kp__decomp-roma">ジュウ · heavy</div>
                <div className="t-meta kp__decomp-strokes">strokes 1–9</div>
              </div>
              <div className="kp__decomp-child kp__decomp-child--sem">
                <div className="kp__decomp-glyph">力</div>
                <div className="t-meta">semantic radical · #19</div>
                <div className="t-mono kp__decomp-roma">リョク · power</div>
                <div className="t-meta kp__decomp-strokes">strokes 10–11</div>
              </div>
            </div>
          </div>

          <p className="t-lead kp__decomp-lead">
            <span className="t-mono">動</span> is a phono-semantic compound: <span className="t-mono">重</span> (heavy) carries the sound, <span className="t-mono">力</span> (power) carries the meaning. The kanji literally pictures <em>force applied to a heavy thing</em> — i.e., <em>movement</em>.
          </p>

          <hr className="rule-3" />

          <div className="kp__lineage">
            <div className="t-meta">Lineage</div>
            <div className="kp__lineage-row">
              <span className="kp__lineage-form">甲骨文</span>
              <span className="kp__lineage-glyph">㣙</span>
              <span className="t-meta">oracle bone · ~1200 BCE</span>
            </div>
            <div className="kp__lineage-row">
              <span className="kp__lineage-form">小篆</span>
              <span className="kp__lineage-glyph">動</span>
              <span className="t-meta">small seal · Qin</span>
            </div>
            <div className="kp__lineage-row">
              <span className="kp__lineage-form">楷書</span>
              <span className="kp__lineage-glyph">動</span>
              <span className="t-meta">regular script · current</span>
            </div>
          </div>
        </section>

        {/* Right: stroke-order practice surface — interactive primitive */}
        <section className="kp__practice">
          <div className="vp__sect-head">
            <span className="type-chip" data-kind="procedure">PRACTICE</span>
            <h2 className="t-h2">Stroke order</h2>
            <span className="t-meta vp__sect-id">interactive · trace target</span>
          </div>

          <div className="kp__practice-modes">
            {["guided","trace","blank"].map(m => (
              <button key={m}
                      className={"kp__mode " + (traceMode===m?"is-on":"")}
                      onClick={()=>setTraceMode(m)}>
                {m}
              </button>
            ))}
            <span className="t-meta kp__practice-step">step {activeStroke} / 11</span>
          </div>

          <div className="kp__canvas">
            {/* grid marks */}
            <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)" strokeWidth="1"/>
              <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 strokes */}
              {strokes.slice(0, activeStroke-1).map((s, i) => (
                <path key={i} d={s.d} stroke="var(--ink)" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round" fill="none" opacity="0.85"/>
              ))}

              {/* active stroke — accent + animated dasharray */}
              {strokes[activeStroke-1] && (
                <g>
                  <path d={strokes[activeStroke-1].d}
                        stroke="var(--accent)" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round"
                        fill="none" opacity="0.4" strokeDasharray="4 4"/>
                  {/* user trace overlay (partial) */}
                  <path d={strokes[activeStroke-1].d}
                        stroke="var(--accent)" strokeWidth="6" strokeLinecap="round" strokeLinejoin="round"
                        fill="none" pathLength="100" strokeDasharray="55 100"/>
                  {/* start marker */}
                  <circle cx={strokes[activeStroke-1].d.match(/M\s*(\d+)\s+(\d+)/)?.[1] || 0}
                          cy={strokes[activeStroke-1].d.match(/M\s*(\d+)\s+(\d+)/)?.[2] || 0}
                          r="6" fill="var(--accent)" />
                  <text x={strokes[activeStroke-1].d.match(/M\s*(\d+)\s+(\d+)/)?.[1] - 14 || 0}
                        y={strokes[activeStroke-1].d.match(/M\s*(\d+)\s+(\d+)/)?.[2] - 8 || 0}
                        fontFamily="var(--font-mono)" fontSize="11" fontWeight="600" fill="var(--accent)">{activeStroke}</text>
                </g>
              )}

              {/* future strokes — dashed ghosts */}
              {strokes.slice(activeStroke).map((s, i) => (
                <path key={i+activeStroke} d={s.d}
                      stroke="var(--ink-5)" strokeWidth="3" strokeLinecap="round"
                      strokeDasharray="3 3" fill="none" opacity="0.5"/>
              ))}
            </svg>

            <div className="kp__feedback">
              <div className="t-meta">Feedback</div>
              <div className="kp__feedback-row">
                <span className="t-meta">Direction</span>
                <span className="t-mono kp__feedback-ok">✓ top-down</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">Pressure</span>
                <span className="t-mono kp__feedback-warn">! lift slower at finish</span>
              </div>
              <div className="kp__feedback-row">
                <span className="t-meta">Match</span>
                <span className="t-mono">82% / 95% target</span>
              </div>
            </div>
          </div>

          <div className="kp__stroke-list">
            {strokes.map((s, i) => (
              <button key={i}
                      className={"kp__stroke-pill " +
                        (i+1 < activeStroke ? "is-done" : i+1===activeStroke ? "is-active" : "is-future")}
                      onClick={()=>setActiveStroke(i+1)}>
                <span className="t-mono">{(i+1).toString().padStart(2,"0")}</span>
                <span className="t-meta">{s.k}</span>
              </button>
            ))}
          </div>
        </section>
      </div>

      <hr className="rule-2" />

      {/* Vocabulary containing 動 */}
      <section className="vp__sect">
        <div className="vp__sect-head">
          <span className="type-chip" data-kind="example">VOCABULARY</span>
          <h2 className="t-h2">Words containing 動</h2>
          <span className="t-meta vp__sect-id">{containing.length} · sorted by frequency</span>
        </div>

        <div className="vp__neigh">
          <div className="kp__contain-grid">
            <div className="vp__neigh-h">State</div>
            <div className="vp__neigh-h">Word</div>
            <div className="vp__neigh-h">Reading</div>
            <div className="vp__neigh-h">Gloss</div>
            <div className="vp__neigh-h">JLPT</div>
            <div className="vp__neigh-h vp__neigh-h--r">Freq.</div>
            {containing.map(c => (
              <React.Fragment key={c.jp}>
                <div className="vp__neigh-cell"><span className={"mastery-dot mastery-dot--" + c.state}/></div>
                <div className="vp__neigh-cell vp__neigh-jp"><a className="cp__prereq-link" href="#">{c.jp}</a></div>
                <div className="vp__neigh-cell vp__neigh-kana">{c.kana} · <span className="t-mono">{c.roma}</span></div>
                <div className="vp__neigh-cell">{c.gloss}</div>
                <div className="vp__neigh-cell t-mono">{c.jlpt}</div>
                <div className="vp__neigh-cell t-mono vp__neigh-freq">#{c.freq}</div>
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      <hr className="rule" />
      <footer className="vp__foot">
        <span className="t-meta">kanji.jp.動 · 11 strokes · radical 力 · jōyō grade 3 · N4</span>
        <span className="t-mono" style={{color:"var(--ink-4)"}}>component of 26 jōyō kanji · last review 4d ago</span>
      </footer>
    </div>
  );
};

window.KanjiPageDou = KanjiPageDou;