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

function ProductView({ p, onAdd, onNavCat, onOpen, fav, onFav }) {
  const [flavor, setFlavor] = useStateP(p.flavors[0]);
  const [qty, setQty] = useStateP(1);
  const related = PRODUCTS.filter((x) => x.brand === p.brand && x.id !== p.id).slice(0, 4);
  const fallback = PRODUCTS.filter((x) => x.id !== p.id).slice(0, 4);
  const recs = related.length ? related : fallback;
  const out = p.stock === 0;

  return (
    <main className="pdp shell">
      <div className="crumb" onClick={() => onNavCat("todos")}>
        <Icon k="back" size={16} /> Voltar ao catálogo
      </div>

      <div className="pdp-grid">
        {/* MEDIA */}
        <div className="pdp-media">
          <div className="pdp-hero" style={{ background: p.img ? "#1b1b20" : productGradient({ ...p, flavors: [flavor, ...p.flavors] }) }}>
            {p.img
              ? <img src={p.img} alt="" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
              : <div className="device" />}
            {p.badge && <span className={"pthumb-badge " + (p.badge === "Premium" ? "prem" : p.badge === "Promoção" ? "promo" : "")}>{p.badge}</span>}
            <button className={"pthumb-fav" + (fav.includes(p.id) ? " on" : "")} style={{ top: 16, right: 16 }}
              onClick={() => onFav(p.id)}><Icon k="heart" size={19} /></button>
          </div>
          <div className="pdp-gallery">
            {[0, 1, 2].map((i) => (
              <div className="g" key={i} style={{ background: productGradient({ flavors: [p.flavors[i % p.flavors.length], p.flavors[(i + 1) % p.flavors.length]] }) }}>
                <div className="device" />
              </div>
            ))}
          </div>
        </div>

        {/* INFO */}
        <div className="pdp-info">
          <div className="pdp-brand">{p.brand}{p.model ? " · " + p.model : ""}</div>
          <h1 className="pdp-name">{p.brand === "ELFKING" ? "ELFKING" : (p.model || p.brand)}</h1>
          <div style={{ display: "flex", gap: 10, flexWrap: "wrap", alignItems: "center" }}>
            {p.puffs > 0 && <span className="pdp-pufftag"><Icon k="bolt" size={14} />{p.puffs.toLocaleString("pt-BR")} puffs</span>}
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: out ? "#FF6B6B" : "var(--accent)", fontWeight: 800, fontSize: 14 }}>
              <Icon k={out ? "close" : "check"} size={16} /> {out ? "Esgotado" : "Em estoque"}
            </span>
          </div>

          <div className="pdp-price"><small>a partir de </small>{brl(p.price)}</div>
          <p style={{ color: "var(--dim)", fontSize: 13.5 }}>Preço de varejo · condição de atacado no WhatsApp</p>

          <div className="pdp-section-label">Escolha o sabor — {p.flavors.length} opções</div>
          <div className="flavor-pick">
            {p.flavors.map((f) => (
              <button key={f} className={"fpick" + (f === flavor ? " on" : "")} onClick={() => setFlavor(f)}>
                <span className="dot" style={{ background: flavorMeta(f).c }} />
                {flavorMeta(f).e} {f}
              </button>
            ))}
          </div>

          <div className="pdp-buy">
            <div className="pdp-qty">
              <button onClick={() => setQty((q) => Math.max(1, q - 1))}>–</button>
              <span>{qty}</span>
              <button onClick={() => setQty((q) => q + 1)}>+</button>
            </div>
            <button className="btn btn-yellow btn-lg" style={{ flex: 1, ...(out ? { opacity: .4, cursor: "not-allowed" } : {}) }}
              disabled={out} onClick={() => { if (!out) onAdd(p, flavor, qty); }}>
              <Icon k="cart" size={18} /> {out ? "Esgotado" : <>Adicionar — {brl(p.price * qty)}</>}
            </button>
          </div>
          <a className="btn btn-wa btn-block btn-lg" style={{ marginTop: 12 }}
             href={`https://wa.me/${STORE.whatsapp}?text=${encodeURIComponent(`Olá! Tenho interesse no ${p.brand} ${p.model} — sabor ${flavor} (${qty}x). Tem disponível?`)}`}
             target="_blank" rel="noreferrer">
            <Icon k="wa" size={19} /> Comprar agora no WhatsApp
          </a>

          {/* WHY */}
          <div className="pdp-why">
            <div style={{ display: "flex", alignItems: "center", gap: 8, fontWeight: 900, fontSize: 16, marginBottom: 10 }}>
              <span style={{ color: "var(--accent)" }}>✦</span> Por que comprar na NIK BAR?
            </div>
            <p>
              O {p.brand} {p.model} é um dos pods mais procurados da loja{p.puffs ? `, com cerca de ${p.puffs.toLocaleString("pt-BR")} puffs de duração` : ""}.
              Produto original, pronta entrega em São Luís e garantia contra defeito de fábrica. Escolha entre {p.flavors.length} sabores e receba em até 20 minutos.
            </p>
            <div className="guarantee">
              <div className="g-item"><span className="gi"><Icon k="truck" size={18} /></span><span><b>Entrega rápida</b> — até 30min (Uber/99) ou retire em qualquer unidade.</span></div>
              <div className="g-item"><span className="gi"><Icon k="check" size={18} /></span><span><b>Garantia 24h</b> — cobre defeito de fábrica (não cobre mau uso).</span></div>
              <div className="g-item"><span className="gi"><Icon k="tag" size={18} /></span><span><b>Pagamento</b> — Pix, dinheiro ou cartão na entrega.</span></div>
            </div>
          </div>
        </div>
      </div>

      {/* RELATED */}
      <section className="sec" style={{ paddingBottom: 0 }}>
        <div className="sec-head">
          <h2 className="sec-title">Você também <em>vai curtir</em></h2>
        </div>
        <div className="grid-products">
          {recs.map((r) => (
            <ProductCard key={r.id} p={r} onOpen={onOpen} onAdd={(prod) => onAdd(prod)} fav={fav.includes(r.id)} onFav={onFav} />
          ))}
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ProductView });