/* ===========================================================
   PIPOQUE — Carrinho, Checkout, Confirmação
   =========================================================== */
const { useState, useEffect, useRef } = React;

/* mensagem de WhatsApp com o resumo do pedido (usada no botão "acompanhar pedido") */
function buildWhatsappText(order) {
  let t = `*Novo pedido Pipoque* 🍿\n\n`;
  t += `*Pedido:* #${order.code}\n`;
  t += `*Cliente:* ${order.name}\n`;
  t += `*WhatsApp:* ${order.phone}\n`;
  if (order.mode === 'delivery') {
    t += `*Entrega:* ${order.address}, ${order.number}`;
    if (order.complement) t += ` - ${order.complement}`;
    t += `\n*Bairro:* ${order.zoneName} (taxa ${money(order.deliveryFee)})\n`;
    if (order.reference) t += `*Referência:* ${order.reference}\n`;
  } else {
    t += `*Retirada no balcão*\n`;
  }
  t += `\n*Itens:*\n`;
  order.items.forEach((it) => {
    t += `• ${it.qty}x ${it.name}`;
    if (it.optsText) t += ` (${it.optsText})`;
    t += ` — ${money(it.unitPrice * it.qty)}\n`;
  });
  t += `\n*Subtotal:* ${money(order.subtotal)}\n`;
  if (order.mode === 'delivery') t += `*Entrega:* ${money(order.deliveryFee)}\n`;
  t += `*Total:* ${money(order.total)}\n`;
  t += `*Pagamento:* Pix (Mercado Pago)\n`;
  if (order.notes) t += `\n*Obs:* ${order.notes}`;
  return t;
}

/* ---------- Cart Drawer ---------- */
function CartDrawer() {
  const app = useApp();
  const { cart, cartOpen, setCartOpen, setQty, removeLine, cartSubtotal, navigate } = app;
  const goCheckout = () => { setCartOpen(false); navigate('#/checkout'); };
  return (
    <React.Fragment>
      <div className={'overlay' + (cartOpen ? ' open' : '')} onClick={() => setCartOpen(false)} />
      <aside className={'drawer' + (cartOpen ? ' open' : '')} aria-hidden={!cartOpen}>
        <div className="drawer-head">
          <h3>Seu carrinho 🛒</h3>
          <button className="iconbtn" onClick={() => setCartOpen(false)} aria-label="Fechar"><Icon.close /></button>
        </div>
        <div className="drawer-body">
          {cart.length === 0 ? (
            <div className="empty-state">
              <Pipo size={96} />
              <p style={{ fontFamily: 'Fredoka', fontWeight: 700, fontSize: 18, marginBottom: 4 }}>Seu carrinho está vazio</p>
              <p style={{ fontSize: 14 }}>Bora encher de pipoca?</p>
              <button className="btn btn-primary" style={{ marginTop: 14 }} onClick={() => { setCartOpen(false); navigate('#/cardapio'); }}>Ver cardápio</button>
            </div>
          ) : cart.map((line) => (
            <div className="citem" key={line.lineId}>
              <div className="citem-media"><ProductVisual glyph={line.glyph} color={line.color} image={line.image} showMascot={false} /></div>
              <div className="grow">
                <div className="spread" style={{ alignItems: 'flex-start' }}>
                  <div className="citem-name">{line.name}</div>
                  <button className="iconbtn" style={{ width: 30, height: 30, border: 'none', background: 'transparent', color: 'var(--ink-soft)' }} onClick={() => removeLine(line.lineId)} aria-label="Remover"><Icon.trash /></button>
                </div>
                {line.optsText && <div className="citem-opt">{line.optsText}</div>}
                <div className="spread" style={{ marginTop: 8 }}>
                  <div className="qty">
                    <button onClick={() => setQty(line.lineId, line.qty - 1)} aria-label="Diminuir">−</button>
                    <span>{line.qty}</span>
                    <button onClick={() => setQty(line.lineId, line.qty + 1)} aria-label="Aumentar">+</button>
                  </div>
                  <div className="price" style={{ fontSize: 17 }}>{money(line.unitPrice * line.qty)}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        {cart.length > 0 && (
          <div className="drawer-foot">
            <div className="summary-row total"><span>Subtotal</span><span>{money(cartSubtotal)}</span></div>
            <p className="muted" style={{ fontSize: 12.5, margin: '4px 0 12px' }}>A taxa de entrega é calculada no próximo passo, conforme seu bairro.</p>
            <button className="btn btn-primary btn-lg btn-block" onClick={goCheckout}>Fechar pedido →</button>
          </div>
        )}
      </aside>
    </React.Fragment>
  );
}

/* ---------- Checkout ---------- */
function CheckoutPage() {
  const app = useApp();
  const { cart, cartSubtotal, settings, navigate, customer, saveCustomer, createPix, clearCart } = app;
  const toast = useToast();

  const [form, setForm] = useState(() => ({
    name: customer.name || '',
    phone: customer.phone || '',
    mode: settings.deliveryEnabled ? 'delivery' : 'pickup',
    zone: customer.zone || (settings.zones[0] && settings.zones[0].id) || '',
    address: customer.address || '',
    number: customer.number || '',
    complement: customer.complement || '',
    reference: customer.reference || '',
    notes: '',
    remember: true,
  }));
  const [errors, setErrors] = useState({});
  const [submitting, setSubmitting] = useState(false);

  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));
  const isDelivery = form.mode === 'delivery';
  const zone = settings.zones.find((z) => z.id === form.zone);
  const deliveryFee = isDelivery && zone ? zone.fee : 0;
  const total = cartSubtotal + deliveryFee;
  const belowMin = cartSubtotal < (settings.minOrder || 0);

  useEffect(() => { if (cart.length === 0) navigate('#/cardapio'); }, []);

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = 1;
    if (onlyDigits(form.phone).length < 10) e.phone = 1;
    if (isDelivery) {
      if (!form.address.trim()) e.address = 1;
      if (!form.number.trim()) e.number = 1;
      if (!form.zone) e.zone = 1;
    }
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = async () => {
    if (submitting) return;
    if (belowMin) { toast(`Pedido mínimo de ${money(settings.minOrder)} 🛒`); return; }
    if (!validate()) { toast('Confira os campos destacados 👀'); return; }
    const code = String(Date.now()).slice(-6);
    const order = {
      id: 'o' + Date.now(),
      code,
      createdAt: new Date().toISOString(),
      name: form.name.trim(),
      phone: maskPhone(form.phone),
      mode: form.mode,
      zoneName: zone ? zone.name : '',
      address: form.address, number: form.number, complement: form.complement, reference: form.reference,
      notes: form.notes,
      items: cart,
      subtotal: cartSubtotal,
      deliveryFee,
      total,
      status: 'novo',
    };
    if (form.remember) {
      saveCustomer({ name: form.name, phone: form.phone, zone: form.zone, address: form.address, number: form.number, complement: form.complement, reference: form.reference });
    }

    // Cria o pedido + o pagamento Pix no Mercado Pago (backend). Sem abrir WhatsApp aqui:
    // o cliente vai direto para a tela de pagamento; o WhatsApp fica pra acompanhar depois.
    setSubmitting(true);
    const pix = await createPix(order);
    setSubmitting(false);
    if (!pix || !pix.paymentId) { toast('Não foi possível gerar o Pix. Tente novamente 🙏'); return; }

    // Guarda para a tela de pagamento/confirmação sobreviverem a um refresh.
    try { sessionStorage.setItem('pipoque_pix', JSON.stringify(pix)); } catch (e) {}
    try { sessionStorage.setItem('pipoque_last_order', JSON.stringify(order)); } catch (e) {}

    clearCart();
    navigate('#/pagamento?order=' + pix.orderId);
  };

  const errCls = (k) => errors[k] ? ' shake' : '';
  const errStyle = (k) => errors[k] ? { borderColor: 'var(--p1)' } : {};

  return (
    <main className="page" style={{ paddingTop: 22, paddingBottom: 40 }}>
      <button className="btn btn-ghost btn-sm" onClick={() => navigate('#/cardapio')} style={{ marginBottom: 16 }}><Icon.back width="18" height="18" /> Voltar ao cardápio</button>
      <h1 className="sec-title" style={{ marginBottom: 22 }}>Finalizar pedido</h1>

      <div className="checkout-grid">
        <div>
          {/* 1. dados */}
          <div className="card" style={{ padding: 24, marginBottom: 18 }}>
            <div className="panel-title">1. Seus dados</div>
            <div className="panel-sub">Salvamos pra facilitar seu próximo pedido 💜</div>
            <div className="field-row">
              <div className="field"><label>Nome completo</label>
                <input className={'input' + errCls('name')} style={errStyle('name')} value={form.name} onChange={(e) => set('name', e.target.value)} placeholder="Como podemos te chamar?" /></div>
              <div className="field"><label>WhatsApp</label>
                <input className={'input' + errCls('phone')} style={errStyle('phone')} value={form.phone} onChange={(e) => set('phone', maskPhone(e.target.value))} placeholder="(11) 99999-0000" inputMode="numeric" /></div>
            </div>
          </div>

          {/* 2. entrega */}
          <div className="card" style={{ padding: 24, marginBottom: 18 }}>
            <div className="panel-title">2. Entrega</div>
            <div className="panel-sub">Escolha receber em casa ou retirar no balcão.</div>
            <div className="opt-grid cols2" style={{ marginBottom: isDelivery ? 18 : 0 }}>
              {settings.deliveryEnabled && (
                <button className={'opt' + (form.mode === 'delivery' ? ' sel' : '')} onClick={() => set('mode', 'delivery')}>
                  <span className="row" style={{ gap: 8 }}><Icon.bike /><span className="o-name">Entrega</span></span>
                  <span className="o-price">+ taxa</span>
                </button>
              )}
              {settings.pickupEnabled && (
                <button className={'opt' + (form.mode === 'pickup' ? ' sel' : '')} onClick={() => set('mode', 'pickup')}>
                  <span className="row" style={{ gap: 8 }}><Icon.pin /><span className="o-name">Retirar</span></span>
                  <span className="o-price">grátis</span>
                </button>
              )}
            </div>

            {isDelivery ? (
              <React.Fragment>
                <div className="field"><label>Bairro</label>
                  <select className={'select' + errCls('zone')} style={errStyle('zone')} value={form.zone} onChange={(e) => set('zone', e.target.value)}>
                    {settings.zones.map((z) => <option key={z.id} value={z.id}>{z.name} — {money(z.fee)}</option>)}
                  </select>
                </div>
                <div className="field-row">
                  <div className="field" style={{ gridColumn: 'span 1' }}><label>Endereço (rua)</label>
                    <input className={'input' + errCls('address')} style={errStyle('address')} value={form.address} onChange={(e) => set('address', e.target.value)} placeholder="Rua das Pipocas" /></div>
                  <div className="field"><label>Número</label>
                    <input className={'input' + errCls('number')} style={errStyle('number')} value={form.number} onChange={(e) => set('number', e.target.value)} placeholder="123" /></div>
                </div>
                <div className="field-row">
                  <div className="field"><label>Complemento <span className="hint">(opcional)</span></label>
                    <input className="input" value={form.complement} onChange={(e) => set('complement', e.target.value)} placeholder="Apto 21, bloco B" /></div>
                  <div className="field"><label>Ponto de referência <span className="hint">(opcional)</span></label>
                    <input className="input" value={form.reference} onChange={(e) => set('reference', e.target.value)} placeholder="Perto do mercado" /></div>
                </div>
              </React.Fragment>
            ) : (
              <div className="pix-box" style={{ borderColor: 'var(--p3)', borderStyle: 'solid' }}>
                <div className="row" style={{ gap: 10 }}><Icon.pin /><div><div style={{ fontFamily: 'Fredoka', fontWeight: 700 }}>Retirar no balcão</div><div className="muted" style={{ fontSize: 13.5 }}>{settings.pickupAddress}</div></div></div>
              </div>
            )}
          </div>

          {/* 3. pagamento pix */}
          <div className="card" style={{ padding: 24 }}>
            <div className="panel-title">3. Pagamento via Pix</div>
            <div className="panel-sub">Pagamento por Pix na próxima etapa — geramos o QR Code na hora e confirmamos automaticamente. ⚡</div>
            <div className="pix-box">
              <div className="spread wrap" style={{ gap: 8 }}>
                <div><div className="muted" style={{ fontSize: 12.5, fontFamily: 'Fredoka', fontWeight: 600 }}>Valor a pagar</div><div className="price" style={{ color: 'var(--p1)' }}>{money(total)}</div></div>
                <span className="pill b-cyan">💜 Pix</span>
              </div>
              <div className="muted" style={{ fontSize: 13.5, marginTop: 10 }}>Ao continuar, mostramos o QR Code do Pix (copia-e-cola + imagem). Assim que o pagamento cair, seu pedido é confirmado sozinho.</div>
            </div>

            <div className="field" style={{ marginTop: 16 }}>
              <label>Observações <span className="hint">(opcional)</span></label>
              <textarea className="textarea" value={form.notes} onChange={(e) => set('notes', e.target.value)} placeholder="Sem granulado, troco, ponto de entrega..." />
            </div>
          </div>
        </div>

        {/* RESUMO */}
        <div className="card summary-card">
          <h3 style={{ fontSize: 20, marginBottom: 14 }}>Resumo</h3>
          <div style={{ maxHeight: 230, overflowY: 'auto', marginBottom: 14 }}>
            {cart.map((line) => (
              <div className="citem" key={line.lineId} style={{ padding: '10px 0' }}>
                <div className="citem-media" style={{ width: 48, height: 48 }}><ProductVisual glyph={line.glyph} color={line.color} image={line.image} showMascot={false} /></div>
                <div className="grow">
                  <div className="citem-name" style={{ fontSize: 14 }}>{line.qty}x {line.name}</div>
                  {line.optsText && <div className="citem-opt">{line.optsText}</div>}
                </div>
                <div className="price" style={{ fontSize: 15 }}>{money(line.unitPrice * line.qty)}</div>
              </div>
            ))}
          </div>
          <hr className="divider" />
          <div className="summary-row"><span>Subtotal</span><span>{money(cartSubtotal)}</span></div>
          {isDelivery && <div className="summary-row"><span>Entrega {zone ? '· ' + zone.name : ''}</span><span>{money(deliveryFee)}</span></div>}
          <div className="summary-row total"><span>Total</span><span>{money(total)}</span></div>
          {belowMin && <p style={{ color: 'var(--p1)', fontSize: 13, fontFamily: 'Fredoka', fontWeight: 600, marginTop: 8 }}>Pedido mínimo de {money(settings.minOrder)}. Faltam {money(settings.minOrder - cartSubtotal)}.</p>}
          <button className="btn btn-primary btn-lg btn-block" style={{ marginTop: 16 }} onClick={submit} disabled={submitting}>
            💜 {submitting ? 'Gerando Pix…' : 'Gerar Pix e pagar'}
          </button>
          <p className="muted center" style={{ fontSize: 12, marginTop: 10 }}>Você vai para a tela do Pix e confirmamos o pagamento automaticamente.</p>
        </div>
      </div>
    </main>
  );
}

/* ---------- Tela de pagamento Pix (QR + polling) ---------- */
function PaymentPage() {
  const { navigate, renewPix, getPixStatus, settings } = useApp();
  const toast = useToast();
  const [pix, setPix] = useState(() => { try { return JSON.parse(sessionStorage.getItem('pipoque_pix') || 'null'); } catch (e) { return null; } });
  const [status, setStatus] = useState('pending');
  const [left, setLeft] = useState(0);
  const [copied, setCopied] = useState(false);
  const [renewing, setRenewing] = useState(false);

  useEffect(() => { if (!pix) navigate('#/cardapio'); }, []);

  /* contador de expiração */
  useEffect(() => {
    if (!pix) return;
    const tick = () => setLeft(Math.max(0, Math.round((new Date(pix.expiresAt).getTime() - Date.now()) / 1000)));
    tick();
    const iv = setInterval(tick, 1000);
    return () => clearInterval(iv);
  }, [pix && pix.expiresAt]);

  /* polling do status a cada 5s */
  useEffect(() => {
    if (!pix || status === 'approved') return;
    let alive = true;
    const poll = async () => {
      const r = await getPixStatus(pix.paymentId);
      if (!alive || !r) return;
      setStatus(r.status);
      if (r.status === 'approved') {
        try { const lo = JSON.parse(sessionStorage.getItem('pipoque_last_order') || 'null'); if (lo) { lo.paymentStatus = 'approved'; sessionStorage.setItem('pipoque_last_order', JSON.stringify(lo)); } } catch (e) {}
        navigate('#/pedido?id=' + pix.orderId);
      }
    };
    poll();
    const iv = setInterval(poll, 5000);
    return () => { alive = false; clearInterval(iv); };
  }, [pix && pix.paymentId, status]);

  if (!pix) return null;

  const copy = () => {
    navigator.clipboard?.writeText(pix.qrCode).then(() => { setCopied(true); toast('Código Pix copiado! 💜'); setTimeout(() => setCopied(false), 2000); }).catch(() => toast('Copie manualmente'));
  };
  const expired = status === 'expired' || status === 'cancelled' || left <= 0;
  const mm = String(Math.floor(left / 60)).padStart(2, '0');
  const ss = String(left % 60).padStart(2, '0');
  const waUrl = `https://wa.me/${onlyDigits(settings.whatsapp)}`;

  const renew = async () => {
    setRenewing(true);
    const np = await renewPix(pix.orderId);
    setRenewing(false);
    if (np && np.paymentId) { setPix(np); setStatus('pending'); try { sessionStorage.setItem('pipoque_pix', JSON.stringify(np)); } catch (e) {} }
  };

  return (
    <main className="page" style={{ paddingTop: 30, paddingBottom: 50, maxWidth: 560 }}>
      <div className="card" style={{ padding: 24 }}>
        <div className="center" style={{ marginBottom: 8 }}>
          <span className="pill b-cyan">💜 Pix · Mercado Pago</span>
          <h1 className="sec-title" style={{ fontSize: 26, marginTop: 12 }}>Pague com Pix</h1>
          <div className="price" style={{ fontSize: 30, color: 'var(--p1)' }}>{money(pix.total)}</div>
          <div className="muted" style={{ fontSize: 13, marginTop: 4 }}>Pedido #{pix.code}</div>
        </div>

        {expired ? (
          <div className="pix-box center" style={{ borderStyle: 'solid', borderColor: 'var(--line)' }}>
            <p style={{ fontFamily: 'Fredoka', fontWeight: 700, fontSize: 17 }}>Pix expirado ⏰</p>
            <p className="muted" style={{ fontSize: 14 }}>O código venceu. Gere um novo para pagar.</p>
            <button className="btn btn-primary" style={{ marginTop: 12 }} onClick={renew} disabled={renewing}>{renewing ? 'Gerando…' : 'Gerar novo Pix'}</button>
          </div>
        ) : (
          <React.Fragment>
            <div className="center">
              {pix.qrCodeBase64
                ? <img src={'data:image/png;base64,' + pix.qrCodeBase64} alt="QR Code Pix" style={{ width: 230, height: 230, borderRadius: 12, border: '1px solid var(--line)' }} />
                : <a className="link-accent" href={pix.ticketUrl} target="_blank" rel="noreferrer">Abrir QR Code</a>}
            </div>
            <div className="pix-key" style={{ marginTop: 16 }}>
              <code style={{ wordBreak: 'break-all', fontSize: 12.5 }}>{pix.qrCode}</code>
              <button className="btn btn-ghost btn-sm" onClick={copy} style={{ flexShrink: 0 }}>{copied ? <Icon.check width="16" height="16" /> : <Icon.copy />}{copied ? 'Copiado' : 'Copiar'}</button>
            </div>
            <div className="center" style={{ marginTop: 14 }}>
              <div className="row" style={{ gap: 8, justifyContent: 'center', color: 'var(--ink-soft)', fontFamily: 'Fredoka', fontWeight: 600 }}>
                <span className="spinner" /> Aguardando pagamento…
              </div>
              <div className="muted" style={{ fontSize: 13, marginTop: 6 }}>Expira em <strong>{mm}:{ss}</strong>. Confirmamos automaticamente assim que o Pix cair. ⚡</div>
            </div>
          </React.Fragment>
        )}

        <div style={{ marginTop: 20 }}>
          <button className="btn btn-ghost btn-block" onClick={() => navigate('#/cardapio')}>Voltar ao cardápio</button>
        </div>
      </div>
    </main>
  );
}

/* ---------- Confirmação ---------- */
function ConfirmPage() {
  const app = useApp();
  const { orders, route, navigate, settings } = app;
  let order = orders.find((o) => o.id === route.query.id) || orders[0];
  if (!order) { try { order = JSON.parse(sessionStorage.getItem('pipoque_last_order') || 'null'); } catch (e) {} }
  if (!order) { return <main className="page" style={{ padding: '60px 0' }}><div className="empty-state"><Pipo size={90} /><p>Pedido não encontrado.</p><button className="btn btn-primary" onClick={() => navigate('#/cardapio')}>Ver cardápio</button></div></main>; }
  const waUrl = `https://wa.me/${onlyDigits(settings.whatsapp)}?text=${encodeURIComponent(buildWhatsappText(order))}`;
  return (
    <main className="page" style={{ paddingTop: 30, paddingBottom: 50, maxWidth: 620 }}>
      <div className="card" style={{ overflow: 'hidden' }}>
        <div style={{ background: 'var(--p3)', color: 'var(--on-p3)', position: 'relative', overflow: 'hidden' }}>
          <div className="confetti dots" />
          <div className="confirm-hero" style={{ position: 'relative' }}>
            <Pipo size={120} className="big-mascot" />
            <h1 style={{ fontSize: 32 }}>Pagamento confirmado! 🎉</h1>
            <p style={{ fontSize: 16, opacity: .9, marginTop: 8 }}>Pedido <strong>#{order.code}</strong> · obrigado, {order.name.split(' ')[0]}!</p>
          </div>
        </div>
        <div style={{ padding: 24 }}>
          <p style={{ fontSize: 15.5, lineHeight: 1.5, marginTop: 0 }}>
            {order.mode === 'delivery'
              ? <span>Pix confirmado! Vamos preparar tudo fresquinho e entregar em <strong>{order.address}, {order.number}</strong>. 🛵</span>
              : <span>Pix confirmado! É só passar no balcão para retirar quando estiver pronto. 🍿</span>}
          </p>
          <div className="pix-box" style={{ borderStyle: 'solid', borderColor: 'var(--line)', marginTop: 16 }}>
            {order.items.map((it) => (
              <div className="spread" key={it.lineId} style={{ fontSize: 14.5, marginBottom: 6 }}>
                <span>{it.qty}x {it.name}</span><span style={{ fontWeight: 700 }}>{money(it.unitPrice * it.qty)}</span>
              </div>
            ))}
            <hr className="divider" style={{ margin: '10px 0' }} />
            {order.mode === 'delivery' && <div className="summary-row"><span>Entrega</span><span>{money(order.deliveryFee)}</span></div>}
            <div className="summary-row total" style={{ fontSize: 19 }}><span>Total</span><span>{money(order.total)}</span></div>
          </div>
          <div className="row wrap" style={{ gap: 10, marginTop: 18 }}>
            <a className="btn btn-wa grow" href={waUrl} target="_blank" rel="noreferrer"><Icon.whatsapp /> Falar no WhatsApp</a>
            <button className="btn btn-ghost grow" onClick={() => navigate('#/cardapio')}>Pedir mais</button>
          </div>
          <p className="muted center" style={{ fontSize: 13, marginTop: 16 }}>Não abriu o WhatsApp? <span className="link-accent" onClick={() => window.open(waUrl, '_blank')}>Toque aqui</span>.</p>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { CartDrawer, CheckoutPage, PaymentPage, ConfirmPage });