// produk.jsx — Product Detail Page

function ProdukDetail({ ctx, productId }) {
  const product = PRODUCT_BY_ID[productId] || PRODUCTS[0];
  const cat = CATEGORY_BY_SLUG[product.cat];
  const [variant, setVariant] = React.useState(product.variants?.[0]?.label || null);
  const [qty, setQty] = React.useState(1);
  const [tab, setTab] = React.useState('desc');
  const [imgIdx, setImgIdx] = React.useState(0);
  const isWished = ctx.wishlist.includes(product.id);

  const related = PRODUCTS.filter(p => p.cat === product.cat && p.id !== product.id).slice(0, 6);
  const galleryGlyphs = [product.glyph, cat.kanji, '★', '日', '本'];

  return (
    <div>
      <div className="crumbs" style={{ marginBottom: 16 }}>
        <a onClick={() => ctx.go('home')}>Beranda</a>
        <span className="sep">/</span>
        <a onClick={() => ctx.go('katalog', product.cat)}>{cat.nameID}</a>
        <span className="sep">/</span>
        <span>{product.nameID}</span>
      </div>

      <div className="pdp">
        {/* GALLERY */}
        <div className="pdp-gallery">
          <div className="pdp-main-img" style={{ background: cat.color }}>
            {galleryGlyphs[imgIdx]}
            <div className="product-badges">
              {(product.badges || []).map((b, i) => {
                const bd = BADGES[b];
                return <span key={i} className={`badge-jp ${bd.cls}`}>{bd.jp} {bd.text}</span>;
              })}
            </div>
          </div>
          <div className="pdp-thumbs">
            {galleryGlyphs.map((g, i) => (
              <div key={i} className={`pdp-thumb ${i === imgIdx ? 'active' : ''}`}
                   style={{ background: cat.color }} onClick={() => setImgIdx(i)}>
                {g}
              </div>
            ))}
          </div>
        </div>

        {/* INFO */}
        <div className="pdp-info">
          <span className="pdp-cat">
            <Icon name="pin" size={12} /> {product.brand} · {product.origin}, Japan
          </span>
          <h1>{product.nameID}</h1>
          <div className="jp-name">{product.nameJP}</div>
          <div className="pdp-meta-row">
            <span className="stars" style={{ fontWeight: 600, color: 'var(--ink)' }}>
              <Icon name="star" size={14} /> {product.rating}
            </span>
            <span className="muted">· {product.sold.toLocaleString('id-ID')} terjual</span>
            <span className="muted">· Stok: {product.stock}</span>
            <button className="icon-btn" title="Share">
              <Icon name="share" size={16} />
            </button>
          </div>

          <div className="pdp-price-box">
            <span className="main">{fmtIDR(product.priceIDR)}</span>
            <span className="alt">/ {fmtJPY(product.priceJPY)}</span>
            {product.oldIDR && <span className="strike">{fmtIDR(product.oldIDR)}</span>}
            {product.oldIDR && (
              <span className="disc">
                -{Math.round((1 - product.priceIDR / product.oldIDR) * 100)}%
              </span>
            )}
          </div>

          {product.variants?.length > 0 && (
            <div className="pdp-variants">
              <div className="lbl">Varian: <b>{variant}</b></div>
              <div className="variant-chips">
                {product.variants.map(v => (
                  <button key={v.label}
                          className={`variant-chip ${variant === v.label ? 'active' : ''}`}
                          onClick={() => setVariant(v.label)}>
                    {v.label}
                  </button>
                ))}
              </div>
            </div>
          )}

          <div className="row" style={{ gap: 16 }}>
            <div>
              <div className="pdp-variants">
                <div className="lbl">Jumlah</div>
                <div className="qty-stepper">
                  <button onClick={() => setQty(Math.max(1, qty - 1))}><Icon name="minus" size={14} /></button>
                  <span className="val">{qty}</span>
                  <button onClick={() => setQty(qty + 1)}><Icon name="plus" size={14} /></button>
                </div>
              </div>
            </div>
            <div className="muted" style={{ fontSize: 12 }}>
              Tersedia <b style={{ color: 'var(--ink)' }}>{product.stock}</b> dari {product.origin}
            </div>
          </div>

          <div className="pdp-cta">
            <button className="btn primary lg" onClick={() => ctx.addToCart(product, qty, variant)}>
              <Icon name="cart" size={18} /> カートに入れる · Tambah ke Keranjang
            </button>
            <button className="btn cyan lg"
                    onClick={() => { ctx.addToCart(product, qty, variant); ctx.go('keranjang'); }}>
              今すぐ購入 · Beli Sekarang
            </button>
            <button className={`btn ${isWished ? 'primary' : 'ghost'}`}
                    onClick={() => ctx.toggleWishlist(product.id)}
                    aria-label="Wishlist">
              <Icon name="heart" size={18} />
            </button>
          </div>

          <div className="pdp-perks">
            <div className="perk"><Icon name="truck" size={20} /> EMS Japan Post · 5–10 hari</div>
            <div className="perk"><Icon name="shield" size={20} /> Garansi Asli 100%</div>
            <div className="perk"><Icon name="return" size={20} /> Bisa Refund 7 hari</div>
          </div>
        </div>
      </div>

      {/* TABS */}
      <section className="section">
        <div className="tabs">
          <button className={tab === 'desc' ? 'active' : ''} onClick={() => setTab('desc')}>Deskripsi</button>
          <button className={tab === 'spec' ? 'active' : ''} onClick={() => setTab('spec')}>Spesifikasi</button>
          <button className={tab === 'review' ? 'active' : ''} onClick={() => setTab('review')}>Review ({product.sold > 100 ? Math.floor(product.sold / 10) : 12})</button>
          <button className={tab === 'faq' ? 'active' : ''} onClick={() => setTab('faq')}>FAQ</button>
        </div>

        <div className="card" style={{ padding: 24 }}>
          {tab === 'desc' && (
            <div>
              <h4 style={{ marginTop: 0 }}>Tentang Produk Ini</h4>
              <p>
                {product.nameID} adalah produk premium dari <b>{product.brand}</b> yang dibuat
                di <b>{product.origin}, Jepang</b>. Setiap unit melalui quality check ketat
                sebelum dikirim, dengan packaging anti-pecah dan dokumen bea cukai lengkap.
              </p>
              <p className="muted">
                Produk ini dijamin asli 100%. Pengiriman menggunakan EMS Japan Post langsung
                dari gudang Tokyo, estimasi tiba 5–10 hari kerja ke seluruh Indonesia. Pajak
                impor sudah termasuk dalam harga (DDP).
              </p>
              <h4>Highlight</h4>
              <ul>
                <li>Produk asli dari {product.origin}, Japan</li>
                <li>Dijual oleh authorized reseller {product.brand}</li>
                <li>Stok dijaga real-time, ready stock di gudang Tokyo</li>
                <li>Bisa tukar atau refund dalam 7 hari setelah barang sampai</li>
              </ul>
            </div>
          )}

          {tab === 'spec' && (
            <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
              <tbody>
                {[
                  ['Brand', product.brand],
                  ['SKU', product.id.toUpperCase()],
                  ['Kategori', cat.nameID + ' (' + cat.nameJP + ')'],
                  ['Asal', product.origin + ', Japan'],
                  ['Varian', product.variants?.map(v => v.label).join(', ') || '—'],
                  ['Berat', '0.4 kg (dikemas)'],
                  ['Dimensi', '20 × 15 × 8 cm'],
                  ['Stok', product.stock + ' unit'],
                ].map(([k, v]) => (
                  <tr key={k} style={{ borderBottom: '1px dashed var(--line)' }}>
                    <td style={{ padding: '10px 0', color: 'var(--ink-3)', width: 200 }}>{k}</td>
                    <td style={{ padding: '10px 0', fontWeight: 600 }}>{v}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}

          {tab === 'review' && (
            <div>
              <div className="review-summary">
                <div>
                  <div className="score">{product.rating}</div>
                  <div className="stars" style={{ fontSize: 16 }}>
                    {Array.from({length: 5}).map((_, i) => <Icon key={i} name="star" size={16} />)}
                  </div>
                  <div className="muted" style={{ fontSize: 12, marginTop: 4 }}>
                    {Math.floor(product.sold / 10)} ulasan
                  </div>
                </div>
                <div className="review-bars">
                  {[5, 4, 3, 2, 1].map(n => {
                    const pct = n === 5 ? 78 : n === 4 ? 16 : n === 3 ? 4 : n === 2 ? 1 : 1;
                    return (
                      <div key={n} className="review-bar">
                        <span>{n} bintang</span>
                        <div className="track"><div className="fill" style={{ width: pct + '%' }} /></div>
                        <span>{pct}%</span>
                      </div>
                    );
                  })}
                </div>
              </div>
              <div style={{ marginTop: 16 }}>
                {SAMPLE_REVIEWS.map((r, i) => (
                  <div key={i} className="review-item">
                    <div className="who">
                      <div className="avatar">{r.initials}</div>
                      <div>
                        <div style={{ fontWeight: 700, fontSize: 14 }}>{r.user}</div>
                        <div className="stars" style={{ fontSize: 11 }}>
                          {Array.from({length: r.rating}).map((_, j) => <Icon key={j} name="star" size={11} />)}
                          <span className="muted" style={{ marginLeft: 6 }}>· {r.date}</span>
                        </div>
                      </div>
                    </div>
                    <p style={{ margin: 0, fontSize: 13 }}>{r.text}</p>
                  </div>
                ))}
              </div>
            </div>
          )}

          {tab === 'faq' && (
            <div>
              {[
                ['Berapa lama pengiriman?', 'EMS Japan Post: 5–10 hari kerja ke Indonesia. JNE/SiCepat reguler: 3–5 hari setelah sampai di gudang Jakarta.'],
                ['Apakah pajak impor sudah termasuk?', 'Ya, semua harga sudah DDP (Delivered Duty Paid). Tidak ada biaya tambahan saat barang sampai.'],
                ['Apakah produk dijamin asli?', 'Ya, kami adalah authorized reseller resmi. Setiap produk dilengkapi sertifikat keaslian dari brand.'],
                ['Bisa retur jika tidak cocok?', 'Bisa dalam 7 hari setelah barang sampai, dengan syarat kondisi belum dipakai dan packaging lengkap.'],
              ].map(([q, a], i) => (
                <details key={i} style={{ borderBottom: '1px dashed var(--line)', padding: '12px 0' }}>
                  <summary style={{ fontWeight: 700, cursor: 'pointer', listStyle: 'none' }}>
                    + {q}
                  </summary>
                  <p style={{ marginTop: 8, color: 'var(--ink-3)' }}>{a}</p>
                </details>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* RELATED */}
      <section className="section">
        <div className="section-hd">
          <h2 className="section-title">
            <span className="jp">関連商品 · RELATED</span>
            Produk Serupa
          </h2>
        </div>
        <div className="product-grid">
          {related.map(p => <ProductCard key={p.id} product={p} ctx={ctx} />)}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ProdukDetail });