/* ============================================================
   lomi — pantalla FAVORITOS
   ============================================================ */
function Favorites({ go, addToCart, favorites, onToggleFavorite }) {
  const { PRODUCTS } = window.LOMI_DATA;
  const favProducts = PRODUCTS.filter(p => favorites.includes(p.id));
  useReveal('fav' + favorites.length);

  return (
    <main className="catalog">
      <div className="cat-hero">
        <div className="wrap">
          <div className="crumbs">
            <button onClick={() => go({ name:'home' })}>Inicio</button> / <span>Favoritos</span>
          </div>
          <h1>Mis favoritos</h1>
          <p>
            {favProducts.length > 0
              ? `${favProducts.length} producto${favProducts.length !== 1 ? 's' : ''} guardado${favProducts.length !== 1 ? 's' : ''}`
              : 'Guarda los productos que más te gusten'}
          </p>
        </div>
      </div>

      <div className="wrap" style={{ padding:'40px 0 80px' }}>
        {favProducts.length === 0 ? (
          <div className="empty empty-lg">
            <span className="empty-ic"><Icon name="heart" size={48}/></span>
            <h3>Aún no hay favoritos</h3>
            <p>Toca el corazón en cualquier producto para guardarlo aquí.</p>
            <button className="btn btn-primary btn-lg" onClick={() => go({ name:'catalog' })}>
              Explorar tienda <Icon name="arrow" size={18}/>
            </button>
          </div>
        ) : (
          <>
            <div className="prod-grid">
              {favProducts.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>
            <div style={{ textAlign:'center', marginTop:32 }}>
              <button className="btn btn-ghost" onClick={() => go({ name:'catalog' })}>
                <Icon name="arrow" size={16} style={{ transform:'rotate(180deg)' }}/> Seguir comprando
              </button>
            </div>
          </>
        )}
      </div>
    </main>
  );
}
window.Favorites = Favorites;