/* ===========================================================
   PIPOQUE — Storefront (header, home, cardápio, montador)
   =========================================================== */
const { useState, useEffect, useRef } = React;

/* ---------- Header ---------- */
function AppHeader() {
  const app = useApp();
  const { settings, palette, setPalette, route, navigate, cartCount, setCartOpen } = app;
  const links = [
    { to: '#/', label: 'Início' },
    { to: '#/cardapio', label: 'Cardápio' },
  ];
  const isActive = (to) => (to === '#/' ? (route.name === 'home') : route.name === 'menu');
  return (
    <header className="appbar">
      <div className="page appbar-inner">
        <div className="brand-lockup" onClick={() => navigate('#/')}>
          <Logo size={42} />
          <span className="wordmark">Pipoque<span style={{ color: 'var(--p2)' }}>.</span></span>
        </div>
        <nav className="nav-links">
          {links.map((l) => (
            <a key={l.to} className={'nav-link' + (isActive(l.to) ? ' active' : '')}
              onClick={() => navigate(l.to)}>{l.label}</a>
          ))}
        </nav>
        <div className="grow" />
        <PaletteSwitch palette={palette} setPalette={setPalette} />
        <button className="iconbtn cart-btn" onClick={() => setCartOpen(true)} aria-label="Abrir carrinho">
          <Icon.cart />
          {cartCount > 0 && <span className="cart-count">{cartCount}</span>}
        </button>
      </div>
    </header>
  );
}

/* ---------- Bottom nav (mobile) ---------- */
function BottomNav() {
  const { route, navigate, cartCount, setCartOpen } = useApp();
  return (
    <nav className="botnav">
      <div className="botnav-inner">
        <a className={route.name === 'home' ? 'active' : ''} onClick={() => navigate('#/')}><Icon.home /><span>Início</span></a>
        <a className={route.name === 'menu' ? 'active' : ''} onClick={() => navigate('#/cardapio')}><Icon.menu /><span>Cardápio</span></a>
        <a onClick={() => setCartOpen(true)} style={{ position: 'relative' }}>
          <Icon.cart />{cartCount > 0 && <span className="bn-count">{cartCount}</span>}<span>Carrinho</span>
        </a>
        <a className={route.name === 'admin' ? 'active' : ''} onClick={() => navigate('#/admin')}><Icon.user /><span>Admin</span></a>
      </div>
    </nav>
  );
}

/* ---------- Horário de funcionamento (destaca o dia de hoje) ---------- */
function BusinessHours({ schedule }) {
  const today = new Date().getDay();
  return (
    <div className="biz-hours">
      {schedule.map((d) => (
        <div key={d.id} className={'bh-row' + (d.id === today ? ' today' : '')}>
          <span className="bh-day">{d.name}{d.id === today ? <span className="bh-now">hoje</span> : null}</span>
          <span className="bh-time">{d.open ? (d.from + '–' + d.to + (d.delivery ? ' 🛵' : '')) : 'Fechado'}</span>
        </div>
      ))}
      <div className="bh-deliv-line">🛵 Entrega: {deliveryDaysLabel(schedule)}</div>
    </div>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  const { settings, navigate } = useApp();
  const wa = `https://wa.me/${onlyDigits(settings.whatsapp)}`;
  const ig = `https://instagram.com/${settings.instagram}`;
  const tk = `https://tiktok.com/@${settings.tiktok}`;
  return (
    <footer className="foot">
      <div className="confetti dots" style={{ opacity: .4 }} />
      <div className="page foot-inner">
        <div className="spread wrap" style={{ alignItems: 'flex-start', gap: 28 }}>
          <div style={{ maxWidth: 320 }}>
            <div className="brand-lockup" style={{ cursor: 'default' }}>
              <Logo size={50} />
              <span className="wordmark" style={{ fontSize: 30 }}>Pipoque<span style={{ color: 'var(--p2)' }}>.</span></span>
            </div>
            <p className="hand" style={{ fontSize: 24, marginTop: 10, opacity: .95 }}>{settings.tagline}</p>
          </div>
          <div>
            <div className="card-label" style={{ opacity: .8, marginBottom: 10, fontFamily: 'Fredoka', fontWeight: 600, fontSize: 13 }}>Onde estamos</div>
            <div className="row" style={{ marginBottom: 8 }}><Icon.pin /><span style={{ fontSize: 14.5 }}>{settings.address}</span></div>
            <div className="row" style={{ marginBottom: 8, alignItems: 'flex-start' }}><Icon.clock /><BusinessHours schedule={getSchedule(settings)} /></div>
            <div className="row"><Icon.whatsapp width="18" height="18" /><span style={{ fontSize: 14.5 }}>{maskPhone(settings.whatsapp.slice(2))}</span></div>
          </div>
          <div>
            <div className="card-label" style={{ opacity: .8, marginBottom: 10, fontFamily: 'Fredoka', fontWeight: 600, fontSize: 13 }}>Redes</div>
            <div className="foot-social">
              <a className="soc-btn" href={wa} target="_blank" rel="noreferrer" aria-label="WhatsApp"><Icon.whatsapp /></a>
              <a className="soc-btn" href={ig} target="_blank" rel="noreferrer" aria-label="Instagram"><Icon.instagram /></a>
              <a className="soc-btn" href={tk} target="_blank" rel="noreferrer" aria-label="TikTok"><Icon.tiktok /></a>
            </div>
            <a className="link-accent" style={{ display: 'inline-block', marginTop: 18, fontSize: 13, opacity: .9 }} onClick={() => navigate('#/admin')}>Área administrativa →</a>
          </div>
        </div>
        <div style={{ marginTop: 30, paddingTop: 18, borderTop: '1px solid color-mix(in srgb, var(--hero-ink) 22%, transparent)', fontSize: 15, opacity: .7 }}>
          © {new Date().getFullYear()} Pipoque · Pipoca gourmet recheada · Feito com carinho 🍿 - Desenvolvido por <a href="https://gtiware.com.br" target="_blank" rel="noreferrer" style={{ color: 'inherit', fontWeight: 700, textDecoration: 'underline' }}>GTIWARE</a>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Card de produto ---------- */
function ProductCard({ product, onAdd, combo }) {
  const badgeColor = { 'Mais pedido': 'b-pink', 'Top': 'b-grape', 'Novo': 'b-cyan', 'Premium': 'b-yellow', 'Com brinde': 'b-yellow' };
  return (
    <article className={'card ' + (combo ? 'combo-card' : 'prod-card')}>
      <div className="prod-media">
        <ProductVisual glyph={product.glyph} color={product.color} image={product.image} big={combo} />
        <div className="badge-row">
          {product.badge && <span className={'pill ' + (badgeColor[product.badge] || 'b-pink')}>{product.badge}</span>}
        </div>
      </div>
      <div className="prod-body">
        <div className="prod-name">{product.name}</div>
        <div className="prod-desc">{product.desc}</div>
        <div className="prod-foot">
          <div className="price">{money(product.price)}</div>
          <button className="add-btn" onClick={() => onAdd(product)} aria-label={'Adicionar ' + product.name}>
            <Icon.plus width="22" height="22" />
          </button>
        </div>
      </div>
    </article>
  );
}

/* ---------- Home ---------- */
function HomePage() {
  const app = useApp();
  const { products, settings, navigate, quickAdd } = app;
  const featured = products.filter((p) => p.visible && p.featured);
  const combos = featured.filter((p) => p.category === 'combos');
  const destaques = featured.filter((p) => p.category !== 'combos').slice(0, 8);

  return (
    <main>
      {/* HERO */}
      <section className="hero">
        <div className="confetti hero-confetti" />
        <div className="page hero-grid">
          <div>
            <span className="tag b-yellow">pipoca gourmet recheada</span>
            <h1 style={{ marginTop: 14 }}>Pipoca doce,<br />crocante e <span style={{ color: 'var(--p2)' }}>do seu jeito</span></h1>
            {/* <p className="hero-sub">Recheada com creme de Ninho, chocolate e Nutella. Um abraço crocante pra galera — peça e receba quentinho em casa.</p> */}
            <div className="row wrap" style={{ gap: 12, marginTop: 26 }}>
              <button className="btn btn-yellow btn-lg" onClick={() => navigate('#/cardapio')}>Ver cardápio 🍿</button>
              <button className="btn btn-ghost btn-lg" onClick={() => navigate('#/cardapio?builder=1')} style={{ background: 'color-mix(in srgb, var(--surface) 16%, transparent)', color: 'var(--hero-ink)', borderColor: 'color-mix(in srgb, var(--hero-ink) 30%, transparent)' }}>Monte a sua</button>
            </div>
            <div className="info-strip">
              <div className="info-chip"><span className="ic">🛵</span><div><div className="t">Delivery ou Retirada</div><div className="s">no seu bairro</div></div></div>
              <div className="info-chip"><span className="ic">⭐</span><div><div className="t">Nota 4.9</div><div className="s">+2 mil pedidos</div></div></div>
              <div className="info-chip"><span className="ic">💜</span><div><div className="t">Pix fácil</div><div className="s">é só enviar o comprovante</div></div></div>
            </div>
          </div>
          <div className="hero-mascot"><Logo size={340} className="hero-logo" /></div>
        </div>
      </section>

      <div className="page">
        {/* COMBOS */}
        <section className="sec">
          <div className="sec-head">
            <div>
              <span className="sec-kicker">Combos</span>
              <h2 className="sec-title">Junta a galera 🎉</h2>
              <p className="sec-sub">Nossos combos mais pedidos — economia e diversão no mesmo pote.</p>
            </div>
            <button className="btn btn-ghost btn-sm" onClick={() => navigate('#/cardapio')}>Ver tudo</button>
          </div>
          <div className="grid-combo">
            {combos.map((p) => <ProductCard key={p.id} product={p} combo onAdd={quickAdd} />)}
          </div>
        </section>

        {/* DESTAQUES */}
        {destaques.length > 0 && (
        <section className="sec">
          <div className="sec-head">
            <div>
              <span className="sec-kicker">Queridinhos</span>
              <h2 className="sec-title">Os mais amados</h2>
              <p className="sec-sub">Sabores que a criançada (e a galera grande também) não cansa de pedir.</p>
            </div>
          </div>
          <div className="grid-prod">
            {destaques.map((p) => <ProductCard key={p.id} product={p} onAdd={quickAdd} />)}
          </div>
        </section>
        )}

        {/* MONTE A SUA - CTA */}
        <section className="sec">
          <div className="card" style={{ overflow: 'hidden', position: 'relative', background: 'var(--p4)', color: 'var(--on-p4)', border: 'none' }}>
            <div className="confetti dots" />
            <div className="spread wrap" style={{ position: 'relative', padding: '32px 34px', gap: 24 }}>
              <div style={{ maxWidth: 460 }}>
                <span className="hand" style={{ fontSize: 28 }}>novidade</span>
                <h2 style={{ fontSize: 'clamp(26px,4vw,38px)', margin: '6px 0 10px' }}>Monte a sua pipoca</h2>
                <p style={{ fontSize: 16, lineHeight: 1.5, opacity: .95, margin: 0 }}>Escolha o tamanho, até 2 cremes e as coberturas que quiser. Do seu jeitinho, do começo ao fim.</p>
                <button className="btn btn-yellow btn-lg" style={{ marginTop: 22 }} onClick={() => navigate('#/cardapio?builder=1')}>Começar a montar →</button>
              </div>
              <Logo size={150} style={{ flexShrink: 0, transform: 'rotate(-8deg)' }} />
            </div>
          </div>
        </section>

        {/* SOBRE */}
        <section className="sec" id="sobre">
          <div className="sec-head">
            <div>
              <span className="sec-kicker">Sobre nós</span>
              <h2 className="sec-title">Por que a Pipoque?</h2>
            </div>
          </div>
          <div className="about-grid">
            <div className="card about-card"><div className="ic">🍿</div><h4>Estourada na hora</h4><p>Pipoca fresquinha, crocante de verdade e recheada com cremes que todo mundo ama.</p></div>
            <div className="card about-card"><div className="ic">🛵</div><h4>Entrega rapidinha</h4><p>Levamos quentinho até a sua porta. Taxa de entrega por bairro, transparente no checkout.</p></div>
            <div className="card about-card"><div className="ic">💜</div><h4>Pix sem complicação</h4><p>Pague no Pix e anexe o comprovante direto pelo site. Pedido confirmado na hora.</p></div>
            <div className="card about-card"><div className="ic">🎉</div><h4>Pra toda a galera</h4><p>Festa, cinema em casa, lanche da tarde ou aquele programa especial. Sempre tem um combo.</p></div>
          </div>
        </section>
      </div>
    </main>
  );
}

/* ---------- Cardápio ---------- */
function MenuPage() {
  const app = useApp();
  const { products, navigate, route, quickAdd } = app;
  const [cat, setCat] = useState('todos');
  const [q, setQ] = useState('');
  const [builderOpen, setBuilderOpen] = useState(route.query.builder === '1');

  const visible = products.filter((p) => p.visible);
  const filtered = visible.filter((p) =>
    (cat === 'todos' || p.category === cat) &&
    (q.trim() === '' || (p.name + ' ' + p.desc).toLowerCase().includes(q.toLowerCase()))
  );
  const grouped = CATEGORIES.map((c) => ({ cat: c, items: filtered.filter((p) => p.category === c.id) })).filter((g) => g.items.length);

  return (
    <main className="page" style={{ paddingTop: 26, paddingBottom: 30 }}>
      <div style={{ marginBottom: 18 }}>
        <span className="sec-kicker">Cardápio</span>
        <h1 className="sec-title" style={{ marginTop: 12 }}>Escolha seus sabores 🍿</h1>
      </div>

      {/* busca + montar */}
      <div className="row wrap" style={{ gap: 12, marginBottom: 16 }}>
        <div className="row grow" style={{ minWidth: 220, background: 'var(--surface)', border: '1.5px solid var(--line)', borderRadius: 999, padding: '0 16px' }}>
          <Icon.search />
          <input className="input" value={q} onChange={(e) => setQ(e.target.value)} placeholder="Buscar sabor..."
            style={{ border: 'none', background: 'transparent', padding: '12px 8px' }} />
        </div>
        <button className="btn btn-grape" style={{ background: 'var(--p4)', color: 'var(--on-p4)' }} onClick={() => setBuilderOpen(true)}>✨ Monte a sua</button>
      </div>

      {/* chips de categoria */}
      <div className="cat-bar" style={{ position: 'sticky', top: 68, zIndex: 20, background: 'var(--bg)', paddingTop: 8 }}>
        <button className={'cat-chip' + (cat === 'todos' ? ' active' : '')} onClick={() => setCat('todos')}><span className="em">🍿</span>Tudo</button>
        {CATEGORIES.map((c) => (
          <button key={c.id} className={'cat-chip' + (cat === c.id ? ' active' : '')} onClick={() => setCat(c.id)}>
            <span className="em">{c.em}</span>{c.name}
          </button>
        ))}
      </div>

      {filtered.length === 0 && (
        <div className="empty-state"><Pipo size={80} /><p style={{ marginTop: 12, fontFamily: 'Fredoka', fontWeight: 600 }}>Nada encontrado por aqui. Tenta outro sabor!</p></div>
      )}

      {grouped.map((g) => (
        <section key={g.cat.id}>
          <h2 className="cat-title"><span className="em">{g.cat.em}</span>{g.cat.name}</h2>
          <div className="grid-prod">
            {g.items.map((p) => <ProductCard key={p.id} product={p} onAdd={quickAdd} />)}
          </div>
        </section>
      ))}

      {builderOpen && <BuilderModal onClose={() => setBuilderOpen(false)} />}
    </main>
  );
}

/* ---------- Montador "do seu jeito" ---------- */
function BuilderModal({ onClose }) {
  const { addToCart, settings } = useApp();
  const toast = useToast();
  const BUILDER = getBuilder(settings);
  const [size, setSize] = useState(() => (BUILDER.sizes[0] || {}).id);
  const [cremes, setCremes] = useState([]);
  const [tops, setTops] = useState([]);

  const sizeObj = BUILDER.sizes.find((s) => s.id === size) || BUILDER.sizes[0] || { price: 0, name: '' };
  const maxCremes = sizeObj.maxCremes > 0 ? sizeObj.maxCremes : 2;
  const toggle = (arr, setArr, id, max) => {
    if (arr.includes(id)) setArr(arr.filter((x) => x !== id));
    else if (!max || arr.length < max) setArr([...arr, id]);
    else toast('Este tamanho aceita até ' + max + ' creme' + (max > 1 ? 's' : '') + ' 🍫');
  };
  const chooseSize = (id) => {
    setSize(id);
    const sz = BUILDER.sizes.find((s) => s.id === id);
    const mx = sz && sz.maxCremes > 0 ? sz.maxCremes : 2;
    setCremes((cur) => cur.slice(0, mx));
  };
  const cremePrice = cremes.reduce((s, id) => s + ((BUILDER.cremes.find((c) => c.id === id) || {}).price || 0), 0);
  const topPrice = tops.reduce((s, id) => s + ((BUILDER.toppings.find((t) => t.id === id) || {}).price || 0), 0);
  const total = (sizeObj.price || 0) + cremePrice + topPrice;

  const finish = () => {
    if (cremes.length === 0) { toast('Escolha pelo menos 1 creme 😋'); return; }
    const cremeNames = cremes.map((id) => (BUILDER.cremes.find((c) => c.id === id) || {}).name).filter(Boolean);
    const topNames = tops.map((id) => (BUILDER.toppings.find((t) => t.id === id) || {}).name).filter(Boolean);
    const opts = [`Tamanho ${sizeObj.name}`, 'Cremes: ' + cremeNames.join(', ')];
    if (topNames.length) opts.push('Coberturas: ' + topNames.join(', '));
    addToCart({
      productId: null,
      name: 'Pipoca do seu jeito',
      glyph: '🍿', color: 'p4',
      unitPrice: total,
      optsText: opts.join(' · '),
      custom: true,
    });
    toast('Sua pipoca foi pro carrinho! 🎉');
    onClose();
  };

  return (
    <Modal title="Monte a sua 🍿" onClose={onClose}
      foot={
        <div className="spread">
          <div><div className="muted" style={{ fontSize: 12, fontFamily: 'Fredoka', fontWeight: 600 }}>Total</div><div className="price">{money(total)}</div></div>
          <button className="btn btn-primary btn-lg" onClick={finish}>Adicionar ao carrinho</button>
        </div>
      }>
      <div style={{ marginBottom: 20 }}>
        <div className="field"><label>1. Escolha o tamanho</label></div>
        <div className="opt-grid cols3">
          {BUILDER.sizes.map((s) => (
            <button key={s.id} className={'opt opt-block' + (size === s.id ? ' sel' : '')} onClick={() => chooseSize(s.id)}>
              <span className="o-em">{s.image ? <img className="o-em-img" src={s.image} alt="" /> : s.em}</span>
              <span className="o-name">{s.name}</span>
              <span className="o-price">{s.desc} · {money(s.price)}</span>
            </button>
          ))}
        </div>
      </div>

      <div style={{ marginBottom: 20 }}>
        <div className="field"><label>2. Cremes <span className="hint">(escolha até {maxCremes})</span></label></div>
        <div className="opt-grid cols2">
          {BUILDER.cremes.map((c) => (
            <button key={c.id} className={'opt' + (cremes.includes(c.id) ? ' sel' : '')} onClick={() => toggle(cremes, setCremes, c.id, maxCremes)}>
              <span className="o-name">{c.name}</span><span className="o-price">+{money(c.price)}</span>
            </button>
          ))}
        </div>
      </div>

      <div>
        <div className="field"><label>3. Coberturas <span className="hint">(opcional, quantas quiser)</span></label></div>
        <div className="opt-grid cols2">
          {BUILDER.toppings.map((t) => (
            <button key={t.id} className={'opt' + (tops.includes(t.id) ? ' sel' : '')} onClick={() => toggle(tops, setTops, t.id)}>
              <span className="o-name">{t.name}</span><span className="o-price">+{money(t.price)}</span>
            </button>
          ))}
        </div>
      </div>
    </Modal>
  );
}

Object.assign(window, { AppHeader, BottomNav, Footer, ProductCard, HomePage, MenuPage, BuilderModal });