/* ============================================================
   Farbodfilms — App shell, routing, cart, tweaks
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "reel",
  "accent": "theme",
  "grain": "auto"
}/*EDITMODE-END*/;

// Accent is an optional global override. "theme" (default) = each direction
// keeps its own accent. Picking a swatch overrides across all directions.
const ACCENT_FG = {
  "#E0392B": "#F4EFE7",
  "oklch(0.74 0.09 235)": "oklch(0.16 0.02 235)",
  "oklch(0.78 0.12 70)": "oklch(0.19 0.04 70)",
  "oklch(0.74 0.11 20)": "oklch(0.17 0.03 20)",
  "oklch(0.76 0.09 150)": "oklch(0.17 0.03 150)",
};
const ACCENT_OPTIONS = Object.keys(ACCENT_FG);

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState("home");
  const [cart, setCart] = React.useState([]);
  const [cartOpen, setCartOpen] = React.useState(false);
  const [toast, setToast] = React.useState(null);
  const scrollRef = React.useRef(null);

  const theme = THEMES[t.direction] ? t.direction : "reel";
  const themeDef = THEMES[theme];
  const grain = t.grain === "on" ? true : t.grain === "off" ? false : themeDef.grain;

  // apply theme css vars + fonts to root
  const rootStyle = React.useMemo(() => {
    const accentFg = ACCENT_FG[t.accent];
    const accent = accentFg ? { "--accent": t.accent, "--accent-fg": accentFg } : null;
    return {
      ...themeDef.vars,
      ...(accent || {}),
      "--font-display": themeDef.fonts.display,
      "--font-body": themeDef.fonts.body,
      "--font-mono": themeDef.fonts.mono,
    };
  }, [theme, t.accent]);

  const go = (r) => {
    setCartOpen(false);
    setRoute(r);
    if (scrollRef.current) scrollRef.current.scrollTop = 0;
  };

  const addToCart = (p) => {
    setCart((c) => (c.find((x) => x.id === p.id) ? c : [...c, p]));
    setToast(p.name + " added to cart");
    setCartOpen(true);
  };
  const buyNow = (p) => {
    setCart((c) => (c.find((x) => x.id === p.id) ? c : [...c, p]));
    go("checkout");
  };
  const removeItem = (idx) => setCart((c) => c.filter((_, i) => i !== idx));
  const resetCart = () => setCart([]);

  React.useEffect(() => {
    if (!toast) return;
    const id = setTimeout(() => setToast(null), 2200);
    return () => clearTimeout(id);
  }, [toast]);

  let view;
  if (route === "home") view = <Home go={go} addToCart={addToCart} theme={theme} />;
  else if (route === "shop") view = <Shop go={go} addToCart={addToCart} theme={theme} />;
  else if (route.startsWith("product:"))
    view = <ProductPage id={route.split(":")[1]} go={go} addToCart={addToCart} theme={theme} buyNow={buyNow} />;
  else if (route === "checkout") view = <Checkout items={cart} go={go} complete={() => go("success")} />;
  else if (route === "success") view = <Success items={cart} go={go} resetCart={resetCart} />;
  else if (route === "about") view = <About go={go} />;
  else if (route === "faq") view = <FAQ go={go} />;
  else view = <Home go={go} addToCart={addToCart} theme={theme} />;

  const hideChrome = route === "success";

  return (
    <div className={"app theme-" + theme + (grain ? " has-grain" : "")} style={rootStyle}>
      {grain && <div className="app-grain" aria-hidden="true" />}
      <Nav go={go} route={route.split(":")[0]} cartCount={cart.length} openCart={() => setCartOpen(true)} theme={theme} />
      <div className="app-scroll" ref={scrollRef}>
        <main className="app-main">{view}</main>
        {!hideChrome && <Footer go={go} />}
      </div>

      <CartDrawer
        open={cartOpen}
        close={() => setCartOpen(false)}
        items={cart}
        removeItem={removeItem}
        checkout={() => go("checkout")}
      />

      {toast && <div className="toast">{toast}</div>}

      <TweaksPanel>
        <TweakSection label="Direction" />
        <p className="tweak-blurb">{themeDef.blurb}</p>
        <TweakRadio
          label="Look & feel"
          value={t.direction}
          options={[{ value: "reel", label: "Reel" }, { value: "editorial", label: "Edit" }, { value: "analog", label: "Analog" }]}
          onChange={(v) => setTweak("direction", v)}
        />
        <TweakSection label="Accent" />
        <p className="tweak-blurb">Cinema Scarlet is your brand red. Override it here to preview alternatives.</p>
        <TweakColor
          label="Colour"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak("accent", v)}
        />
        <TweakButton label="Reset to brand Scarlet" secondary onClick={() => setTweak("accent", "theme")} />
        <TweakSection label="Texture" />
        <TweakRadio
          label="Film grain"
          value={t.grain}
          options={["auto", "on", "off"]}
          onChange={(v) => setTweak("grain", v)}
        />
      </TweaksPanel>
    </div>
  );
}

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