import { useState } from 'react';
import { brands } from '../data/mock';

interface Props {
  onFilter?: (filters: any) => void;
}

export default function FilterSidebar({ onFilter }: Props) {
  const [selectedBrands, setSelectedBrands] = useState<string[]>([]);
  const [priceRange, setPriceRange] = useState<[number, number]>([0, 300]);
  const [gender, setGender] = useState<string>('');
  const [mobileOpen, setMobileOpen] = useState(false);

  const toggleBrand = (slug: string) => {
    setSelectedBrands(prev =>
      prev.includes(slug) ? prev.filter(b => b !== slug) : [...prev, slug]
    );
  };

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

  const content = (
    <div className="space-y-6">
      {/* Brands */}
      <div>
        <h3 className="mb-3 text-xs font-bold uppercase tracking-widest text-text-muted">Merk</h3>
        <div className="space-y-2">
          {brands.map(b => (
            <label key={b.slug} className="flex cursor-pointer items-center gap-3">
              <input
                type="checkbox"
                checked={selectedBrands.includes(b.slug)}
                onChange={() => toggleBrand(b.slug)}
                className="h-4 w-4 rounded border-border accent-accent"
              />
              <span className="text-sm text-text-secondary">{b.name}</span>
            </label>
          ))}
        </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={() => setGender(g.value)}
              className={`rounded-xl px-3 py-1.5 text-xs font-bold transition-all ${
                gender === g.value
                  ? 'bg-accent text-bg'
                  : 'bg-bg-elevated text-text-muted hover:text-text'
              }`}
            >
              {g.label}
            </button>
          ))}
        </div>
      </div>

      {/* Price range */}
      <div>
        <h3 className="mb-3 text-xs font-bold uppercase tracking-widest text-text-muted">Prijs</h3>
        <div className="space-y-3">
          <input
            type="range"
            min={0}
            max={300}
            value={priceRange[1]}
            onChange={e => setPriceRange([priceRange[0], +e.target.value])}
            className="w-full accent-accent"
          />
          <div className="flex justify-between text-xs text-text-muted">
            <span>€0</span>
            <span>€{priceRange[1]}</span>
          </div>
        </div>
      </div>

      {/* Reset */}
      <button
        onClick={() => { setSelectedBrands([]); setGender(''); setPriceRange([0, 300]); }}
        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 (
    <>
      {/* Mobile toggle */}
      <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>

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

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