/* Rotunda — Catalog View (v2 — always-visible dropdown filters) */
const { useState: _useS_Cat, useMemo: _useM_Cat, useCallback: _useC_Cat, useRef: _useR_Cat, useEffect: _useE_Cat } = React;

/* ---- Filter dropdown component ---- */
function FilterDropdown({ label, options, selected, onToggle, isOpen, onOpen }) {
  const ref = _useR_Cat(null);
  const count = selected.length;

  /* Close on outside click */
  _useE_Cat(() => {
    if (!isOpen) return;
    const handler = (e) => { if (ref.current && !ref.current.contains(e.target)) onOpen(null); };
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [isOpen, onOpen]);

  return (
    <div className="fd" ref={ref}>
      <button
        className={`fd-btn ${count > 0 ? "fd-btn--active" : ""} ${isOpen ? "fd-btn--open" : ""}`}
        onClick={() => onOpen(isOpen ? null : label)}
      >
        {label} {count > 0 && <span className="fd-count">({count})</span>} <span className="fd-chev">{isOpen ? "▲" : "▼"}</span>
      </button>
      {isOpen && (
        <div className="fd-panel">
          {options.map(opt => (
            <label key={opt.id} className={`fd-option ${selected.includes(opt.id) ? "fd-option--checked" : ""}`}>
              <span className={`fd-checkbox ${selected.includes(opt.id) ? "fd-checkbox--on" : ""}`}>
                {selected.includes(opt.id) && "✓"}
              </span>
              <input type="checkbox" checked={selected.includes(opt.id)} onChange={() => onToggle(opt.id)}></input>
              {opt.label}
            </label>
          ))}
        </div>
      )}
    </div>
  );
}

function CatalogView({ initialFilter, onProductClick, onAddToCart }) {
  const [catFilter, setCatFilter] = _useS_Cat(initialFilter || "todas");
  const [query, setQuery] = _useS_Cat("");
  const [sort, setSort] = _useS_Cat("default");
  const [shown, setShown] = _useS_Cat(24);

  /* Advanced filters */
  const [priceFilter, setPriceFilter] = _useS_Cat([]);
  const [sizeFilter, setSizeFilter] = _useS_Cat([]);
  const [finishFilter, setFinishFilter] = _useS_Cat([]);
  const [openDropdown, setOpenDropdown] = _useS_Cat(null);

  const hasAdvanced = priceFilter.length > 0 || sizeFilter.length > 0 || finishFilter.length > 0;

  const togglePrice = _useC_Cat((id) => { setPriceFilter(prev => prev.includes(id) ? prev.filter(v => v !== id) : [...prev, id]); setShown(24); }, []);
  const toggleSize = _useC_Cat((id) => { setSizeFilter(prev => prev.includes(id) ? prev.filter(v => v !== id) : [...prev, id]); setShown(24); }, []);
  const toggleFinish = _useC_Cat((id) => { setFinishFilter(prev => prev.includes(id) ? prev.filter(v => v !== id) : [...prev, id]); setShown(24); }, []);

  const clearFilters = () => { setPriceFilter([]); setSizeFilter([]); setFinishFilter([]); setQuery(""); setShown(24); };

  const activeTagsArr = _useM_Cat(() => {
    const tags = [];
    priceFilter.forEach(id => { const r = PRICE_RANGES.find(p => p.id === id); if (r) tags.push({ key: "p-" + id, label: r.label, remove: () => setPriceFilter(prev => prev.filter(v => v !== id)) }); });
    sizeFilter.forEach(id => { const r = SIZE_CATEGORIES.find(s => s.id === id); if (r) tags.push({ key: "s-" + id, label: r.label, remove: () => setSizeFilter(prev => prev.filter(v => v !== id)) }); });
    finishFilter.forEach(id => { const r = FINISH_CATEGORIES.find(f => f.id === id); if (r) tags.push({ key: "f-" + id, label: r.label, remove: () => setFinishFilter(prev => prev.filter(v => v !== id)) }); });
    return tags;
  }, [priceFilter, sizeFilter, finishFilter]);

  const list = _useM_Cat(() => {
    let l = window.ALL_PRODUCTS;
    if (catFilter !== "todas") l = l.filter(p => p.cat === catFilter);
    if (query.trim()) { const q = query.trim().toLowerCase(); l = l.filter(p => p.name.toLowerCase().includes(q) || p.color.toLowerCase().includes(q)); }
    if (priceFilter.length > 0) l = l.filter(p => priceFilter.some(id => { const r = PRICE_RANGES.find(pr => pr.id === id); return r && r.test(p.price); }));
    if (sizeFilter.length > 0) l = l.filter(p => sizeFilter.some(id => { const r = SIZE_CATEGORIES.find(sc => sc.id === id); return r && r.test(p.h); }));
    if (finishFilter.length > 0) l = l.filter(p => finishFilter.includes(getFinishCategory(p.color)));
    if (sort === "az") l = [...l].sort((a, b) => a.name.localeCompare(b.name, "es"));
    else if (sort === "precio-asc") l = [...l].sort((a, b) => a.price - b.price);
    else if (sort === "precio-desc") l = [...l].sort((a, b) => b.price - a.price);
    else if (sort === "alto") l = [...l].sort((a, b) => b.h - a.h);
    return l;
  }, [catFilter, query, sort, priceFilter, sizeFilter, finishFilter]);

  const visible = list.slice(0, shown);

  return (
    <div className="catalog-view">
      <div className="catalog-header">
        <h2 className="h-section">Catálogo <span className="serif-it">completo.</span></h2>
        <p className="catalog-desc">Inventario editorial. Todas las piezas son artesanales: las medidas tienen variación natural en centímetros y cada cocción es única.</p>
      </div>

      {/* Category tabs + search */}
      <div className="cat-tabs-bar">
        <div className="cat-tabs">
          {["todas", "macetas", "floreros"].map(f => (
            <button key={f} className={`chip ${catFilter === f ? "active" : ""}`} onClick={() => { setCatFilter(f); setShown(24); }}>{f}</button>
          ))}
        </div>
        <input type="text" className="search-input" placeholder="Buscar por nombre o color…" value={query} onChange={(e) => { setQuery(e.target.value); setShown(24); }}></input>
      </div>

      {/* Filter dropdowns row */}
      <div className="filter-dropdowns-bar">
        <div className="fd-group">
          <FilterDropdown label="Precio" options={PRICE_RANGES} selected={priceFilter} onToggle={togglePrice} isOpen={openDropdown === "Precio"} onOpen={setOpenDropdown}></FilterDropdown>
          <FilterDropdown label="Tamaño" options={SIZE_CATEGORIES} selected={sizeFilter} onToggle={toggleSize} isOpen={openDropdown === "Tamaño"} onOpen={setOpenDropdown}></FilterDropdown>
          <FilterDropdown label="Acabado" options={FINISH_CATEGORIES} selected={finishFilter} onToggle={toggleFinish} isOpen={openDropdown === "Acabado"} onOpen={setOpenDropdown}></FilterDropdown>
        </div>
        <div className="fd-right">
          <select className="sort-select" value={sort} onChange={(e) => setSort(e.target.value)}>
            <option value="default">Orden de catálogo</option>
            <option value="az">A → Z</option>
            <option value="precio-asc">Menor precio</option>
            <option value="precio-desc">Mayor precio</option>
            <option value="alto">Mayor altura</option>
          </select>
          <span className="count">{list.length} piezas</span>
        </div>
      </div>

      {/* Active filter tags */}
      {activeTagsArr.length > 0 && (
        <div className="filter-tags-row">
          <span className="filter-tags-label">Filtros activos:</span>
          <div className="filter-tags">
            {activeTagsArr.map(t => (
              <span key={t.key} className="filter-tag">{t.label} <button onClick={t.remove}>×</button></span>
            ))}
          </div>
          <button className="clear-all-btn" onClick={clearFilters}>Limpiar todo</button>
        </div>
      )}

      {/* Product grid */}
      <div className="products-grid">
        {visible.length === 0 && <div className="empty">Sin resultados para esos filtros.</div>}
        {visible.map((p, i) => {
          const tile = window.tonalFromColor(p.color);
          const light = isLightTile(tile);
          const imgs = (window.PRODUCT_IMAGES || {})[p.cat + ":" + p.id];
          return (
            <div key={p.id + i} className="prod-card">
              <div className="frame" onClick={() => onProductClick(p)} role="button" tabIndex={0}>
                <ImagePlate id={"p-" + p.id} src={imgs && imgs[0]} tile={tile} light={light} name={p.name} subName={p.color} corner={p.cat === "macetas" ? "M" : "F"} placeholder={p.name + " · " + p.color}></ImagePlate>
                <div className="quick" aria-hidden="true">↗</div>
              </div>
              <div className="meta" onClick={() => onProductClick(p)} role="button" tabIndex={0}>
                <div className="name">{p.name}</div>
                <div className="h">{p.h} cm</div>
                <div className="sub">{p.color}</div>
              </div>
              <div className="prod-price-row">
                <span className="prod-price">{formatPrice(p.price)}</span>
                <button className="add-cart-btn" onClick={(e) => { e.stopPropagation(); onAddToCart(p.id); }}>Agregar al carrito</button>
              </div>
            </div>
          );
        })}
      </div>

      {shown < list.length && (
        <div className="show-more">
          <button className="btn btn--outline" onClick={() => setShown(shown + 24)}>Ver más ({list.length - shown}) <span className="btn-arrow">↓</span></button>
        </div>
      )}
    </div>
  );
}

window.CatalogView = CatalogView;