// Product page. SKU param picks the product; falls back to data.js productDetail.

(function () {
  window.ProductPage = function ProductPage({ sku }) {
    const d = window.NAJMAT_DATA.productDetail;
    // For v1 only the productDetail SKU is fully spec'd; other SKUs render the
    // same template using `products` data + a placeholder spec note.
    const productMatch = window.NAJMAT_DATA.products.find(p => p.sku === sku);
    const useDetail = !sku || sku === d.sku;
    const catLookup = productMatch && window.NAJMAT_DATA.categories.find(c => c.slug === productMatch.category);
    const view = useDetail ? d : (productMatch ? {
      sku: productMatch.sku, slug: productMatch.slug || productMatch.sku.toLowerCase(), name: productMatch.name, brand: productMatch.brand,
      category: { slug: productMatch.category, name: catLookup ? catLookup.name : productMatch.category },
      price: productMatch.price, listPrice: null, pack: productMatch.pack, inStock: true,
      image: productMatch.image,
      bulkBreaks: [], specs: [['Pack', productMatch.pack], ['Brand', productMatch.brand]], desc: 'Full specification coming soon — WhatsApp us for the technical sheet.', related: [],
    } : d);

    const related = view.related && view.related.length
      ? view.related.map(rsku => window.NAJMAT_DATA.products.find(p => p.sku === rsku)).filter(Boolean)
      : window.NAJMAT_DATA.products.filter(p => p.sku !== view.sku).slice(0, 4);

    const waText = `Re: SKU ${view.sku} — please confirm stock and bulk pricing.`;

    return (
      <>
        <section className="prod-top">
          <div className="rail prod-top-inner">
            <nav className="cat-breadcrumb" aria-label="Breadcrumb">
              <a href="#/">home</a> <span>›</span> <a href={`#/c/${view.category.slug}`}>{view.category.name}</a> <span>›</span> <span>{view.sku}</span>
            </nav>

            <div className="prod-grid">
              <div className="prod-gallery">
                <div className="img-slot prod-img-main" data-slot={`product-detail-${view.sku}`} data-default-src={view.image || ''}>
                  <div className="img-slot-empty" aria-hidden="true">
                    <span className="img-slot-mark is-lg">najmat<i className="img-slot-mark-dot" /></span>
                  </div>
                </div>
                <div className="prod-thumbs">
                  {[1,2,3].map(n => (
                    <div key={n} className="img-slot prod-img-thumb" data-slot={`product-detail-${view.sku}-${n}`}>
                      <div className="img-slot-empty" aria-hidden="true"><i className="img-slot-mark-dot" /></div>
                    </div>
                  ))}
                </div>
              </div>

              <div className="prod-info">
                <div className="label-mono">{view.brand}</div>
                <h1 className="prod-h">{view.name}</h1>

                <div className="prod-price-row">
                  {view.price != null
                    ? <div className="prod-price tnum">aed {view.price.toFixed(2)}</div>
                    : <div className="prod-price prod-price-ask">Ask for price</div>}
                  {view.listPrice != null && <div className="prod-list-price tnum">aed {view.listPrice.toFixed(2)}</div>}
                  <div className="prod-pack label-mono">{view.pack} · {view.price != null ? 'vat incl.' : 'pricing on request'}</div>
                </div>

                {view.bulkBreaks && view.bulkBreaks.length > 0 && (
                  <table className="prod-bulk">
                    <thead><tr><th>Qty</th><th>Price ea.</th></tr></thead>
                    <tbody>
                      {view.bulkBreaks.map(b => (
                        <tr key={b.qty}><td className="tnum">{b.qty}+</td><td className="tnum">aed {b.pricePer.toFixed(2)}</td></tr>
                      ))}
                    </tbody>
                  </table>
                )}

                <div className="prod-ctas">
                  <button className="prod-cta-primary">Add to quote</button>
                  <window.WhatsAppButton variant="ghost" text={waText} label="WhatsApp us" />
                </div>

                <h2 className="prod-specs-h label-mono">Specifications</h2>
                <table className="prod-specs">
                  <tbody>
                    {view.specs.map(([k, v]) => (
                      <tr key={k}><th>{k}</th><td>{v}</td></tr>
                    ))}
                  </tbody>
                </table>

                {view.desc && <p className="prod-desc">{view.desc}</p>}
              </div>
            </div>
          </div>
        </section>

        {related.length > 0 && (
          <section className="related">
            <div className="rail">
              <div className="label-mono" style={{ marginBottom: 'var(--s-16)' }}>Often bought with</div>
              <div className="product-grid">
                {related.map(p => <window.ProductCard key={p.sku} product={p} compact />)}
              </div>
            </div>
          </section>
        )}
      </>
    );
  };
})();