const { useState, useEffect, useRef, useContext, createContext } = React;

const CFG = window.CRAVE_CONFIG;
const PRICE = CFG.price;
const FLAVORS = CFG.flavors;
const FL = Object.fromEntries(FLAVORS.map(f => [f.id, f]));
const SIZES = CFG.sizes;
const MAX_BOX = CFG.maxBox;
const DAYS = CFG.days;
const SLOTS = CFG.slots;
const FULL = {};
const PRESETS = CFG.presets;
const layoutOf = n => LAYOUT[n] || [n <= 12 ? Math.ceil(n / 2) : 6];
const LAYOUT = { 3: [3, 1], 4: [2, 2], 5: [5, 1], 6: [3, 2], 8: [4, 2], 12: [4, 3] };

const ShopCtx = createContext(null);
const useShop = () => useContext(ShopCtx);
const euro = n => n.toFixed(2).replace('.', ',') + ' €';
const boxLabel = n => 'Box ' + n;
const unitPrice = n => PRICE;
const sizePrice = n => n * unitPrice(n);
const boxPrice = b => b.price ?? sizePrice(b.size);
const euroShort = v => (Number.isInteger(v) ? v : v.toFixed(2).replace('.', ',')) + '€';
const summarize = items => {
  const c = {}; items.forEach(id => { c[id] = (c[id] || 0) + 1; });
  return Object.entries(c).map(([id, n]) => n + '× ' + FL[id].name);
};

function Cookie({ f, size, style, className }) {
  const [cx, cy, d] = f.crop; const s = size / d;
  return <div className={className} style={{ width: size, height: size, borderRadius: '50%', flexShrink: 0, backgroundImage: `url(${f.img})`, backgroundSize: `${f.W * s}px ${f.H * s}px`, backgroundPosition: `${size / 2 - cx * s}px ${size / 2 - cy * s}px`, boxShadow: '0 10px 18px -8px rgba(0,0,0,.6)', ...style }}></div>;
}

function Title({ children, size = 40, className = '', style, lg }) {
  const flat = c => typeof c === 'string' || typeof c === 'number' ? String(c) : Array.isArray(c) ? c.map(flat).join('') : (c && c.props ? flat(c.props.children) : '');
  const lines = flat(children).split('\n');
  return <div className={'mono ' + (lg ? 'trail-lg ' : 'trail ') + className} style={{ fontSize: size, lineHeight: 1.35, color: '#fff', ...style }}>{lines.map((l, i) => <div key={i}>{l}</div>)}</div>;
}

function BoxView({ size, items, width, onRemove, onDropCookie }) {
  const [cols] = layoutOf(size);
  const bag = false;
  const pad = Math.round(width * 0.06), gap = Math.round(width * 0.028);
  const slot = Math.floor((width - pad * 2 - gap * (cols - 1)) / cols);
  const [over, setOver] = useState(false);
  const drop = onDropCookie ? {
    onDragOver: e => { e.preventDefault(); setOver(true); },
    onDragLeave: () => setOver(false),
    onDrop: e => { e.preventDefault(); setOver(false); const id = e.dataTransfer.getData('text/plain'); if (id) onDropCookie(id); },
  } : {};
  const cells = Array.from({ length: size }, (_, i) => items[i]);
  const fs = Math.max(8, width * 0.02);
  return (
    <div {...drop} style={{ width, borderRadius: bag ? 6 : 16, padding: pad, background: bag ? 'linear-gradient(180deg,#DCC196,#C9A874)' : 'linear-gradient(160deg,#66753F,#56633A)', boxShadow: `0 30px 50px -24px rgba(0,0,0,.7), inset 0 0 0 ${Math.max(3, width * 0.012)}px rgba(255,255,255,.07)${over ? ', 0 0 0 4px #E2C07A' : ''}`, transition: 'box-shadow .2s', position: 'relative' }}>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, ${slot}px)`, gap, justifyContent: 'center' }}>
        {cells.map((id, i) => (
          <div key={i} style={{ width: slot, height: slot, borderRadius: '50%', background: bag ? 'rgba(110,75,30,.22)' : '#46522B', boxShadow: 'inset 0 6px 12px rgba(0,0,0,.35)', display: 'grid', placeItems: 'center', position: 'relative' }}>
            {id ? (
              <button className="slot-cookie" onClick={onRemove ? () => onRemove(i) : undefined} title={onRemove ? 'Retirer ' + FL[id].name : FL[id].name} style={{ cursor: onRemove ? 'pointer' : 'default' }}>
                <Cookie key={id + i} f={FL[id]} size={Math.round(slot * 0.92)} className="pop" />
                {onRemove ? <span className="slot-x">×</span> : null}
              </button>
            ) : <span className="mono" style={{ fontSize: Math.max(9, slot * 0.12), color: bag ? 'rgba(60,38,14,.4)' : 'rgba(244,240,231,.28)' }}>{i + 1}</span>}
          </div>
        ))}
      </div>
    </div>
  );
}

function Steps({ at }) {
  const { go, m, cart } = useShop();
  const s = [['compose', 'Ta box'], ['cart', 'Panier'], ['checkout', 'Créneau & infos']];
  const idx = s.findIndex(x => x[0] === at);
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: m ? 8 : 14, marginBottom: m ? 30 : 46 }}>
      {s.map(([id, l], i) => (
        <React.Fragment key={id}>
          {i ? <span style={{ width: m ? 18 : 50, height: 1, background: i <= idx ? '#E2C07A' : 'rgba(244,240,231,.25)' }}></span> : null}
          <button className={'step mono' + (i === idx ? ' on' : '') + (i < idx ? ' done' : '')} disabled={i > idx || (id === 'cart' && !cart.length)} onClick={() => go(id)}>
            <span className="step-n">{i < idx ? '✓' : i + 1}</span>{!m || i === idx ? <span>{l}</span> : null}
          </button>
        </React.Fragment>
      ))}
    </div>
  );
}

function SizeIcon({ n }) {
  const [cols] = layoutOf(n);
  return <span style={{ display: 'grid', gridTemplateColumns: `repeat(${cols},5px)`, gap: 2, padding: 4, borderRadius: 3, background: '#5C6A3C' }}>{Array.from({ length: n }).map((_, i) => <i key={i} style={{ width: 5, height: 5, borderRadius: '50%', background: 'rgba(244,240,231,.85)', display: 'block' }}></i>)}</span>;
}

function Marquee() {
  const { open, soon } = useShop();
  const items = open ? ['Pre-orders open', 'Commande en semaine', 'Cookies le week-end', 'Dès ' + CFG.minPieces + ' cookies', euroShort(PRICE) + ' le cookie', 'Livraison disponible dès ' + CFG.deliveryMin + ' pièces*', 'Paiement à la remise', ...(soon ? ['Pastries coming soon'] : [])] : ['Pre-orders closed', 'Réouverture annoncée sur Instagram', CFG.instagram];
  const row = [...items, ...items, ...items];
  return (
    <div style={{ height: 34, background: open ? '#E2C07A' : '#8E2F3A', color: open ? '#24150A' : '#fff', overflow: 'hidden', display: 'flex', alignItems: 'center' }}>
      <div className="marquee mono" style={{ display: 'flex', gap: 40, fontSize: 11, whiteSpace: 'nowrap' }}>
        {[...row, ...row].map((t, i) => <span key={i} style={{ display: 'flex', gap: 40 }}><span>{t}</span><span>·</span></span>)}
      </div>
    </div>
  );
}

function Header() {
  const { go, page, m, count } = useShop();
  const [menu, setMenu] = useState(false);
  const links = [['menu', 'Menu'], ['about', 'À propos'], ['faq', 'FAQ']];
  const { open } = useShop();
  const nav = id => { setMenu(false); go(id); };
  return (
    <div style={{ position: 'sticky', top: 0, zIndex: 30 }}>
      <Marquee />
      <header style={{ height: m ? 60 : 72, display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: m ? '0 18px' : '0 44px', background: 'rgba(36,21,10,.9)', backdropFilter: 'blur(14px)', WebkitBackdropFilter: 'blur(14px)', borderBottom: '1px solid rgba(244,240,231,.1)' }}>
        <button className="bare" onClick={() => nav('home')}><img src="/wp-content/themes/crave/assets/img/logo-white.png" alt="CRAVE." style={{ height: m ? 20 : 26, display: 'block' }} /></button>
        {!m ? <nav style={{ display: 'flex', gap: 36 }}>{links.map(([id, l]) => <button key={id} className={'navlink mono' + (page === id ? ' on' : '')} onClick={() => nav(id)}>{l}</button>)}</nav> : null}
        <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
          {!m ? <button className="btn btn-sm" disabled={!open} onClick={() => nav('compose')}>Commander</button> : null}
          <button className="cartbtn mono" onClick={() => nav('cart')}>Panier<span className="badge">{count}</span></button>
        </div>
      </header>

    </div>
  );
}

function TabBar() {
  const { go, page, count, open } = useShop();
  const I = {
    home: <path d="M3 10.5 12 3l9 7.5V21h-6v-6H9v6H3z"></path>,
    menu: <g><circle cx="12" cy="12" r="8.5"></circle><circle cx="9.5" cy="10" r="1.2"></circle><circle cx="14.5" cy="9" r="1"></circle><circle cx="13.5" cy="14.5" r="1.3"></circle><circle cx="9" cy="14.5" r=".9"></circle></g>,
    faq: <g><circle cx="12" cy="12" r="8.5"></circle><path d="M9.6 9.4a2.5 2.5 0 1 1 3.4 2.3c-.6.3-1 .8-1 1.5v.5"></path><circle cx="12" cy="16.6" r=".6"></circle></g>,
    cart: <g><path d="M4 8h16l-1.4 12H5.4z"></path><path d="M8.5 8V6.5a3.5 3.5 0 0 1 7 0V8"></path></g>,
  };
  const tab = (id, label, on) => (
    <button key={id} className={'tab' + (on ? ' on' : '')} onClick={() => go(id)}>
      <span style={{ position: 'relative' }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">{I[id]}</svg>
        {id === 'cart' && count ? <span className="tab-badge">{count}</span> : null}
      </span>
      <span className="mono">{label}</span>
    </button>
  );
  return (
    <nav className="tabbar">
      {tab('home', 'Accueil', page === 'home')}
      {tab('menu', 'Menu', page === 'menu')}
      <button className={'tab-main' + (page === 'compose' ? ' on' : '')} disabled={!open} onClick={() => go('compose')}><span style={{ fontSize: 26, lineHeight: 1 }}>+</span><span className="mono">Box</span></button>
      {tab('cart', 'Panier', page === 'cart' || page === 'checkout')}
      {tab('faq', 'FAQ', page === 'faq' || page === 'about')}
    </nav>
  );
}

function Footer() {
  const { go, m } = useShop();
  return (
    <footer className="grain" style={{ background: '#1A0F07', padding: m ? '56px 22px 40px' : '80px 44px 50px', display: 'grid', gridTemplateColumns: m ? '1fr' : '1.4fr 1fr 1fr', gap: 40 }}>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        <img src="/wp-content/themes/crave/assets/img/logo-white.png" alt="CRAVE." style={{ width: m ? 180 : 240 }} />
        <span style={{ fontSize: 18, opacity: .85 }}>Made in Brussels. Craved everywhere.</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <span className="mono" style={{ fontSize: 11, color: '#E2C07A' }}>Commander</span>
        {[['menu', 'Le menu'], ['compose', 'Compose ta box'], ['cart', 'Panier']].map(([id, l]) => <button key={id} className="footlink" onClick={() => go(id)}>{l}</button>)}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        <span className="mono" style={{ fontSize: 11, color: '#E2C07A' }}>CRAVE.</span>
        {[['about', 'À propos'], ['faq', 'FAQ']].map(([id, l]) => <button key={id} className="footlink" onClick={() => go(id)}>{l}</button>)}
        <a href="#" onClick={e => e.preventDefault()} style={{ fontSize: 17 }}>{CFG.instagram}</a>
      </div>
      <div className="mono" style={{ gridColumn: '1 / -1', fontSize: 10, opacity: .55, borderTop: '1px solid rgba(244,240,231,.12)', paddingTop: 22, display: 'flex', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
        <span>Commande en semaine · retrait & livraison le week-end</span><span>© 2026 CRAVE. Bruxelles</span>
      </div>
    </footer>
  );
}

Object.assign(window, { MAX_BOX, layoutOf, unitPrice, sizePrice, euroShort, boxPrice, TabBar, PRESETS, Steps, SizeIcon, PRICE, FLAVORS, FL, SIZES, DAYS, SLOTS, FULL, LAYOUT, ShopCtx, useShop, euro, boxLabel, summarize, Cookie, Title, BoxView, Header, Footer });