'use client';

import { useEffect, useState } from 'react';

interface SelectedFilters {
  banks: string[];
  features: string[]; // Now holds feature strings directly
  salary: string;
}

interface Bank {
  bankcode: string;
  bankname: string;
}

interface FeatureByCard {
  creditcardsname: string;
  feature: 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<FeatureByCard[]>([]);
  const [loading, setLoading] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');
  const [bankSearchTerm, setBankSearchTerm] = useState('');
  const [openSections, setOpenSections] = useState({
    bank: true,
    feature: true,
  });

  useEffect(() => {
    const fetchFilters = async () => {
      try {
        const res = await fetch('/api/cardlists/filters');
        const data = await res.json();
        setFeatures(data.featuresByCard || []);
        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) => {
      const currentValues = prevFilters[type] as string[];
      const updatedValues = currentValues.includes(value)
        ? currentValues.filter((v) => v !== value)
        : [...currentValues, value];

      return {
        ...prevFilters,
        [type]: updatedValues,
      };
    });
  };

  const toggleSection = (section: 'bank' | 'feature') => {
    setOpenSections((prev) => ({ ...prev, [section]: !prev[section] }));
  };

  const clearAllFilters = () => {
    setSelectedFilters({ banks: [], features: [], salary: '0' });
  };

  // Unique feature strings with optional search filter
  const filteredFeatures = Array.from(
    new Set(
      features
        .filter((f) =>
          f.feature.toLowerCase().includes(searchTerm.toLowerCase())
        )
        .map((f) => f.feature)
    )
  );
const filteredBanks = banksList.filter((bank) =>
  bank.bankname.toLowerCase().includes(bankSearchTerm.toLowerCase())
);

  return (
    <div className="p-4 border rounded-lg shadow-md bg-white w-full lg:w-72 max-h-screen overflow-y-auto">
      <h2 className="text-lg font-semibold mb-4">Filters</h2>

      <button onClick={clearAllFilters} className="text-sm text-red-600 underline mb-4">
        Clear All Filters
      </button>

      {/* Salary 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">
  <button
    onClick={() => toggleSection('bank')}
    className="font-semibold mb-2 flex justify-between w-full text-left"
  >
    Bank Name
    <span>{openSections.bank ? '▲' : '▼'}</span>
  </button>

  {openSections.bank && (
    <>
      <input
        type="text"
        placeholder="Search by Bank..."
        value={bankSearchTerm}
        onChange={(e) => setBankSearchTerm(e.target.value)}
        className="w-full mb-2 px-2 py-1 border rounded text-sm"
      />

      <div className="space-y-1 max-h-40 overflow-auto">
        {loading ? (
          <p className="text-sm text-gray-500">Loading banks...</p>
        ) : filteredBanks.length === 0 ? (
          <p className="text-sm text-gray-500">No banks found.</p>
        ) : (
          filteredBanks.map((bank) => (
            <label key={bank.bankcode} className="flex items-center space-x-2 text-sm">
              <input
                type="checkbox"
                value={bank.bankname}
                checked={selectedFilters.banks.includes(bank.bankname)}
                onChange={() => handleCheckboxChange('banks', bank.bankname)}
              />
              <span>{bank.bankname}</span>
            </label>
          ))
        )}
      </div>
    </>
  )}
</div>

      {/* Feature Filters */}
      <div>
        <button
          onClick={() => toggleSection('feature')}
          className="font-semibold mb-2 flex justify-between w-full text-left"
        >
          Feature Type
          <span>{openSections.feature ? '▲' : '▼'}</span>
        </button>

        {openSections.feature && (
          <>
            <input
              type="text"
              placeholder="Search by Feature..."
              value={searchTerm}
              onChange={(e) => setSearchTerm(e.target.value)}
              className="w-full mb-2 px-2 py-1 border rounded text-sm"
            />

            <div className="space-y-1 max-h-40 overflow-auto">
              {loading ? (
                <p className="text-sm text-gray-500">Loading features...</p>
              ) : filteredFeatures.length === 0 ? (
                <p className="text-sm text-gray-500">No features found.</p>
              ) : (
                filteredFeatures.map((featureLabel, index) => (
                  <label key={`${featureLabel}-${index}`} className="flex items-center space-x-2 text-sm">
                    <input
                      type="checkbox"
                      value={featureLabel}
                      checked={selectedFilters.features.includes(featureLabel)}
                      onChange={() => handleCheckboxChange('features', featureLabel)}
                    />
                    <span>{featureLabel}</span>
                  </label>
                ))
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default Filter;