/* キャラ辞典 — App root */
const { useState: useS } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "hoverStyle": "glow",
  "detailLayout": "split",
  "motion": 1,
  "ambient": true,
  "showComingSoon": true
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [selected, setSelected] = useS(null);
  const chars = window.CHARACTERS;
  const current = chars.find(c => c.id === selected);

  return (
    <div className="stage">
      {/* ambient bubbles */}
      {t.ambient && <Bubbles />}

      <header className="topbar">
        <a className="brand" href="https://www.kairo-doketsu.com/#top" target="_blank" rel="noopener noreferrer">
          <img className="brand-logo" src="assets/logo.png" alt="カイロウドウケツ ロゴ" width="30" height="30" />
          <span className="brand-tx">
            <span className="brand-jp">カイロウドウケツ</span>
            <span className="brand-en">KAIROUDOUKETSU</span>
          </span>
        </a>
        <a className="back-link" href="https://www.kairo-doketsu.com/#works" target="_blank" rel="noopener noreferrer">
          ← 作品一覧へ戻る
        </a>
      </header>

      <div className="page-title">
        <h1>キャラ辞典</h1>
        <p className="page-sub">Character Dictionary ／ 気になるキャラに<span className="hint-pc">カーソルを合わせて</span><span className="hint-sp">タッチして</span>みてください</p>
      </div>

      <Hub chars={chars} tweaks={t} onSelect={setSelected} />

      {current && (
        <Detail
          char={current}
          layout={current.comingSoon ? 'split' : t.detailLayout}
          onClose={() => setSelected(null)}
        />
      )}

      <TweaksPanel>
        <TweakSection label="選択演出（ホバー時）" />
        <TweakRadio label="ハイライト" value={t.hoverStyle}
          options={['glow', 'ring', 'spotlight']}
          onChange={v => setTweak('hoverStyle', v)} />
        <TweakSection label="紹介画面" />
        <TweakRadio label="レイアウト" value={t.detailLayout}
          options={['split', 'stage', 'magazine']}
          onChange={v => setTweak('detailLayout', v)} />
        <TweakSection label="動き・背景" />
        <TweakSlider label="動きの量" value={t.motion} min={0} max={1.8} step={0.1}
          onChange={v => setTweak('motion', v)} />
        <TweakToggle label="背景のあわ" value={t.ambient}
          onChange={v => setTweak('ambient', v)} />
        <TweakToggle label="Coming soon 枠を表示" value={t.showComingSoon}
          onChange={v => setTweak('showComingSoon', v)} />
      </TweaksPanel>
    </div>
  );
}

function Bubbles() {
  const items = React.useMemo(() =>
    Array.from({ length: 14 }, (_, i) => ({
      left: Math.random() * 100,
      size: 8 + Math.random() * 34,
      dur: 14 + Math.random() * 16,
      delay: -Math.random() * 30,
      op: 0.05 + Math.random() * 0.10
    })), []);
  return (
    <div className="bubbles" aria-hidden="true">
      {items.map((b, i) =>
        <span key={i} style={{
          left: b.left + '%', width: b.size, height: b.size,
          animationDuration: b.dur + 's', animationDelay: b.delay + 's', opacity: b.op
        }} />)}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);