'use client';

import { useEffect, useState } from 'react';

type SelectedFilters = {
  banks: string[];
  accounttypes: string[];
  salary: string;
};

type Bank = {
  bankcode: string;
  bankname: string;
};

type AccountType = {
  accounttypecode: string;
  accounttypedesc: string;
};

type FilterApiResponse = {
  success: boolean;
  banks: Bank[];
  accounttypes: AccountType[];
};

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

const BankAccountFilter: React.FC<FilterProps> = ({ selectedFilters, setSelectedFilters }) => {
  const [banksList, setBanksList] = useState<Bank[]>([]);
  const [accountTypes, setAccountTypes] = useState<AccountType[]>([]);
  const [loading, setLoading] = useState(true);
  const [bankSearchTerm, setBankSearchTerm] = useState('');
  const [accountTypeSearchTerm, setAccountTypeSearchTerm] = useState('');
  const [openSections, setOpenSections] = useState({ bank: true, accounttype: true, salary: true });

  useEffect(() => {
    const fetchFilters = async () => {
      try {
        const res = await fetch('/api/bankaccounts/filters');
        const data: FilterApiResponse = await res.json();
        setBanksList(data.banks || []);
        setAccountTypes(data.accounttypes || []);
      } catch (err) {
        console.error('Bank Account 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: keyof typeof openSections) => {
    setOpenSections((prev) => ({ ...prev, [section]: !prev[section] }));
  };

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

  const filteredBanks = banksList.filter((bank) =>
    bank.bankname.toLowerCase().includes(bankSearchTerm.toLowerCase())
  );

  const filteredAccountTypes = accountTypes.filter((at) => {
    const search = accountTypeSearchTerm.toLowerCase();
    return at.accounttypecode.toLowerCase().includes(search) || at.accounttypedesc.toLowerCase().includes(search);
  });

  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>

      {/* Minimum Balance Filter */}
      <div className="mb-4">
        <button
          onClick={() => toggleSection('salary')}
          className="font-semibold mb-2 flex justify-between w-full text-left"
        >
          Minimum Income (AED)
          <span>{openSections.salary ? '▲' : '▼'}</span>
        </button>

        {openSections.salary && (
          <div>
            <label className="block text-sm font-medium mb-1">
              From: {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>
        )}
      </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>

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

        {openSections.accounttype && (
          <>
            <input
              type="text"
              placeholder="Search by Account Type..."
              value={accountTypeSearchTerm}
              onChange={(e) => setAccountTypeSearchTerm(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 account types...</p>
              ) : filteredAccountTypes.length === 0 ? (
                <p className="text-sm text-gray-500">No account types found.</p>
              ) : (
                filteredAccountTypes.map((at) => (
                  <label key={at.accounttypecode} className="flex items-center space-x-2 text-sm">
                    <input
                      type="checkbox"
                      value={at.accounttypedesc}
                      checked={selectedFilters.accounttypes.includes(at.accounttypedesc)}
                      onChange={() => handleCheckboxChange('accounttypes', at.accounttypedesc)}
                    />
                    <span>{at.accounttypedesc}</span>
                  </label>
                ))
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default BankAccountFilter;