/* Delishpot — main app */

const { useState: useS, useEffect: useE } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "direction": "editorial",
  "heroLayout": "split",
  "cardStyle": "photo",
  "dark": false,
  "accentMode": "orange",
  "creamShade": "warm"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useS('home');
  const [cart, setCart] = useS([]);
  const [cartOpen, setCartOpen] = useS(false);
  const [checkoutOpen, setCheckoutOpen] = useS(false);

  /* Derive direction-driven tokens */
  const dark = !!t.dark || t.direction === 'bold';
  const accent = t.accentMode === 'teal' ? '#0e6e6a' : '#e87a1f';
  const cream = t.creamShade === 'cool' ? '#efe8d6' : t.creamShade === 'pale' ? '#f7eedb' : '#f1e6cf';
  const bg = dark ? '#073c3a' : cream;
  const fg = dark ? '#f7eedb' : '#0e6e6a';

  const tweaks = { dark, accent, cardStyle: t.cardStyle, heroLayout: t.heroLayout };

  useE(() => { window.scrollTo({ top: 0, behavior: 'instant' }); }, [page]);

  const addToCart = (item) => {
    setCart(prev => {
      const existing = prev.find(i => i.id === item.id);
      if (existing) return prev.map(i => i.id === item.id ? { ...i, qty: i.qty + 1 } : i);
      return [...prev, { ...item, qty: 1 }];
    });
    setCartOpen(true);
  };

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

  return (
    <div style={{ background: bg, color: fg, minHeight: '100vh', fontFamily: '"Plus Jakarta Sans", system-ui', transition: 'background .25s ease, color .25s ease' }}>
      <TopNav page={page} setPage={setPage} openCart={()=>setCartOpen(true)} cartCount={cartCount} dark={dark} accent={accent} />

      {page === 'home' && <HomePage tweaks={tweaks} addToCart={addToCart} setPage={setPage} />}
      {page === 'menu' && <MenuPage tweaks={tweaks} addToCart={addToCart} setPage={setPage} />}
      {page === 'bulk' && <BulkPage tweaks={tweaks} setPage={setPage} />}
      {page === 'about' && <AboutPage tweaks={tweaks} setPage={setPage} />}
      {page === 'contact' && <ContactPage tweaks={tweaks} />}

      <Footer dark={dark} accent={accent} setPage={setPage} />

      <CartDrawer open={cartOpen} onClose={()=>setCartOpen(false)} items={cart} setItems={setCart}
        accent={accent} dark={dark} onCheckout={()=>{ setCartOpen(false); setCheckoutOpen(true); }} />
      <CheckoutModal open={checkoutOpen} onClose={()=>setCheckoutOpen(false)} items={cart} accent={accent} dark={dark}
        onPlaced={()=>setCart([])} />

      <DPTweaksPanel t={t} setTweak={setTweak} />
    </div>
  );
}

function DPTweaksPanel({ t, setTweak }) {
  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Direction">
        <TweakRadio value={t.direction} onChange={(v) => {
          const isBold = v === 'bold';
          setTweak({ direction: v, dark: isBold });
        }} options={[
          { value: 'editorial', label: 'A · Editorial Cream' },
          { value: 'bold',      label: 'B · Bold Teal' },
        ]} />
      </TweakSection>

      <TweakSection title="Hero layout">
        <TweakSelect value={t.heroLayout} onChange={(v)=>setTweak('heroLayout', v)} options={[
          { value: 'split',     label: 'Split with photo' },
          { value: 'menuCard',  label: 'Editorial menu card' },
          { value: 'gallery',   label: 'Quilted gallery' },
        ]} />
      </TweakSection>

      <TweakSection title="Card style">
        <TweakRadio value={t.cardStyle} onChange={(v)=>setTweak('cardStyle', v)} options={[
          { value: 'photo',     label: 'Photo' },
          { value: 'editorial', label: 'Editorial list' },
        ]} />
      </TweakSection>

      <TweakSection title="Accent color">
        <TweakColor value={t.accentMode} onChange={(v)=>setTweak('accentMode', v)} options={[
          { value: 'orange', color: '#e87a1f' },
          { value: 'teal',   color: '#0e6e6a' },
        ]} />
      </TweakSection>

      <TweakSection title="Background shade">
        <TweakSelect value={t.creamShade} onChange={(v)=>setTweak('creamShade', v)} options={[
          { value: 'warm', label: 'Warm cream (sand)' },
          { value: 'pale', label: 'Pale cream (paper)' },
          { value: 'cool', label: 'Cool cream (linen)' },
        ]} />
      </TweakSection>

      <TweakSection title="Force dark">
        <TweakToggle value={t.dark} onChange={(v)=>setTweak('dark', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

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