// ============================================================
// Collections — danh sách BST, trang từng BST, trang Bán chạy.
// Ảnh lookbook lấy từ JM.collectionImages (sinh bởi
// tools/cap-nhat-san-pham.ps1). Sản phẩm gán BST qua san-pham.csv.
// ============================================================

function JmCollectionCover({ col, className = '' }) {
  const img = col.images && col.images[0];
  if (img) return <img className={`jm-photo ${className}`} src={img} alt={col.name} loading="lazy"/>;
  return <JmEditorialImage kind="collection-vellum" className={className}/>;
}

// Danh sách tất cả BST
function JmCollectionsIndex({ lang, onOpenCollection }) {
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  return (
    <div data-screen-label="Collections">
      <section className="jm-shop__hero">
        <div className="jm-container">
          <div className="jm-label" style={{ color: 'var(--jm-cam-dat)' }}>{lang === 'vi' ? 'Bộ sưu tập' : 'Collections'}</div>
          <h1 className="jm-h1" style={{ marginTop: 12 }}>{lang === 'vi' ? 'Mỗi bộ sưu tập, một câu chuyện' : 'Every collection tells a story'}</h1>
        </div>
      </section>
      <section className="jm-section" style={{ paddingTop: 0 }}>
        <div className="jm-container">
          <div className="jm-colgrid">
            {JM.collections.map(col => (
              <a key={col.id} className="jm-colcard" href={JM.hrefFor({ view: 'collection', id: col.id })}
                 onClick={(e) => { e.preventDefault(); onOpenCollection(col.id); }}>
                <div className="jm-colcard__art"><JmCollectionCover col={col}/></div>
                <div className="jm-colcard__body">
                  <div className="jm-label" style={{ color: 'var(--jm-cam-dat)' }}>
                    {lang === 'vi' ? col.season : col.enSeason}
                    {col.status === 'coming' ? (lang === 'vi' ? ' · Sắp mở bán' : ' · Coming soon') : ` · ${col.pieces} ${lang === 'vi' ? 'món' : 'pieces'}`}
                  </div>
                  <h2 className="jm-colcard__name">{lang === 'vi' ? col.name : col.en}</h2>
                  <p className="jm-small">{lang === 'vi' ? col.tagline : col.enTagline}</p>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// Trang một BST: banner lookbook + câu chuyện + sản phẩm (+ lookbook)
function JmCollectionPage({ id, lang, onOpenProduct, onAdd, onGoShop, onOpenCollection }) {
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  const col = JM.collections.find(c => c.id === id);
  if (!col) return <JmCollectionsIndex lang={lang} onOpenCollection={onOpenCollection}/>;

  const products = JM.collectionProducts(id).sort(JM.featuredSort);
  const gallery = (col.images || []).slice(1);
  const others = JM.collections.filter(c => c.id !== id);

  return (
    <div data-screen-label={`Collection · ${id}`}>
      <section className="jm-colhero">
        <div className="jm-colhero__art"><JmCollectionCover col={col}/></div>
        <div className="jm-colhero__copy">
          <div className="jm-label" style={{ color: 'var(--jm-cam-dat)' }}>
            {lang === 'vi' ? 'Bộ sưu tập' : 'Collection'} · {lang === 'vi' ? col.season : col.enSeason}
          </div>
          <h1 className="jm-colhero__name">{lang === 'vi' ? col.name : col.en}</h1>
          <p className="jm-colhero__tagline">{lang === 'vi' ? col.tagline : col.enTagline}</p>
          <p className="jm-colhero__story">{lang === 'vi' ? col.story : col.enStory}</p>
          {products.length > 0 && (
            <a className="jm-btn jm-btn-primary" href="#bst-products"
               onClick={(e) => { e.preventDefault(); document.getElementById('bst-products')?.scrollIntoView({ behavior: 'smooth' }); }}>
              {lang === 'vi' ? `Xem ${products.length} thiết kế` : `See ${products.length} pieces`}
            </a>
          )}
        </div>
      </section>

      {products.length > 0 ? (
        <section className="jm-section" id="bst-products">
          <div className="jm-container">
            <div className="jm-grid">
              {products.map(p => <JmProductCard key={p.id} product={p} lang={lang} onOpen={onOpenProduct} onAdd={onAdd}/>)}
            </div>
          </div>
        </section>
      ) : (
        <section className="jm-section" id="bst-products">
          <div className="jm-container jm-colsoon">
            <i data-lucide="sparkles" className="jm-icon jm-icon-lg" style={{ color: 'var(--jm-cam-dat)' }}></i>
            <h2 className="jm-h2">{lang === 'vi' ? 'Sắp mở bán trên jesmee.vn' : 'Coming soon to jesmee.vn'}</h2>
            <p className="jm-small">
              {lang === 'vi'
                ? 'Trong lúc chờ, các nàng có thể xem những bộ sưu tập đang có hoặc nhắn Jesmee để được báo khi mở bán.'
                : 'Meanwhile, browse our current collections or message Jesmee to be notified at launch.'}
            </p>
            <button className="jm-btn jm-btn-secondary" onClick={onGoShop}>{lang === 'vi' ? 'Tới cửa hàng' : 'Visit the shop'}</button>
          </div>
        </section>
      )}

      {gallery.length > 0 && (
        <section className="jm-section jm-section-alt">
          <div className="jm-container">
            <div className="jm-label" style={{ color: 'var(--jm-cam-dat)', marginBottom: 24 }}>Lookbook</div>
            <div className="jm-lookbook">
              {gallery.map((src, i) => <div className="jm-lookbook__item" key={i}><img className="jm-photo" src={src} alt="" loading="lazy"/></div>)}
            </div>
          </div>
        </section>
      )}

      <section className="jm-section">
        <div className="jm-container">
          <h2 className="jm-h2" style={{ marginBottom: 28 }}>{lang === 'vi' ? 'Bộ sưu tập khác' : 'Other collections'}</h2>
          <div className="jm-colgrid jm-colgrid--sm">
            {others.map(c => (
              <a key={c.id} className="jm-colcard" href={JM.hrefFor({ view: 'collection', id: c.id })}
                 onClick={(e) => { e.preventDefault(); onOpenCollection(c.id); }}>
                <div className="jm-colcard__art"><JmCollectionCover col={c}/></div>
                <div className="jm-colcard__body">
                  <div className="jm-label" style={{ color: 'var(--jm-cam-dat)' }}>{lang === 'vi' ? c.season : c.enSeason}</div>
                  <h3 className="jm-colcard__name">{lang === 'vi' ? c.name : c.en}</h3>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// Trang Bán chạy — xếp theo số lượng bán thật (tools/ban-chay.csv)
function JmBestsellers({ lang, onOpenProduct, onAdd }) {
  React.useEffect(() => { if (window.lucide) lucide.createIcons(); });
  const list = JM.bestsellers(16);
  return (
    <div data-screen-label="Bestsellers">
      <section className="jm-shop__hero">
        <div className="jm-container">
          <div className="jm-label" style={{ color: 'var(--jm-cam-dat)' }}>{lang === 'vi' ? 'Bán chạy' : 'Best sellers'}</div>
          <h1 className="jm-h1" style={{ marginTop: 12 }}>{lang === 'vi' ? 'Những món các nàng chọn nhiều nhất' : 'The pieces chosen most'}</h1>
          <p className="jm-small" style={{ maxWidth: 540, marginTop: 16 }}>
            {lang === 'vi' ? 'Xếp theo số lượng bán thực tế của Jesmee.' : 'Ranked by actual Jesmee sales.'}
          </p>
        </div>
      </section>
      <section className="jm-section" style={{ paddingTop: 0 }}>
        <div className="jm-container">
          <div className="jm-grid jm-grid--ranked">
            {list.map((p, i) => (
              <div className="jm-ranked" key={p.id}>
                <span className="jm-ranked__n">{String(i + 1).padStart(2, '0')}</span>
                <JmProductCard product={p} lang={lang} onOpen={onOpenProduct} onAdd={onAdd}/>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

window.JmCollectionsIndex = JmCollectionsIndex;
window.JmCollectionPage = JmCollectionPage;
window.JmBestsellers = JmBestsellers;