/* ============ HERMANITO · Checkout drawer ============ */
const { useState: useStateCk, useMemo, useEffect: useEffectCk } = React;

function CheckoutDrawer({ openPanel, onClose, cart, inc, dec, open, deliveryFee }){
  const slots = useMemo(() => nextSlots(3), [openPanel]);
  const [form, setForm] = useStateCk({
    mode: 'entrega', name: '', phone: '', address: '', district: '',
    ref: '', payment: 'pix', change: '', notes: '', slotKey: '',
  });
  const [touched, setTouched] = useStateCk(false);

  // default scheduling slot when closed / empty
  useEffectCk(() => {
    if (!form.slotKey && slots.length) {
      setForm(f => ({ ...f, slotKey: slots[0].key }));
    }
  }, [slots]);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const items = MENU.filter(m => (cart[m.id] || 0) > 0);
  const subtotal = items.reduce((s, m) => s + m.price * cart[m.id], 0);
  const totalQty = items.reduce((s, m) => s + cart[m.id], 0);
  const fee = form.mode === 'retirada' ? 0 : (deliveryFee || 0);
  const total = subtotal + fee;

  const chosenSlot = slots.find(s => s.key === form.slotKey) || slots[0];
  const whenText = open && chosenSlot && chosenSlot.isToday
    ? 'Hoje à noite (a partir das ' + DELIVERY_FROM + ')'
    : (chosenSlot ? chosenSlot.dayName + ' à noite (a partir das ' + DELIVERY_FROM + ') · ' + chosenSlot.dm : 'a combinar');

  const needAddr = form.mode !== 'retirada';
  const errs = {
    name: !form.name.trim(),
    phone: form.phone.replace(/\D/g, '').length < 10,
    address: needAddr && !form.address.trim(),
    district: needAddr && !form.district.trim(),
  };
  const hasErr = Object.values(errs).some(Boolean);

  const orderReady = !hasErr && items.length > 0;
  const orderHref = orderReady
    ? waLink(buildOrderMessage(cart, { ...form, when: whenText }, { subtotal, fee, total }))
    : '#';
  const onSend = (e) => {
    if (!orderReady) { e.preventDefault(); setTouched(true); }
  };

  return (
    <>
      <div className={'scrim ' + (openPanel ? 'on' : '')} onClick={onClose}></div>
      <aside className={'drawer ' + (openPanel ? 'on' : '')} aria-hidden={!openPanel}>
        <div className="drawer-head">
          <h3>Seu pedido</h3>
          <button className="x" onClick={onClose} aria-label="Fechar">×</button>
        </div>

        <div className="drawer-body">
          {items.length === 0 ? (
            <div className="empty">
              <img src="assets/mascote-busto.png" alt="" />
              <p>Seu carrinho está vazio.<br/>Escolha suas empanadas no cardápio! 🥟</p>
              <button className="btn btn-primary" style={{ marginTop:14 }} onClick={onClose}>Ver cardápio</button>
            </div>
          ) : (
            <>
              {/* line items */}
              {items.map(m => (
                <div className="line-item" key={m.id}>
                  <img src={m.img} alt={m.name} />
                  <div className="li-info">
                    <b>{m.name} {m.sub}</b>
                    <span>{brl(m.price)} · {brl(m.price * cart[m.id])}</span>
                  </div>
                  <div className="mini-step">
                    <button onClick={() => dec(m.id)}>–</button>
                    <span>{cart[m.id]}</span>
                    <button onClick={() => inc(m.id)}>+</button>
                  </div>
                </div>
              ))}

              {/* closed note */}
              {!open && (
                <div className="closed-note" style={{ marginTop:20 }}>
                  <b><Icon name="clock" style={{ width:16, height:16 }} />Estamos fechados agora</b>
                  <p>Sem problema! Seu pedido fica agendado para a próxima noite de entrega. É só confirmar a data abaixo.</p>
                </div>
              )}

              <div className="divider"><Icon name="heart" /></div>

              {/* mode */}
              <div className="field">
                <label>Como você quer receber</label>
                <div className="seg">
                  <button className={form.mode === 'entrega' ? 'active' : ''} onClick={() => set('mode', 'entrega')}>Entrega</button>
                  <button className={form.mode === 'retirada' ? 'active' : ''} onClick={() => set('mode', 'retirada')}>Retirar no local</button>
                </div>
              </div>

              {/* schedule */}
              <div className="field">
                <label>{open ? 'Quando você quer' : 'Agendar entrega para'}</label>
                <select value={form.slotKey} onChange={e => set('slotKey', e.target.value)}>
                  {slots.map(s => <option key={s.key} value={s.key}>{s.label}</option>)}
                </select>
                <div className="hint">Entregas a partir das {DELIVERY_FROM}.</div>
              </div>

              <div className="field-row">
                <div className="field">
                  <label>Nome <span className="req">*</span></label>
                  <input className={touched && errs.name ? 'err' : ''} value={form.name}
                    onChange={e => set('name', e.target.value)} placeholder="Seu nome" />
                </div>
                <div className="field">
                  <label>WhatsApp <span className="req">*</span></label>
                  <input className={touched && errs.phone ? 'err' : ''} value={form.phone}
                    onChange={e => set('phone', e.target.value)} placeholder="(19) 9 0000-0000" inputMode="tel" />
                </div>
              </div>

              {needAddr && (
                <>
                  <div className="field">
                    <label>Endereço <span className="req">*</span></label>
                    <input className={touched && errs.address ? 'err' : ''} value={form.address}
                      onChange={e => set('address', e.target.value)} placeholder="Rua, número, complemento" />
                  </div>
                  <div className="field-row">
                    <div className="field">
                      <label>Bairro <span className="req">*</span></label>
                      <input className={touched && errs.district ? 'err' : ''} value={form.district}
                        onChange={e => set('district', e.target.value)} placeholder="Seu bairro" />
                    </div>
                    <div className="field">
                      <label>Cidade</label>
                      <input value={BRAND.city} disabled />
                    </div>
                  </div>
                  <div className="field">
                    <label>Ponto de referência</label>
                    <input value={form.ref} onChange={e => set('ref', e.target.value)} placeholder="Opcional" />
                  </div>
                </>
              )}

              {/* payment */}
              <div className="field">
                <label>Pagamento na entrega</label>
                <div className="seg">
                  <button className={form.payment === 'pix' ? 'active' : ''} onClick={() => set('payment', 'pix')}>Pix</button>
                  <button className={form.payment === 'dinheiro' ? 'active' : ''} onClick={() => set('payment', 'dinheiro')}>Dinheiro</button>
                </div>
              </div>
              {form.payment === 'dinheiro' && (
                <div className="field">
                  <label>Precisa de troco para quanto?</label>
                  <input value={form.change} onChange={e => set('change', e.target.value)} placeholder="Ex.: R$ 50,00 (opcional)" inputMode="decimal" />
                </div>
              )}

              <div className="field">
                <label>Observações</label>
                <textarea rows="2" value={form.notes} onChange={e => set('notes', e.target.value)}
                  placeholder="Tirar azeitona, capricha no recheio..."></textarea>
              </div>
            </>
          )}
        </div>

        {items.length > 0 && (
          <div className="drawer-foot">
            <div className="totals">
              <div className="row"><span>Subtotal ({totalQty} {totalQty === 1 ? 'empanada' : 'empanadas'})</span><span>{brl(subtotal)}</span></div>
              <div className="row"><span>Entrega</span><span>{form.mode === 'retirada' ? 'Retirada' : (fee > 0 ? brl(fee) : 'Grátis')}</span></div>
              <div className="row grand"><span>Total</span><span className="v">{brl(total)}</span></div>
            </div>
            {touched && hasErr && (
              <p style={{ color:'var(--brick)', fontSize:'.84rem', margin:'4px 0 10px' }}>
                Preencha os campos obrigatórios para continuar.
              </p>
            )}
            <a className="btn btn-wa btn-block" href={orderHref} target="_blank" rel="noopener noreferrer" onClick={onSend} style={{ marginTop:6 }}>
              <Icon name="whatsapp" style={{ width:20, height:20 }} />
              Enviar pedido pelo WhatsApp
            </a>
            <p style={{ textAlign:'center', fontSize:'.8rem', color:'var(--muted-2)', marginTop:10 }}>
              Você confirma o pedido direto com a gente no WhatsApp.
            </p>
          </div>
        )}
      </aside>
    </>
  );
}

Object.assign(window, { CheckoutDrawer });