// ==============================================
// Product Detail page (PDP)
// ==============================================

function ProductDetailPage({ productId, session, addToCart, navigate, cart, products: propProducts }) {
  const allProducts = (propProducts && propProducts.length) ? propProducts : PRODUCTS;
  const p = allProducts.find(x => x.id === productId) || allProducts[0];
  const [qty, setQty] = useState(1);
  const [note, setNote] = useState("");
  const [thumb, setThumb] = useState(0);
  const [tab, setTab] = useState("desc");
  const isDealer = session?.role === "dealer";
  const inCart = cart.some(c => c.id === p.id);
  const price = isDealer ? p.dealerPrice : p.price;
  const related = allProducts.filter(x => (x.category === p.category || x.category_slug === p.category_slug) && x.id !== p.id).slice(0, 4);

  const specs = [
    ["รหัสสินค้า / SKU", p.sku],
    ["แบรนด์ / Brand", p.brand],
    ["หมวดหมู่ / Category", CATEGORIES.find(c => c.id === p.category)?.th || p.category],
    ["น้ำหนัก / Weight", "1.8 kg"],
    ["รับประกัน / Warranty", "12 เดือน (เคลมที่ศูนย์บริการ)"],
    ["มาตรฐาน / Standard", "มอก. / CE / ISO 9001"],
    ["พร้อมส่งที่", "คลังลาดกระบัง · คลังนนทบุรี"],
    ["ระยะเวลาจัดส่ง", "1-3 วันทำการ (กทม. & ปริมณฑล)"],
  ];

  return (
    <div className="container">
      <div className="page-head">
        <div>
          <div className="crumb">
            <a onClick={() => navigate("catalog")}>หน้าแรก</a> <Icon name="chevron-right" size={12}/>
            <a onClick={() => navigate("catalog", { category: p.category })}>{CATEGORIES.find(c => c.id === p.category)?.th}</a>
            <Icon name="chevron-right" size={12}/>
            <span>{p.th}</span>
          </div>
        </div>
        <button className="btn btn-ghost" onClick={() => navigate("catalog")}><Icon name="chevron-right" size={14} style={{transform:"rotate(180deg)"}}/> กลับสู่หน้ารายการ</button>
      </div>

      <div className="pdp-layout">
        <div className="pdp-gallery">
          <div className="pdp-main-img">
            {p.tag && <span className={`product-tag ${p.tag}`} style={{ fontSize: 12, padding: "5px 12px" }}>{p.tag === "new" ? "NEW" : p.tag === "sale" ? "SALE" : "HOT"}</span>}
            <ProductImg product={p}/>
          </div>
          <div className="pdp-thumbs">
            {[0, 1, 2, 3, 4].map(i => (
              <div key={i} className={"pdp-thumb" + (thumb === i ? " active" : "")} onClick={() => setThumb(i)}>
                <ProductImg product={p}/>
              </div>
            ))}
          </div>
        </div>

        <div className="pdp-info">
          <div className="flex gap-8 center small">
            <span className="chip info"><Icon name="package" size={11}/> {p.brand}</span>
            <span className="muted">{p.sku}</span>
          </div>
          <h1>{p.th}</h1>
          <div className="muted" style={{ fontFamily: "var(--font-en)", fontSize: 14, marginTop: -4 }}>{p.en}</div>
          <div className="pdp-rating">
            <span className="stars">
              {[1,2,3,4,5].map(i => <Icon key={i} name="star" size={14}/>)}
            </span>
            <span>{p.rating} · {p.reviews} รีวิว</span>
            <span style={{ color: "var(--ink-300)" }}>·</span>
            <span className={p.stock > 0 ? "" : "muted"} style={{color: p.stock > 20 ? "var(--green)" : p.stock > 0 ? "var(--amber)" : "var(--red)"}}>
              {p.stock > 20 ? "พร้อมส่งทันที" : p.stock > 0 ? `คงเหลือ ${p.stock} ชิ้น` : "หมดชั่วคราว"}
            </span>
          </div>

          <p style={{ color: "var(--ink-700)", lineHeight: 1.6, margin: "0 0 16px" }}>{p.desc} ผลิตจากวัสดุคุณภาพระดับอุตสาหกรรม ผ่านการทดสอบความทนทาน เหมาะสำหรับงานช่าง โรงงาน และผู้รับเหมา</p>

          <div className="pdp-price-card">
            <div className="flex between center">
              <div>
                <div className="pdp-price">฿{fmtMoney(price)} <span className="vat">รวม VAT 7%</span></div>
                {p.oldPrice && <div className="pdp-price-old">ราคาปกติ ฿{fmtMoney(p.oldPrice)}</div>}
              </div>
              {!isDealer && (
                <div className="text-right">
                  <div className="tiny muted">ราคา Dealer</div>
                  <div className="en" style={{ fontWeight: 700, color: "var(--amber)" }}>฿{fmtMoney(p.dealerPrice)}</div>
                </div>
              )}
            </div>
            {isDealer && (
              <div className="pdp-dealer-callout">
                <Icon name="tag" size={14}/> ราคา Dealer ของคุณ · ส่วนลด 15% (Gold tier)
              </div>
            )}
          </div>

          <div className="flex gap-12 center mb-16">
            <span className="bold small">จำนวน:</span>
            <QtyStepper value={qty} onChange={setQty} />
            <span className="muted small">/ ชิ้น</span>
          </div>

          <div className="form-field mb-16">
            <label>หมายเหตุ / Spec เพิ่มเติม (ใส่ในใบเสนอราคา)</label>
            <textarea value={note} onChange={e => setNote(e.target.value)} rows="2" placeholder="เช่น สีน้ำเงิน, ขอใบกำกับภาษีเต็มรูป, จัดส่งภายในวันที่..." />
          </div>

          <div className="pdp-actions">
            <button className="btn btn-primary btn-lg" style={{flex:1}} onClick={() => { addToCart(p, qty, note); }}>
              <Icon name="cart" size={16}/> เพิ่มในใบเสนอราคา · ฿{fmtMoney(price * qty)}
            </button>
            <button className="btn btn-outline btn-lg"><Icon name="heart" size={16}/></button>
          </div>

          <div className="flex gap-16 center mt-16 small muted" style={{flexWrap:"wrap"}}>
            <span className="flex gap-8 center"><Icon name="truck" size={14}/> จัดส่งฟรี ยอด ฿2,000+</span>
            <span className="flex gap-8 center"><Icon name="shield" size={14}/> รับประกัน 12 เดือน</span>
            <span className="flex gap-8 center"><Icon name="refresh" size={14}/> เปลี่ยนสินค้าได้ 7 วัน</span>
          </div>
        </div>
      </div>

      <div className="tabs">
        <button className={tab === "desc" ? "active" : ""} onClick={() => setTab("desc")}>รายละเอียดสินค้า</button>
        <button className={tab === "spec" ? "active" : ""} onClick={() => setTab("spec")}>คุณสมบัติ / Spec</button>
        <button className={tab === "review" ? "active" : ""} onClick={() => setTab("review")}>รีวิว ({p.reviews})</button>
      </div>

      {tab === "desc" && (
        <div className="card card-pad" style={{ lineHeight: 1.7, color: "var(--ink-700)" }}>
          <p><b>{p.th}</b> — {p.desc}</p>
          <p>สินค้ารับประกันคุณภาพจาก Inter Supply (1992) ผู้จำหน่ายเครื่องมือช่างและอุปกรณ์อุตสาหกรรมที่ได้รับความไว้วางใจมายาวนานกว่า 32 ปี ผลิตภัณฑ์ผ่านการทดสอบคุณภาพและรับประกันโดยศูนย์บริการอย่างเป็นทางการ</p>
          <ul style={{ paddingLeft: 20, margin: 0 }}>
            <li>ผลิตภัณฑ์แท้ 100% มี Serial Number พร้อมรับประกัน</li>
            <li>มีบริการหลังการขาย และอะไหล่แท้</li>
            <li>มีใบกำกับภาษีและใบเสนอราคาแบบมาตรฐานสรรพากร</li>
            <li>จัดส่งทั่วประเทศโดย Kerry Express / Flash / ขนส่งบริษัท</li>
          </ul>
        </div>
      )}
      {tab === "spec" && (
        <div className="card" style={{padding: 8}}>
          <table className="pdp-spec">
            <tbody>
              {specs.map(([k, v]) => (
                <tr key={k}><td>{k}</td><td>{v}</td></tr>
              ))}
            </tbody>
          </table>
        </div>
      )}
      {tab === "review" && (
        <div className="card card-pad">
          {[
            { name: "ช่างใหม่ A.", date: "12 พ.ค. 2026", rating: 5, txt: "ของแท้ ส่งเร็ว ใช้แล้วทนมาก แนะนำเลยครับ" },
            { name: "คุณเอก", date: "08 พ.ค. 2026", rating: 5, txt: "ราคาดีกว่าร้านอื่น ใบกำกับภาษีมาเร็ว เบิกได้สบาย" },
            { name: "หจก. ปลายตะวัน", date: "02 พ.ค. 2026", rating: 4, txt: "คุณภาพดีตามคาด ส่งช้ากว่าที่นัด 1 วัน แต่รวมๆ พอใจ" },
          ].map((r, i) => (
            <div key={i} style={{ padding: "12px 0", borderBottom: i < 2 ? "1px solid var(--ink-200)" : "none" }}>
              <div className="flex gap-12 center">
                <div className="avatar">{r.name.charAt(0)}</div>
                <div>
                  <div className="bold">{r.name}</div>
                  <div className="muted tiny">{r.date}</div>
                </div>
                <div style={{marginLeft:"auto"}}>
                  <span className="stars">{Array(r.rating).fill().map((_, k) => <Icon key={k} name="star" size={13}/>)}</span>
                </div>
              </div>
              <p style={{ margin: "8px 0 0", color: "var(--ink-700)" }}>{r.txt}</p>
            </div>
          ))}
        </div>
      )}

      <h3 style={{marginTop: 36, marginBottom: 16}}>สินค้าที่เกี่ยวข้อง · Related Products</h3>
      <div className="product-grid">
        {related.map(p => (
          <ProductCard key={p.id} product={p} onAdd={addToCart} onView={(p) => navigate("product", { id: p.id })}
            inCart={cart.some(c => c.id === p.id)} isDealer={isDealer}/>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { ProductDetailPage });