/* global React, ReactDOM, useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor, TweakToggle, TweakSelect */
// Flashy Jewellery — root app

const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "gold",
  "heroVariant": "single",
  "displayFont": "Cormorant Garamond",
  "showWhatsApp": true,
  "engagementOpen": "all"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [bag, setBag] = useState([]);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [quickView, setQuickView] = useState(null);
  const [bookingOpen, setBookingOpen] = useState(false);
  const [bookingPrefill, setBookingPrefill] = useState(null);
  const [toast, setToast] = useState("");
  const engageRef = useRef(null);

  // Apply theme + font
  useEffect(() => {
    document.documentElement.dataset.theme = t.theme || "gold";
    document.documentElement.style.setProperty("--serif", `"${t.displayFont}", Georgia, serif`);
  }, [t.theme, t.displayFont]);

  const onOpenQuick = (p) => setQuickView(p);
  const onAdd = (p) => {
    setBag(prev => {
      const existing = prev.find(i => i.p.id === p.id);
      if (existing) return prev.map(i => i.p.id === p.id ? { ...i, qty: i.qty + 1 } : i);
      return [...prev, { p, qty: 1 }];
    });
    setQuickView(null);
    setToast(`${p.name.split(" ").slice(0, 3).join(" ")}… added to bag`);
    setTimeout(() => setToast(""), 2400);
    setTimeout(() => setDrawerOpen(true), 350);
  };
  const onQty = (id, q) => setBag(prev => q < 1 ? prev.filter(i => i.p.id !== id) : prev.map(i => i.p.id === id ? { ...i, qty: q } : i));
  const onRemove = (id) => setBag(prev => prev.filter(i => i.p.id !== id));

  const openBooking = (prefill = null) => {
    setBookingPrefill(prefill && prefill.cat ? prefill : null);
    setBookingOpen(true);
    setQuickView(null);
  };

  const scrollToShop = () => {
    if (engageRef.current) {
      const top = engageRef.current.getBoundingClientRect().top + window.scrollY - 64;
      window.scrollTo({ top, behavior: "smooth" });
    }
  };

  return (
    <div>
      <UtilityBar />
      <Nav bagCount={bag.reduce((s, i) => s + i.qty, 0)} onBag={() => setDrawerOpen(true)} onBook={() => openBooking()} onShop={scrollToShop} />
      <Hero onShop={scrollToShop} onBook={() => openBooking()} variant={t.heroVariant} />
      <TrustStrip />
      <CategoriesSection />
      <EngagementSection onOpen={onOpenQuick} refEl={engageRef} />
      <TennisFeature onOpen={onOpenQuick} />
      <BentoSection onBook={() => openBooking()} onOpen={onOpenQuick} />
      <GiftsSection />
      <InstagramSection onOpen={onOpenQuick} />
      <TestimonialsSection />
      <VisitSection onBook={() => openBooking()} />
      <Footer />

      {t.showWhatsApp && <WhatsAppFab />}

      {quickView && <QuickView p={quickView} onClose={() => setQuickView(null)} onAdd={onAdd} onBook={openBooking} />}
      <BookingModal open={bookingOpen} prefill={bookingPrefill} onClose={() => setBookingOpen(false)} onDone={() => {}} />
      <CartDrawer
        open={drawerOpen}
        items={bag}
        onClose={() => setDrawerOpen(false)}
        onQty={onQty}
        onRemove={onRemove}
        onBook={() => { setDrawerOpen(false); openBooking(); }}
      />

      <Toast msg={toast} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Aesthetic">
          <TweakRadio
            label="Palette"
            value={t.theme}
            onChange={(v) => setTweak("theme", v)}
            options={[
              { value: "gold", label: "Gold Souk" },
              { value: "platinum", label: "Platinum" },
              { value: "onyx", label: "Onyx Night" },
            ]}
          />
          <TweakSelect
            label="Display font"
            value={t.displayFont}
            onChange={(v) => setTweak("displayFont", v)}
            options={[
              { value: "Cormorant Garamond", label: "Cormorant Garamond" },
              { value: "Playfair Display", label: "Playfair Display" },
              { value: "Italiana", label: "Italiana" },
              { value: "DM Serif Display", label: "DM Serif Display" },
            ]}
          />
        </TweakSection>
        <TweakSection title="Layout">
          <TweakRadio
            label="Hero variant"
            value={t.heroVariant}
            onChange={(v) => setTweak("heroVariant", v)}
            options={[
              { value: "editorial", label: "Editorial" },
              { value: "single", label: "Single Plate" },
            ]}
          />
          <TweakToggle
            label="WhatsApp FAB"
            value={t.showWhatsApp}
            onChange={(v) => setTweak("showWhatsApp", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </div>
  );
}

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