// app.jsx — top-level app + router + tweaks integration

const { useState: useApp1, useEffect: useApp2 } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "homeVariant": "editorial",
  "primaryBlue": "#0E3FA8",
  "fireAccent": true,
  "displayFont": "Anton",
  "density": "regular",
  "texture": "paper",
  "cardStyle": "clean"
}/*EDITMODE-END*/;

const BLUE_PALETTES = {
  "#0E3FA8": { 700: "#0E3FA8", 800: "#0A2467", 600: "#1853C8", 500: "#2E6BE6", 400: "#5C8EF0", 200: "#B7CEF7", 100: "#DDE7F9", 900: "#051538" },
  "#1A4FCA": { 700: "#1A4FCA", 800: "#0F2F87", 600: "#2864E1", 500: "#4178EE", 400: "#7195F1", 200: "#C2D2F7", 100: "#E1EAFA", 900: "#091B4D" },
  "#063587": { 700: "#063587", 800: "#031F5F", 600: "#0A4DB0", 500: "#1E6BD5", 400: "#4D89E0", 200: "#A8C0E8", 100: "#D6E0EE", 900: "#02143F" },
  "#1C8AE0": { 700: "#1C8AE0", 800: "#0E5FA8", 600: "#2D9CEC", 500: "#5BB1F0", 400: "#85C5F5", 200: "#C5E3FA", 100: "#E2F1FD", 900: "#073A6E" },
};

function applyTweaks(t) {
  const root = document.documentElement;
  const palette = BLUE_PALETTES[t.primaryBlue] || BLUE_PALETTES["#0E3FA8"];
  Object.entries(palette).forEach(([k, v]) => root.style.setProperty(`--orah-blue-${k}`, v));
  root.setAttribute("data-density", t.density);
  root.setAttribute("data-texture", t.texture);
  root.setAttribute("data-cardstyle", t.cardStyle);
  // accent toggle
  if (!t.fireAccent) {
    root.style.setProperty("--orah-fire-500", "#B7CEF7");
    root.style.setProperty("--orah-fire-400", "#5C8EF0");
    root.style.setProperty("--orah-fire-700", "#0A2467");
    root.style.setProperty("--orah-fire-200", "#DDE7F9");
  } else {
    root.style.removeProperty("--orah-fire-500");
    root.style.removeProperty("--orah-fire-400");
    root.style.removeProperty("--orah-fire-700");
    root.style.removeProperty("--orah-fire-200");
  }
  // display font
  const f = t.displayFont === "Archivo Black" ? '"Archivo Black"' :
            t.displayFont === "Bebas Neue" ? '"Bebas Neue"' :
            t.displayFont === "Unbounded" ? '"Unbounded"' :
            '"Anton"';
  root.style.setProperty("--f-display", `${f}, "Archivo Black", system-ui, sans-serif`);
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [viewport, setViewport] = useApp1(() =>
    typeof window !== "undefined" && window.innerWidth < 768 ? "mobile" : "desktop"
  );
  const [theme, setTheme] = useApp1("light");
  const [introKey, setIntroKey] = useApp1(0);
  const [introDone, setIntroDone] = useApp1(false);

  useApp2(() => { applyTweaks(t); }, [t]);
  useApp2(() => { document.documentElement.setAttribute("data-theme", theme); }, [theme]);

  return (
    <>
      <Hostbar
        viewport={viewport} setViewport={setViewport}
        theme={theme} setTheme={setTheme}
        onReplayIntro={() => { setIntroDone(false); setIntroKey((k) => k + 1); }}
      />

      <div className="viewport-stage">
        <div className="viewport-frame" data-vp={viewport}>
          {!introDone && <Intro replayKey={introKey} onDone={() => setIntroDone(true)} />}
          <ShopProvider>
            <RouterUI viewport={viewport} cardStyle={t.cardStyle} homeVariant={t.homeVariant} />
          </ShopProvider>
        </div>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Layout" />
        <TweakRadio
          label="variante home"
          value={t.homeVariant}
          options={[
            { value: "editorial", label: "editorial" },
            { value: "street", label: "streetwear" },
          ]}
          onChange={(v) => setTweak("homeVariant", v)}
        />
        <TweakRadio
          label="densidade"
          value={t.density}
          options={[
            { value: "compact", label: "compact" },
            { value: "regular", label: "regular" },
            { value: "airy", label: "airy" },
          ]}
          onChange={(v) => setTweak("density", v)}
        />
        <TweakRadio
          label="cards"
          value={t.cardStyle}
          options={[
            { value: "clean", label: "clean" },
            { value: "label", label: "etiqueta" },
          ]}
          onChange={(v) => setTweak("cardStyle", v)}
        />

        <TweakSection label="Cor & textura" />
        <TweakColor
          label="azul ORAH"
          value={t.primaryBlue}
          options={Object.keys(BLUE_PALETTES)}
          onChange={(v) => setTweak("primaryBlue", v)}
        />
        <TweakToggle
          label="acento fogo"
          value={t.fireAccent}
          onChange={(v) => setTweak("fireAccent", v)}
        />
        <TweakRadio
          label="textura"
          value={t.texture}
          options={[
            { value: "paper", label: "papel" },
            { value: "none", label: "liso" },
          ]}
          onChange={(v) => setTweak("texture", v)}
        />

        <TweakSection label="Tipografia" />
        <TweakSelect
          label="display"
          value={t.displayFont}
          options={["Anton", "Archivo Black", "Bebas Neue", "Unbounded"]}
          onChange={(v) => setTweak("displayFont", v)}
        />
      </TweaksPanel>
    </>
  );
}

function RouterUI({ viewport, cardStyle, homeVariant }) {
  const { page, drawer } = useShop();

  return (
    <>
      {page !== "admin" && page !== "checkout" && <Header />}
      <MobileMenu />
      <CartDrawer />
      <SearchDrawer />

      {page === "home" && (homeVariant === "street" ? <HomeStreet /> : <HomeEditorial />)}
      {page === "shop" && <ShopPage />}
      {page === "product" && <ProductPage />}
      {page === "cart" && <CartPage />}
      {page === "checkout" && <CheckoutPage />}
      {page === "wishlist" && <WishlistPage />}
      {page === "account" && <AccountPage />}
      {page === "manifesto" && <ManifestoPage />}
      {page === "about" && <AboutPage />}
      {page === "contact" && <ContactPage />}
      {page === "admin" && <AdminPage />}

      {page !== "admin" && page !== "checkout" && <Footer />}
      {viewport === "mobile" && page !== "admin" && page !== "checkout" && <MobileBottomNav />}
    </>
  );
}

function MobileBottomNav() {
  const { goto, page, setDrawer, cart } = useShop();
  const count = cart.reduce((a, b) => a + b.qty, 0);
  return (
    <nav className="mob-bottom">
      <div className={"b " + (page === "home" ? "active" : "")} onClick={() => goto("home")}>
        <Icon name="dot" size={16} /> Home
      </div>
      <div className={"b " + (page === "shop" ? "active" : "")} onClick={() => goto("shop")}>
        <Icon name="tag" size={16} /> Loja
      </div>
      <div className="b" onClick={() => setDrawer("search")}>
        <Icon name="search" size={16} /> Buscar
      </div>
      <div className={"b " + (page === "wishlist" ? "active" : "")} onClick={() => goto("wishlist")}>
        <Icon name="heart" size={16} /> Desejos
      </div>
      <div className={"b " + (page === "account" ? "active" : "")} onClick={() => goto("account")}>
        <Icon name="user" size={16} /> Conta
      </div>
    </nav>
  );
}

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