// ========================================
// PRISM SALES — Product detail page
// ========================================

function ProductPage({ product, setRoute, setSelectedProduct }) {
  const p = product || window.PRODUCTS[0];
  const [qty, setQty] = useState(10);
  const [added, setAdded] = useState(false);
  const [tab, setTab] = useState("specs");
  const [selectedSize, setSelectedSize] = useState(p.variants?.sizes?.[1] ?? null);
  const [selectedDuty, setSelectedDuty] = useState(p.variants?.duties?.[2]?.label ?? null);
  React.useEffect(() => {
    setSelectedSize(p.variants?.sizes?.[1] ?? null);
    setSelectedDuty(p.variants?.duties?.[2]?.label ?? null);
  }, [p.id]);

  const related = window.PRODUCTS.filter(x => x.cat === p.cat && x.id !== p.id).slice(0, 4);
  const cat = window.CATEGORIES.find(c => c.id === p.cat);
  const activeDuty = p.variants?.duties?.find(d => d.label === selectedDuty);
  const displaySku = p.variants && selectedSize && activeDuty
    ? `PRS-CND-${selectedSize.replace("mm","")}-${activeDuty.code}`
    : p.sku;

  const addToQuote = () => {
    setAdded(true);
    setTimeout(() => setAdded(false), 2400);
  };

  return (
    <div className="page">
      <section className="container" style={{ paddingTop: 40 }}>
        {/* Breadcrumb */}
        <div style={{
          display: "flex", justifyContent: "space-between", alignItems: "center",
          fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.12em",
          color: "var(--ink-dim)", marginBottom: 48, paddingBottom: 16,
          borderBottom: "1px solid var(--border)",
        }}>
          <div style={{ display: "flex", gap: 12 }}>
            <button onClick={() => setRoute("home")} style={{ color: "var(--ink-dim)", fontFamily: "inherit", fontSize: "inherit", letterSpacing: "inherit", textTransform: "inherit" }}>HOME</button>
            <span>/</span>
            <button onClick={() => setRoute("catalog")} style={{ color: "var(--ink-dim)", fontFamily: "inherit", fontSize: "inherit", letterSpacing: "inherit", textTransform: "inherit" }}>CATALOG</button>
            <span>/</span>
            <span style={{ color: "var(--ink-dim)" }}>{cat.name.toUpperCase()}</span>
            <span>/</span>
            <span style={{ color: "var(--ink)" }}>{displaySku}</span>
          </div>
          <button onClick={() => setRoute("catalog")} className="mono" style={{ color: "var(--ink-dim)" }}>
            ← BACK TO CATALOG
          </button>
        </div>

        <div className="prod-hero-grid" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80 }}>
          {/* Left — imagery */}
          <div style={{ position: "sticky", top: 100, alignSelf: "start" }}>
            <div style={{ position: "relative" }}>
              <ProductImage cat={p.cat} sku={p.sku} img={p.img} aspect="1/1" />
            </div>
          </div>

          {/* Right — info */}
          <div>
            <div className="mono" style={{ color: "var(--accent)", marginBottom: 16 }}>
              {cat.code} · {displaySku}
            </div>

            <h1 style={{
              fontFamily: "var(--f-display)",
              fontSize: "clamp(28px, 6vw, 60px)",
              lineHeight: 1.05,
              letterSpacing: "-0.02em",
              marginBottom: 24,
              textWrap: "balance",
            }}>
              {p.name}
            </h1>

            <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--ink-dim)", marginBottom: 32 }}>
              {p.desc}
            </p>

            {p.variants && (
              <div style={{ marginBottom: 36 }}>
                {/* Size selector */}
                <div style={{ marginBottom: 24 }}>
                  <div className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--ink-dim)", marginBottom: 12 }}>
                    DIAMETER
                  </div>
                  <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
                    {p.variants.sizes.map(size => {
                      const active = selectedSize === size;
                      return (
                        <button key={size} onClick={() => setSelectedSize(size)} style={{
                          padding: "9px 18px",
                          border: active ? "1px solid var(--ink)" : "1px solid var(--border-strong)",
                          background: active ? "var(--ink)" : "transparent",
                          color: active ? "var(--bg)" : "var(--ink)",
                          fontFamily: "var(--f-mono)", fontSize: 12, letterSpacing: "0.08em",
                          cursor: "pointer", transition: "all 0.15s",
                        }}>{size}</button>
                      );
                    })}
                  </div>
                </div>

                {/* Duty selector */}
                {p.variants.duties && <div>
                  <div className="mono" style={{ fontSize: 9, letterSpacing: "0.18em", color: "var(--ink-dim)", marginBottom: 12 }}>
                    DUTY / WALL THICKNESS
                  </div>
                  <div style={{ display: "flex", gap: 10, flexWrap: "wrap" }}>
                    {p.variants.duties.map(({ label, code, wall }) => {
                      const active = selectedDuty === label;
                      return (
                        <button key={label} onClick={() => setSelectedDuty(label)} style={{
                          padding: "12px 20px",
                          border: active ? "1px solid var(--accent)" : "1px solid var(--border-strong)",
                          background: active ? "color-mix(in oklch, var(--accent) 12%, var(--bg))" : "var(--bg)",
                          color: "var(--ink)",
                          fontFamily: "var(--f-mono)",
                          cursor: "pointer", transition: "all 0.15s",
                          display: "flex", flexDirection: "column", gap: 4, textAlign: "left",
                          minWidth: 100,
                        }}>
                          <span style={{ fontSize: 12, letterSpacing: "0.1em", fontWeight: active ? 700 : 400 }}>
                            {label.toUpperCase()}
                          </span>
                          <span style={{ fontSize: 9, color: "var(--ink-dim)", letterSpacing: "0.06em" }}>
                            {code} · {wall} wall
                          </span>
                        </button>
                      );
                    })}
                  </div>
                </div>}
              </div>
            )}

            <div style={{ display: "flex", gap: 8, flexWrap: "wrap", marginBottom: 40 }}>
              {p.tags.map(t => (
                <span key={t} className="chip" style={{ cursor: "default", borderColor: "var(--accent)", color: "var(--ink)" }}>
                  ✓ {t}
                </span>
              ))}
            </div>

            {/* Availability */}
            <div style={{
              padding: "20px 0",
              borderTop: "1px solid var(--border-strong)",
              borderBottom: "1px solid var(--border-strong)",
              display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap",
              marginBottom: 32,
            }}>
              <span className="mono" style={{ color: "var(--accent-lime)" }}>● IN STOCK</span>
              <span className="mono" style={{ color: "var(--ink-dim)", fontSize: 10, letterSpacing: "0.12em" }}>CONTACT US FOR PRICING</span>
            </div>


            {/* Tabs */}
            <div style={{ borderTop: "1px solid var(--border)", paddingTop: 24 }}>
              <div style={{ display: "flex", gap: 4, marginBottom: 24 }}>
                {["specs", "compliance", "logistics"].map(t => (
                  <button key={t} onClick={() => setTab(t)}
                    className="mono"
                    style={{
                      padding: "10px 14px", fontSize: 10,
                      color: tab === t ? "var(--ink)" : "var(--ink-dim)",
                      borderBottom: tab === t ? "1px solid var(--accent)" : "1px solid transparent",
                    }}>
                    {t.toUpperCase()}
                  </button>
                ))}
              </div>
              <div className="prod-spec-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "14px 32px" }}>
                {tab === "specs" && (p.variants ? [
                  ["Material", p.tags.includes("FRLS") ? "FRLS Self-extinguishing PVC" : "UV-stabilised PVC"],
                  ["Standard", "IS 9537 Part-3"],
                  ["Diameter", selectedSize ?? (p.variants.sizes[0] + "–" + p.variants.sizes[p.variants.sizes.length-1])],
                  ...(p.variants.duties ? [
                    ["Duty class", activeDuty ? `${activeDuty.label} (${activeDuty.code})` : "Light / Medium / Heavy"],
                    ["Wall thickness", activeDuty ? `${activeDuty.wall} nominal` : "1.3–2.0mm"],
                    ["Smoke emission", "Low Smoke (FRLS)"],
                  ] : []),
                  ["Temp range", "-5°C to +60°C"],
                  ["Length", p.unit === "per metre" ? "Sold per metre" : "3 metres"],
                ].map(([k,v]) => <SpecRow key={k} k={k} v={v} />) : [
                  ["Material", "Self-extinguishing PVC"],
                  ["Standard", "IS 9537 Part-3"],
                  ["Impact rating", "Medium / Heavy"],
                  ["Temp range", "-5°C to +60°C"],
                  ["Wall thickness", "2.0 mm nominal"],
                  ["Length", "3 metres"],
                ].map(([k,v]) => <SpecRow key={k} k={k} v={v} />))}
                {tab === "compliance" && [
                  ["ISI License", "CM/L-7894321"],
                  ["BIS Certified", "2024–2027"],
                  ["Halogen content", "Zero (LSZH)"],
                  ["Fire-retardancy", "IEC 60695-2-11"],
                  ["RoHS", "Compliant"],
                  ["Warranty", "24 months"],
                ].map(([k,v]) => <SpecRow key={k} k={k} v={v} />)}
                {tab === "logistics" && [
                  ["Origin", "Made in India"],
                  ["Dispatch", "Same-day (before 15:00)"],
                  ["Packaging", "Bundle of 10 pcs"],
                  ["HSN Code", "39172390"],
                  ["Lead time", "0–2 working days"],
                  ["Delivery radius", "Pan-India"],
                ].map(([k,v]) => <SpecRow key={k} k={k} v={v} />)}
              </div>
            </div>

          </div>
        </div>

        {/* Related */}
        <div style={{ marginTop: 160 }}>
          <div className="sec-head">
            <div className="sec-num">§ RELATED</div>
            <div className="sec-title">
              More from<br/>
              <span style={{ fontStyle: "italic" }}>{cat.name}</span>
            </div>
            <button className="btn" onClick={() => setRoute("catalog")}>
              View Category →
            </button>
          </div>
          <div className="prod-related-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
            {related.map(rp => (
              <ProductCard key={rp.id} p={rp}
                onClick={() => { setSelectedProduct(rp); setRoute("product"); window.scrollTo({top: 0, behavior: "smooth"}); }} />
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

function SpecRow({ k, v }) {
  return (
    <div style={{
      display: "grid", gridTemplateColumns: "1fr 1fr",
      padding: "10px 0",
      borderBottom: "1px solid var(--border)",
      fontSize: 13,
    }}>
      <span className="mono" style={{ color: "var(--ink-dim)", fontSize: 10 }}>{k.toUpperCase()}</span>
      <span style={{ color: "var(--ink)" }}>{v}</span>
    </div>
  );
}

function DocLink({ label, size }) {
  return (
    <button style={{
      display: "flex", justifyContent: "space-between", alignItems: "center",
      padding: "18px 20px", border: "1px solid var(--border-strong)",
      color: "var(--ink)", fontSize: 13, width: "100%", cursor: "pointer",
      transition: "all 0.2s",
    }}
      onMouseEnter={e => e.currentTarget.style.borderColor = "var(--ink)"}
      onMouseLeave={e => e.currentTarget.style.borderColor = "var(--border-strong)"}>
      <span style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <span className="mono" style={{ color: "var(--accent)", fontSize: 10 }}>↓ PDF</span>
        {label}
      </span>
      <span className="mono" style={{ color: "var(--ink-dim)", fontSize: 10 }}>{size}</span>
    </button>
  );
}

Object.assign(window, { ProductPage });