// Main App

function App() {
  const [page, setPage] = useState("home");
  const { code, setCode, ccy, fmt } = useCurrency();
  const cart = useCart();
  const account = useAccount();
  const library = useLibrary();

  // tweaks
  const [t, setTweak] = useTweaks(window.FBO_TWEAK_DEFAULTS);

  // Apply tweaks live as CSS variables
  useEffect(() => {
    const r = document.documentElement;
    const palette = ACCENT_PRESETS[t.accent] || ACCENT_PRESETS.gold;
    r.style.setProperty("--accent", palette.accent);
    r.style.setProperty("--accent-dim", palette.dim);
    r.style.setProperty("--accent-fg", palette.fg);

    const theme = THEMES[t.theme] || THEMES.onyx;
    Object.entries(theme).forEach(([k, v]) => r.style.setProperty(k, v));

    const f = DISPLAY_FONTS[t.displayFont] || DISPLAY_FONTS.instrument;
    r.style.setProperty("--serif", f.stack);

    r.style.setProperty("--density", t.density === "cozy" ? "0.85" : t.density === "spacious" ? "1.15" : "1");
  }, [t.accent, t.theme, t.displayFont, t.density]);

  // Scroll to top on page change
  useEffect(() => { window.scrollTo({ top: 0, behavior: "smooth" }); }, [page]);

  // Admin uses its own layout
  if (page === "admin") {
    return (
      <React.Fragment>
        <AdminApp setPage={setPage} fmt={fmt} />
        <FBOTweaks t={t} setTweak={setTweak} />
      </React.Fragment>
    );
  }
  if (page === "emails") {
    return (
      <React.Fragment>
        <EmailsGallery setPage={setPage} fmt={fmt} />
        <FBOTweaks t={t} setTweak={setTweak} />
      </React.Fragment>
    );
  }

  // Valid pages
  const valid = new Set(["home","shop","coaching","pricing","blog","about","login","signup","library","checkout","terms","privacy","refund","settings","orders"]);
  const pageToRender = valid.has(page) ? page : "404";

  return (
    <React.Fragment>
      <Nav page={page} setPage={setPage} cart={cart} fmt={fmt} ccy={ccy} setCode={setCode} account={account} />
      <main key={page}>
        {pageToRender === "home"     && <HomePage     setPage={setPage} cart={cart} fmt={fmt} ccy={ccy} />}
        {pageToRender === "shop"     && <ShopPage     cart={cart} fmt={fmt} ccy={ccy} />}
        {pageToRender === "coaching" && <CoachingPage setPage={setPage} cart={cart} fmt={fmt} ccy={ccy} />}
        {pageToRender === "pricing"  && <PricingPage  setPage={setPage} cart={cart} fmt={fmt} ccy={ccy} />}
        {pageToRender === "blog"     && <BlogPage     setPage={setPage} />}
        {pageToRender === "about"    && <AboutPage    setPage={setPage} />}
        {pageToRender === "login"    && <AccountAuthPage mode="login"  setPage={setPage} account={account} />}
        {pageToRender === "signup"   && <AccountAuthPage mode="signup" setPage={setPage} account={account} />}
        {pageToRender === "library"  && <LibraryPage  setPage={setPage} account={account} library={library} fmt={fmt} />}
        {pageToRender === "checkout" && <CheckoutPage cart={cart} fmt={fmt} ccy={ccy} account={account} library={library} setPage={setPage} />}
        {(pageToRender === "terms" || pageToRender === "privacy" || pageToRender === "refund") && <LegalPage which={pageToRender} setPage={setPage} />}
        {pageToRender === "settings" && <SettingsPage setPage={setPage} account={account} />}
        {pageToRender === "orders"   && <OrdersPage   setPage={setPage} account={account} fmt={fmt} />}
        {pageToRender === "404"      && <NotFoundPage setPage={setPage} />}
      </main>
      <Footer setPage={setPage} />
      <CartDrawer cart={cart} fmt={fmt} ccy={ccy} setPage={setPage} />
      <CookieBanner />
      <FBOTweaks t={t} setTweak={setTweak} />
    </React.Fragment>
  );
}

const ACCENT_PRESETS = {
  gold:    { accent: "#d4a04a", dim: "#8a6826", fg: "#0a0a0a" },
  ember:   { accent: "#d97757", dim: "#8a4828", fg: "#0a0a0a" },
  electric:{ accent: "#7aa2f7", dim: "#3d5a8c", fg: "#0a0a0a" },
  mint:    { accent: "#7ec8a6", dim: "#3d6a52", fg: "#0a0a0a" },
};
const THEMES = {
  onyx: { // near-black (original)
    "--bg": "#0a0a0a", "--bg-soft": "#111111", "--surface": "#161616", "--surface-2": "#1c1c1c",
    "--border": "#262626", "--border-strong": "#383838",
    "--text": "#f3ede0", "--text-2": "#a8a195", "--text-3": "#6b6557",
  },
  graphite: { // softer dark, warmer
    "--bg": "#181613", "--bg-soft": "#1e1c18", "--surface": "#252220", "--surface-2": "#2c2926",
    "--border": "#363330", "--border-strong": "#494640",
    "--text": "#f3ede0", "--text-2": "#b3aca0", "--text-3": "#7c7668",
  },
  cocoa: { // warm brown-black
    "--bg": "#1c1610", "--bg-soft": "#231c14", "--surface": "#2b2319", "--surface-2": "#352a1f",
    "--border": "#40342a", "--border-strong": "#544537",
    "--text": "#f6ede0", "--text-2": "#bba994", "--text-3": "#83735f",
  },
  bone: { // light / inverted, paper-warm
    "--bg": "#f3eee2", "--bg-soft": "#ebe5d4", "--surface": "#fbf7ec", "--surface-2": "#e6e0cd",
    "--border": "#d2c9b1", "--border-strong": "#b3a787",
    "--text": "#1a1812", "--text-2": "#56503f", "--text-3": "#857a5e",
  },
  mist: { // soft light gray-warm, between bone and dark
    "--bg": "#e6e3da", "--bg-soft": "#dcd8cc", "--surface": "#efece2", "--surface-2": "#d9d4c5",
    "--border": "#c4bca8", "--border-strong": "#a59c83",
    "--text": "#1c1a14", "--text-2": "#54503f", "--text-3": "#7d745c",
  },
};
const DISPLAY_FONTS = {
  instrument: { stack: "'Instrument Serif', 'Cormorant Garamond', serif" },
  newsreader: { stack: "'Newsreader', 'Times New Roman', serif" },
  playfair:   { stack: "'Playfair Display', 'Times New Roman', serif" },
};

function FBOTweaks({ t, setTweak }) {
  const accentHex = (ACCENT_PRESETS[t.accent] || ACCENT_PRESETS.gold).accent;
  const themeSwatchOptions = Object.entries(THEMES).map(([k, v]) => [v["--bg"], v["--surface"], v["--accent"] || "#d4a04a"]);
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Background">
        <TweakColor
          label="Theme"
          value={[THEMES[t.theme]["--bg"], THEMES[t.theme]["--surface"], (ACCENT_PRESETS[t.accent] || ACCENT_PRESETS.gold).accent]}
          options={Object.entries(THEMES).map(([k, v]) => [v["--bg"], v["--surface"], (ACCENT_PRESETS[t.accent] || ACCENT_PRESETS.gold).accent])}
          onChange={(palette) => {
            const key = Object.entries(THEMES).find(([_, v]) => v["--bg"] === palette[0])?.[0] || "onyx";
            setTweak("theme", key);
          }}
        />
      </TweakSection>
      <TweakSection label="Accent">
        <TweakColor
          label="Color"
          value={accentHex}
          options={Object.values(ACCENT_PRESETS).map(p => p.accent)}
          onChange={(hex) => {
            const key = Object.entries(ACCENT_PRESETS).find(([_, p]) => p.accent === hex)?.[0] || "gold";
            setTweak("accent", key);
          }}
        />
      </TweakSection>
      <TweakSection label="Type">
        <TweakSelect
          label="Display font"
          value={t.displayFont}
          options={[
            { value: "instrument", label: "Instrument Serif" },
            { value: "newsreader", label: "Newsreader" },
            { value: "playfair", label: "Playfair Display" },
          ]}
          onChange={(v) => setTweak("displayFont", v)}
        />
      </TweakSection>
      <TweakSection label="Density">
        <TweakRadio
          label="Spacing"
          value={t.density}
          options={[
            { value: "cozy", label: "Cozy" },
            { value: "normal", label: "Normal" },
            { value: "spacious", label: "Roomy" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

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