import { Checkbox } from "@/components/ui/checkbox";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Slider } from "@/components/ui/slider";
import { RotateCcw } from "lucide-react";
import type { FilterBrand, FilterCategory } from "@/lib/types/api";

interface FiltersData {
  categories: FilterCategory[];
  brands: FilterBrand[];
}

interface CollectionFiltersProps {
  filtersData: FiltersData | undefined;
  selectedBrands: Set<number>;
  selectedCategories: Set<number>;
  priceSort: "none" | "lowToHigh" | "highToLow";
  priceRange: [number, number];
  onBrandToggle: (brandId: number) => void;
  onCategoryToggle: (categoryId: number) => void;
  onPriceSortChange: (sortType: "none" | "lowToHigh" | "highToLow") => void;
  onPriceChange: (values: number[]) => void;
  onReset: () => void;
  translations: {
    category: string;
    brands: string;
    sort: string;
    default: string;
    price_low_to_high: string;
    price_high_to_low: string;
    price: string;
    price_from: string;
    price_to: string;
    reset: string;
  };
}

export default function CollectionFilters({
  filtersData,
  selectedBrands,
  selectedCategories,
  priceSort,
  priceRange,
  onBrandToggle,
  onCategoryToggle,
  onPriceSortChange,
  onPriceChange,
  onReset,
  translations,
}: CollectionFiltersProps) {
  return (
    <div className="space-y-8 mb-6">
      {filtersData?.categories && filtersData.categories.length > 0 && (
        <FilterSection title={translations.category}>
          {filtersData.categories.map((category) => (
            <CheckboxItem
              key={category.id}
              checked={selectedCategories.has(category.id)}
              onCheckedChange={() => onCategoryToggle(category.id)}
              label={category.name}
            />
          ))}
        </FilterSection>
      )}

      {filtersData?.brands && filtersData.brands.length > 0 && (
        <FilterSection title={translations.brands}>
          {filtersData.brands.map((brand) => (
            <CheckboxItem
              key={brand.id}
              checked={selectedBrands.has(brand.id)}
              onCheckedChange={() => onBrandToggle(brand.id)}
              label={brand.name}
            />
          ))}
        </FilterSection>
      )}

      {/* <FilterSection title={translations.sort}>
        <RadioItem
          name="sort"
          checked={priceSort === "none"}
          onChange={() => onPriceSortChange("none")}
          label={translations.default}
        />
        <RadioItem
          name="sort"
          checked={priceSort === "lowToHigh"}
          onChange={() => onPriceSortChange("lowToHigh")}
          label={translations.price_low_to_high}
        />
        <RadioItem
          name="sort"
          checked={priceSort === "highToLow"}
          onChange={() => onPriceSortChange("highToLow")}
          label={translations.price_high_to_low}
        />
      </FilterSection> */}

      <PriceFilter
        title={translations.price}
        priceRange={priceRange}
        onPriceChange={onPriceChange}
        translations={{
          from: translations.price_from,
          to: translations.price_to,
        }}
      />

      <Button 
        variant="outline" 
        className="w-full rounded-[10px] cursor-pointer mb-6 h-12 font-semibold border-2 border-gray-200 hover:border-gray-900 hover:bg-gray-50 transition-all duration-200 gap-2" 
        onClick={onReset}
      >
        <RotateCcw className="h-4 w-4" />
        {translations.reset}
      </Button>
    </div>
  );
}

function FilterSection({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) {
  return (
    <div className="pb-6 border-b border-gray-100 last:border-0">
      <h3 className="text-lg font-bold mb-4 text-gray-900">{title}</h3>
      <div className="space-y-3">{children}</div>
    </div>
  );
}

function CheckboxItem({
  checked,
  onCheckedChange,
  label,
}: {
  checked: boolean;
  onCheckedChange: () => void;
  label: string;
}) {
  return (
    <label className="flex items-center gap-3 cursor-pointer group py-1 hover:bg-gray-50 rounded-lg px-2 -mx-2 transition-colors mb-1">
      <Checkbox 
        checked={checked} 
        onCheckedChange={onCheckedChange}
        className="border-2 border-gray-300 data-[state=checked]:bg-gray-900 data-[state=checked]:border-gray-900"
      />
      <span className="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">
        {label}
      </span>
    </label>
  );
}

function RadioItem({
  name,
  checked,
  onChange,
  label,
}: {
  name: string;
  checked: boolean;
  onChange: () => void;
  label: string;
}) {
  return (
    <label className="flex items-center gap-3 cursor-pointer group py-1 hover:bg-gray-50 rounded-lg px-2 -mx-2 transition-colors">
      <input
        type="radio"
        name={name}
        checked={checked}
        onChange={onChange}
        className="w-4 h-4 accent-gray-900"
      />
      <span className="text-sm font-medium text-gray-700 group-hover:text-gray-900 transition-colors">
        {label}
      </span>
    </label>
  );
}

function PriceFilter({
  title,
  priceRange,
  onPriceChange,
  translations,
}: {
  title: string;
  priceRange: [number, number];
  onPriceChange: (values: number[]) => void;
  translations: { from: string; to: string };
}) {
  return (
    <div className="pb-6">
      <h3 className="text-lg font-bold mb-4 text-gray-900">{title}</h3>
      <div className="space-y-5">
        <div className="flex gap-3">
          <div className="flex-1">
            <Label htmlFor="price-from" className="text-xs font-semibold mb-2 block text-gray-700">
              {translations.from}
            </Label>
            <Input
              id="price-from"
              type="number"
              value={priceRange[0]}
              onChange={(e) =>
                onPriceChange([parseInt(e.target.value) || 0, priceRange[1]])
              }
              className="rounded-[10px] border-2 border-gray-200 focus:border-gray-900 h-11 font-medium"
            />
          </div>
          <div className="flex-1">
            <Label htmlFor="price-to" className="text-xs font-semibold mb-2 block text-gray-700">
              {translations.to}
            </Label>
            <Input
              id="price-to"
              type="number"
              value={priceRange[1]}
              onChange={(e) =>
                onPriceChange([
                  priceRange[0],
                  parseInt(e.target.value) || 10000,
                ])
              }
              className="rounded-[10px] border-2 border-gray-200 focus:border-gray-900 h-11 font-medium"
            />
          </div>
        </div>
        <div className="px-1">
          <Slider
            min={0}
            max={99999}
            step={100}
            value={priceRange}
            onValueChange={onPriceChange}
            className="mt-2"
          />
        </div>
      </div>
    </div>
  );
}