Hankan/app/src/ui/tabs/HangulTab.tsx

/* 한글 — the reading drill, the syllable diagram, and the jamo tables.

   The drill is reading-only by design: written form → spoken form, word →
   meaning, sentence → meaning. Nothing here asks him to produce a sound. */

import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useStore } from "../../state/store.js";
import { editStudyLog } from "../../db/writes.js";
import { compose, decompose } from "@lib/hangul.js";
import hangulJson from "@data/hangul.json";
import deckJson from "@data/deck.json";
import sentencesJson from "@data/sentences.json";
import "./hangul.css";

interface HangulFile {
  consonants: { jamo: string; roman: string; name: string; tense: boolean }[];
  vowels: { jamo: string; roman: string; kind: string }[];
  batchim: { sound: string; roman: string; writtenAs: string }[];
  soundRules: { n: string; k: string; p: string; a: string; b: string; r: string }[];
  soundPairs: { written: string; spoken: string; rule: string }[];
}
const H = hangulJson as unknown as HangulFile;

const WORDS = Object.values(
  (deckJson as unknown as { topics: Record<string, [string, string, string, string][]> }).topics,
).flat();
const SENTENCES = (
  sentencesJson as unknown as { sentences: { ko: string; en: string }[] }
).sentences;

const MODES = [
  { id: "sound", label: "소리 Sound changes" },
  { id: "speed", label: "속독 Speed reading" },
  { id: "sentence", label: "문장 Sentences" },
] as const;
type Mode = (typeof MODES)[number]["id"];

const ROUND = 12;

interface Question {
  prompt: string;
  answer: string;
  options: string[];
  after?: string;
  big?: boolean;
  wide?: boolean;
}

function pick<T>(items: T[], n: number, exclude: (t: T) => boolean): T[] {
  const pool = items.filter((t) => !exclude(t));
  const out: T[] = [];
  while (out.length < n && pool.length) {
    out.push(pool.splice(Math.floor(Math.random() * pool.length), 1)[0]!);
  }
  return out;
}

const shuffle = <T,>(a: T[]): T[] => a.map((v) => [Math.random(), v] as const).sort((x, y) => x[0] - y[0]).map(([, v]) => v);

/**
 * Distractors for a sound-change question: keep the syllable recognisable
 * but change exactly one thing — the final consonant or the initial — so the
 * choice tests the rule rather than general word shape.
 *
 * Enumerated rather than sampled. Sampling needs three distinct results and
 * a nudge in one of two directions only ever yields two, so a "keep drawing
 * until I have three" loop never terminates.
 */
function distractors(word: string, want: number): string[] {
  const chars = [...word];
  const out = new Set<string>();

  // Vary each decomposable syllable, nearest the end first: that is where
  // the 받침 lives, and where a sound rule actually applies.
  const positions = chars.map((c, i) => (decompose(c) ? i : -1)).filter((i) => i >= 0);

  for (const i of positions.reverse()) {
    const [initial, medial, final] = decompose(chars[i]!)!;
    for (const shift of [1, 2, 3, 4, 5, 6, 7]) {
      if (out.size >= want) break;
      const swapFinal = compose(initial, medial, (final + shift) % 28);
      const swapInitial = compose((initial + shift) % 19, medial, final);
      for (const variant of [swapFinal, swapInitial]) {
        const candidate = chars.map((c, j) => (j === i ? variant : c)).join("");
        if (candidate !== word) out.add(candidate);
      }
    }
    if (out.size >= want) break;
  }

  return [...out].slice(0, want);
}

function buildQuestion(mode: Mode): Question | null {
  if (mode === "sound") {
    const pair = H.soundPairs[Math.floor(Math.random() * H.soundPairs.length)];
    if (!pair) return null;
    const wrong = distractors(pair.spoken, 3);
    if (!wrong.length) return null;
    return {
      prompt: pair.written,
      answer: pair.spoken,
      options: shuffle([pair.spoken, ...wrong]),
      after: pair.rule,
      big: true,
    };
  }

  if (mode === "speed") {
    const target = WORDS[Math.floor(Math.random() * WORDS.length)];
    if (!target) return null;
    const wrong = pick(WORDS, 3, (w) => w[2] === target[2]).map((w) => w[2]);
    return {
      prompt: target[0],
      answer: target[2],
      options: shuffle([target[2], ...wrong]),
      big: true,
    };
  }

  const target = SENTENCES[Math.floor(Math.random() * SENTENCES.length)];
  if (!target) return null;
  const wrong = pick(SENTENCES, 3, (s) => s.en === target.en).map((s) => s.en);
  return {
    prompt: target.ko,
    answer: target.en,
    options: shuffle([target.en, ...wrong]),
    wide: true,
  };
}

function Drill() {
  const { db, today, invalidate } = useStore();
  // `picked` drives the UI; this guards the write. State is a render behind,
  // so a fast double-tap would otherwise log two answers for one question.
  const answering = useRef(false);
  const [mode, setMode] = useState<Mode>("sound");
  const [question, setQuestion] = useState<Question | null>(null);
  const [picked, setPicked] = useState<string | null>(null);
  const [round, setRound] = useState({ n: 0, correct: 0 });

  const nextQuestion = useCallback(() => {
    setQuestion(buildQuestion(mode));
    setPicked(null);
  }, [mode]);

  useEffect(() => {
    setRound({ n: 0, correct: 0 });
    nextQuestion();
  }, [mode, nextQuestion]);

  const answer = async (option: string) => {
    if (answering.current || picked || !question) return;
    answering.current = true;
    setPicked(option);
    const ok = option === question.answer;
    setRound((r) => ({ n: r.n + 1, correct: r.correct + (ok ? 1 : 0) }));
    await editStudyLog(db, today, { drills: 1 });
    invalidate();
    setTimeout(() => {
      answering.current = false;
      nextQuestion();
    }, ok ? 500 : 1300);
  };

  const finished = round.n >= ROUND;

  return (
    <div className="panel">
      <div className="panel-h">
        <h2>읽기 연습</h2>
        <span className="note tnum">
          {round.n ? `${round.correct} / ${round.n} correct` : "reading drill"}
        </span>
      </div>

      <div className="panel-b">
        <div className="topics">
          {MODES.map((m) => (
            <button key={m.id} aria-pressed={mode === m.id} onClick={() => setMode(m.id)}>
              {m.label}
            </button>
          ))}
        </div>

        {finished ? (
          <div className="drill-done">
            <p className="big tnum">{Math.round((round.correct / round.n) * 100)}%</p>
            <button
              className="btn primary"
              onClick={() => {
                setRound({ n: 0, correct: 0 });
                nextQuestion();
              }}
            >
              Again
            </button>
          </div>
        ) : (
          question && (
            <div className="drill">
              <div className="drill-meta">
                <span className="eyebrow">
                  Question {round.n + 1} of {ROUND}
                </span>
                {picked && question.after && (
                  <span className="eyebrow">규칙 · {question.after}</span>
                )}
              </div>

              <div className={`prompt ko serif${question.big ? " word" : " line"}`}>
                {question.prompt}
              </div>

              <div className={`opts${question.wide ? " wide" : ""}`}>
                {question.options.map((o) => (
                  <button
                    key={o}
                    className={/[가-힣]/.test(o) ? "ko" : undefined}
                    data-mark={
                      picked
                        ? o === question.answer
                          ? "ok"
                          : o === picked
                            ? "no"
                            : undefined
                        : undefined
                    }
                    disabled={Boolean(picked)}
                    onClick={() => void answer(o)}
                  >
                    {o}
                  </button>
                ))}
              </div>
            </div>
          )
        )}
      </div>
    </div>
  );
}

function JamoGrid({
  title,
  note,
  cells,
}: {
  title: string;
  note: string;
  cells: { glyph: string; roman: string; label: string; shaded?: boolean }[];
}) {
  const { prefs } = useStore();
  return (
    <div className="panel">
      <div className="panel-h">
        <h2 className="ko">{title}</h2>
        <span className="note">{note}</span>
      </div>
      <div className="panel-b">
        <div className="jamo-grid grid-collapse">
          {cells.map((c) => (
            <div className="jamo" key={c.glyph + c.label} data-shaded={c.shaded ? "1" : undefined}>
              <span className="c ko serif">{c.glyph}</span>
              {prefs.romanization && <span className="r mono">{c.roman}</span>}
              <span className="n">{c.label}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export function HangulTab() {
  const consonants = useMemo(
    () => H.consonants.map((c) => ({ glyph: c.jamo, roman: c.roman, label: c.name, shaded: c.tense })),
    [],
  );
  const vowels = useMemo(
    () =>
      H.vowels.map((v) => ({
        glyph: v.jamo,
        roman: v.roman,
        label: v.kind,
        shaded: v.kind !== "basic",
      })),
    [],
  );
  const batchim = useMemo(
    () => H.batchim.map((b) => ({ glyph: b.sound, roman: b.roman, label: b.writtenAs })),
    [],
  );

  return (
    <>
      <Drill />

      <div className="panel">
        <div className="panel-h">
          <h2 className="ko">한 글자의 구조</h2>
          <span className="note">Anatomy of a syllable</span>
        </div>
        <div className="panel-b block-demo">
          <div className="syl-block">
            <span className="s-i">ㅎ</span>
            <span className="s-m">ㅏ</span>
            <span className="s-f">ㄴ</span>
          </div>
          <div className="syl-big ko serif">한</div>
          <ul className="legend-list">
            <li>
              <i className="sw-i" /> 초성 — the initial consonant
            </li>
            <li>
              <i className="sw-m" /> 중성 — the vowel
            </li>
            <li>
              <i className="sw-f" /> 종성 — the final consonant, the 받침. Optional
            </li>
          </ul>
        </div>
      </div>

      <JamoGrid title="자음" note="Consonants — shaded are the tense pairs" cells={consonants} />
      <JamoGrid title="모음" note="Vowels — shaded are compound" cells={vowels} />
      <JamoGrid title="받침" note="Every final collapses to one of seven sounds" cells={batchim} />

      <div className="panel">
        <div className="panel-h">
          <h2 className="ko">소리 바뀜</h2>
          <span className="note">The seven sound rules</span>
        </div>
        <div className="panel-b">
          <div className="rules grid-collapse">
            {H.soundRules.map((r) => (
              <div className="rule" key={r.k}>
                <h4>
                  <span className="ko">{r.k}</span> <span>{r.n}</span>
                </h4>
                <p>{r.p}</p>
                <div className="demo ko">
                  {r.a} <span className="arrow">→</span> [{r.b}]
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </>
  );
}