// Page: Product Detail
function ProductPage({ lang, navigate, productId, wishlist, toggleWish, onWaOrder, tweaks }) {
  const t = I18N[lang];
  const product = PRODUCTS.find(p => p.id === productId) || PRODUCTS[0];
  const [activeImg, setActiveImg] = useState(0);
  const [size, setSize] = useState(product.sizes ? 'M' : null);
  const [color, setColor] = useState(0);
  const [openAcc, setOpenAcc] = useState('details');
  useReveal();

  useEffect(() => { window.scrollTo(0, 0); setActiveImg(0); }, [productId]);
  const isWished = wishlist.includes(product.id);

  const similar = PRODUCTS.filter(p => p.category === product.category && p.id !== product.id).slice(0, 4);
  const cat = CATEGORIES.find(c => c.id === product.category);

  const handleOrder = () => {
    const msg = lang === 'ar'
      ? `مرحباً، أرغب بطلب:\n${product.name.ar}\nالرمز: ${product.id}\n${product.sizes ? `المقاس: ${size}\n` : ''}اللون: ${product.colors[color].name.ar}\nالسعر: ${fmtPrice(product.price, 'ar')}`
      : `Hi, I want to order:\n${product.name.en}\nSKU: ${product.id}\n${product.sizes ? `Size: ${size}\n` : ''}Color: ${product.colors[color].name.en}\nPrice: ${fmtPrice(product.price, 'en')}`;
    window.open(waUrl(msg), '_blank');
  };

  return (
    <main className="pdp">
      <div className="container">
        <div className="pdp-breadcrumb">
          <a onClick={() => navigate('home')}>{t.nav.home}</a>
          <span className="sep">/</span>
          <a onClick={() => navigate('shop', { cat: product.category })}>{cat?.[lang]}</a>
          <span className="sep">/</span>
          <span style={{color:'var(--ink)'}}>{product.name[lang]}</span>
        </div>

        <div className="pdp-grid">
          <div className="pdp-gallery">
            <div className="pdp-thumbs">
              {product.images.map((src, i) => (
                <div key={i} className={`pdp-thumb ${activeImg === i ? 'active' : ''}`}
                     style={{backgroundImage: `url(${src})`}}
                     onClick={() => setActiveImg(i)}/>
              ))}
            </div>
            <div className="pdp-main">
              <img src={product.images[activeImg]} alt={product.name[lang]}/>
            </div>
          </div>

          <div className="pdp-info">
            <h1>{product.name[lang]}</h1>
            <div className="pdp-sku">{t.product.sku}: {product.id}</div>
            <div className="pdp-price">
              {product.oldPrice && <span className="old">{fmtPrice(product.oldPrice, lang)}</span>}
              <span className={`now ${product.oldPrice ? 'sale' : ''}`}>{fmtPrice(product.price, lang)}</span>
            </div>
            <div className="pdp-desc">{product.description[lang]}</div>

            {product.sizes && (
              <div className="pdp-options">
                <div className="pdp-option-label">
                  <span>{t.product.size}: <span style={{color:'var(--ink-muted)',fontWeight:300}}>{size}</span></span>
                  <span className="guide">{t.product.sizeGuide}</span>
                </div>
                <div className="pdp-sizes">
                  {product.sizes.map(s => (
                    <button key={s} className={`pdp-size ${size === s ? 'active' : ''}`} onClick={() => setSize(s)}>{s}</button>
                  ))}
                </div>
              </div>
            )}

            <div className="pdp-options">
              <div className="pdp-option-label">
                <span>{t.product.color}: <span style={{color:'var(--ink-muted)',fontWeight:300}}>{product.colors[color].name[lang]}</span></span>
              </div>
              <div className="pdp-colors">
                {product.colors.map((c, i) => (
                  <button key={i} className={`pdp-color ${color === i ? 'active' : ''}`}
                          style={{background: c.hex}} onClick={() => setColor(i)} aria-label={c.name[lang]}/>
                ))}
              </div>
            </div>

            <div className="pdp-actions">
              <div className="row">
                <button className="btn-wa" onClick={handleOrder}>
                  <Icon.Whatsapp/> {t.product.addToCart}
                </button>
                <button className={`pdp-wish-big ${isWished ? 'active' : ''}`}
                        onClick={() => toggleWish(product.id)} aria-label="wishlist">
                  <Icon.Heart filled={isWished}/>
                </button>
              </div>
            </div>

            <div className="pdp-accordion">
              <div className={`pdp-acc ${openAcc === 'details' ? 'open' : ''}`}>
                <button className="pdp-acc-head" onClick={() => setOpenAcc(openAcc === 'details' ? '' : 'details')}>
                  {t.product.details} <span className="icon">+</span>
                </button>
                <div className="pdp-acc-body">
                  <div className="pdp-acc-body-inner">
                    <ul>{product.details[lang].map((d, i) => <li key={i}>{d}</li>)}</ul>
                  </div>
                </div>
              </div>
              <div className={`pdp-acc ${openAcc === 'shipping' ? 'open' : ''}`}>
                <button className="pdp-acc-head" onClick={() => setOpenAcc(openAcc === 'shipping' ? '' : 'shipping')}>
                  {t.product.shipping} <span className="icon">+</span>
                </button>
                <div className="pdp-acc-body">
                  <div className="pdp-acc-body-inner">
                    {lang === 'ar'
                      ? 'شحن مجاني للطلبات فوق ٧٥٬٠٠٠ د.ع. التوصيل خلال ٢-٤ أيام عمل. إمكانية الإرجاع خلال ٧ أيام بحالة المنتج الأصلية.'
                      : 'Free shipping over 75,000 IQD. Delivery within 2-4 working days. Returns accepted within 7 days in original condition.'}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        {/* Similar products */}
        <section className="section">
          <div className="section-head reveal">
            <div><h2>{t.product.similar}</h2></div>
          </div>
          <div className={`pgrid cols-${tweaks.gridCols} reveal`}>
            {similar.map(p => (
              <ProductCard key={p.id} product={p} lang={lang} variant={tweaks.cardStyle}
                onClick={(pr) => navigate('product', { id: pr.id })}
                wishlist={wishlist} toggleWish={toggleWish} onWaOrder={onWaOrder}/>
            ))}
          </div>
        </section>
      </div>
    </main>
  );
}

window.ProductPage = ProductPage;