// ET Storefront concept — PDP (story-driven, the centerpiece)
function FaqRow({ q, a }) {
  const [open, setOpen] = React.useState(false);
  const { Icon } = window;
  return (
    <div style={{ borderBottom: "1px solid var(--line-hairline)" }}>
      <button onClick={() => setOpen((o) => !o)} style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, background: "none", border: "none", cursor: "pointer", padding: "16px 0", textAlign: "left" }}>
        <span style={{ fontFamily: "var(--font-body)", fontWeight: 500, fontSize: 14.5, color: "var(--text-primary)" }}>{q}</span>
        <span style={{ flex: "0 0 auto", transform: open ? "rotate(180deg)" : "none", transition: "transform var(--dur-2) var(--ease)" }}>
          <Icon name="chevD" size={18} stroke="var(--et-brown)" />
        </span>
      </button>
      {open ? (
        <p className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--text-secondary)", margin: "0 0 16px", paddingRight: 28 }}>{a}</p>
      ) : null}
    </div>
  );
}

function PdpScreen({ nav, addToCart, productId }) {
  const DS = window.ETDesignSystem_0c923e;
  const { Button, Badge, SectionHeader, ProductCard } = DS;
  const { PhotoSlot, Icon, Stars, money, byId, PRODUCTS, LineButton } = window;

  const p = byId(productId) || PRODUCTS[0];
  const [shot, setShot] = React.useState(0);
  const [qty, setQty] = React.useState(1);
  const [added, setAdded] = React.useState(false);

  const photos = p.photo || [p.id + " · hero"];
  const story = p.story || [
    { k: "ที่มา", t: p.short, slot: p.id + " · origin" },
    { k: "ทำไมหายาก", t: p.rarity + " — เราคัดมาเพราะหาที่อื่นได้ยาก", slot: p.id + " · detail" },
  ];
  const benefits = p.benefits || ["คัดและตรวจสภาพก่อนส่งทุกชิ้น", "แพ็กอย่างดี กันกระแทกเต็มที่", "ทักถามรายละเอียดเพิ่มทาง LINE ได้"];
  const specs = p.specs || [["ที่มา", p.origin.replace("Imported · ", "")], ["สถานะ", p.rarity]];
  const related = PRODUCTS.filter((x) => x.id !== p.id).slice(0, 4);

  const doAdd = () => { addToCart(p, qty); setAdded(true); setTimeout(() => setAdded(false), 1600); };

  const reviews = [
    { n: "ณัฐ", loc: "กรุงเทพฯ", r: 5, t: "ของจริงสวยกว่าในรูป แพ็กมาดีมาก มีการ์ดที่มาให้ด้วย ประทับใจความใส่ใจ", v: true },
    { n: "Praewa", loc: "เชียงใหม่", r: 5, t: "ทักถามใน LINE ก่อนซื้อ ตอบไว ส่งวิดีโอชิ้นจริงให้ดูด้วย กล้าซื้อเลย", v: true },
    { n: "ก้อง", loc: "ภูเก็ต", r: 4, t: "ของแปลกจริงตามชื่อร้าน เพื่อนเห็นแล้วถามกันใหญ่ว่าได้มาจากไหน", v: true },
  ];

  return (
    <div style={{ paddingBottom: 96 }}>
      {/* back bar */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "10px 14px" }}>
        <button className="et-icbtn" onClick={() => nav("collection", p.vibe)} aria-label="ย้อนกลับ"><Icon name="chevL" size={22} /></button>
        <span className="et-microlabel">{p.origin}</span>
        <button className="et-icbtn" aria-label="บันทึก"><Icon name="heart" size={21} /></button>
      </div>

      {/* gallery */}
      <section style={{ padding: "2px 22px 0" }}>
        <div style={{ position: "relative" }}>
          <PhotoSlot label={photos[shot]} ratio="1 / 1" radius="var(--r-4)" tone="plain" />
          <div style={{ position: "absolute", top: 14, left: 14 }}><Badge tone={p.badgeTone}>{p.badge}</Badge></div>
        </div>
        <div style={{ display: "flex", gap: 10, marginTop: 12 }}>
          {photos.map((ph, i) => (
            <button key={i} onClick={() => setShot(i)} style={{ flex: "0 0 auto", width: 56, borderRadius: "var(--r-2)", overflow: "hidden", border: i === shot ? "1.5px solid var(--et-brown)" : "1px solid var(--line-hairline)", background: "none", padding: 0, cursor: "pointer" }}>
              <PhotoSlot label="" ratio="1 / 1" radius="0" tone="plain" />
            </button>
          ))}
        </div>
      </section>

      {/* title / price */}
      <section style={{ padding: "20px 22px 6px" }}>
        <div className="et-microlabel" style={{ color: "var(--et-brown)" }}>{p.origin}</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 26, lineHeight: 1.16, margin: "6px 0 0" }}>{p.name}</h1>
        <div className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-tertiary)", marginTop: 6 }}>{p.nameTh}</div>

        <div style={{ display: "flex", alignItems: "center", gap: 8, marginTop: 12 }}>
          <Stars value={p.rating} size={14} />
          <span style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--text-secondary)", whiteSpace: "nowrap" }}>{p.rating.toFixed(1)} · {p.reviews} รีวิว</span>
        </div>

        <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 14, flexWrap: "wrap" }}>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28 }}>{money(p.price)}</span>
          <span style={{ display: "inline-flex", alignItems: "center", gap: 5, fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--danger-fg)", whiteSpace: "nowrap" }}>
            <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--danger-fg)" }} />{p.rarity}
          </span>
        </div>

        <p className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 14.5, color: "var(--text-secondary)", margin: "14px 0 0", lineHeight: 1.65 }}>{p.short}</p>

        {/* quick trust chips */}
        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 16 }}>
          {[{ i: "shield", t: "ของแท้ มีที่มา" }, { i: "truck", t: "ส่งจากกรุงเทพฯ" }, { i: "sparkle", t: "คัดทีละชิ้น" }].map((c) => (
            <span key={c.t} style={{ display: "inline-flex", alignItems: "center", gap: 6, fontFamily: "var(--font-body)", fontSize: 12, color: "var(--text-secondary)", border: "1px solid var(--line-hairline)", borderRadius: "var(--r-pill)", padding: "6px 12px" }}>
              <Icon name={c.i} size={15} stroke="var(--et-brown)" />{c.t}
            </span>
          ))}
        </div>
      </section>

      {/* find-story */}
      <section style={{ padding: "30px 22px 6px", marginTop: 14, background: "var(--surface-soft)" }}>
        <div className="et-kicker" style={{ color: "var(--et-brown)", paddingTop: 6 }}>เรื่องของชิ้นนี้</div>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 23, lineHeight: 1.15, margin: "8px 0 18px" }}>มันมาอยู่ในตู้เราได้ยังไง</h2>
        <div style={{ display: "flex", flexDirection: "column", gap: 22, paddingBottom: 30 }}>
          {story.map((s, i) => (
            <div key={i}>
              <PhotoSlot label={s.slot} ratio="3 / 2" radius="var(--r-3)" tone="plain" />
              <div style={{ display: "flex", gap: 10, alignItems: "baseline", marginTop: 12 }}>
                <span style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 15, color: "var(--et-brown)", flex: "0 0 auto" }}>0{i + 1}</span>
                <div>
                  <div style={{ fontFamily: "var(--font-display)", fontSize: 17 }}>{s.k}</div>
                  <p className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--text-secondary)", margin: "4px 0 0", lineHeight: 1.65 }}>{s.t}</p>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* benefits */}
      <section style={{ padding: "28px 22px 4px" }}>
        <SectionHeader label="ทำไมถึงน่าเก็บ" title="สิ่งที่คุณจะได้" />
        <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 16 }}>
          {benefits.map((b, i) => (
            <div key={i} style={{ display: "flex", gap: 11, alignItems: "flex-start" }}>
              <span style={{ flex: "0 0 auto", marginTop: 1 }}><Icon name="check" size={18} stroke="var(--et-brown)" /></span>
              <span className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 14, color: "var(--text-primary)", lineHeight: 1.55 }}>{b}</span>
            </div>
          ))}
        </div>
      </section>

      {/* LINE-ask */}
      <section style={{ margin: "26px 22px", padding: "22px", borderRadius: "var(--r-4)", background: "var(--et-black)", color: "var(--et-cream)" }}>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 21, lineHeight: 1.2 }}>ยังไม่แน่ใจ? ถามก่อนซื้อได้</div>
        <p className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "rgba(238,216,195,0.7)", margin: "8px 0 16px", lineHeight: 1.6 }}>
          ขอรูปเพิ่ม วิดีโอชิ้นจริง หรือถามเรื่องที่มา-การจัดส่ง ทักเราทาง LINE ได้เลย ตอบเองทุกข้อความ
        </p>
        <LineButton size="lg" onClick={() => {}}>ถามเรื่องชิ้นนี้ทาง LINE</LineButton>
      </section>

      {/* social proof */}
      <section style={{ padding: "8px 22px 4px" }}>
        <SectionHeader label="รีวิวจากลูกค้าจริง" title={p.rating.toFixed(1) + " จาก 5"} actionText="ดูทั้งหมด" />
        <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 8 }}>
          <Stars value={p.rating} size={16} />
          <span style={{ fontFamily: "var(--font-body)", fontSize: 12.5, color: "var(--text-secondary)" }}>{p.reviews} รีวิว · ซื้อจริงผ่าน et.co.th</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 16 }}>
          {reviews.map((rv, i) => (
            <div key={i} style={{ padding: "16px", border: "1px solid var(--line-hairline)", borderRadius: "var(--r-3)", background: "var(--surface-card)" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 9 }}>
                  <span style={{ width: 30, height: 30, borderRadius: "50%", background: "var(--et-brown-soft)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--font-display)", fontSize: 14, color: "var(--et-brown)" }}>{rv.n[0]}</span>
                  <div>
                    <div style={{ fontFamily: "var(--font-body)", fontWeight: 500, fontSize: 13 }}>{rv.n}</div>
                    <div className="et-microlabel">{rv.loc}</div>
                  </div>
                </div>
                <Stars value={rv.r} size={12} />
              </div>
              <p className="et-thai" style={{ fontFamily: "var(--font-body)", fontSize: 13.5, color: "var(--text-secondary)", margin: "10px 0 0", lineHeight: 1.6 }}>{rv.t}</p>
              {rv.v ? (
                <div style={{ display: "inline-flex", alignItems: "center", gap: 5, marginTop: 10 }}>
                  <Icon name="check" size={13} stroke="var(--ok-fg)" />
                  <span style={{ fontFamily: "var(--font-body)", fontSize: 11, color: "var(--ok-fg)" }}>ผู้ซื้อยืนยันแล้ว</span>
                </div>
              ) : null}
            </div>
          ))}
        </div>
      </section>

      {/* specs */}
      <section style={{ padding: "28px 22px 4px" }}>
        <SectionHeader label="รายละเอียด" title="สเปก" />
        <div style={{ marginTop: 14, border: "1px solid var(--line-hairline)", borderRadius: "var(--r-3)", overflow: "hidden" }}>
          {specs.map(([k, v], i) => (
            <div key={i} style={{ display: "flex", justifyContent: "space-between", gap: 16, padding: "13px 16px", background: i % 2 ? "var(--surface-soft)" : "var(--surface-card)" }}>
              <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-tertiary)" }}>{k}</span>
              <span style={{ fontFamily: "var(--font-body)", fontSize: 13, color: "var(--text-primary)", textAlign: "right" }}>{v}</span>
            </div>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: "28px 22px 4px" }}>
        <SectionHeader label="คำถามที่พบบ่อย" title="ก่อนสั่งซื้อ" />
        <div style={{ marginTop: 6 }}>
          <FaqRow q="ของแท้ไหม ตรวจสอบยังไง" a="ทุกชิ้นระบุแหล่งที่มาจริง ของบางประเภท (เช่น อุกกาบาต) มีใบรับรองและการ์ดประจำชิ้น ขอดูเอกสารเพิ่มทาง LINE ได้" />
          <FaqRow q="ส่งกี่วัน เก็บปลายทางได้ไหม" a="ส่งจากกรุงเทพฯ ภายใน 1–2 วันทำการ มีพร้อมเพย์ บัตรเครดิต LINE Pay และเก็บเงินปลายทาง" />
          <FaqRow q="คืนหรือเปลี่ยนได้ไหม" a="ของที่ไม่ตรงตามที่ระบุ เปลี่ยน/คืนได้ภายใน 7 วัน ของมีชีวิตและของชิ้นเดียวมีเงื่อนไขเฉพาะ แจ้งไว้หน้าสินค้า" />
          <FaqRow q="ดูแลรักษายังไง" a="แต่ละชิ้นแนบวิธีดูแลไปด้วย เช่น อุกกาบาตเลี่ยงความชื้น ของมีชีวิตมีคู่มือฉบับ ET" />
        </div>
      </section>

      {/* related */}
      <section style={{ padding: "30px 0 30px" }}>
        <div style={{ padding: "0 22px" }}>
          <SectionHeader label="ของในตู้เดียวกัน" title="ชิ้นอื่นที่น่าเก็บ" actionText="ทั้งตู้" onAction={(e) => { e.preventDefault(); nav("collection"); }} />
        </div>
        <div className="et-rail" style={{ marginTop: 16 }}>
          {related.map((r) => (
            <div key={r.id} style={{ width: 150, flex: "0 0 auto" }}>
              <ProductCard name={r.name} price={money(r.price)} origin={r.origin} badge={r.badge} badgeTone={r.badgeTone} onClick={() => nav("pdp", r.id)} />
            </div>
          ))}
        </div>
      </section>

      <window.Footer nav={nav} />

      {/* sticky ATC */}
      <div style={{ position: "sticky", bottom: 0, zIndex: 40, background: "rgba(251,247,241,0.96)", backdropFilter: "blur(10px)", WebkitBackdropFilter: "blur(10px)", borderTop: "1px solid var(--line-hairline)", padding: "12px 18px 30px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ display: "flex", alignItems: "center", border: "1px solid var(--line-strong)", borderRadius: "var(--r-2)", overflow: "hidden", flex: "0 0 auto" }}>
            <button className="et-step" onClick={() => setQty((q) => Math.max(1, q - 1))} aria-label="ลด"><Icon name="minus" size={16} /></button>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 15, width: 26, textAlign: "center" }}>{qty}</span>
            <button className="et-step" onClick={() => setQty((q) => q + 1)} aria-label="เพิ่ม"><Icon name="plus" size={16} /></button>
          </div>
          <button className="et-atc" onClick={doAdd}>
            {added ? (<><Icon name="check" size={18} stroke="var(--et-cream)" />เพิ่มแล้ว</>) : (<>ใส่ตะกร้า · {money(p.price * qty)}</>)}
          </button>
          <button className="et-icbtn et-icbtn--line" onClick={() => {}} aria-label="ถามทาง LINE"><window.LineGlyph size={20} color="#fff" /></button>
        </div>
      </div>
    </div>
  );
}
window.PdpScreen = PdpScreen;