// ────── ROOT APP ──────
const { useState, useEffect } = React;

function App() {
  const T = window.TWEAK_DEFAULTS;
  const [t, setTweak] = useTweaks(T);

  const [page, setPage] = useState('hub');
  const [projectName, setProjectName] = useState('未命名项目');
  const [cmd, setCmd] = useState(false);
  const [push, toastNode] = window.useToasts();

  // apply tweaks to body
  useEffect(() => {
    const themes = {
      amber:   { '--accent':'#f5a623', '--accent-dim':'#b87a18', '--accent-glow':'rgba(245,166,35,.35)', '--accent-soft':'rgba(245,166,35,.12)', '--bd-accent':'rgba(245,166,35,.45)' },
      cyan:    { '--accent':'#5ad1e6', '--accent-dim':'#2d8898', '--accent-glow':'rgba(90,209,230,.35)', '--accent-soft':'rgba(90,209,230,.12)', '--bd-accent':'rgba(90,209,230,.45)' },
      mint:    { '--accent':'#5cdc9a', '--accent-dim':'#2d8856', '--accent-glow':'rgba(92,220,154,.35)', '--accent-soft':'rgba(92,220,154,.12)', '--bd-accent':'rgba(92,220,154,.45)' },
      magenta: { '--accent':'#e668c2', '--accent-dim':'#9c3e80', '--accent-glow':'rgba(230,104,194,.35)', '--accent-soft':'rgba(230,104,194,.12)', '--bd-accent':'rgba(230,104,194,.45)' },
    };
    const v = themes[t.theme] || themes.amber;
    Object.entries(v).forEach(([k, val]) => document.documentElement.style.setProperty(k, val));
    document.body.dataset.mode = t.mode;
    document.body.dataset.crt = t.crt ? 'on' : 'off';
    document.body.dataset.density = t.density;
    document.body.dataset.fontmode = t.fontMode;
    document.body.dataset.termlog = t.termLog ? 'on' : 'off';
    document.documentElement.style.setProperty('--dur', String(t.animSpeed));
  }, [t]);

  // ⌘K
  useEffect(() => {
    const h = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); setCmd(c => !c); }
      if (e.key === 'Escape') setCmd(false);
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, []);

  const props = { setPage, projectName, setProjectName, pushToast: push, openProject: setPage };

  return (
    <div className="app" data-screen-label={`StoryCotrl Studio · ${page}`}>
      <Sidebar active={page} setActive={setPage} />
      <div className="stage">
        <TopBar pageId={page} projectName={projectName} setPage={setPage} openCmd={() => setCmd(true)} />
        {page === 'hub'    && <PageHub        {...props} />}
        {page === 'bench'  && <PageWorkbench  {...props} />}
        {page === 'asset'  && <PageAssets     {...props} />}
        {page === 'script' && <PageScript     {...props} />}
        {page === 'board'  && <PageStoryboard {...props} />}
        {page === 'export' && <PageExport     {...props} />}
        {page === 'model'  && <PageSettings   {...props} />}
      </div>

      {cmd && <CmdPalette setPage={setPage} close={() => setCmd(false)} />}
      {toastNode}
      <TerminalLog />

      <TweaksPanel>
        <TweakSection label="主题" />
        <TweakRadio label="主题色" value={t.theme}
          options={[{value:'amber',label:'琥珀'},{value:'cyan',label:'青蓝'},{value:'mint',label:'翠绿'},{value:'magenta',label:'品红'}]}
          onChange={v => setTweak('theme', v)} />
        <TweakRadio label="模式" value={t.mode}
          options={[{value:'dark',label:'暗'},{value:'light',label:'亮'}]}
          onChange={v => setTweak('mode', v)} />

        <TweakSection label="字体" />
        <TweakRadio label="字体族" value={t.fontMode}
          options={[{value:'sans',label:'无衬线'},{value:'mono',label:'等宽'},{value:'serif',label:'衬线'}]}
          onChange={v => setTweak('fontMode', v)} />

        <TweakSection label="布局" />
        <TweakRadio label="信息密度" value={t.density}
          options={[{value:'compact',label:'紧凑'},{value:'regular',label:'标准'},{value:'comfy',label:'宽松'}]}
          onChange={v => setTweak('density', v)} />

        <TweakSection label="效果" />
        <TweakToggle label="CRT 扫描线" value={t.crt} onChange={v => setTweak('crt', v)} />
        <TweakToggle label="终端日志" value={t.termLog} onChange={v => setTweak('termLog', v)} />
        <TweakSlider label="动画速度" value={t.animSpeed} min={0.3} max={2.5} step={0.1}
          onChange={v => setTweak('animSpeed', v)} />
      </TweaksPanel>
    </div>
  );
}

function CmdPalette({ setPage, close }) {
  const items = [
    { ico: '◫', nm: '前往 项目中心', kbd: '1', go: 'hub' },
    { ico: '⊕', nm: '前往 项目工作台', kbd: '2', go: 'bench' },
    { ico: '◇', nm: '前往 数字资产', kbd: '3', go: 'asset' },
    { ico: '☰', nm: '前往 剧本与流程', kbd: '4', go: 'script' },
    { ico: '▦', nm: '前往 分镜表', kbd: '5', go: 'board' },
    { ico: '↗', nm: '前往 导出', kbd: '6', go: 'export' },
    { ico: '⚙', nm: '前往 模型设置', kbd: '7', go: 'model' },
  ];
  const [q, setQ] = useState('');
  const [sel, setSel] = useState(0);
  const filt = items.filter(i => !q || i.nm.includes(q));

  useEffect(() => {
    const h = (e) => {
      if (e.key === 'ArrowDown') { e.preventDefault(); setSel(s => Math.min(filt.length - 1, s + 1)); }
      if (e.key === 'ArrowUp')   { e.preventDefault(); setSel(s => Math.max(0, s - 1)); }
      if (e.key === 'Enter')     { setPage(filt[sel].go); close(); }
    };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [filt, sel]);

  return (
    <div className="cmdk-bg" onClick={close}>
      <div className="cmdk" onClick={e => e.stopPropagation()}>
        <input className="cmdk-input" autoFocus placeholder="跳转到…   或输入命令"
          value={q} onChange={e => { setQ(e.target.value); setSel(0); }} />
        <div className="cmdk-list">
          {filt.map((it, i) => (
            <div key={i} className={`cmdk-item ${i === sel ? 'sel' : ''}`}
              onClick={() => { setPage(it.go); close(); }}
              onMouseEnter={() => setSel(i)}>
              <div className="ico">{it.ico}</div>
              <div className="nm">{it.nm}</div>
              <div className="kbd">⌘{it.kbd}</div>
            </div>
          ))}
        </div>
        <div className="cmdk-foot">
          <span>↑↓ 选择</span>
          <span>↵ 确认</span>
          <span>ESC 取消</span>
        </div>
      </div>
    </div>
  );
}

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