// screen-product.jsx — gallery, detail, swatches, sizes, accordion, reviews

function Accordion({ items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div className="accordion">
      {items.map((it, i) => (
        <div key={i} className={`acc-item ${open === i ? "open" : ""}`}>
          <button className="acc-head" onClick={() => setOpen(open === i ? -1 : i)}>
            {it.title}<span className="pm">+</span>
          </button>
          <div className="acc-body"><div className="acc-inner">{it.body}</div></div>
        </div>
      ))}
    </div>
  );
}

function ScreenProduct({ id, go, onAdd, onToast }) {
  const { PRODUCTS, REVIEWS } = window.AURA_DATA;
  const p = PRODUCTS.find((x) => x.id === id) || PRODUCTS[0];
  const sizes = ["XS", "S", "M", "L", "XL"];
  const [size, setSize] = React.useState("M");
  const [color, setColor] = React.useState(p.colors[0]);
  const related = PRODUCTS.filter((x) => x.cat === p.cat && x.id !== p.id).slice(0, 4);
  const fill = related.length < 4 ? PRODUCTS.filter((x) => x.id !== p.id && !related.includes(x)).slice(0, 4 - related.length) : [];
  const rel = [...related, ...fill];

  const accItems = [
    { title: "Açıklama", body: (
      <p>{p.name}, {p.fabric.toLowerCase()} kumaştan atölyemizde özenle ve kusursuz işçilikle üretilir. Zamansız bir siluet ve özenli dikiş detaylarıyla, gündüzden geceye taşınabilen bir parça. Modelimiz {p.model.toUpperCase()} 1.78 m boyunda olup M beden giymektedir.</p>
    ) },
    { title: "Kompozisyon & Bakım", body: (
      <ul>
        <li>Kumaş: {p.fabric}</li>
        <li>Astar: %100 viskon</li>
        <li>Kuru temizleme önerilir</li>
        <li>Düşük ısıda, ters yüz ütüleyin</li>
        <li>Menşei: Türkiye — BilgeAura Atölyesi</li>
      </ul>
    ) },
    { title: "Beden Tablosu", body: (
      <table className="size-table">
        <thead><tr><th>Beden</th><th>Göğüs (cm)</th><th>Bel (cm)</th><th>Kalça (cm)</th></tr></thead>
        <tbody>
          <tr><td>XS</td><td>82</td><td>64</td><td>90</td></tr>
          <tr><td>S</td><td>86</td><td>68</td><td>94</td></tr>
          <tr><td>M</td><td>90</td><td>72</td><td>98</td></tr>
          <tr><td>L</td><td>94</td><td>76</td><td>102</td></tr>
          <tr><td>XL</td><td>98</td><td>80</td><td>106</td></tr>
        </tbody>
      </table>
    ) },
    { title: "Sürdürülebilirlik", body: (
      <p>İzlenebilir tedarik zinciri, OEKO-TEX sertifikalı kumaşlar ve geri dönüştürülebilir, FSC sertifikalı ambalaj. Sıfır atık, talebe özel titiz üretim ve etik atölye standartlarıyla aşırı stoğu ve israfı önlüyoruz.</p>
    ) },
  ];

  return (
    <main>
      <div className="wrap pd">
        <div className="pd-gallery">
          <image-slot id={`slot-pd-${p.id}-1`} src={`images/p${p.id.slice(1)}-main.jpg`} placeholder="Ana görsel"></image-slot>
          <image-slot id={`slot-pd-${p.id}-2`} src={`images/p${p.id.slice(1)}-detail.jpg`} placeholder="Detay"></image-slot>
          <image-slot id={`slot-pd-${p.id}-3`} src={`images/p${p.id.slice(1)}-main.jpg`} placeholder="Yaşam fotoğrafı"></image-slot>
        </div>

        <div className="pd-info">
          <div className="breadcrumb" style={{ marginBottom: 18 }}>
            <button onClick={() => go("home")}>Ana Sayfa</button><span>/</span>
            <button onClick={() => go("collection")}>Koleksiyon</button><span>/</span>
            <span style={{ color: "var(--ink)" }}>{p.cat}</span>
          </div>
          <div className="pd-cat">{p.cat}</div>
          <h1>{p.name}</h1>
          <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
            <Stars n={p.rating} /><span style={{ fontSize: 14, color: "var(--muted)" }}>{p.rating} · {p.reviews} yorum</span>
          </div>
          <div className="pd-price">
            {fmt(p.price)}{p.old && <span className="old">{fmt(p.old)}</span>}
          </div>
          <p className="pd-desc">{p.fabric} · atölye üretimi. {p.name}, gerçek vücut oranlarıyla {p.model.toUpperCase()} üzerinde gösterilmiştir.</p>

          <div className="pd-block">
            <div className="lbl">Renk</div>
            <div className="swatches">
              {p.colors.map((c) => (
                <button key={c} className={`swatch ${color === c ? "active" : ""}`} style={{ background: c }} onClick={() => setColor(c)} aria-label={c}></button>
              ))}
            </div>
          </div>

          <div className="pd-block">
            <div className="lbl" style={{ display: "flex", justifyContent: "space-between" }}>
              <span>Beden</span>
              <button style={{ background: "none", border: 0, color: "var(--accent)", fontWeight: 700, letterSpacing: ".08em", cursor: "pointer" }}>Beden Rehberi</button>
            </div>
            <div className="sizes">
              {sizes.map((s) => (
                <button key={s} className={`size ${size === s ? "active" : ""} ${s === "XS" && p.id === "p5" ? "out" : ""}`} disabled={s === "XS" && p.id === "p5"} onClick={() => setSize(s)}>{s}</button>
              ))}
            </div>
          </div>

          <div className="pd-actions">
            <button className="btn" onClick={() => { onAdd(p); onToast(`${p.name} sepete eklendi`); }}>Sepete Ekle — {fmt(p.price)}</button>
            <button className="btn ghost sm" onClick={() => onToast("Favorilere eklendi")} aria-label="Favori"><I.heart /></button>
          </div>

          <button className="btn pd-vton" onClick={() => go("vton")}>
            <I.spark /> Yapay Zekâ ile Üzerinizde Deneyin ✦
          </button>

          <div className="pd-meta">
            <div className="m"><I.truck /> 48 saatte kargo</div>
            <div className="m"><I.refresh /> 14 gün iade</div>
            <div className="m"><I.shield /> Güvenli ödeme</div>
          </div>

          <Accordion items={accItems} />
        </div>
      </div>

      {/* product reviews */}
      <section className="story" style={{ marginTop: 40 }}>
        <div className="wrap">
          <div className="section-head" style={{ marginBottom: 30 }}>
            <div><p className="eyebrow">Yorumlar</p><h2 style={{ marginTop: 12, fontSize: "clamp(28px,3.6vw,44px)" }}>Bu parça hakkında</h2></div>
          </div>
          <div className="pr-summary">
            <div style={{ textAlign: "center" }}>
              <div className="pr-score">{p.rating}</div>
              <Stars n={p.rating} />
              <div style={{ fontSize: 13, color: "var(--muted)", marginTop: 6 }}>{p.reviews} yorum</div>
            </div>
            <div className="pr-bars">
              {[5,4,3,2,1].map((s, i) => (
                <div key={s} className="pr-bar">
                  <span>{s}★</span>
                  <div className="track"><div className="fill" style={{ width: `${[88,9,2,1,0][i]}%` }}></div></div>
                  <span>{[88,9,2,1,0][i]}%</span>
                </div>
              ))}
            </div>
          </div>
          <div className="reviews-grid" style={{ marginTop: 30 }}>
            {REVIEWS.map((r, i) => (
              <div key={i} className="review">
                <Stars n={5} />
                <p className="review-text">“{r.text}”</p>
                <div className="review-meta">
                  <div className="review-av">{r.initial}</div>
                  <div style={{ flex: 1 }}><div className="review-name">{r.name}</div><div className="review-loc">{r.loc}</div></div>
                  <span className="review-verified"><I.check /> Doğrulandı</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* related */}
      <section>
        <div className="wrap">
          <div className="section-head"><div><p className="eyebrow">Tamamlayın</p><h2 style={{ marginTop: 12, fontSize: "clamp(28px,3.6vw,44px)" }}>Birlikte güzel durur</h2></div></div>
          <div className="grid-products">
            {rel.map((rp) => <ProductCard key={rp.id} p={rp} go={go} onQuick={() => go("product", rp.id)} onFav={() => onToast("Favorilere eklendi")} />)}
          </div>
        </div>
      </section>
    </main>
  );
}

window.ScreenProduct = ScreenProduct;