// app.jsx — root, router switch, tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D9341F",
  "palette": ["#F2EFE7", "#0A0A0B"],
  "showKanji": true,
  "kaijuBg": true,
  "density": "comfy"
}/*EDITMODE-END*/;

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

  // Apply tweakable tokens
  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--vermillion", t.accent);
    root.style.setProperty("--paper", t.palette[0]);
    root.style.setProperty("--ink", t.palette[1]);
    // derive paper-2 and ink-2 from the chosen pair
    root.style.setProperty("--paper-2", mix(t.palette[0], t.palette[1], 0.08));
    root.style.setProperty("--ink-2", mix(t.palette[1], t.palette[0], 0.12));
    root.style.setProperty("--mist", mix(t.palette[0], t.palette[1], 0.42));
    root.style.setProperty("--line", `color-mix(in oklab, ${t.palette[1]} 10%, transparent)`);
    document.body.style.background = t.palette[0];
    document.body.style.color = t.palette[1];
    // Hide kanji optionally
    document.documentElement.style.setProperty("--kanji-display", t.showKanji ? "inline" : "none");
  }, [t.accent, t.palette, t.showKanji]);

  const { route } = useRoute();
  let page;
  switch (route) {
    case "products":         page = <ProductsPage />; break;
    case "toronto-events":   page = <TorontoEventsPage />; break;
    case "about":            page = <AboutPage />; break;
    case "contact":          page = <ContactPage />; break;
    case "privacy":          page = <PrivacyPage />; break;
    case "terms":            page = <TermsPage />; break;
    default:                 page = <HomePage />;
  }

  return (
    <div style={{ display: t.showKanji ? "block" : "block" }}>
      {!t.showKanji && <style>{`.brand-kanji{display:none !important}`}</style>}
      {!t.kaijuBg && <style>{`.kaiju-bg{display:none !important}`}</style>}
      <Header />
      {page}
      <Footer />

      <TweaksPanel>
        <TweakSection label="Palette" />
        <TweakColor label="Paper × ink" value={t.palette}
          options={[
            ["#F2EFE7", "#0A0A0B"],  // default — washi paper / sumi ink
            ["#F5F0E4", "#1A1410"],  // warm
            ["#EDEEEA", "#0B0E10"],  // cool stone
            ["#0A0A0B", "#F2EFE7"],  // inverted — night mode
            ["#1C1C1F", "#F2EFE7"],  // soft dark
          ]}
          onChange={v => setTweak('palette', v)}
        />
        <TweakColor label="Accent" value={t.accent}
          options={[
            "#D9341F",  // vermillion (default)
            "#C8203A",  // crimson
            "#E87800",  // amber
            "#5B8C46",  // matcha
            "#3F5AAE",  // indigo
            "#A458C9",  // ultraviolet
          ]}
          onChange={v => setTweak('accent', v)}
        />

        <TweakSection label="Motifs" />
        <TweakToggle label="Kanji in wordmark" value={t.showKanji}
          onChange={v => setTweak('showKanji', v)} />
        <TweakToggle label="Kaiju silhouette" value={t.kaijuBg}
          onChange={v => setTweak('kaijuBg', v)} />

        <TweakSection label="Navigate" />
        <NavTweaks />
      </TweaksPanel>
    </div>
  );
}

function NavTweaks() {
  const { route, go } = useRoute();
  const pages = [
    ["home", "Home"],
    ["products", "Products"],
    ["toronto-events", "Toronto Events"],
    ["about", "About"],
    ["contact", "Contact"],
    ["privacy", "Privacy"],
    ["terms", "Terms"],
  ];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
      {pages.map(([id, label]) => (
        <button key={id} onClick={() => go(id)}
          style={{
            padding: "6px 8px", fontSize: 11, borderRadius: 6,
            border: "1px solid rgba(0,0,0,.1)",
            background: route === id ? "rgba(0,0,0,.85)" : "transparent",
            color: route === id ? "white" : "inherit",
            cursor: "pointer", fontFamily: "inherit", textAlign: "left"
          }}>{label}</button>
      ))}
    </div>
  );
}

// Small color mix helper for derived tokens
function mix(a, b, amt) {
  const pa = parseHex(a), pb = parseHex(b);
  const r = Math.round(pa[0] * (1 - amt) + pb[0] * amt);
  const g = Math.round(pa[1] * (1 - amt) + pb[1] * amt);
  const bl = Math.round(pa[2] * (1 - amt) + pb[2] * amt);
  return `rgb(${r}, ${g}, ${bl})`;
}
function parseHex(h) {
  const m = h.replace("#", "");
  return [parseInt(m.slice(0, 2), 16), parseInt(m.slice(2, 4), 16), parseInt(m.slice(4, 6), 16)];
}

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