// 彤冠茶莊 website — Product detail
const { Button: PButton, Tag: PTag, Price: PPrice, QtyStepper: PQty, ProductCard: PRelCard } = window.TongguanTeaDesignSystem_a1a7a1;

function ProductPage({ t, lang, products, productId, go, addToCart }) {
  const p = products.find((x) => x.id === productId) || products[0];
  const [active, setActive] = React.useState(0);
  const [qty, setQty] = React.useState(1);
  const [added, setAdded] = React.useState(false);
  React.useEffect(() => { setActive(0); setQty(1); setAdded(false); window.scrollTo(0, 0); }, [productId]);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  const related = products.filter((x) => x.id !== p.id).slice(0, 3);
  const doAdd = () => { addToCart(p.id, qty); setAdded(true); setTimeout(() => setAdded(false), 1600); };

  return (
    <main lang={lang}>
      <div className="tg-container tg-container--wide" style={{ paddingTop: "var(--space-6)", paddingBottom: "var(--space-9)" }}>
        <button onClick={() => go("shop")} style={{ display: "inline-flex", alignItems: "center", gap: 8, background: "none", border: "none", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: 13.5, color: "var(--text-secondary)", marginBottom: 30 }}>
          <i data-lucide="arrow-left" style={{ width: 16, height: 16 }}></i>{t.product.back}
        </button>

        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: "clamp(28px, 4vw, 64px)", alignItems: "start" }} className="tg-product-grid">
          {/* gallery */}
          <div style={{ position: "sticky", top: 110 }} className="tg-product-gallery">
            <div style={{ borderRadius: "var(--radius-lg)", overflow: "hidden", aspectRatio: "4/5", background: "var(--paper-2)", boxShadow: "var(--shadow-sm)" }}>
              <img src={p.gallery[active]} alt={p.name[lang]} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            {p.gallery.length > 1 && (
              <div style={{ display: "flex", gap: 12, marginTop: 14 }}>
                {p.gallery.map((g, i) => (
                  <button key={i} onClick={() => setActive(i)} style={{ width: 76, height: 92, borderRadius: "var(--radius-sm)", overflow: "hidden", border: `2px solid ${active === i ? "var(--tea)" : "transparent"}`, cursor: "pointer", padding: 0, background: "none" }}>
                    <img src={g} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* info */}
          <div>
            <span className="tg-eyebrow" style={{ color: "var(--text-accent)" }}>{p.eyebrow[lang]}</span>
            <h1 className="tg-display" style={{ fontSize: "clamp(2rem, 4vw, 2.9rem)", margin: "14px 0 18px" }}>{p.name[lang]}</h1>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 22 }}>
              {p.tags.map((tg, i) => <PTag key={i} tone={tg.tone}>{tg[lang]}</PTag>)}
            </div>
            <PPrice amount={p.price} size="lg" />
            <p style={{ fontFamily: "var(--font-sans)", fontSize: 16, lineHeight: 1.85, color: "var(--text-secondary)", margin: "22px 0 28px" }}>{p.desc[lang]}</p>

            {/* add row */}
            <div style={{ display: "flex", gap: 14, alignItems: "center", marginBottom: 12 }}>
              <PQty value={qty} onChange={setQty} />
              <PButton variant="primary" size="lg" icon={added ? "check" : "leaf"} fullWidth onClick={doAdd}>
                {added ? t.product.added : t.product.add}
              </PButton>
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8, fontFamily: "var(--font-sans)", fontSize: 12.5, color: "var(--text-muted)", marginBottom: 34 }}>
              <i data-lucide="map-pin" style={{ width: 14, height: 14 }}></i>{t.product.origin} · {p.origin[lang]}
            </div>

            {/* specs */}
            <div style={{ borderTop: "1px solid var(--border-hairline)", paddingTop: 22 }}>
              <div className="tg-eyebrow" style={{ marginBottom: 16 }}>{t.product.specs}</div>
              <dl style={{ margin: 0, display: "grid", gridTemplateColumns: "auto 1fr", rowGap: 12, columnGap: 24 }}>
                {p.specs.map((s, i) => (
                  <React.Fragment key={i}>
                    <dt style={{ fontFamily: "var(--font-sans)", fontSize: 13.5, color: "var(--text-muted)" }}>{s.k[lang]}</dt>
                    <dd style={{ margin: 0, fontFamily: "var(--font-sans)", fontSize: 14, color: "var(--ink)" }}>{s.v[lang]}</dd>
                  </React.Fragment>
                ))}
              </dl>
            </div>
          </div>
        </div>

        {/* related */}
        <section style={{ marginTop: "var(--space-10)" }}>
          <h2 className="tg-display" style={{ fontSize: "clamp(1.6rem, 3vw, 2.2rem)", marginBottom: 34 }}>{t.product.related}</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 28 }} className="tg-shop-grid-3">
            {related.map((r) => (
              <PRelCard key={r.id} image={r.image} eyebrow={r.eyebrow[lang]} name={r.name[lang]} subtitle={r.sub[lang]}
                tags={r.tags.slice(0, 2).map((tg) => ({ label: tg[lang], tone: tg.tone }))} amount={r.price}
                addLabel={t.product.add} onAdd={() => addToCart(r.id)} onClick={() => go("product", r.id)} />
            ))}
          </div>
        </section>
      </div>
    </main>
  );
}
window.ProductPage = ProductPage;