// ============================================================
// PDP — product detail. Big editorial gallery left, sticky
// commerce panel right with size, qty, add-to-cart, assurances.
// Related products below.
// ============================================================

function JmProductDetail({ product, lang, onBack, onAddToCart, onOpenProduct }) {
  const t = JM.t[lang];
  const name = lang === 'vi' ? product.name : product.enName;
  const desc = lang === 'vi' ? product.desc : product.enDesc;
  const collection = JM.collections.find(c => JM.inCollection(product, c.id));

  // Biến thể màu (Vàng / Bạc|Bạch kim) + nhóm lựa chọn (size, độ dài, phân loại)
  const variants = JM.variantsOf(product);
  const groups = JM.choiceGroups(product);
  const [colorKey, setColorKey] = React.useState(variants[0].key);
  const variant = variants.find(v => v.key === colorKey) || variants[0];
  const [sel, setSel] = React.useState({});
  const [missing, setMissing] = React.useState([]);
  const [guideOpen, setGuideOpen] = React.useState(false);
  const [lightbox, setLightbox] = React.useState(null);
  const sold = JM.soldLabel(product, lang);
  const material = JM.materials.find(m => m.id === variant.material);
  const materialLabel = material ? (lang === 'vi' ? material.vi : material.en) : '';
  const tone = variant.key === 'gold' ? 'gold' : 'silver';
  const size = sel.size || product.sizes[0];
  const sku = JM.skuFor(product, variant, sel);

  const [qty, setQty]   = React.useState(1);
  const [imgIdx, setImgIdx] = React.useState(0);
  const [tab, setTab] = React.useState('desc');

  // Ảnh thật theo màu đang chọn; chưa có ảnh thì dùng glyph minh hoạ
  const photos = variant.images || [];
  const gallery = photos.length
    ? photos.map(src => ({ kind: 'photo', src }))
    : [
        { glyph: product.glyph, tone, tint: 'linen', kind: 'product' },
        { glyph: product.glyph, tone, tint: 'white', kind: 'product' },
        { glyph: product.glyph, tone, tint: 'blush', kind: 'product' },
      ];
  const borrowed = variant.imagesFrom && variants.find(v => v.key === variant.imagesFrom);

  React.useEffect(() => { setImgIdx(0); setColorKey(variants[0].key); setSel({}); setMissing([]); setQty(1); }, [product.id]);
  React.useEffect(() => { setImgIdx(0); }, [colorKey]);
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });

  // Bắt chọn đủ các nhóm đang hiện trước khi thêm giỏ / nhắn Zalo
  function checkChoice() {
    const miss = groups.filter(g => !sel[g.key]).map(g => g.key);
    setMissing(miss);
    return miss.length === 0;
  }
  function pick(key, value) {
    setSel(s => ({ ...s, [key]: value }));
    setMissing(m => m.filter(k => k !== key));
  }
  function cartItem() {
    const label = JM.choiceLabel(product, variants.length > 1 || variant.label ? variant : null, sel, lang);
    return { id: product.id, productId: product.id, code: sku, baseCode: product.code, name, variantLabel: label,
      glyph: product.glyph, image: photos[0], material: variant.material, price: product.price, qty, size };
  }

  const related = JM.products.filter(p => p.id !== product.id && p.category === product.category).slice(0, 4);
  if (related.length < 4) {
    related.push(...JM.products.filter(p => !related.includes(p) && p.id !== product.id).slice(0, 4 - related.length));
  }

  function addNow() {
    if (!checkChoice()) return;
    onAddToCart(cartItem());
  }
  function askZalo() {
    if (!checkChoice()) return;
    JM.orderViaChat(cartItem());
  }

  function GalleryFrame({ piece }) {
    if (piece.kind === 'photo') return <img className="jm-glyph jm-photo" src={piece.src} alt={name}/>;
    if (piece.kind === 'editorial') return <JmEditorialImage kind={piece.img}/>;
    return <JmProductGlyph glyph={piece.glyph} tone={piece.tone} tint={piece.tint} ratio="1/1"/>;
  }

  return (
    <section className="jm-pdp" data-screen-label={`PDP · ${product.id}`}>
      <div className="jm-container">
        <button className="jm-pdp__back" onClick={onBack}>
          <i data-lucide="chevron-left" className="jm-icon jm-icon-sm"></i>
          {lang === 'vi' ? 'Quay lại cửa hàng' : 'Back to shop'}
        </button>

        <div className="jm-pdp__main">
          {/* Gallery */}
          <div className="jm-pdp__gallery">
            <div className="jm-pdp__hero-img">
              <GalleryFrame piece={gallery[imgIdx]}/>
              {product.badge && (
                <span className={`jm-badge ${product.badge === 'Limited' ? 'jm-badge-solid' : ''} jm-pdp__hero-badge`}>
                  {lang === 'vi' ? (product.badge === 'Limited' ? 'Phiên bản giới hạn' : product.badge) : (product.badge === 'Mới' ? 'New' : product.badge === 'Limited' ? 'Limited' : product.badge)}
                </span>
              )}
            </div>
            {borrowed && (
              <p className="jm-small jm-pdp__img-note">
                {lang === 'vi'
                  ? `Ảnh màu ${variant.label} đang cập nhật — đang hiển thị ảnh màu ${borrowed.label}.`
                  : `${variant.enLabel} photos coming soon — showing ${borrowed.enLabel}.`}
              </p>
            )}
            <div className="jm-pdp__thumbs" hidden={gallery.length < 2}>
              {gallery.map((piece, i) => (
                <button key={i} className={`jm-pdp__thumb ${imgIdx === i ? 'is-active' : ''}`} onClick={() => setImgIdx(i)} aria-label={`Image ${i+1}`}>
                  <GalleryFrame piece={piece}/>
                </button>
              ))}
            </div>
            <JmCustomerPhotos code={product.code} colorKey={variant.key} lang={lang} onOpen={setLightbox}/>
          </div>

          {/* Commerce */}
          <aside className="jm-pdp__panel">
            <div className="jm-label" style={{ color: 'var(--jm-cam-dat)' }}>
              {collection
                ? <a href={JM.hrefFor({ view: 'collection', id: collection.id })}>{lang === 'vi' ? 'Bộ sưu tập ' : 'Collection '}{lang === 'vi' ? collection.name : collection.en}</a>
                : (product.badge === 'Bestseller' ? (lang === 'vi' ? 'Bán chạy' : 'Best seller') : '')}
            </div>
            <h1 className="jm-h1" style={{ marginTop: 8 }}>{name}</h1>
            <div className="jm-small" style={{ marginTop: 8 }}>{lang === 'vi' ? 'Mã' : 'Code'}: {sku}{sold && <span className="jm-pdp__sold"> · {sold}</span>}</div>
            <div className="jm-pdp__price">
              {JM.formatPrice(product.price)}
              {product.listPrice > product.price && <s className="jm-pdp__list">{JM.formatPrice(product.listPrice)}</s>}
            </div>

            <div className="jm-pdp__pills">
              <span className="jm-pdp__pill">{materialLabel}</span>
            </div>

            <p style={{ marginTop: 24, color: 'var(--jm-muted)' }}>{desc}</p>

            {/* Thứ tự: Màu -> Size/Độ dài -> Phân loại khác. Nhóm chỉ 1 lựa chọn thì ghi thông tin, không hiện nút */}
            <dl className="jm-pdp__facts">
              {variants.length === 1 && variant.label && (
                <div><dt>{lang === 'vi' ? 'Màu' : 'Colour'}</dt><dd>{lang === 'vi' ? variant.label : variant.enLabel}</dd></div>
              )}
              {(product.specs || []).map(s => (
                <div key={s.label}><dt>{lang === 'vi' ? s.label : s.enLabel}</dt><dd>{s.value}</dd></div>
              ))}
            </dl>

            {variants.length > 1 && (
              <div className="jm-pdp__size">
                <div className="jm-pdp__field-label">
                  <span className="jm-label">{lang === 'vi' ? 'Màu' : 'Colour'}: {lang === 'vi' ? variant.label : variant.enLabel}</span>
                </div>
                <div className="jm-pdp__size-row">
                  {variants.map(v => (
                    <button key={v.key} className={`jm-size-chip jm-color-chip ${v.key === colorKey ? 'is-active' : ''}`} onClick={() => setColorKey(v.key)}>
                      <span className="jm-swatch" style={{ background: JM.swatch(v.key) }}></span>
                      {lang === 'vi' ? v.label : v.enLabel}
                    </button>
                  ))}
                </div>
              </div>
            )}

            {groups.map(g => (
              <div className={`jm-pdp__size ${missing.includes(g.key) ? 'is-missing' : ''}`} key={g.key}>
                <div className="jm-pdp__field-label">
                  <span className="jm-label">{lang === 'vi' ? g.label : g.enLabel}</span>
                  {missing.includes(g.key) && (
                    <span className="jm-small jm-pdp__missing">{lang === 'vi' ? `Vui lòng chọn ${g.label.toLowerCase()}` : `Please choose a ${g.enLabel.toLowerCase()}`}</span>
                  )}
                </div>
                <div className="jm-pdp__size-row">
                  {g.values.map(v => (
                    <button key={v.value} className={`jm-size-chip ${sel[g.key] === v.value ? 'is-active' : ''}`} onClick={() => pick(g.key, v.value)}>{v.label}</button>
                  ))}
                </div>
                {g.key === 'size' && product.category === 'rings' && (
                  <button className="jm-pdp__guide-link" onClick={() => setGuideOpen(true)}>
                    <i data-lucide="ruler" className="jm-icon jm-icon-sm"></i>
                    {lang === 'vi' ? 'Hướng dẫn chọn size' : 'Ring size guide'}
                  </button>
                )}
              </div>
            ))}
            <JmRingSizeGuide open={guideOpen} onClose={() => setGuideOpen(false)}/>

            {JM.orderingOn() ? (
              <React.Fragment>
                <div className="jm-pdp__qty-row">
                  <div>
                    <div className="jm-pdp__field-label"><span className="jm-label">{t['pdp.qty']}</span></div>
                    <div className="jm-qty">
                      <button onClick={() => setQty(Math.max(1, qty - 1))} aria-label="-"><i data-lucide="minus" className="jm-icon jm-icon-sm"></i></button>
                      <span className="jm-qty__n">{qty}</span>
                      <button onClick={() => setQty(qty + 1)} aria-label="+"><i data-lucide="plus" className="jm-icon jm-icon-sm"></i></button>
                    </div>
                  </div>
                </div>

                <div className="jm-pdp__cta">
                  <button className="jm-btn jm-btn-primary jm-btn-block" onClick={addNow}>
                    {t['cta.add']} · {JM.formatPrice(product.price * qty)}
                  </button>
                </div>
                {product.shopee && (
                  <a className="jm-btn jm-btn-secondary jm-btn-block jm-pdp__shopee" href={product.shopee} target="_blank" rel="noopener">
                    {lang === 'vi' ? 'Mua trên Shopee Mall' : 'Buy on Shopee Mall'}
                  </a>
                )}
              </React.Fragment>
            ) : (
              // Giỏ hàng đang tắt (JM.shop.ordering = false): mua qua sàn hoặc nhắn Zalo
              <div className="jm-pdp__cta jm-pdp__cta--stack">
                {product.shopee && (
                  <a className="jm-btn jm-btn-primary jm-btn-block" href={product.shopee} target="_blank" rel="noopener">
                    {lang === 'vi' ? 'Mua trên Shopee' : 'Buy on Shopee'}
                  </a>
                )}
                {JM.shop.tiktok && product.tiktok && (
                  <a className="jm-btn jm-btn-secondary jm-btn-block jm-pdp__shopee" href={product.tiktok} target="_blank" rel="noopener">
                    {lang === 'vi' ? 'Mua trên TikTok Shop' : 'Buy on TikTok Shop'}
                  </a>
                )}
                <button className={`jm-btn ${product.shopee ? 'jm-btn-secondary jm-pdp__shopee' : 'jm-btn-primary'} jm-btn-block`}
                  onClick={askZalo}>
                  {lang === 'vi' ? 'Nhắn Zalo tư vấn · ' + JM.shop.hotline : 'Ask on Zalo · ' + JM.shop.hotline}
                </button>
              </div>
            )}

            <div className="jm-pdp__assurance">
              <div className="jm-pdp__assurance-row">
                <i data-lucide="truck" className="jm-icon"></i>
                <div>
                  <div className="jm-label">{t['pdp.delivery']}</div>
                  <div className="jm-small">{t['pdp.deliveryText']}</div>
                </div>
              </div>
              <div className="jm-pdp__assurance-row">
                <i data-lucide="shield-check" className="jm-icon"></i>
                <div>
                  <div className="jm-label">{t['pdp.warranty']}</div>
                  <div className="jm-small">{t['pdp.warrantyText']}</div>
                </div>
              </div>
              <div className="jm-pdp__assurance-row">
                <i data-lucide="sparkles" className="jm-icon"></i>
                <div>
                  <div className="jm-label">{t['pdp.polish']}</div>
                  <div className="jm-small">{t['pdp.polishText']}</div>
                </div>
              </div>
            </div>
          </aside>
        </div>

        {/* Tabbed detail */}
        <div className="jm-pdp__detail">
          <div className="jm-pdp__tabs">
            {[
              { id: 'desc',    label: lang === 'vi' ? 'Mô tả' : 'Description' },
              { id: 'care',    label: lang === 'vi' ? 'Cách bảo quản' : 'Care guide' },
            ].map(tb => (
              <button key={tb.id} className={`jm-tab ${tab === tb.id ? 'is-active' : ''}`} onClick={() => setTab(tb.id)}>
                {tb.label}
              </button>
            ))}
          </div>

          {tab === 'desc' && (
            <div className="jm-pdp__copy">
              <p>{desc}</p>
              <p style={{ color: 'var(--jm-muted)' }}>
                {lang === 'vi'
                  ? 'Chất liệu không gỉ, không gây kích ứng da, giữ màu khi đeo hằng ngày. Mỗi món đều được kiểm tra trước khi đóng gói.'
                  : 'Rust-free, skin-friendly and colour-fast for everyday wear. Each piece is checked before packaging.'}
              </p>
            </div>
          )}
          {tab === 'care' && (
            <ul className="jm-pdp__list">
              <li>{lang === 'vi' ? 'Tránh tiếp xúc trực tiếp với nước hoa, mỹ phẩm — xịt nước hoa trước, đeo trang sức sau.' : 'Avoid direct contact with perfume and cosmetics — spray first, accessorise after.'}</li>
              <li>{lang === 'vi' ? 'Lau nhẹ bằng khăn vải mềm sau mỗi lần đeo.' : 'Wipe gently with a soft cloth after each wear.'}</li>
              <li>{lang === 'vi' ? 'Cất riêng từng món trong túi nỉ kèm sẵn để tránh trầy xước.' : 'Store each piece in its felt pouch to prevent scratches.'}</li>
              <li>{lang === 'vi' ? 'Tránh để trang sức tiếp xúc lâu với nước biển, nước hồ bơi và hoá chất tẩy rửa.' : 'Avoid prolonged contact with sea water, pool water and cleaning chemicals.'}</li>
            </ul>
          )}
        </div>

        <JmProductReviews code={product.code} lang={lang} onOpen={setLightbox}/>
        <JmReviewLightbox item={lightbox} lang={lang} onClose={() => setLightbox(null)}/>

        {/* Related */}
        <div className="jm-pdp__related">
          <h3 className="jm-h2" style={{ marginBottom: 28 }}>{t['pdp.related']}</h3>
          <div className="jm-grid">
            {related.map(p => (
              <JmProductCard key={p.id} product={p} lang={lang} onOpen={onOpenProduct} onAdd={onAddToCart}/>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

window.JmProductDetail = JmProductDetail;