'use client';

import { useEffect, useState } from 'react';

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

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

type LoanType = {
  loantypecode: string;
  loantypedesc: string;
};

type LoanFeatureRow = {
  creditcardsname: string;
  feature: string;
};

type FilterApiResponse = {
  success: boolean;
  featuresByCard: LoanFeatureRow[];
  banks: Bank[];
  loantypes?: LoanType[];
};

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

const LoanFilter: React.FC<FilterProps> = ({ selectedFilters, setSelectedFilters }) => {
  const MIN_SALARY = 0;
  const MAX_SALARY = 50000;
  const SALARY_STEP = 1000;
  const [banksList, setBanksList] = useState<Bank[]>([]);
  const [loanTypes, setLoanTypes] = useState<LoanType[]>([]);
  const [loading, setLoading] = useState(true);
  const [bankSearchTerm, setBankSearchTerm] = useState('');
  const [loanTypeSearchTerm, setLoanTypeSearchTerm] = useState('');
  const [openSections, setOpenSections] = useState({ bank: true, loantype: true, salary: true });

  useEffect(() => {
    const fetchFilters = async () => {
      try {
        const res = await fetch('/api/loan/filters');
        const data: FilterApiResponse = await res.json();
        setBanksList(data.banks || []);
        setLoanTypes(data.loantypes || []);
      } catch (err) {
        console.error('Loan 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: [], loantypes: [], salary: '0' });
  };

  const updateSalary = (value: string) => {
    const parsed = Number(value);
    if (Number.isNaN(parsed)) return;
    const clamped = Math.min(MAX_SALARY, Math.max(MIN_SALARY, parsed));
    setSelectedFilters({ ...selectedFilters, salary: String(clamped) });
  };

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

  const filteredLoanTypes = loanTypes.filter((lt) => {
    const search = loanTypeSearchTerm.toLowerCase();
    return lt.loantypecode.toLowerCase().includes(search) || lt.loantypedesc.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>

      {/* Salary 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="number"
              min={MIN_SALARY}
              max={MAX_SALARY}
              step={SALARY_STEP}
              value={selectedFilters.salary}
              onChange={(e) => updateSalary(e.target.value)}
              className="w-full mb-2 px-2 py-1 border rounded text-sm"
              placeholder="Enter amount"
            />
            <input
              type="range"
              min={MIN_SALARY}
              max={MAX_SALARY}
              step={SALARY_STEP}
              className="w-full"
              value={selectedFilters.salary}
              onChange={(e) => updateSalary(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>

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

        {openSections.loantype && (
          <>
            <input
              type="text"
              placeholder="Search by Loan Type..."
              value={loanTypeSearchTerm}
              onChange={(e) => setLoanTypeSearchTerm(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 loan types...</p>
              ) : filteredLoanTypes.length === 0 ? (
                <p className="text-sm text-gray-500">No loan types found.</p>
              ) : (
                filteredLoanTypes.map((lt) => (
                  <label key={lt.loantypecode} className="flex items-center space-x-2 text-sm">
                    <input
                      type="checkbox"
                      value={lt.loantypedesc}
                      checked={selectedFilters.loantypes.includes(lt.loantypedesc) || selectedFilters.loantypes.includes(lt.loantypecode)}
                      onChange={() => handleCheckboxChange('loantypes', lt.loantypedesc)}
                    />
                    <span>{lt.loantypedesc}</span>
                  </label>
                ))
              )}
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default LoanFilter;