/* product.jsx — Product detail page with gallery + collector specs */

function ProductPage({ id }) {
  const { L, lang, t, nav, addToCart, cart } = useApp();
  const p = DB.getProduct(id);
  const [active, setActive] = useState(0);

  useEffect(() => { setActive(0); }, [id]);

  if (!p) return <div className="wrap" style={{ padding: "80px 0" }}><p className="muted">Item not found.</p></div>;

  const cat = DB.getCategory(p.cat);
  const inCart = cart.find((x) => x.id === p.id);
  const soldOut = p.qty <= 0;
  const related = DB.getProducts().filter((x) => x.cat === p.cat && x.id !== p.id).slice(0, 4);

  const specs = [
    { label: t("sp_era"), value: L(p, "era") },
    { label: t("sp_year"), value: p.year_ce > 0 ? `${lang === "th" ? "พ.ศ." : "B.E."} ${p.year_be} · ${lang === "th" ? "ค.ศ." : "C.E."} ${p.year_ce}` : "—" },
    { label: t("sp_grade"), value: p.grade },
    { label: t("sp_material"), value: L(p, "material") },
    { label: t("sp_denom"), value: p.denomination },
    { label: t("sp_dim"), value: p.diameter },
    { label: t("sp_weight"), value: p.weight },
    { label: t("sp_cert"), value: p.certified ? t("cert_yes") : t("cert_no") },
  ];

  return (
    <div className="wrap" style={{ padding: "30px 0 80px" }}>
      <button className="crumb" onClick={() => nav("shop", { catId: p.cat })}>
        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="m15 18-6-6 6-6"/></svg>
        {L(cat, "name")}
      </button>

      <div className="pd-grid">
        {/* GALLERY */}
        <div className="pd-gallery">
          <div className="pd-main">
            <Placeholder img={p.images[active]} />
            {p.certified && <span className="ribbon ribbon-lg">{lang === "th" ? "มีใบรับรองความแท้" : "Certificate of Authenticity"}</span>}
          </div>
          {p.images.length > 1 && (
            <div className="pd-thumbs">
              {p.images.map((im, i) => (
                <button key={i} className={`pd-thumb ${i === active ? "on" : ""}`} onClick={() => setActive(i)}>
                  <Placeholder img={im} />
                </button>
              ))}
            </div>
          )}
        </div>

        {/* INFO */}
        <div className="pd-info">
          <span className="card-era">{L(cat, "name")}</span>
          <h1 className="pd-title">{L(p, "name")}</h1>
          <p className="pd-era muted">{L(p, "era")}</p>

          <div className="pd-price-row">
            <span className="price" style={{ fontSize: 34 }}>{DB.THB(p.price)}</span>
            {soldOut
              ? <span className="status status-bad">{t("sold_out")}</span>
              : <span className="pd-stock">{p.qty} {t("only_left")}</span>}
          </div>

          <p className="pd-desc">{L(p, "desc")}</p>

          <div className="pd-actions">
            {soldOut ? (
              <Btn variant="ghost" className="btn-lg btn-block" disabled>{t("sold_out")}</Btn>
            ) : inCart ? (
              <Btn variant="gold" className="btn-lg btn-block" onClick={() => nav("cart")}>
                {lang === "th" ? "ดูในตะกร้า" : "View in cart"} →
              </Btn>
            ) : (
              <Btn variant="gold" className="btn-lg btn-block" onClick={() => addToCart(p)}>
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><path d="M3 5h2l2.4 12.2a1 1 0 0 0 1 .8h8.7a1 1 0 0 0 1-.8L21 8H6"/></svg>
                {t("add_cart")}
              </Btn>
            )}
          </div>

          {/* SPEC TABLE */}
          <div className="pd-specs">
            <div className="kicker" style={{ marginBottom: 14 }}>{t("spec")}</div>
            <dl className="spec-list">
              {specs.map((s, i) => (
                <div className="spec-row" key={i}>
                  <dt>{s.label}</dt>
                  <dd>{s.value}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>

      {/* RELATED */}
      {related.length > 0 && (
        <section style={{ marginTop: 80 }}>
          <div className="kicker">{lang === "th" ? "ในหมวดเดียวกัน" : "From the same cabinet"}</div>
          <h2 className="section-title" style={{ marginBottom: 28 }}>{lang === "th" ? "อาจสนใจ" : "You may also like"}</h2>
          <div className="grid">
            {related.map((rp) => <ProductCard key={rp.id} p={rp} />)}
          </div>
        </section>
      )}
    </div>
  );
}

window.ProductPage = ProductPage;