// app.jsx, Root app with routing, cart state, tweaks
const { useState, useEffect, useRef, useMemo } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "b",
  "accent": "#c8392e",
  "bgTone": "cream",
  "headlineFont": "Plus Jakarta",
  "cardRadius": 14,
  "density": "airy"
}/*EDITMODE-END*/;

const BG_TONES = {
  cream:    { bg: '#f4ede0', card: '#ebe3d4' },
  offwhite: { bg: '#f8f5ee', card: '#ece6d8' },
  cool:     { bg: '#eeece8', card: '#e1ddd5' },
  warm:     { bg: '#f0e6d3', card: '#e3d7be' },
};

const ACCENT_PRESETS = ['#c8392e', '#1a1a1a', '#3a5a40', '#8b5cf6'];

const FONT_PRESETS = {
  'Geist': "'Geist', system-ui, sans-serif",
  'Plus Jakarta': "'Plus Jakarta Sans', system-ui, sans-serif",
  'DM Sans': "'DM Sans', system-ui, sans-serif",
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useState('home');
  const [productId, setProductId] = useState('lite-1500');
  const [openMega, setOpenMega] = useState(null);
  const [cartOpen, setCartOpen] = useState(false);
  const [cart, setCart] = useState([]);
  const [toast, setToast] = useState({ show: false, msg: '' });

  // Apply tweaks to :root
  useEffect(() => {
    const root = document.documentElement;
    const tone = BG_TONES[t.bgTone] || BG_TONES.cream;
    root.style.setProperty('--bg', tone.bg);
    root.style.setProperty('--bg-card', tone.card);
    root.style.setProperty('--accent', t.accent);
    root.style.setProperty('--radius-card', t.cardRadius + 'px');
    root.style.setProperty('--font-display', FONT_PRESETS[t.headlineFont] || FONT_PRESETS.Geist);
    root.style.setProperty('--font-body', FONT_PRESETS[t.headlineFont] || FONT_PRESETS.Geist);
    document.body.setAttribute('data-density', t.density);
  }, [t]);

  // Close mega on page change
  useEffect(() => { setOpenMega(null); }, [page]);

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

  // Nav handler
  const nav = (to, payload) => {
    if (to === 'product' && payload) setProductId(payload);
    if (to === 'panels' || to === 'mask' || to === 'blanket' || to === 'beds' || to === 'best') {
      setPage('shop');
    } else {
      setPage(to);
    }
    setOpenMega(null);
  };

  // Cart handlers
  const addToCart = (product) => {
    setCart((prev) => {
      const existing = prev.find(i => i.product.id === product.id);
      if (existing) {
        return prev.map(i => i.product.id === product.id ? { ...i, qty: i.qty + 1 } : i);
      }
      return [...prev, { product, qty: 1 }];
    });
    setToast({ show: true, msg: `${product.name} toegevoegd aan je winkelmand` });
    setTimeout(() => setToast(t => ({ ...t, show: false })), 2200);
  };

  const changeQty = (id, delta) => {
    setCart(prev => prev
      .map(i => i.product.id === id ? { ...i, qty: i.qty + delta } : i)
      .filter(i => i.qty > 0));
  };

  const removeItem = (id) => setCart(prev => prev.filter(i => i.product.id !== id));

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

  let PageEl;
  if (page === 'home') PageEl = <HomePage tweak={t} onNav={nav} onAdd={addToCart} />;
  else if (page === 'shop') PageEl = <ShopPage onNav={nav} onAdd={addToCart} />;
  else if (page === 'product') PageEl = <ProductPage productId={productId} onNav={nav} onAdd={addToCart} />;
  else if (page === 'about') PageEl = <AboutPage onNav={nav} />;
  else PageEl = <HomePage tweak={t} onNav={nav} onAdd={addToCart} />;

  return (
    <>
      <Header
        onNav={nav}
        onOpenMega={(id) => setOpenMega(id)}
        onCloseMega={() => setOpenMega(null)}
        openMega={openMega}
        onOpenCart={() => setCartOpen(true)}
        cartCount={cartCount}
        currentPage={page}
      />
      <MegaMenu open={openMega} onClose={() => setOpenMega(null)} onNav={nav} />

      <div key={page + productId}>
        {PageEl}
      </div>

      <Footer onNav={nav} />

      <MiniCart
        open={cartOpen}
        onClose={() => setCartOpen(false)}
        items={cart}
        onChangeQty={changeQty}
        onRemove={removeItem}
        onCheckout={() => { setToast({ show: true, msg: 'Afrekenen is een prototype, zou doorverwijzen naar Shopify' }); setTimeout(() => setToast(t => ({ ...t, show: false })), 2400); }}
      />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Hero variant" />
        <TweakRadio
          value={t.heroVariant}
          options={[
            { value: 'a', label: 'Split' },
            { value: 'b', label: 'Dark' },
            { value: 'c', label: 'Editorial' },
          ]}
          onChange={(v) => { setTweak('heroVariant', v); setPage('home'); }}
        />

        <TweakSection label="Theme" />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={ACCENT_PRESETS}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakRadio
          label="Background"
          value={t.bgTone}
          options={['cream', 'offwhite', 'cool', 'warm']}
          onChange={(v) => setTweak('bgTone', v)}
        />
        <TweakSelect
          label="Headline font"
          value={t.headlineFont}
          options={['Geist', 'Plus Jakarta', 'DM Sans']}
          onChange={(v) => setTweak('headlineFont', v)}
        />

        <TweakSection label="Layout" />
        <TweakSlider
          label="Card radius"
          value={t.cardRadius}
          min={0} max={32} step={1} unit="px"
          onChange={(v) => setTweak('cardRadius', v)}
        />
        <TweakRadio
          label="Density"
          value={t.density}
          options={['compact', 'regular', 'airy']}
          onChange={(v) => setTweak('density', v)}
        />

        <TweakSection label="Pages" />
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6}}>
          <TweakButton label="Home" onClick={() => setPage('home')} />
          <TweakButton label="Shop" onClick={() => setPage('shop')} />
          <TweakButton label="Product" onClick={() => { setProductId('lite-1500'); setPage('product'); }} />
          <TweakButton label="About" onClick={() => setPage('about')} />
        </div>
        <TweakButton label="Open cart" onClick={() => setCartOpen(true)} />
      </TweaksPanel>
    </>
  );
}

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