'use client';

import { useEffect, useState } from 'react';

interface SelectedFilters {
  banks: string[];
  features: string[]; // Now holds card names instead of feature strings
  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 [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();
  }, []);

  // Map from feature to list of card names having that feature
  const featureToCardNamesMap = features.reduce<Record<string, string[]>>((acc, item) => {
    if (!acc[item.feature]) {
      acc[item.feature] = [];
    }
    if (!acc[item.feature].includes(item.creditcardsname)) {
      acc[item.feature].push(item.creditcardsname);
    }
    return acc;
  }, {});

  const handleCheckboxChange = (type: keyof SelectedFilters, value: string) => {
    if (type === 'features') {
      // Toggle card names related to the feature
      setSelectedFilters((prevFilters) => {
        let currentSelectedCards = prevFilters.features; // Holds card names

        const cardNamesForFeature = featureToCardNamesMap[value] || [];

        // Check if all card names for this feature are already selected
        const isSelected = cardNamesForFeature.every((cn) => currentSelectedCards.includes(cn));

        let newSelectedCards: string[];
        if (isSelected) {
          // Remove these card names
          newSelectedCards = currentSelectedCards.filter((cn) => !cardNamesForFeature.includes(cn));
        } else {
          // Add these card names (avoid duplicates)
          newSelectedCards = Array.from(new Set([...currentSelectedCards, ...cardNamesForFeature]));
        }

        return {
          ...prevFilters,
          features: newSelectedCards,
        };
      });
    } else {
      // For other filters like banks
      setSelectedFilters((prevFilters) => {
        const currentArray = prevFilters[type] as string[];
        return {
          ...prevFilters,
          [type]: currentArray.includes(value)
            ? currentArray.filter((item) => item !== value)
            : [...currentArray, value],
        };
      });
    }
  };

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

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

  // Filter features by card name search (for the search box)
  const filteredFeaturesByCardName = features
    .filter((f) =>
      f.creditcardsname.toLowerCase().includes(searchTerm.toLowerCase())
    )
    .map((f) => f.feature);

  // Unique features for display
  const uniqueFilteredFeatures = Array.from(new Set(filteredFeaturesByCardName));

  // Checkbox checked state: checked if ALL card names of that feature are selected
  const isFeatureChecked = (featureLabel: string) => {
    const cardNames = featureToCardNamesMap[featureLabel] || [];
    return cardNames.length > 0 && cardNames.every((cn) => selectedFilters.features.includes(cn));
  };

  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 Range */}
      <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 Accordion */}
      <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 && (
          <div className="space-y-1 max-h-40 overflow-auto">
            {loading ? (
              <p className="text-sm text-gray-500">Loading banks...</p>
            ) : (
              banksList.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 Accordion */}
      <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 && (
          <>
            {/* Search Bar */}
            <input
              type="text"
              placeholder="Search by card name..."
              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>
              ) : uniqueFilteredFeatures.length === 0 ? (
                <p className="text-sm text-gray-500">No features found.</p>
              ) : (
                uniqueFilteredFeatures.map((featureLabel, index) => (
                  
                  <label
                   key={`${featureLabel}-${index}`}
                    className="flex items-center space-x-2 text-sm"
                  >
                    <input
                      type="checkbox"
                      value={featureLabel}
                      checked={isFeatureChecked(featureLabel)}
                      onChange={() => handleCheckboxChange('features', featureLabel)}
                    />
                    <span>{featureLabel}</span>
                    {/* <span>{`${featureLabel}-${index}`}</span> */}
                  </label>
                ))
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default Filter;