import { useState } from 'react';

interface Props {
  brands: { name: string; slug: string; count: number }[];
  currentBrand: string;
  currentGender: string;
  currentSize: string;
  currentSort: string;
  basePath?: string;
}

const EU_SIZES = ['36', '37', '37.5', '38', '38.5', '39', '40', '40.5', '41', '42', '42.5', '43', '44', '44.5', '45', '46', '47', '48', '49'];

export default function CatalogFilters({ brands, currentBrand, currentGender, currentSize, currentSort, basePath = '/sneakers' }: Props) {
  const [mobileOpen, setMobileOpen] = useState(false);
  const [brandSearch, setBrandSearch] = useState('');

  function applyFilter(key: string, value: string) {
    const params = new URLSearchParams(window.location.search);
    if (value) {
      params.set(key, value);
    } else {
      params.delete(key);
    }
    params.delete('pagina');
    window.location.href = `${basePath}?${params.toString()}`;
  }

  const filteredBrands = brands.filter(b => b.name.toLowerCase().includes(brandSearch.toLowerCase()));

  const genders = [
    { value: '', label: 'Alle' },
    { value: 'heren', label: 'Heren' },
    { value: 'dames', label: 'Dames' },
    { value: 'unisex', label: 'Unisex' },
  ];

  const sortOptions = [
    { value: 'popular', label: 'Populair' },
    { value: 'newest', label: 'Nieuwste' },
    { value: 'price_asc', label: 'Prijs ↑' },
    { value: 'price_desc', label: 'Prijs ↓' },
    { value: 'discount', label: 'Korting' },
  ];

  const content = (
    <div className="space-y-6">
      {/* Sort */}
      <div>
        <h3 className="mb-3 text-xs font-bold uppercase tracking-widest text-text-muted">Sorteer</h3>
        <select
          value={currentSort}
          onChange={e => applyFilter('sort', e.target.value)}
          className="w-full rounded-lg bg-bg-elevated px-3 py-2 text-sm text-text outline-none"
        >
          {sortOptions.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
        </select>
      </div>

      {/* Sizes */}
      <div>
        <h3 className="mb-3 text-xs font-bold uppercase tracking-widest text-text-muted">Maat</h3>
        <div className="flex flex-wrap gap-1.5">
          {currentSize && (
            <button
              onClick={() => applyFilter('maat', '')}
              className="rounded-lg bg-accent/20 px-2.5 py-1.5 text-xs font-bold text-accent"
            >
              ✕ {currentSize}
            </button>
          )}
          {EU_SIZES.map(s => (
            <button
              key={s}
              onClick={() => applyFilter('maat', s)}
              className={`rounded-lg px-2.5 py-1.5 text-xs font-bold transition-all ${
                currentSize === s
                  ? 'bg-accent text-bg'
                  : 'bg-bg-elevated text-text-muted hover:text-text hover:bg-bg-elevated/80'
              }`}
            >
              {s}
            </button>
          ))}
        </div>
      </div>

      {/* Gender */}
      <div>
        <h3 className="mb-3 text-xs font-bold uppercase tracking-widest text-text-muted">Geslacht</h3>
        <div className="flex flex-wrap gap-2">
          {genders.map(g => (
            <button
              key={g.value}
              onClick={() => applyFilter('geslacht', g.value)}
              className={`rounded-xl px-3 py-1.5 text-xs font-bold transition-all ${
                currentGender === g.value
                  ? 'bg-accent text-bg'
                  : 'bg-bg-elevated text-text-muted hover:text-text'
              }`}
            >
              {g.label}
            </button>
          ))}
        </div>
      </div>

      {/* Brands */}
      <div>
        <h3 className="mb-3 text-xs font-bold uppercase tracking-widest text-text-muted">Merk</h3>
        <input
          type="text"
          placeholder="Zoek merk..."
          value={brandSearch}
          onChange={e => setBrandSearch(e.target.value)}
          className="mb-2 w-full rounded-lg bg-bg-elevated px-3 py-2 text-sm text-text outline-none placeholder:text-text-muted"
        />
        <div className="max-h-48 space-y-1 overflow-y-auto">
          {currentBrand && (
            <button
              onClick={() => applyFilter('merk', '')}
              className="flex w-full items-center gap-2 rounded-lg bg-accent/20 px-3 py-1.5 text-sm font-bold text-accent"
            >
              ✕ {currentBrand}
            </button>
          )}
          {filteredBrands.map(b => (
            <button
              key={b.slug}
              onClick={() => applyFilter('merk', b.slug)}
              className={`flex w-full items-center justify-between rounded-lg px-3 py-1.5 text-sm transition-colors ${
                currentBrand === b.slug
                  ? 'bg-accent text-bg font-bold'
                  : 'text-text-secondary hover:bg-bg-elevated'
              }`}
            >
              <span>{b.name}</span>
              <span className="text-xs text-text-muted">{b.count}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Reset */}
      <button
        onClick={() => { window.location.href = basePath; }}
        className="w-full rounded-xl border border-border/50 py-2 text-xs font-bold text-text-muted transition-colors hover:border-accent/50 hover:text-accent"
      >
        Filters wissen
      </button>
    </div>
  );

  return (
    <div>
      <button
        onClick={() => setMobileOpen(!mobileOpen)}
        className="mb-4 flex w-full items-center justify-center gap-2 rounded-xl border border-border/50 bg-bg-card py-3 text-sm font-bold text-text-secondary lg:hidden"
      >
        <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
          <path strokeLinecap="round" strokeLinejoin="round" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
        </svg>
        Filters {mobileOpen ? 'verbergen' : 'tonen'}
      </button>

      {mobileOpen && (
        <div className="mb-6 rounded-2xl border border-border/50 bg-bg-card p-5 lg:hidden">
          {content}
        </div>
      )}

      <div className="hidden lg:block">
        <div className="sticky top-24 rounded-2xl border border-border/50 bg-bg-card p-5">
          {content}
        </div>
      </div>
    </div>
  );
}