// ===== Catalog page =====
const Catalog = ({ navigate, addToCart, favs, toggleFav }) => {
  const [view, setView] = useState('grid');
  const [filtersOpen, setFiltersOpen] = useState(false);
  const [filters, setFilters] = useState({
    brand: [],
    use: [],
    rim: [],
    price: 8000,
    stock: false,
  });
  const [sort, setSort] = useState('popular');

  useEffect(() => {
    document.body.style.overflow = filtersOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [filtersOpen]);

  const toggleFilter = (key, value) => {
    setFilters(f => ({
      ...f,
      [key]: f[key].includes(value) ? f[key].filter(x => x !== value) : [...f[key], value]
    }));
  };

  const filtered = useMemo(() => {
    let list = TIRES.filter(t => {
      if (filters.brand.length && !filters.brand.includes(t.brand)) return false;
      if (filters.use.length && !filters.use.includes(t.use)) return false;
      if (filters.rim.length) {
        const rims = t.sizes.map(s => parseInt(s.split('R')[1]));
        if (!filters.rim.some(r => rims.includes(parseInt(r)))) return false;
      }
      if (t.price > filters.price) return false;
      if (filters.stock && t.stock !== 'in') return false;
      return true;
    });
    if (sort === 'price-asc') list = [...list].sort((a, b) => a.price - b.price);
    if (sort === 'price-desc') list = [...list].sort((a, b) => b.price - a.price);
    if (sort === 'rating') list = [...list].sort((a, b) => b.rating - a.rating);
    return list;
  }, [filters, sort]);

  const clearAll = () => setFilters({ brand: [], use: [], rim: [], price: 8000, stock: false });
  const activeCount = filters.brand.length + filters.use.length + filters.rim.length + (filters.stock ? 1 : 0) + (filters.price < 8000 ? 1 : 0);

  return (
    <div className="page-fade page">
      <div style={{marginBottom: 24}}>
        <div className="eyebrow">— CATÁLOGO COMPLETO</div>
        <h1 className="display" style={{fontSize:64, margin:'8px 0 0'}}>Encuentra tu llanta.</h1>
      </div>

      <div className="catalog-grid">
        {/* Filters */}
        <div className={'filters-overlay ' + (filtersOpen ? 'on' : '')} onClick={() => setFiltersOpen(false)}></div>
        <aside className={'filters ' + (filtersOpen ? 'open' : '')}>
          <div className="filters-mobile-head">
            <h3 className="display" style={{fontSize: 28, margin: 0}}>FILTROS</h3>
            <button className="btn-icon" onClick={() => setFiltersOpen(false)} aria-label="Cerrar filtros"><Icon name="close"/></button>
          </div>
          <div className="filter-group">
            <h4>FILTROS {activeCount > 0 && <span className="count">{activeCount} ACTIVOS</span>}</h4>
            {activeCount > 0 && (
              <button onClick={clearAll} style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--accent)', letterSpacing:'0.12em', textTransform:'uppercase'}}>
                LIMPIAR TODO
              </button>
            )}
          </div>

          <div className="filter-group">
            <h4>USO</h4>
            {Object.entries(USE_LABELS).map(([k, v]) => {
              const on = filters.use.includes(k);
              const count = TIRES.filter(t => t.use === k).length;
              return (
                <div key={k} className={'filter-row ' + (on ? 'on' : '')} onClick={() => toggleFilter('use', k)}>
                  <div className={'checkbox ' + (on ? 'on' : '')}></div>
                  <span className="name">{v}</span>
                  <span className="num">{count}</span>
                </div>
              );
            })}
          </div>

          <div className="filter-group">
            <h4>MARCA</h4>
            {BRANDS.map(b => {
              const on = filters.brand.includes(b);
              const count = TIRES.filter(t => t.brand === b).length;
              if (!count) return null;
              return (
                <div key={b} className={'filter-row ' + (on ? 'on' : '')} onClick={() => toggleFilter('brand', b)}>
                  <div className={'checkbox ' + (on ? 'on' : '')}></div>
                  <span className="name">{b}</span>
                  <span className="num">{count}</span>
                </div>
              );
            })}
          </div>

          <div className="filter-group">
            <h4>RIN</h4>
            <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 6}}>
              {RIM_SIZES.map(r => {
                const on = filters.rim.includes(r);
                return (
                  <button key={r}
                    onClick={() => toggleFilter('rim', r)}
                    style={{
                      padding:'10px 0', fontFamily:'var(--font-mono)', fontSize:12,
                      border:'1px solid ' + (on ? 'var(--accent)' : 'var(--line)'),
                      background: on ? 'rgba(253,184,39,0.08)' : 'var(--bg-elev-2)',
                      color: on ? 'var(--accent)' : 'var(--text)',
                      borderRadius: 6, cursor:'pointer',
                    }}>
                    {r}"
                  </button>
                );
              })}
            </div>
          </div>

          <div className="filter-group">
            <h4>PRECIO MAX <span className="count">{fmt(filters.price)}</span></h4>
            <div className="slider-track">
              <div className="slider-bar"></div>
              <div className="slider-fill" style={{width: ((filters.price - 1000) / 7000 * 100) + '%'}}></div>
              <input type="range" min="1000" max="8000" step="100" value={filters.price}
                onChange={e => setFilters(f => ({...f, price: parseInt(e.target.value)}))}/>
            </div>
            <div className="slider-vals">
              <span>$1,000</span>
              <span>$8,000</span>
            </div>
          </div>

          <div className="filter-group">
            <div className={'filter-row ' + (filters.stock ? 'on' : '')} onClick={() => setFilters(f => ({...f, stock: !f.stock}))} style={{padding: 0}}>
              <div className={'checkbox ' + (filters.stock ? 'on' : '')}></div>
              <span className="name">Solo en stock</span>
            </div>
          </div>

          <div className="filter-group" style={{background:'linear-gradient(135deg, var(--bg-elev-2), var(--bg-elev))', borderColor:'var(--accent)'}}>
            <h4 style={{color:'var(--accent)'}}>★ DNA MATCH</h4>
            <p style={{fontSize:12, color:'var(--text-mute)', margin:'0 0 12px'}}>
              ¿No sabes qué llanta queda con tu manejo? Toma el quiz de 90 segundos.
            </p>
            <button className="btn btn-primary btn-block" onClick={() => navigate('quiz')}>
              <Icon name="chat" size={14}/> ASESOR DE LLANTA
            </button>
          </div>

          <div className="filters-mobile-foot">
            <button className="btn btn-primary btn-lg btn-block" onClick={() => setFiltersOpen(false)}>
              VER {filtered.length} RESULTADOS
            </button>
          </div>
        </aside>

        {/* Products */}
        <div>
          <div className="catalog-toolbar">
            <div className="count"><span className="num">{filtered.length}</span> <span className="count-lbl">RESULTADOS</span></div>
            <div className="actions">
              <button className="btn btn-ghost mobile-only filter-btn" onClick={() => setFiltersOpen(true)}>
                <Icon name="sliders" size={14}/> FILTROS{activeCount > 0 && <span className="filter-btn-count">{activeCount}</span>}
              </button>
              <select value={sort} onChange={e => setSort(e.target.value)} className="catalog-sort">
                <option value="popular">Más populares</option>
                <option value="price-asc">Precio: menor</option>
                <option value="price-desc">Precio: mayor</option>
                <option value="rating">Mejor calificadas</option>
              </select>
              <div className="toggle-group hide-sm">
                <button className={view === 'grid' ? 'on' : ''} onClick={() => setView('grid')}><Icon name="grid" size={14}/></button>
                <button className={view === 'list' ? 'on' : ''} onClick={() => setView('list')}><Icon name="list" size={14}/></button>
              </div>
            </div>
          </div>

          {filtered.length === 0 ? (
            <div style={{padding:80, textAlign:'center', background:'var(--bg-elev)', borderRadius:16, border:'1px solid var(--line)'}}>
              <Icon name="search" size={48}/>
              <h3 className="display" style={{fontSize: 36, margin:'16px 0 8px'}}>SIN RESULTADOS</h3>
              <p style={{color:'var(--text-mute)'}}>Ajusta tus filtros o limpia todo para ver más opciones.</p>
              <button className="btn btn-primary" onClick={clearAll} style={{marginTop: 16}}>LIMPIAR FILTROS</button>
            </div>
          ) : view === 'grid' ? (
            <div className="product-grid">
              {filtered.map(t => (
                <ProductCard key={t.id} tire={t} navigate={navigate} onAdd={addToCart} onFav={toggleFav} isFav={favs.includes(t.id)}/>
              ))}
            </div>
          ) : (
            <div className="product-list">
              {filtered.map(t => (
                <div key={t.id} className="product-list-item" onClick={() => navigate('product', { id: t.id })}>
                  <div style={{borderRadius:8, overflow:'hidden', aspectRatio:1}}>
                    <TirePhoto tire={t} hoverable={true}/>
                  </div>
                  <div>
                    <div className="product-brand">{t.brand} · {USE_LABELS[t.use]}</div>
                    <h3 className="product-name" style={{margin:'4px 0'}}>{t.name}</h3>
                    <p style={{color:'var(--text-mute)', fontSize: 13, margin:'4px 0 8px'}}>{t.tagline}</p>
                    <div style={{display:'flex', alignItems:'center', gap: 16}}>
                      <DnaMini dna={t.dna}/>
                      <span style={{fontFamily:'var(--font-mono)', fontSize:11, color:'var(--text-mute)'}}>
                        <Icon name="star" size={11}/> {t.rating} ({t.reviews})
                      </span>
                      <div style={{display:'flex', gap:6}}>
                        {t.sizes.slice(0, 3).map(s => <span key={s} className="chip chip-outline" style={{fontSize:10, padding:'3px 8px'}}>{s}</span>)}
                      </div>
                    </div>
                  </div>
                  <div style={{textAlign:'right'}}>
                    <div className="price"><span className="from">DESDE</span><span className="currency">$</span>{t.price.toLocaleString('es-MX')}</div>
                  </div>
                  <button className="btn btn-primary" onClick={(e) => { e.stopPropagation(); addToCart(t); }}>
                    <Icon name="plus" size={14}/> AGREGAR
                  </button>
                </div>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { Catalog });