"use client";

import { useEffect, useState } from "react";

// Define types for filters
interface SelectedFilters {
  banks: string[];
  features: string[];
  salary: string;
}

interface FilterProps {
  selectedFilters: SelectedFilters;
  setSelectedFilters: React.Dispatch<React.SetStateAction<SelectedFilters>>;
}

const Filter: React.FC<FilterProps> = ({ selectedFilters, setSelectedFilters }) => {
  const [banks, setBanks] = useState<string[]>([]);
  const [features, setFeatures] = useState<string[]>([]);

  useEffect(() => {
    fetch("/api/creditcards/filters")
      .then((res) => res.json())
      .then((data) => {
        setBanks(data.banks || []);
        setFeatures(data.features || []);
      })
      .catch((err) => console.error("Filter API Fetch Error:", err));
  }, []);

  const handleCheckboxChange = (type: keyof SelectedFilters, value: string) => {
    setSelectedFilters((prevFilters) => {
      const newFilters = { ...prevFilters };

      if (Array.isArray(newFilters[type])) {
        newFilters[type] = newFilters[type].includes(value)
          ? newFilters[type].filter((item) => item !== value)
          : [...newFilters[type], value];
      }

      return newFilters;
    });
  };

  return (
    <div className="p-4 border rounded-lg shadow-md bg-white w-60">
      <h2 className="text-lg font-semibold mb-2">Filters</h2>

      {/* Salary Range Filter */}
      <label className="block text-sm font-medium">Salary Range (AED)</label>
      <input
        type="range"
        min="5000"
        max="50000"
        className="w-full my-2"
        value={selectedFilters.salary}
        onChange={(e) => setSelectedFilters({ ...selectedFilters, salary: e.target.value })}
      />
      
      {/* Bank Filters */}
      <h3 className="font-semibold mt-3">Bank Name</h3>
      {banks.map((bank) => (
        <label key={bank} className="flex items-center space-x-2">
          <input
            type="checkbox"
            value={bank}
            checked={selectedFilters.banks.includes(bank)}
            onChange={() => handleCheckboxChange("banks", bank)}
          />
          <span>{bank}</span>
        </label>
      ))}

      {/* Feature Filters */}
      <h3 className="font-semibold mt-3">Feature Type</h3>
      {features.map((feature) => (
        <label key={feature} className="flex items-center space-x-2">
          <input
            type="checkbox"
            value={feature}
            checked={selectedFilters.features.includes(feature)}
            onChange={() => handleCheckboxChange("features", feature)}
          />
          <span>{feature}</span>
        </label>
      ))}
    </div>
  );
};

export default Filter;