/* ============================================================
   lookslikeagoodman — App shell: routing, global state, tweaks
   ============================================================ */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": ["#b8924a", "#1e2a20", "#f7f3ea"],
  "btnStyle": "solid",
  "heroLayout": "collage",
  "headlineFont": "'Cormorant Garamond', Georgia, serif",
  "heroHeadline": "Looks like a good man.",
  "heroSub": "Agbada, kaftans and tailored sets from lookslikeagoodman — enquire to order or commission a made-to-measure piece."
}/*EDITMODE-END*/;

const PALETTE_MAP = { "#b8924a": "goldforest" };
const PALETTE_OPTS = [["#b8924a", "#1e2a20", "#f7f3ea"]];
const FONT_OPTS = [
  { value: "'Cormorant Garamond', Georgia, serif", label: "Cormorant (elegant)" },
  { value: "'Playfair Display', Georgia, serif", label: "Playfair (editorial)" },
  { value: "'Marcellus', Georgia, serif", label: "Marcellus (roman)" },
  { value: "'Bodoni Moda', Georgia, serif", label: "Bodoni (high-fashion)" },
  { value: "'Jost', sans-serif", label: "Jost (modern sans)" },
];

const store = {
  get(k, d) { try { const v = localStorage.getItem("llgm_" + k); return v ? JSON.parse(v) : d; } catch { return d; } },
  set(k, v) { try { localStorage.setItem("llgm_" + k, JSON.stringify(v)); } catch {} },
};

/* House standard: NGN is the primary currency. This build shows "Enquire"-only
   pricing (no currency toggle), but on every load we still clear any stale
   currency-choice keys a prior USD-primary build may have left behind. */
["rb_currency", "rb_currency_v2", "currency_v2", "currency_choice_made"].forEach((k) => {
  try { localStorage.removeItem(k); } catch {}
});

/* Shared enquiry/order reference — house prefix LLAGM. */
function genRef() {
  return "LLAGM-" + Math.random().toString(36).toUpperCase().replace(/[^A-Z0-9]/g, "").slice(0, 6);
}
window.genRef = genRef;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState({ name: "home", params: {} });
  const [cart, setCart] = useState(() => store.get("cart", []));
  const [wishlist, setWishlist] = useState(() => store.get("wishlist", []));
  const [cartOpen, setCartOpen] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);

  useEffect(() => {
    const r = document.documentElement;
    r.setAttribute("data-theme", "light");
    const pal = PALETTE_MAP[(t.palette && t.palette[0]) || "#b8924a"] || "goldforest";
    r.setAttribute("data-palette", pal);
    r.setAttribute("data-btn", t.btnStyle || "solid");
    r.style.setProperty("--font-display", t.headlineFont || "'Cormorant Garamond', serif");
  }, [t.palette, t.btnStyle, t.headlineFont]);

  useEffect(() => store.set("cart", cart), [cart]);
  useEffect(() => store.set("wishlist", wishlist), [wishlist]);
  useEffect(() => { document.body.classList.toggle("no-scroll", cartOpen || searchOpen); }, [cartOpen, searchOpen]);

  const onNav = (name, params = {}) => {
    setRoute({ name, params });
    setCartOpen(false); setSearchOpen(false);
    window.scrollTo({ top: 0, behavior: "auto" });
  };

  const addToCart = (p, opts = {}) => {
    const size = opts.size || p.sizes[0];
    const color = opts.color || p.colors[0].name;
    const qty = opts.qty || 1;
    const key = p.id + "|" + size + "|" + color;
    setCart((prev) => {
      const ex = prev.find((x) => x.key === key);
      if (ex) return prev.map((x) => x.key === key ? { ...x, qty: x.qty + qty } : x);
      return [...prev, { key, id: p.id, name: p.name, label: p.label, size, color, qty }];
    });
  };
  const updateQty = (key, d) => setCart((prev) => prev.map((x) => x.key === key ? { ...x, qty: Math.max(1, x.qty + d) } : x));
  const removeFromCart = (key) => setCart((prev) => prev.filter((x) => x.key !== key));
  const clearCart = () => setCart([]);
  const toggleWish = (id) => setWishlist((prev) => prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]);

  const cartCount = cart.reduce((s, x) => s + x.qty, 0);

  const ctx = {
    cart, addToCart, updateQty, removeFromCart, clearCart, cartCount,
    wishlist, toggleWish, wishCount: wishlist.length,
    cartOpen, openCart: () => setCartOpen(true), closeCart: () => setCartOpen(false),
    searchOpen, openSearch: () => setSearchOpen(true), closeSearch: () => setSearchOpen(false),
    onNav,
  };

  const PAGES = {
    home: HomePage, shop: ShopPage, collections: CollectionsPage, product: ProductPage,
    cart: CartPage, checkout: CheckoutPage, about: AboutPage, contact: ContactPage,
    account: AccountPage, wishlist: WishlistPage, bespoke: BespokePage, custom: BespokePage,
    lookbook: LookbookPage,
  };
  const Page = PAGES[route.name] || HomePage;
  const hideChrome = route.name === "checkout";

  return (
    <RBCtx.Provider value={ctx}>
      {!hideChrome && <Header route={route} onNav={onNav} heroLayout={t.heroLayout} />}
      <main>
        <Page route={route} onNav={onNav} tweaks={t} />
      </main>
      {!hideChrome && <Footer onNav={onNav} />}
      <CartDrawer />
      <SearchOverlay />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Theme" />
        <TweakColor label="Palette" value={t.palette} options={PALETTE_OPTS} onChange={(v) => setTweak("palette", v)} />
        <TweakSelect label="Button style" value={t.btnStyle}
          options={[{ value: "solid", label: "Solid" }, { value: "outline", label: "Outline" }, { value: "minimal", label: "Minimal (underline)" }, { value: "pill", label: "Pill" }]}
          onChange={(v) => setTweak("btnStyle", v)} />

        <TweakSection label="Typography" />
        <TweakSelect label="Headline font" value={t.headlineFont} options={FONT_OPTS} onChange={(v) => setTweak("headlineFont", v)} />

        <TweakSection label="Hero" />
        <TweakSelect label="Layout" value={t.heroLayout}
          options={[
            { value: "collage", label: "Collage — 4-panel" },
            { value: "carousel", label: "Carousel — auto-slide" },
          ]}
          onChange={(v) => { setTweak("heroLayout", v); if (route.name !== "home") onNav("home", {}); }} />
        <TweakText label="Headline" value={t.heroHeadline} onChange={(v) => setTweak("heroHeadline", v)} />
        <TweakText label="Subtext" value={t.heroSub} onChange={(v) => setTweak("heroSub", v)} />
        <TweakButton label="View homepage hero" secondary onClick={() => onNav("home", {})} />
      </TweaksPanel>
    </RBCtx.Provider>
  );
}

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