/* Gojuuon — 對齊 GojuuonPage.vue */

function GojuuonPage({ navigate, onBack }) {
  const [script, setScript] = React.useState("hiragana");
  const [voicing, setVoicing] = React.useState("seion");
  const [selected, setSelected] = React.useState(null);
  const toast = useToast();

  return (
    <div className="zen-page">
      <PageHeader title="五十音" onBack={onBack || (() => navigate("/library"))} />
      <div className="zen-content">
        <div className="content-wrapper">
          <div className="segment-row">
            <div className="segment">
              <button type="button" className={script === "hiragana" ? "active" : ""} onClick={() => setScript("hiragana")}>ひらがな</button>
              <button type="button" className={script === "katakana" ? "active" : ""} onClick={() => setScript("katakana")}>カタカナ</button>
            </div>
          </div>
          <div className="segment-row">
            <div className="segment">
              {[
                ["seion", "清音"],
                ["dakuon", "濁音"],
                ["handaku", "半濁音"],
                ["youon", "拗音"],
              ].map(([id, label]) => (
                <button
                  key={id}
                  type="button"
                  className={voicing === id ? "active" : ""}
                  onClick={() => setVoicing(id)}
                >
                  {label}
                </button>
              ))}
            </div>
          </div>

          <ZenCard>
            {voicing !== "seion" ? (
              <div className="empty-state" style={{ padding: 20 }}>
                <p className="empty-hint">此 mockup 先展示清音表；濁音 / 半濁音 / 拗音可後續補齊。</p>
              </div>
            ) : (
              <div className="kana-grid">
                {HIRAGANA_SEION.flat().map((k, i) =>
                  k ? (
                    <button
                      key={`${k}-${i}`}
                      type="button"
                      className={`kana-cell${selected === k ? " selected" : ""}`}
                      onClick={() => setSelected(k)}
                    >
                      {script === "katakana" ? hiraToKata(k) : k}
                    </button>
                  ) : (
                    <button key={`e-${i}`} type="button" className="kana-cell empty" tabIndex={-1} />
                  )
                )}
              </div>
            )}
          </ZenCard>
        </div>
      </div>

      {selected && (
        <div className="kana-modal-backdrop" onClick={() => setSelected(null)}>
          <div className="kana-modal" onClick={(e) => e.stopPropagation()}>
            <div className="kana-romaji">{ROMAJI[selected] || ""}</div>
            <div className="kana-huge">
              {script === "katakana" ? hiraToKata(selected) : selected}
            </div>
            <div className="example-jp" style={{ marginBottom: 4 }}>
              例：{selected === "あ" ? "あさ（早上）" : `${selected}行`}
            </div>
            <button
              type="button"
              className="tts-circle"
              onClick={() => toast.push(`（Mock）朗讀 ${selected}`, "success")}
            >
              <Icon name="volume" size={24} />
            </button>
            <div style={{ marginTop: 16 }}>
              <ZenButton variant="ghost" onClick={() => setSelected(null)}>關閉</ZenButton>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

function hiraToKata(ch) {
  const code = ch.charCodeAt(0);
  if (code >= 0x3041 && code <= 0x3096) return String.fromCharCode(code + 0x60);
  return ch;
}

Object.assign(window, { GojuuonPage });