'use client';

import { useState } from 'react';
import { Filter } from 'lucide-react';

interface FilterSidebarProps {
  className?: string;
}

const filterColors = [
  { name: 'Black', bg: 'bg-gray-900' },
  { name: 'White', bg: 'bg-white border border-gray-200' },
  { name: 'Blue', bg: 'bg-blue-500' },
  { name: 'Gray', bg: 'bg-gray-400' },
  { name: 'Green', bg: 'bg-green-600' },
  { name: 'Red', bg: 'bg-red-500' },
  { name: 'Cream', bg: 'bg-amber-100' },
  { name: 'Maroon', bg: 'bg-red-800' },
];

const filterSizes = ['S', 'M', 'L', 'XL', '2XL', '3XL'];

export default function FilterSidebar({ className = '' }: FilterSidebarProps) {
  const [priceMin, setPriceMin] = useState(450);
  const [priceMax, setPriceMax] = useState(3000);
  const [selectedColors, setSelectedColors] = useState<string[]>([]);
  const [selectedSizes, setSelectedSizes] = useState<string[]>([]);

  const toggleColor = (color: string) => {
    setSelectedColors((prev) =>
      prev.includes(color) ? prev.filter((c) => c !== color) : [...prev, color]
    );
  };

  const toggleSize = (size: string) => {
    setSelectedSizes((prev) =>
      prev.includes(size) ? prev.filter((s) => s !== size) : [...prev, size]
    );
  };

  const handleApply = () => {
    // Filter logic can be wired to parent via props
  };

  return (
    <aside className={`bg-gray-50 rounded-2xl p-5 lg:p-6 space-y-6 sticky top-28 ${className}`}>
      <div className="flex items-center gap-2">
        <Filter className="w-5 h-5 text-brand" />
        <h3 className="text-base font-bold text-gray-900">Filters</h3>
      </div>

      <div className="space-y-3">
        <h4 className="text-sm font-semibold text-gray-800">Price Range</h4>
        <div className="flex items-center gap-3">
          <div className="flex-1">
            <label className="text-[10px] text-gray-400 uppercase tracking-wider">Min</label>
            <input
              type="number"
              value={priceMin}
              onChange={(e) => setPriceMin(Number(e.target.value))}
              min={450}
              max={priceMax}
              className="w-full mt-1 px-3 py-2 text-sm bg-white border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand/30 focus:border-brand outline-none"
            />
          </div>
          <span className="text-gray-300 mt-5">—</span>
          <div className="flex-1">
            <label className="text-[10px] text-gray-400 uppercase tracking-wider">Max</label>
            <input
              type="number"
              value={priceMax}
              onChange={(e) => setPriceMax(Number(e.target.value))}
              min={priceMin}
              max={3000}
              className="w-full mt-1 px-3 py-2 text-sm bg-white border border-gray-200 rounded-lg focus:ring-2 focus:ring-brand/30 focus:border-brand outline-none"
            />
          </div>
        </div>
        <input
          type="range"
          min={450}
          max={3000}
          value={priceMax}
          onChange={(e) => setPriceMax(Number(e.target.value))}
          className="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-brand"
        />
        <div className="flex justify-between text-[10px] text-gray-400">
          <span>৳450</span>
          <span>৳3,000</span>
        </div>
      </div>

      <div className="space-y-3">
        <h4 className="text-sm font-semibold text-gray-800">Color</h4>
        <div className="flex flex-wrap gap-2.5">
          {filterColors.map((color) => (
            <button
              key={color.name}
              onClick={() => toggleColor(color.name)}
              title={color.name}
              className={`w-8 h-8 rounded-full transition-all duration-200 ${color.bg} ${
                selectedColors.includes(color.name)
                  ? 'ring-2 ring-brand ring-offset-2'
                  : 'hover:scale-110'
              }`}
            />
          ))}
        </div>
      </div>

      <div className="space-y-3">
        <h4 className="text-sm font-semibold text-gray-800">Size</h4>
        <div className="grid grid-cols-3 gap-2">
          {filterSizes.map((size) => (
            <button
              key={size}
              onClick={() => toggleSize(size)}
              className={`py-2 text-xs font-semibold rounded-lg border transition-all duration-200 ${
                selectedSizes.includes(size)
                  ? 'border-brand text-brand bg-brand/5'
                  : 'border-gray-200 text-gray-600 hover:border-gray-300'
              }`}
            >
              {size}
            </button>
          ))}
        </div>
      </div>

      <button
        onClick={handleApply}
        className="w-full py-2.5 bg-brand hover:bg-brand-dark text-white font-medium rounded-xl transition-colors duration-200"
      >
        Apply Filters
      </button>
    </aside>
  );
}
