// Catalog — чистые карточки без лишних текстов.

const ProductCard = ({ product, onOpen, onAdd }) => (
  <article className="group bg-white rounded-2xl border border-paper-200 hover:border-brand-200 hover:shadow-card active:scale-95 transition-all overflow-hidden flex flex-col">
    <button onClick={() => onOpen(product)} className="block p-2.5 sm:p-3">
      <ProductVisual product={product} />
    </button>

    <div className="px-3 sm:px-4 pb-3 sm:pb-4 flex-1 flex flex-col gap-1.5 sm:gap-2">
      <button onClick={() => onOpen(product)} className="text-left">
        <h3 className="font-semibold text-ink-900 text-[13px] sm:text-[15px] leading-snug line-clamp-2">
          {product.title}
        </h3>
      </button>

      <p className="text-[11px] sm:text-xs text-ink-500 truncate hidden sm:block">{product.desc}</p>

      <div className="flex items-center justify-between gap-1.5 mt-auto pt-1.5">
        <div className="font-display font-bold text-base sm:text-xl text-ink-900 tabular-nums">
          {fmtPrice(product.price)}
        </div>
        <button
          onClick={() => onAdd(product)}
          className="w-9 h-9 sm:w-10 sm:h-10 rounded-xl bg-brand-500 text-white flex items-center justify-center hover:bg-brand-600 active:scale-90 transition shadow-soft shrink-0"
          aria-label="Добавить в корзину"
        >
          <Icon name="plus" size={17} />
        </button>
      </div>
    </div>
  </article>
);

const FilterPill = ({ active, onClick, children }) => (
  <button
    onClick={onClick}
    className={`px-3.5 sm:px-4 py-2 rounded-full text-[13px] sm:text-sm font-medium whitespace-nowrap transition border shrink-0 active:scale-95 ${
      active
        ? 'bg-ink-900 text-white border-ink-900'
        : 'bg-white text-ink-700 border-paper-200 hover:border-ink-300'
    }`}
  >
    {children}
  </button>
);

const Catalog = ({ filters, setFilters, navigate, onOpenProduct }) => {
  const { city, addToCart } = useStore();
  const [search, setSearch] = useState('');
  const [sort, setSort] = useState('popular');

  const categoryFilter = filters?.category || null;
  const setCategory = (c) => setFilters((prev) => ({ ...prev, category: c === prev?.category ? null : c }));

  const products = useMemo(() => {
    let list = window.DATA.PRODUCTS.slice();
    if (city) list = list.filter((p) => p.city === city);
    if (categoryFilter) list = list.filter((p) => p.category === categoryFilter);
    if (search.trim()) {
      const q = search.trim().toLowerCase();
      list = list.filter((p) => p.title.toLowerCase().includes(q));
    }
    if (sort === 'cheap') list.sort((a, b) => a.price - b.price);
    else if (sort === 'expensive') list.sort((a, b) => b.price - a.price);
    else {
      const score = (p) => (p.tags.includes('хит') ? 0 : 1);
      list.sort((a, b) => score(a) - score(b));
    }
    return list;
  }, [city, categoryFilter, search, sort]);

  const cityObj = city ? window.DATA.cityById(city) : null;

  return (
    <div className="max-w-7xl mx-auto px-4 md:px-8 py-5 sm:py-8">

      {/* Header strip */}
      <div className="flex items-start sm:items-center justify-between gap-3 flex-wrap mb-5 sm:mb-6">
        <h1 className="font-display font-bold text-xl sm:text-2xl md:text-3xl text-ink-900 tracking-tight">
          {cityObj ? `${cityObj.emoji} ${cityObj.name}` : 'Все товары'}
        </h1>
        <div className="flex items-center gap-2">
          <div className="relative">
            <select
              value={sort}
              onChange={(e) => setSort(e.target.value)}
              className="input !py-2 !pr-8 !text-[13px] sm:!text-sm appearance-none cursor-pointer font-medium"
            >
              <option value="popular">Популярные</option>
              <option value="cheap">Дешевле</option>
              <option value="expensive">Дороже</option>
            </select>
            <Icon name="chevronDown" size={13} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-ink-400 pointer-events-none" />
          </div>
        </div>
      </div>

      {/* Search */}
      <div className="relative mb-4 sm:mb-5">
        <Icon name="search" size={17} className="absolute left-3.5 top-1/2 -translate-y-1/2 text-ink-400" />
        <input
          type="text"
          placeholder="Найти товар"
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          className="input !pl-10 !py-2.5 sm:!py-3 text-[14px] sm:text-[15px]"
        />
        {search && (
          <button
            onClick={() => setSearch('')}
            className="absolute right-3 top-1/2 -translate-y-1/2 w-7 h-7 rounded-full bg-paper-100 flex items-center justify-center text-ink-500 hover:bg-paper-200"
          >
            <Icon name="close" size={13} />
          </button>
        )}
      </div>

      {/* Category pills — горизонтальный скролл на мобиле */}
      <div className="flex gap-2 overflow-x-auto no-scrollbar pb-1 -mx-4 px-4 mb-5 sm:mb-7">
        <FilterPill active={!categoryFilter} onClick={() => setCategory(null)}>Все</FilterPill>
        {window.DATA.CATEGORIES.map((c) => (
          <FilterPill key={c.id} active={categoryFilter === c.id} onClick={() => setCategory(c.id)}>
            {c.name}
          </FilterPill>
        ))}
      </div>

      {/* Grid */}
      {products.length === 0 ? (
        <EmptyState
          icon="search"
          title="Ничего не найдено"
          action={<button className="btn-primary" onClick={() => { setSearch(''); setFilters({}); }}>Сбросить</button>}
        />
      ) : (
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-2.5 sm:gap-3 md:gap-4">
          {products.map((p) => (
            <ProductCard
              key={p.id}
              product={p}
              onOpen={onOpenProduct}
              onAdd={(prod) => addToCart(prod.id, 1)}
            />
          ))}
        </div>
      )}
    </div>
  );
};

window.Catalog = Catalog;
window.ProductCard = ProductCard;