// redesign/app.jsx — Wired to live API.
// Same shape as the prototype's app.jsx, but data comes from useDashData().

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "violet",
  "dark": true,
  "density": "cozy"
}/*EDITMODE-END*/;

const ACCENTS = {
  violet: { c: "oklch(0.65 0.18 295)", h: "oklch(0.72 0.18 295)" },
  blue:   { c: "oklch(0.65 0.16 245)", h: "oklch(0.72 0.16 245)" },
  teal:   { c: "oklch(0.7 0.14 180)",  h: "oklch(0.78 0.14 180)" },
  lime:   { c: "oklch(0.78 0.18 130)", h: "oklch(0.84 0.18 130)" },
  amber:  { c: "oklch(0.78 0.16 70)",  h: "oklch(0.84 0.16 70)" },
  rose:   { c: "oklch(0.7 0.18 20)",   h: "oklch(0.76 0.18 20)" },
};

function App() {
  const [data, refetch] = useDashData();
  const [tab, setTab] = useState("dashboard");
  const [collapsed, setCollapsed] = useState(false);
  const [mobileNav, setMobileNav] = useState(false);
  const [selectedKw, setSelectedKw] = useState(null);

  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { accent, dark, density } = tweaks;

  useEffect(() => {
    const root = document.documentElement;
    root.setAttribute("data-theme", dark ? "dark" : "light");
    root.setAttribute("data-density", density);
    const a = ACCENTS[accent] || ACCENTS.violet;
    root.style.setProperty("--accent", a.c);
    root.style.setProperty("--accent-hover", a.h);
    root.style.setProperty("--accent-soft", a.c.replace("oklch(", "oklch(").replace(")", " / 0.14)"));
  }, [accent, dark, density]);

  useEffect(() => {
    const onKey = e => { if (e.key === "Escape") setSelectedKw(null); };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  // ── Live action handlers (wired to AS_API) ──────────────
  const handleStart = async (opts) => {
    try { await AS_API.controlStart(opts || { mode: 'smart', count: data.CONFIG.defaultBatchCount }); refetch(); }
    catch (e) { console.error('start failed', e); alert('시작 실패: ' + (e.error || e.message || 'unknown')); }
  };
  const handleStop = async () => {
    try { await AS_API.controlStop(); refetch(); }
    catch (e) { console.error('stop failed', e); }
  };

  const running = data.STATUS.autosourcing;

  return (
    <div className="app" data-collapsed={collapsed ? "1" : "0"} data-mobile-nav={mobileNav ? "1" : "0"}>
      <Sidebar
        active={tab}
        onNav={(id) => { setTab(id); setMobileNav(false); }}
        collapsed={collapsed}
        onToggle={() => setCollapsed(c => !c)}
      />
      <div className="app-main">
        <Topbar
          active={tab}
          running={running}
          onStart={handleStart}
          onStop={handleStop}
          onMobileNav={() => setMobileNav(v => !v)}
        />
        <div className="app-content">
          {data.error && (
            <div className="card" style={{ borderColor: 'var(--bad)', padding: 14, marginBottom: 14 }}>
              ⚠ API 오류: {data.error} — server.js가 :3849 에서 실행중인지 확인하세요.
            </div>
          )}
          {tab === "dashboard" && <DashboardTab data={data} onSelectKw={setSelectedKw}/>}
          {tab === "history"   && <HistoryTab data={data} onSelectKw={setSelectedKw}/>}
          {tab === "control"   && <ControlTab onStart={handleStart} onStop={handleStop} running={running}/>}
          {tab === "queue"     && <QueueTab data={data}/>}
          {tab === "scrape"    && <Scrape1688Tab/>}
          {tab === "logs"      && <LogsTab/>}
          {tab === "patterns"  && <PatternsTab data={data}/>}
          {tab === "prompts"   && <PromptsTab/>}
          {tab === "settings"  && (
            <SettingsTab
              accent={accent} setAccent={(v) => setTweak("accent", v)}
              dark={dark} setDark={(v) => setTweak("dark", v)}
              density={density} setDensity={(v) => setTweak("density", v)}
            />
          )}
        </div>
      </div>

      {selectedKw && <DetailModal kw={selectedKw} onClose={() => setSelectedKw(null)}/>}

      <TweaksPanel title="Tweaks">
        <TweakSection title="외관">
          <TweakRadio
            label="테마"
            value={dark ? "dark" : "light"}
            onChange={(v) => setTweak("dark", v === "dark")}
            options={[{ value: "dark", label: "다크" }, { value: "light", label: "라이트" }]}
          />
          <TweakRadio
            label="액센트"
            value={accent}
            onChange={(v) => setTweak("accent", v)}
            options={Object.keys(ACCENTS).map(k => ({ value: k, label: k }))}
          />
          <TweakRadio
            label="밀도"
            value={density}
            onChange={(v) => setTweak("density", v)}
            options={[
              { value: "compact", label: "조밀" },
              { value: "cozy",    label: "보통" },
              { value: "spacious",label: "넉넉" },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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