const { useState: useStateF } = React;

function FilterPanel({ filters, setFilters, counts }) {
  const vibeOpts = [
    { id: 'remote-work', label: 'Remote work' },
    { id: 'health-wellness', label: 'Health & wellness' },
    { id: 'fund-raising', label: 'Fundraising' },
    { id: 'networking', label: 'Networking' },
    { id: 'creative', label: 'Creative scene' },
    { id: 'foodie', label: 'Food-forward' },
    { id: 'off-beaten', label: 'Off the beaten path' },
    { id: 'luxury', label: 'Luxury' },
  ];
  const biomeOpts = [
    { id: 'mediterranean', label: 'Mediterranean' },
    { id: 'temperate-atlantic', label: 'Temperate Atlantic' },
    { id: 'temperate-continental', label: 'Temperate continental' },
    { id: 'temperate-humid', label: 'Temperate humid' },
    { id: 'temperate-pampas', label: 'Pampas' },
    { id: 'temperate-boreal', label: 'Boreal' },
    { id: 'subtropical-humid', label: 'Subtropical humid' },
    { id: 'subtropical-coastal', label: 'Subtropical coastal' },
    { id: 'subtropical-island', label: 'Subtropical island' },
    { id: 'tropical-wet', label: 'Tropical wet' },
    { id: 'tropical-dry', label: 'Tropical dry' },
    { id: 'tropical-highland', label: 'Tropical highland' },
    { id: 'jungle-rainforest', label: 'Jungle / rainforest' },
    { id: 'hot-desert', label: 'Hot desert' },
    { id: 'high-altitude', label: 'High altitude' },
    { id: 'subarctic', label: 'Subarctic' },
  ];
  const tiers = [
    { id: 'survival', label: 'Survival', sub: '$' },
    { id: 'comfort', label: 'Comfort', sub: '$$' },
    { id: 'luxury', label: 'Luxury', sub: '$$$' },
  ];

  const toggle = (key, val) => {
    const cur = new Set(filters[key]);
    if (cur.has(val)) cur.delete(val); else cur.add(val);
    setFilters({ ...filters, [key]: [...cur] });
  };

  return (
    <div className="filter-panel">
      <div className="filter-section">
        <div className="filter-label">Budget tier</div>
        <div className="chip-row">
          {tiers.map(t => (
            <button key={t.id}
              className={`chip ${filters.tiers.includes(t.id) ? 'on' : ''}`}
              onClick={() => toggle('tiers', t.id)}>
              <span className="chip-sub">{t.sub}</span> {t.label}
            </button>
          ))}
        </div>
      </div>

      <div className="filter-section">
        <div className="filter-label">Monthly ceiling
          <span className="filter-val">${filters.maxCost.toLocaleString()}</span>
        </div>
        <input type="range" min="800" max="12000" step="100"
          value={filters.maxCost}
          onChange={e => setFilters({ ...filters, maxCost: +e.target.value })} />
      </div>

      <div className="filter-section">
        <div className="filter-label">Vibe</div>
        <div className="chip-row wrap">
          {vibeOpts.map(v => (
            <button key={v.id}
              className={`chip ${filters.vibes.includes(v.id) ? 'on' : ''}`}
              onClick={() => toggle('vibes', v.id)}>{v.label}</button>
          ))}
        </div>
      </div>

      <div className="filter-section">
        <div className="filter-label">Biome / climate</div>
        <div className="chip-row wrap">
          {biomeOpts.map(b => (
            <button key={b.id}
              className={`chip ${filters.biomes.includes(b.id) ? 'on' : ''}`}
              onClick={() => toggle('biomes', b.id)}>{b.label}</button>
          ))}
        </div>
      </div>

      <div className="filter-section double">
        <div>
          <div className="filter-label">Min safety
            <span className="filter-val">{filters.minSafety}</span>
          </div>
          <input type="range" min="0" max="100" step="1"
            value={filters.minSafety}
            onChange={e => setFilters({ ...filters, minSafety: +e.target.value })} />
        </div>
        <div>
          <div className="filter-label">Min visa flexibility
            <span className="filter-val">{filters.minVisa}</span>
          </div>
          <input type="range" min="0" max="100" step="1"
            value={filters.minVisa}
            onChange={e => setFilters({ ...filters, minVisa: +e.target.value })} />
        </div>
        <div>
          <div className="filter-label">Min internet
            <span className="filter-val">{filters.minInternet}</span>
          </div>
          <input type="range" min="0" max="100" step="1"
            value={filters.minInternet}
            onChange={e => setFilters({ ...filters, minInternet: +e.target.value })} />
        </div>
        <div>
          <div className="filter-label">Min healthcare
            <span className="filter-val">{filters.minHealth}</span>
          </div>
          <input type="range" min="0" max="100" step="1"
            value={filters.minHealth}
            onChange={e => setFilters({ ...filters, minHealth: +e.target.value })} />
        </div>
      </div>

      <div className="filter-footer">
        <span className="count-pill">{counts.matching} <span>of {counts.total} hubs</span></span>
        <button className="reset-btn" onClick={() => setFilters(window.DEFAULT_FILTERS)}>Reset</button>
      </div>
    </div>
  );
}

window.FilterPanel = FilterPanel;