'use client';

import { useEffect, useState } from "react";

// Types
interface SelectedFilters {
  banks: string[];
  features: string[];
  salary: string;
}

interface Bank {
  code: string;
  description: string;
}

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

const Filter: React.FC<FilterProps> = ({ selectedFilters, setSelectedFilters }) => {
  const [banksList, setBanksList] = useState<Bank[]>([]);
  const [features, setFeatures] = useState<string[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchFilters = async () => {
      try {
        const res = await fetch("/api/cardlists/filters");
        const data = await res.json();
        setFeatures(data.features || []);
        setBanksList(data.banks || []);
      } catch (err) {
        console.error("Filter API Fetch Error:", err);
      } finally {
        setLoading(false);
      }
    };

    fetchFilters();
  }, []);

  const handleCheckboxChange = (type: keyof SelectedFilters, value: string) => {
    setSelectedFilters((prevFilters) => {
      if (type === "salary") {
        return { ...prevFilters, salary: value };
      }

      const currentArray = prevFilters[type] as string[];
      return {
        ...prevFilters,
        [type]: currentArray.includes(value)
          ? currentArray.filter((item) => item !== value)
          : [...currentArray, value],
      };
    });
  };

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

      {/* Salary Range Filter */}
      <div className="mb-4">
        <label className="block text-sm font-medium mb-1">
          Salary Range (AED): {selectedFilters.salary}
        </label>
        <input
          type="range"
          min="0"
          max="50000"
          step="1000"
          className="w-full"
          value={selectedFilters.salary}
          onChange={(e) =>
            setSelectedFilters({ ...selectedFilters, salary: e.target.value })
          }
        />
      </div>

      {/* Bank Filters */}
      <div className="mb-4">
        <h3 className="font-semibold mb-2">Bank Name</h3>
        {loading ? (
          <p className="text-sm text-gray-500">Loading banks...</p>
        ) : (
          <div className="space-y-1 max-h-40 overflow-auto">
            {banksList.map((bank) => (
              <label key={bank.code} className="flex items-center space-x-2 text-sm">
               <input
                type="checkbox"
                value={bank.description}  // Use full name here
                checked={selectedFilters.banks.includes(bank.description)}  // Match full name
                onChange={() => handleCheckboxChange("banks", bank.description)}
              />
                <span>{bank.description}</span>
              </label>
            ))}
          </div>
        )}
      </div>

      {/* Feature Filters */}
      <div>
        <h3 className="font-semibold mb-2">Feature Type</h3>
        {loading ? (
          <p className="text-sm text-gray-500">Loading features...</p>
        ) : (
          <div className="space-y-1">
            {features.map((feature) => (
              <label key={feature} className="flex items-center space-x-2 text-sm">
                <input
                  type="checkbox"
                  value={feature}
                  checked={selectedFilters.features.includes(feature)}
                  onChange={() => handleCheckboxChange("features", feature)}
                />
                <span>{feature}</span>
              </label>
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default Filter;