// app.jsx — wires data + grid + detail + Tweaks panel.

const FONTS = {
  pretendard: '"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
  system: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
  helvetica: '"Helvetica Neue", Helvetica, Arial, "Pretendard Variable", sans-serif',
};

// Light-mode background presets (bg → matching secondary surface).
const LIGHT_BG = {
  "#ffffff": "#f5f5f7", // 순백
  "#fbfaf8": "#f1efe9", // 웜 화이트
  "#f6f7f9": "#eceef2", // 쿨 그레이
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "cols": 3,
  "gap": 28,
  "font": "pretendard",
  "bg": "#ffffff",
  "dark": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [open, setOpen] = React.useState(null);

  const rootStyle = {
    "--cols": t.cols,
    "--gap": `${t.gap}px`,
    "--font-body": FONTS[t.font] || FONTS.pretendard,
  };
  if (!t.dark) {
    rootStyle["--bg"] = t.bg;
    rootStyle["--surface"] = LIGHT_BG[t.bg] || "#f5f5f7";
  }

  // Lock body scroll when a detail view is open.
  React.useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);

  return (
    <div className="app-root" data-theme={t.dark ? "dark" : "light"} style={rootStyle}>
      <GridView projects={window.PROJECTS} onOpen={setOpen} />

      {open && <DetailView project={open} onClose={() => setOpen(null)} key={open.id} />}

      <TweaksPanel>
        <TweakSection label="레이아웃" />
        <TweakSlider label="그리드 열 개수" value={t.cols} min={2} max={4} step={1}
          onChange={(v) => setTweak("cols", v)} />
        <TweakSlider label="카드 간격" value={t.gap} min={12} max={56} step={4} unit="px"
          onChange={(v) => setTweak("gap", v)} />

        <TweakSection label="타이포그래피" />
        <TweakSelect label="폰트" value={t.font}
          options={[
            { value: "pretendard", label: "Pretendard (기본)" },
            { value: "system", label: "시스템 SF Pro" },
            { value: "helvetica", label: "Helvetica Neue" },
          ]}
          onChange={(v) => setTweak("font", v)} />

        <TweakSection label="테마" />
        <TweakToggle label="다크 모드" value={t.dark}
          onChange={(v) => setTweak("dark", v)} />
        <TweakColor label="배경색 (라이트)" value={t.bg}
          options={["#ffffff", "#fbfaf8", "#f6f7f9"]}
          onChange={(v) => setTweak("bg", v)} />
      </TweaksPanel>
    </div>
  );
}

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