/* global React */
const { useState: useS_c } = React;

function Catalog() {
  const { products, navigate } = useStore();
  const [cat, setCat] = useS_c("all");
  const [size, setSize] = useS_c("all");
  const [sort, setSort] = useS_c("default");

  let filtered = products.filter(p => {
    if (cat !== "all" && p.category !== cat) return false;
    if (size !== "all" && !p.sizes.some(s => s === size || s.includes(size))) return false;
    return true;
  });

  if (sort === "price-asc") filtered = [...filtered].sort((a,b)=>a.price-b.price);
  if (sort === "price-desc") filtered = [...filtered].sort((a,b)=>b.price-a.price);

  return (
    <div className="page">
      {/* Banner */}
      <section className="page-banner concrete">
        <div className="mono caps" style={{fontSize:11,color:"var(--gold)",marginBottom:30}}>Коллекция · БАЗА · Дроп 01</div>
        <h1>Каталог</h1>
        <div className="sub">
          <span>{filtered.length} {filtered.length === 1 ? "позиция" : "позиций"}</span>
          <span>SS / 26 · MADE IN MOSCOW</span>
        </div>
      </section>

      <div style={{maxWidth:"var(--maxw)",margin:"0 auto",padding:"60px 40px 120px"}}>
        {/* Filter bar */}
        <div className="filter-bar">
          <div className="filter-group">
            <span className="mono" style={{fontSize:10,letterSpacing:".24em",textTransform:"uppercase",color:"var(--gray-2)",alignSelf:"center",marginRight:14}}>Категория /</span>
            {[
              ["all","Все"],["tops","Верх"],["bottoms","Низ"]
            ].map(([v,l])=>(
              <button key={v} className={`filter-chip ${cat===v?"active":""}`} onClick={()=>setCat(v)}>{l}</button>
            ))}
          </div>
          <div className="filter-group">
            <span className="mono" style={{fontSize:10,letterSpacing:".24em",textTransform:"uppercase",color:"var(--gray-2)",alignSelf:"center",marginRight:14}}>Размер /</span>
            {[
              ["all","Все"],["XS","XS"],["S","S"],["M","M"],["XS-S","XS-S"],["S-M","S-M"]
            ].map(([v,l])=>(
              <button key={v} className={`filter-chip ${size===v?"active":""}`} onClick={()=>setSize(v)}>{l}</button>
            ))}
          </div>
          <div className="filter-group">
            <select value={sort} onChange={e=>setSort(e.target.value)}
              style={{fontFamily:"var(--f-mono)",fontSize:11,letterSpacing:".18em",textTransform:"uppercase",padding:"10px 36px 10px 16px"}}>
              <option value="default">Сортировка: по умолчанию</option>
              <option value="price-asc">Цена: дешевле</option>
              <option value="price-desc">Цена: дороже</option>
            </select>
          </div>
        </div>

        {/* Marquee accent strip */}
        <div style={{position:"relative",height:80,overflow:"hidden",marginBottom:50,borderTop:"1px solid var(--line)",borderBottom:"1px solid var(--line)"}}>
          <div className="marquee" style={{position:"static",top:"auto",fontSize:60,opacity:.05}}>
            <div className="marquee-track">
              <span>БАЗА · BASE · БАЗА · BASE · БАЗА · BASE · БАЗА · BASE · </span>
              <span>БАЗА · BASE · БАЗА · BASE · БАЗА · BASE · БАЗА · BASE · </span>
            </div>
          </div>
        </div>

        {/* Grid */}
        {filtered.length === 0 ? (
          <div style={{padding:"120px 0",textAlign:"center",fontFamily:"var(--f-mono)",fontSize:13,letterSpacing:".18em",textTransform:"uppercase",color:"var(--gray-2)"}}>
            По выбранным фильтрам ничего не найдено.<br/>
            <button onClick={()=>{setCat("all");setSize("all");}}
              style={{marginTop:24,color:"var(--gold)",borderBottom:"1px solid var(--gold)",paddingBottom:4}}>
              Сбросить фильтры →
            </button>
          </div>
        ) : (
          <div className="cat-grid">
            {filtered.map((p, i) => (
              <Reveal key={p.id} delay={i*80}>
                <a className="product-card" href={`#product/${p.id}`}
                   onClick={(e)=>{e.preventDefault();navigate(`product/${p.id}`);}}>
                  <div className="product-media">
                    {p.tag === "NEW" && <span className="product-tag gold">New</span>}
                    <img className="main" src={p.img[0]} alt={p.name} loading="lazy"/>
                    <img className="alt" src={p.img[1]} alt="" loading="lazy"/>
                  </div>
                  <div className="product-meta">
                    <div>
                      <div className="name">{p.name}</div>
                      <div className="mono" style={{fontSize:11,color:"var(--gray-2)",marginTop:8,letterSpacing:".18em",textTransform:"uppercase"}}>
                        Размеры · {p.sizes.join(" / ")}
                      </div>
                    </div>
                    <div className="price">{p.price.toLocaleString("ru-RU")} ₽</div>
                  </div>
                </a>
              </Reveal>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}

window.Catalog = Catalog;