/* global React, STORE, brl, flavorMeta, productGradient, Icon */
const { useState: useStateCart } = React;

/* Monta a mensagem do WhatsApp com os dados do cliente + itens do carrinho.
   Já chega completa pro atendente separar o pedido. */
function buildWhatsappMessage(items, total, info, applied, discount) {
  info = info || {};
  let msg = `*Pedido NIK BAR* 🛒\n\n`;
  msg += `👤 *Nome:* ${info.nome || "—"}\n`;
  msg += `📱 *Telefone:* ${info.fone || "—"}\n`;
  msg += `📍 *Endereço:* ${info.endereco || "—"}\n`;
  msg += `💳 *Pagamento:* ${info.pgto || "—"}\n`;
  msg += `\n*Itens:*\n`;
  items.forEach((it) => {
    msg += `• ${it.brand}${it.model ? " " + it.model : ""} — ${it.flavor}\n`;
    msg += `   ${it.qty}x ${brl(it.price)} = ${brl(it.price * it.qty)}\n`;
  });
  if (applied && discount > 0) msg += `\n🏷️ *Cupom ${applied.code}:* -${brl(discount)}`;
  msg += `\n*Total: ${brl(total)}*`;
  return encodeURIComponent(msg);
}

/* ---------- AGE GATE ---------- */
function AgeGate({ onConfirm }) {
  return (
    <div className="age-gate">
      <div className="age-card">
        <img src="assets/nikbar-logo.png" alt="NIK BAR" className="brand-mark-img"
          style={{ width: 72, height: 72, margin: "0 auto 22px", display: "block" }} />
        <div className="eyebrow" style={{ textAlign: "center", marginBottom: 10 }}>Acesso restrito</div>
        <h2 className="display" style={{ fontSize: 34, textAlign: "center" }}>Você tem<br /><em style={{ color: "var(--accent)" }}>18 anos</em> ou mais?</h2>
        <p style={{ color: "var(--dim)", textAlign: "center", margin: "16px auto 26px", maxWidth: 320, fontSize: 14, lineHeight: 1.6 }}>
          Este site comercializa produtos com nicotina. A venda é proibida para menores de 18 anos.
        </p>
        <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <button className="btn btn-yellow btn-block btn-lg" onClick={onConfirm}>Sim, sou maior de 18</button>
          <a className="btn btn-ghost btn-block" href="https://www.google.com">Sair</a>
        </div>
      </div>
    </div>
  );
}

/* ---------- CART DRAWER ---------- */
function CartDrawer({ items, onClose, onQty, onRemove }) {
  const subtotal = items.reduce((s, it) => s + it.price * it.qty, 0);
  const empty = items.length === 0;
  const count = items.reduce((s, i) => s + i.qty, 0);
  const [step, setStep] = useStateCart("cart");          // "cart" | "dados"
  const [info, setInfo] = useStateCart({ nome: "", fone: "", endereco: "", pgto: "Pix" });
  const [touched, setTouched] = useStateCart(false);
  const [coupon, setCoupon] = useStateCart("");
  const [applied, setApplied] = useStateCart(null);
  const [couponMsg, setCouponMsg] = useStateCart("");
  const set = (k, v) => setInfo((s) => ({ ...s, [k]: v }));
  const ready = info.nome.trim() && info.fone.trim() && info.endereco.trim();

  const discount = applied ? (applied.tipo === "percent" ? subtotal * (applied.valor || 0) / 100 : (applied.valor || 0)) : 0;
  const total = Math.max(0, subtotal - discount);
  const waHref = `https://wa.me/${STORE.whatsapp}?text=${buildWhatsappMessage(items, total, info, applied, discount)}`;

  const applyCoupon = () => {
    const code = coupon.trim().toUpperCase();
    if (!code) return;
    const found = (window.COUPONS || []).find((c) => (c.code || "").toUpperCase() === code && c.ativo !== false);
    if (found) { setApplied(found); setCouponMsg("Cupom aplicado! 🎉"); }
    else { setApplied(null); setCouponMsg("Cupom inválido ou expirado."); }
  };

  return (
    <>
      <div className="scrim open" onClick={onClose} />
      <aside className="drawer open" role="dialog" aria-label="Carrinho">
        <div className="drawer-head">
          {step === "dados" && <button className="icon-btn" onClick={() => setStep("cart")} aria-label="Voltar"><Icon k="back" size={20} /></button>}
          <span className="drawer-title">{step === "dados" ? "Finalizar" : "Carrinho"}</span>
          <button className="icon-btn" style={{ marginLeft: "auto" }} onClick={onClose}><Icon k="close" size={20} /></button>
        </div>

        <div className="drawer-body">
          {empty ? (
            <div className="cart-empty">
              <div style={{ opacity: .5, marginBottom: 14 }}><Icon k="cart" size={48} /></div>
              <p style={{ fontWeight: 800, fontSize: 16, color: "var(--text)" }}>Seu carrinho está vazio</p>
              <p style={{ fontSize: 14, marginTop: 6 }}>Adicione produtos e finalize no WhatsApp.</p>
            </div>
          ) : step === "cart" ? (
            items.map((it) => (
              <div className="citem" key={it.key}>
                <div className="citem-thumb" style={{ background: it.img ? "#1b1b20" : productGradient(it) }}>
                  {it.img ? <img src={it.img} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} /> : <div className="device" />}
                </div>
                <div className="citem-info">
                  <div className="citem-top">
                    <div className="citem-name">{it.brand} {it.model}</div>
                    <button className="citem-remove" onClick={() => onRemove(it.key)} aria-label="Remover item">
                      <Icon k="trash" size={16} />
                    </button>
                  </div>
                  <div className="citem-flavor"><span style={{ display:"inline-block", width:8, height:8, borderRadius:"50%", background: flavorMeta(it.flavor).c, marginRight:6 }} />{it.flavor}</div>
                  <div className="citem-bottom">
                    <div className="qty">
                      <button onClick={() => onQty(it.key, -1)}>–</button>
                      <span>{it.qty}</span>
                      <button onClick={() => onQty(it.key, 1)}>+</button>
                    </div>
                    <div className="citem-price">{brl(it.price * it.qty)}</div>
                  </div>
                </div>
              </div>
            ))
          ) : (
            <>
              <div className="co-summary">
                {items.map((it) => (
                  <div className="co-sum-row" key={it.key}>
                    <span className="co-sum-name">{it.qty}× {it.brand} {it.model} <em>· {it.flavor}</em></span>
                    <span>{brl(it.price * it.qty)}</span>
                  </div>
                ))}
              </div>
              <div className="co-form">
                <div className="co-head">Seus dados para entrega</div>
                <div className="co-field">
                  <label>Nome</label>
                  <input value={info.nome} onChange={(e) => set("nome", e.target.value)} placeholder="Seu nome completo"
                    className={touched && !info.nome.trim() ? "co-miss" : ""} />
                </div>
                <div className="co-field">
                  <label>Telefone / WhatsApp</label>
                  <input type="tel" value={info.fone} onChange={(e) => set("fone", e.target.value)} placeholder="(98) 9 9999-9999"
                    className={touched && !info.fone.trim() ? "co-miss" : ""} />
                </div>
                <div className="co-field">
                  <label>Endereço de entrega</label>
                  <input value={info.endereco} onChange={(e) => set("endereco", e.target.value)} placeholder="Rua, nº, bairro e ponto de referência"
                    className={touched && !info.endereco.trim() ? "co-miss" : ""} />
                </div>
                <div className="co-field">
                  <label>Forma de pagamento</label>
                  <select value={info.pgto} onChange={(e) => set("pgto", e.target.value)}>
                    <option>Pix</option>
                    <option>Dinheiro</option>
                    <option>Cartão na entrega</option>
                  </select>
                </div>
                <div className="co-field">
                  <label>Cupom de desconto</label>
                  <div className="co-coupon">
                    <input value={coupon} onChange={(e) => setCoupon(e.target.value)} placeholder="Tem um cupom?" />
                    <button type="button" className="btn btn-ghost" onClick={applyCoupon}>Aplicar</button>
                  </div>
                  {couponMsg && <p className={"co-coupon-msg" + (applied ? " ok" : "")}>{couponMsg}</p>}
                </div>
                {touched && !ready && <p className="co-hint">Preencha nome, telefone e endereço para enviar o pedido.</p>}
              </div>
            </>
          )}
        </div>

        {!empty && (
          <div className="drawer-foot">
            {step === "dados" && applied && discount > 0 && (
              <div className="row-total" style={{ fontSize: 13 }}><span className="k">Desconto ({applied.code})</span><span style={{ color: "#4ed98b", fontWeight: 800 }}>− {brl(discount)}</span></div>
            )}
            <div className="row-total">
              <span className="k">{step === "dados" ? "Total" : `Subtotal (${count} ${count === 1 ? "item" : "itens"})`}</span>
              <span className="v">{brl(step === "dados" ? total : subtotal)}</span>
            </div>

            {step === "cart" ? (
              <button className="btn btn-yellow btn-block btn-lg" onClick={() => setStep("dados")}>
                Finalizar compra <Icon k="arrow" size={18} />
              </button>
            ) : (
              <>
                <a className={"btn btn-wa btn-block btn-lg" + (ready ? "" : " btn-disabled")}
                   href={ready ? waHref : undefined}
                   onClick={(e) => { if (!ready) { e.preventDefault(); setTouched(true); } }}
                   target="_blank" rel="noreferrer">
                  <Icon k="wa" size={20} /> Enviar pedido no WhatsApp
                </a>
                <p style={{ fontSize: 12, color: "var(--dim)", lineHeight: 1.5, margin: "-2px 0 0", textAlign: "center" }}>
                  O frete por região é confirmado pelo atendente no WhatsApp.
                </p>
              </>
            )}
          </div>
        )}
      </aside>
    </>
  );
}

Object.assign(window, { CartDrawer, AgeGate, buildWhatsappMessage });