// katalog.jsx — Product Listing

function Katalog({ ctx, categorySlug }) {
  const cat = categorySlug ? CATEGORY_BY_SLUG[categorySlug] : null;
  const [sort, setSort] = React.useState('popular');
  const [page, setPage] = React.useState(1);
  const [priceMin, setPriceMin] = React.useState('');
  const [priceMax, setPriceMax] = React.useState('');
  const [activeBrands, setActiveBrands] = React.useState([]);
  const [activeBadges, setActiveBadges] = React.useState([]);
  const [activeRating, setActiveRating] = React.useState(0);

  const all = productsByCategory(categorySlug);

  const brands = [...new Set(all.map(p => p.brand))];
  const origins = [...new Set(all.map(p => p.origin))];

  let products = all;
  if (activeBrands.length) products = products.filter(p => activeBrands.includes(p.brand));
  if (activeBadges.length) products = products.filter(p => p.badges.some(b => activeBadges.includes(b)));
  if (activeRating) products = products.filter(p => p.rating >= activeRating);
  if (priceMin) products = products.filter(p => p.priceIDR >= Number(priceMin));
  if (priceMax) products = products.filter(p => p.priceIDR <= Number(priceMax));

  if (sort === 'price-asc') products = [...products].sort((a, b) => a.priceIDR - b.priceIDR);
  if (sort === 'price-desc') products = [...products].sort((a, b) => b.priceIDR - a.priceIDR);
  if (sort === 'rating') products = [...products].sort((a, b) => b.rating - a.rating);
  if (sort === 'sold') products = [...products].sort((a, b) => b.sold - a.sold);
  if (sort === 'new') products = [...products].sort((a, b) => b.id.localeCompare(a.id));

  const toggle = (list, setter, v) =>
    setter(list.includes(v) ? list.filter(x => x !== v) : [...list, v]);

  return (
    <div className="katalog">
      {/* SIDEBAR FILTER */}
      <aside className="filters">
        <h3 style={{ margin: '0 0 4px', fontFamily: 'var(--font-display)', fontSize: 18 }}>Filter</h3>
        <div className="muted" style={{ fontSize: 12, marginBottom: 8 }}>絞り込み</div>

        <div className="filter-group">
          <h4>Harga (IDR) <span className="jp">価格</span></h4>
          <div className="price-range">
            <input placeholder="Min" value={priceMin} onChange={(e) => setPriceMin(e.target.value)} />
            <span>—</span>
            <input placeholder="Max" value={priceMax} onChange={(e) => setPriceMax(e.target.value)} />
          </div>
        </div>

        <div className="filter-group">
          <h4>Brand <span className="jp">ブランド</span></h4>
          {brands.slice(0, 8).map(b => {
            const count = all.filter(p => p.brand === b).length;
            return (
              <label key={b} className="filter-opt">
                <input type="checkbox" checked={activeBrands.includes(b)}
                       onChange={() => toggle(activeBrands, setActiveBrands, b)} />
                {b}
                <span className="count">{count}</span>
              </label>
            );
          })}
        </div>

        <div className="filter-group">
          <h4>Asal Prefektur <span className="jp">産地</span></h4>
          {origins.slice(0, 6).map(o => (
            <label key={o} className="filter-opt">
              <input type="checkbox" />
              {o}
              <span className="count">{all.filter(p => p.origin === o).length}</span>
            </label>
          ))}
        </div>

        <div className="filter-group">
          <h4>Label <span className="jp">ラベル</span></h4>
          {Object.entries(BADGES).map(([k, b]) => (
            <label key={k} className="filter-opt">
              <input type="checkbox" checked={activeBadges.includes(k)}
                     onChange={() => toggle(activeBadges, setActiveBadges, k)} />
              <span className={`badge-jp ${b.cls}`} style={{ fontSize: 10 }}>{b.jp}</span>
              {b.text}
            </label>
          ))}
        </div>

        <div className="filter-group">
          <h4>Rating</h4>
          {[4.8, 4.5, 4.0, 3.5].map(r => (
            <label key={r} className="filter-opt">
              <input type="radio" name="rating" checked={activeRating === r}
                     onChange={() => setActiveRating(r)} />
              <span className="stars"><Icon name="star" size={12} /></span>
              {r}+
              <span className="count">{all.filter(p => p.rating >= r).length}</span>
            </label>
          ))}
          <label className="filter-opt">
            <input type="radio" name="rating" checked={activeRating === 0}
                   onChange={() => setActiveRating(0)} />
            Semua rating
          </label>
        </div>

        <button className="btn ghost block" style={{ marginTop: 10 }}
                onClick={() => { setActiveBrands([]); setActiveBadges([]); setActiveRating(0); setPriceMin(''); setPriceMax(''); }}>
          Reset Filter
        </button>
      </aside>

      {/* MAIN */}
      <div className="katalog-main">
        <div className="crumbs">
          <a onClick={() => ctx.go('home')}>Beranda</a>
          <span className="sep">/</span>
          <a onClick={() => ctx.go('katalog', null)}>Semua Kategori</a>
          {cat && (
            <>
              <span className="sep">/</span>
              <span>{cat.nameID}</span>
            </>
          )}
        </div>

        <div className="katalog-hd">
          <h1>
            {cat ? cat.nameID : 'Semua Produk'}
            <span className="jp">{cat ? cat.nameJP : '全商品'}</span>
            <span className="count">· {products.length} produk</span>
          </h1>
          <div className="sort-bar">
            <Icon name="filter" size={14} /> Urutkan:
            <select value={sort} onChange={(e) => setSort(e.target.value)}>
              <option value="popular">Paling Populer</option>
              <option value="new">Terbaru</option>
              <option value="sold">Terlaris</option>
              <option value="rating">Rating Tertinggi</option>
              <option value="price-asc">Harga Terendah</option>
              <option value="price-desc">Harga Tertinggi</option>
            </select>
          </div>
        </div>

        {products.length === 0 ? (
          <div className="empty">
            <div className="icon-big">空</div>
            <h3>Tidak ada produk yang cocok</h3>
            <p>Coba ubah filter atau reset semua pilihan.</p>
          </div>
        ) : (
          <>
            <div className="product-grid">
              {products.map(p => <ProductCard key={p.id} product={p} ctx={ctx} />)}
            </div>
            <div className="pagination">
              <button><Icon name="chevl" size={14} /></button>
              {[1, 2, 3, 4, 5].map(n => (
                <button key={n} className={n === page ? 'active' : ''}
                        onClick={() => setPage(n)}>{n}</button>
              ))}
              <button><Icon name="chevr" size={14} /></button>
            </div>
          </>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { Katalog });