import { useState } from 'react';
import { Search, X } from 'lucide-react';

interface Category {
  id: string;
  name: string;
  count?: number;
}

interface Filters {
  search?: string;
  categories?: string[];
  priceMin?: number;
  priceMax?: number;
  vendors?: string[];
}

interface ProductFiltersProps {
  categories: Category[];
  onFilterChange: (filters: Filters) => void;
}

export default function ProductFilters({ categories, onFilterChange }: ProductFiltersProps) {
  const [search, setSearch] = useState('');
  const [selectedCategories, setSelectedCategories] = useState<string[]>([]);
  const [priceRange, setPriceRange] = useState<[number, number]>([0, 100000]);

  const applyFilters = () => {
    onFilterChange({ search, categories: selectedCategories, priceMin: priceRange[0], priceMax: priceRange[1] });
  };

  const toggleCategory = (id: string) => {
    const newCategories = selectedCategories.includes(id)
      ? selectedCategories.filter(c => c !== id)
      : [...selectedCategories, id];
    setSelectedCategories(newCategories);
    onFilterChange({ search, categories: newCategories, priceMin: priceRange[0], priceMax: priceRange[1] });
  };

  return (
    <div className="space-y-6">
      <div className="relative">
        <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-5 h-5 text-gray-400" />
        <input
          type="text"
          placeholder="ค้นหาสินค้า..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
          onKeyDown={(e) => e.key === 'Enter' && applyFilters()}
          className="w-full pl-10 pr-4 py-2 border rounded-lg"
        />
      </div>

      <div>
        <h3 className="font-medium mb-3">หมวดหมู่</h3>
        <div className="space-y-2">
          {categories.map(category => (
            <label key={category.id} className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                checked={selectedCategories.includes(category.id)}
                onChange={() => toggleCategory(category.id)}
                className="w-4 h-4 rounded border-gray-300"
              />
              <span className="flex-1">{category.name}</span>
              {category.count && (
                <span className="text-sm text-gray-500">({category.count})</span>
              )}
            </label>
          ))}
        </div>
      </div>

      <div>
        <h3 className="font-medium mb-3">ช่วงราคา</h3>
        <div className="flex items-center gap-2">
          <input
            type="number"
            placeholder="ต่ำสุด"
            value={priceRange[0] || ''}
            onChange={(e) => setPriceRange([Number(e.target.value), priceRange[1]])}
            className="w-full px-3 py-2 border rounded-lg"
          />
          <span className="text-gray-400">-</span>
          <input
            type="number"
            placeholder="สูงสุด"
            value={priceRange[1] || ''}
            onChange={(e) => setPriceRange([priceRange[0], Number(e.target.value)])}
            className="w-full px-3 py-2 border rounded-lg"
          />
        </div>
      </div>

      <button
        onClick={() => {
          setSearch('');
          setSelectedCategories([]);
          setPriceRange([0, 100000]);
          onFilterChange({});
        }}
        className="w-full py-2 border rounded-lg text-gray-600 hover:bg-gray-50"
      >
        ล้างตัวกรอง
      </button>
    </div>
  );
}
