/* ============================================================
   lomi — pantalla CATÁLOGO (grid + filtros)
   ============================================================ */
function Catalog({ route, go, addToCart, query, onSearch, favorites, onToggleFavorite }) {
  const { PRODUCTS, CATEGORIES, BRANDS } = window.LOMI_DATA;
  const priceRangeMax = useMemo(() => Math.max(...PRODUCTS.map(p => p.price), 50000), []);
  const [cat, setCat] = useState(route.category || "all");
  const [pet, setPet] = useState("all");
  const [sort, setSort] = useState("relevancia");
  const [brand, setBrand] = useState("all");
  const [maxPrice, setMaxPrice] = useState(priceRangeMax);
  const [filtersOpen, setFiltersOpen] = useState(false);

  useEffect(() => { setCat(route.category || "all"); }, [route.category, route.q]);

  const q = (route.q || query || "").toLowerCase().trim();

  let list = PRODUCTS.filter((p) => {
    if (cat !== "all" && p.category !== cat) return false;
    if (pet !== "all" && p.pet !== pet && p.pet !== "both") return false;
    if (brand !== "all" && p.brand !== brand) return false;
    if (p.price > maxPrice) return false;
    if (q && !(p.name.toLowerCase().includes(q) || p.brand.toLowerCase().includes(q))) return false;
    return true;
  });
  if (sort === "menor") list = [...list].sort((a, b) => a.price - b.price);
  if (sort === "mayor") list = [...list].sort((a, b) => b.price - a.price);
  if (sort === "rating") list = [...list].sort((a, b) => b.rating - a.rating);

  useReveal(cat + pet + sort + brand + maxPrice + q);

  const activeCat = CATEGORIES.find((c) => c.id === cat);

  return (
    <main className="catalog">
      <div className="cat-hero" style={{ background: activeCat ? `linear-gradient(120deg, ${activeCat.tint}, var(--bg))` : undefined }}>
        <div className="wrap">
          <div className="crumbs"><button onClick={() => go({ name: "home" })}>Inicio</button> / <span>{activeCat ? activeCat.name : "Catálogo"}</span></div>
          <h1>{activeCat ? activeCat.name : q ? `Resultados para "${q}"` : "Todo el catálogo"}</h1>
          <p>{activeCat ? activeCat.sub : "Todo lo que tu mascota necesita, en un solo lugar."}</p>
        </div>
      </div>

      <div className="wrap catalog-layout">
        {/* ===== filtros ===== */}
        <aside className={"filters " + (filtersOpen ? "is-open" : "")}>
          <div className="filters-head">
            <h3>Filtros</h3>
            <div style={{ display:'flex', gap:8, alignItems:'center' }}>
              <button className="filters-clear" onClick={() => { setCat("all"); setPet("all"); setBrand("all"); setMaxPrice(priceRangeMax); }}>Limpiar</button>
              <button className="filters-close show-md" onClick={() => setFiltersOpen(false)} aria-label="Cerrar filtros">
                <Icon name="close" size={18} />
              </button>
            </div>
          </div>
          <div className="filter-group">
            <h4>Categoría</h4>
            <button className={"filter-row " + (cat === "all" ? "on" : "")} onClick={() => setCat("all")}>Todas<span>{PRODUCTS.length}</span></button>
            {CATEGORIES.map((c) => (
              <button key={c.id} className={"filter-row " + (cat === c.id ? "on" : "")} onClick={() => setCat(c.id)}>
                {c.name}<span>{PRODUCTS.filter((p) => p.category === c.id).length}</span>
              </button>
            ))}
          </div>

          <div className="filter-group">
            <h4>Mascota</h4>
            <div className="seg">
              {[["all", "Todos"], ["perro", "Perro"], ["gato", "Gato"]].map(([v, l]) => (
                <button key={v} className={pet === v ? "on" : ""} onClick={() => setPet(v)}>{l}</button>
              ))}
            </div>
          </div>

          <div className="filter-group">
            <h4>Precio máximo</h4>
            <input type="range" min="4000" max={priceRangeMax} step="1000" value={maxPrice} onChange={(e) => setMaxPrice(+e.target.value)} className="range" />
            <div className="range-val">Hasta {window.formatCLP(maxPrice)}</div>
          </div>

          <div className="filter-group">
            <h4>Marca</h4>
            <select value={brand} onChange={(e) => setBrand(e.target.value)} className="select">
              <option value="all">Todas las marcas</option>
              {BRANDS.map((b) => <option key={b} value={b}>{b}</option>)}
            </select>
          </div>

          <div className="filters-apply-bar show-md">
            <button className="btn btn-primary" style={{ width:'100%' }} onClick={() => setFiltersOpen(false)}>
              Ver {list.length} resultado{list.length !== 1 ? 's' : ''}
            </button>
          </div>
        </aside>

        {/* ===== resultados ===== */}
        <section className="results">
          <div className="results-bar">
            <button className="btn btn-ghost btn-sm show-md" onClick={() => setFiltersOpen((o) => !o)}><Icon name="menu" size={16} /> Filtros</button>
            <span className="results-count">{list.length} producto{list.length !== 1 ? "s" : ""}</span>
            <div className="sort">
              <span>Ordenar:</span>
              <select value={sort} onChange={(e) => setSort(e.target.value)} className="select select-sm">
                <option value="relevancia">Relevancia</option>
                <option value="menor">Menor precio</option>
                <option value="mayor">Mayor precio</option>
                <option value="rating">Mejor evaluados</option>
              </select>
            </div>
          </div>

          {list.length === 0 ? (
            <div className="empty">
              <span className="empty-ic"><Icon name="search" size={40} /></span>
              <h3>Sin resultados</h3>
              <p>Prueba ajustando los filtros o la búsqueda.</p>
              <button className="btn btn-primary" onClick={() => { setCat("all"); setPet("all"); setBrand("all"); setMaxPrice(50000); }}>Limpiar filtros</button>
            </div>
          ) : (
            <div className="prod-grid">
              {list.map((p, i) => <ProductCard key={p.id} product={p} idx={i} onOpen={(pr) => go({ name: "product", id: pr.id })} onAdd={addToCart} favorites={favorites} onToggleFavorite={onToggleFavorite} />)}
            </div>
          )}
        </section>
      </div>
    </main>
  );
}
window.Catalog = Catalog;