// Product detail

function ProductDetail({ go, productId, addToCart, cartCount }) {
  const p = PRODUCTS.find((x) => x.id === productId) || PRODUCTS[0];
  const [qty, setQty] = React.useState(1);
  const [added, setAdded] = React.useState(false);

  const handleAdd = () => {
    addToCart(p.id, qty);
    setAdded(true);
    setTimeout(() => setAdded(false), 1400);
  };

  return (
    <div className="screen pd-screen" data-screen-label="03 Product Detail">
      {/* Hero image */}
      <div className="pd-hero" style={{
        position: "relative",
        background: `linear-gradient(160deg, ${p.color}, ${p.accent}aa)`,
        height: 420,
        overflow: "hidden",
      }}>
        {/* Top nav */}
        <div style={{
          position: "absolute", top: "var(--safe-top)", left: 16, right: 16, zIndex: 4,
          display: "flex", alignItems: "center", justifyContent: "space-between",
        }}>
          <button className="btn-icon" onClick={() => go("catalog")}
            style={{ background: "rgba(255,248,231,0.2)", color: "#fff8e7", borderColor: "rgba(255,248,231,0.3)", backdropFilter: "blur(8px)" }}>
            <Icon name="back" size={18} />
          </button>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn-icon" style={{ background: "rgba(255,248,231,0.2)", color: "#fff8e7", borderColor: "rgba(255,248,231,0.3)", backdropFilter: "blur(8px)" }}>
              <Icon name="share" size={16} />
            </button>
            <button className="btn-icon" onClick={() => go("cart")} style={{
              background: "rgba(255,248,231,0.2)", color: "#fff8e7",
              borderColor: "rgba(255,248,231,0.3)", backdropFilter: "blur(8px)",
              position: "relative",
            }}>
              <Icon name="bag" size={16} />
              {cartCount > 0 && (
                <span style={{
                  position: "absolute", top: -2, right: -2,
                  background: "var(--gold)", color: "var(--cocoa-deep)",
                  fontSize: 9, fontWeight: 700, fontFamily: "var(--font-mono)",
                  width: 16, height: 16, borderRadius: "50%",
                  display: "flex", alignItems: "center", justifyContent: "center",
                }}>{cartCount}</span>
              )}
            </button>
          </div>
        </div>

        {/* Product photo */}
        <ProductPhoto p={p} />
        <div style={{
          position: "absolute", inset: 0, pointerEvents: "none",
          background: "linear-gradient(180deg, rgba(26,14,8,0.45) 0%, transparent 32%)",
        }} />
      </div>

      {/* Info card */}
      <div className="pd-info" style={{
        background: "var(--bg)", borderRadius: "28px 28px 0 0",
        marginTop: -24, padding: "28px 24px 0", position: "relative",
      }}>
        <div className="eyebrow" style={{ marginBottom: 8 }}>
          {categoryLabel(p.category)}{p.weight && ` · ${p.weight}`}
        </div>
        <h1 className="h-display" style={{ fontSize: 34, margin: 0 }}>
          {p.name}
        </h1>
        <div style={{ fontSize: 20, fontWeight: 600, fontFamily: "var(--font-mono)", marginTop: 10 }}>
          {formatIDR(p.price)}
        </div>

        {p.description && (
          <p style={{
            fontFamily: "var(--font-body)", fontSize: 15, color: "var(--ink-soft)",
            marginTop: 18, marginBottom: 0, lineHeight: 1.55, textWrap: "pretty",
          }}>
            {p.description}
          </p>
        )}

        <hr className="hr-dot" style={{ margin: "24px 0" }} />

        {/* Product facts (from Accel ERP) */}
        <div className="eyebrow" style={{ marginBottom: 14 }}>Detail produk</div>
        <div style={{ display: "grid", gap: 14 }}>
          {[
            { l: "Kode", v: p.code },
            { l: "Kategori", v: categoryLabel(p.category) },
            { l: "Isi", v: p.weight },
            { l: "Kakao", v: p.cacao },
            { l: "Halal", v: /halal/i.test(p.description) ? "Bersertifikat" : "" },
          ].filter((row) => row.v).map((row) => (
            <div key={row.l} style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span style={{ fontSize: 13, color: "var(--ink-muted)", fontFamily: "var(--font-mono)", letterSpacing: "0.05em" }}>
                {row.l}
              </span>
              <span style={{ fontSize: 14, fontWeight: 500, fontFamily: "var(--font-body)" }}>
                {row.v}
              </span>
            </div>
          ))}
        </div>

        <div style={{ height: 140 }}></div>
      </div>

      {/* Bottom action bar */}
      <div className="pd-bar" style={{
        position: "sticky", bottom: 0,
        background: "var(--bg)",
        borderTop: "1px solid var(--line)",
        padding: "14px 20px 18px",
        display: "flex", alignItems: "center", gap: 12,
      }}>
        {/* Qty stepper */}
        <div style={{
          display: "flex", alignItems: "center", gap: 4,
          background: "var(--surface)", borderRadius: 999,
          border: "1px solid var(--line)", padding: 4,
        }}>
          <button className="btn-icon" onClick={() => setQty(Math.max(1, qty - 1))}
            style={{ width: 36, height: 36, border: "none", background: "transparent" }}>
            <Icon name="minus" size={14} />
          </button>
          <div style={{
            minWidth: 24, textAlign: "center",
            fontFamily: "var(--font-mono)", fontWeight: 600, fontSize: 14,
          }}>{qty}</div>
          <button className="btn-icon" onClick={() => setQty(qty + 1)}
            style={{ width: 36, height: 36, border: "none", background: "transparent" }}>
            <Icon name="plus" size={14} />
          </button>
        </div>
        <button className="btn btn-primary" onClick={handleAdd} style={{ flex: 1, padding: "14px 16px" }}>
          {added ? (
            <><Icon name="check" size={16} /> Ditambahkan</>
          ) : (
            <>
              <span>Tambah · {formatIDR(p.price * qty)}</span>
            </>
          )}
        </button>
      </div>
    </div>
  );
}

window.ProductDetail = ProductDetail;