// Filters panel
const { useMemo: _u } = React;

function FiltersPanel({ filters, setFilters, products, currentStop, allStops }) {
  const cats = window.CATEGORIES;
  const learning = window.LEARNING;
  const isPreBaby = currentStop && currentStop.key === 'pre';

  const categoryCounts = useMemo(() => {
    const counts = {};
    products.forEach(p => { counts[p.category] = (counts[p.category] || 0) + 1; });
    return counts;
  }, [products]);

  const visibleCats = cats.filter(c => isPreBaby ? (c.stage === 'pre-baby' || c.stage === 'all') : (c.stage === 'all' || c.stage !== 'pre-baby'));

  const toggleCat = (k) => {
    const next = filters.categories.includes(k)
      ? filters.categories.filter(x => x !== k)
      : [...filters.categories, k];
    setFilters({ ...filters, categories: next });
  };
  const toggleLearning = (k) => {
    const next = filters.learning.includes(k)
      ? filters.learning.filter(x => x !== k)
      : [...filters.learning, k];
    setFilters({ ...filters, learning: next });
  };
  const toggleGender = (g) => setFilters({ ...filters, gender: filters.gender === g ? null : g });

  const priceMaxAbs = 1800;
  const setPrice = (which, val) => {
    if (which === 'min') setFilters({ ...filters, priceMin: Math.min(val, filters.priceMax - 10) });
    else setFilters({ ...filters, priceMax: Math.max(val, filters.priceMin + 10) });
  };

  return (
    <aside className="filters">
      <div className="filter-group">
        <div className="filter-lbl">
          <span>Category</span>
          {filters.categories.length > 0 && (
            <button className="filter-clear" onClick={() => setFilters({ ...filters, categories: [] })}>Clear</button>
          )}
        </div>
        <div className="filter-list">
          {visibleCats.map(c => (
            <button
              key={c.key}
              className={`filter-item${filters.categories.includes(c.key) ? ' is-active' : ''}`}
              onClick={() => toggleCat(c.key)}
            >
              <span style={{ display: 'flex', alignItems: 'center' }}>
                <span className="check" />
                {c.label}
              </span>
              <span className="count">{categoryCounts[c.key] || 0}</span>
            </button>
          ))}
        </div>
      </div>

      {!isPreBaby && (
        <div className="filter-group">
          <div className="filter-lbl"><span>Learning Focus</span></div>
          <div className="filter-tags">
            {learning.map(l => (
              <button
                key={l.key}
                className={`filter-tag${filters.learning.includes(l.key) ? ' is-active' : ''}`}
                onClick={() => toggleLearning(l.key)}
              >
                {l.label}
              </button>
            ))}
          </div>
        </div>
      )}

      <div className="filter-group">
        <div className="filter-lbl"><span>Price</span></div>
        <div className="price-row">
          <span>${filters.priceMin}</span>
          <span>${filters.priceMax}{filters.priceMax >= priceMaxAbs ? '+' : ''}</span>
        </div>
        <PriceSlider min={filters.priceMin} max={filters.priceMax} absMax={priceMaxAbs} onChange={setPrice} />
      </div>

      {!isPreBaby && (
        <div className="filter-group">
          <div className="filter-lbl"><span>For</span></div>
          <div className="filter-tags">
            {['Any', 'Girls', 'Boys', 'Neutral'].map(g => (
              <button
                key={g}
                className={`filter-tag${(filters.gender || 'Any') === g ? ' is-active' : ''}`}
                onClick={() => toggleGender(g)}
              >
                {g}
              </button>
            ))}
          </div>
        </div>
      )}
    </aside>
  );
}

function PriceSlider({ min, max, absMax, onChange }) {
  const railRef = useRef(null);
  const minPct = (min / absMax) * 100;
  const maxPct = (max / absMax) * 100;

  const startDrag = (which) => (e) => {
    e.preventDefault();
    const rect = railRef.current.getBoundingClientRect();
    const move = (ev) => {
      const x = (ev.clientX || (ev.touches && ev.touches[0].clientX)) - rect.left;
      const ratio = Math.max(0, Math.min(1, x / rect.width));
      const v = Math.round((ratio * absMax) / 10) * 10;
      onChange(which, v);
    };
    const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); };
    window.addEventListener('pointermove', move);
    window.addEventListener('pointerup', up);
  };

  return (
    <div className="price-track" ref={railRef}>
      <div className="price-rail" />
      <div className="price-rail-fill" style={{ left: `${minPct}%`, width: `${maxPct - minPct}%` }} />
      <div className="price-handle" style={{ left: `${minPct}%` }} onPointerDown={startDrag('min')} />
      <div className="price-handle" style={{ left: `${maxPct}%` }} onPointerDown={startDrag('max')} />
    </div>
  );
}

window.FiltersPanel = FiltersPanel;