"use client";

import { Suspense, useEffect, useState } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import BankLoanCard from "@/components/customui/BankLoanCard";
import LoanFilter from "@/components/customui/loanfilter";
import LoanCalculator from "@/components/customui/LoanCalculator";

type LoanFeature = { id: number; details: string };
type LoanOffer = { id: number; details: string };

type Loan = {
  id: number;
  name: string;
  bankname: string;
  minIncome: number;
  annualFee: string | null;
  image: string;
  loanurl: string;
  flatInterestRate: number | null;
  reducingInterestRate: number | null;
  loantypecode?: string;
  loantypedesc?: string;
  features: LoanFeature[];
  offers: LoanOffer[];
};

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

function PersonalLoanPageContent() {
  const searchParams = useSearchParams();
  const bankParam = searchParams.get("bank");
  const loantypeParam = searchParams.get("loantype");
  const minIncomeParam = searchParams.get("minIncome");

  const [loans, setLoans] = useState<Loan[]>([]);
  const [filteredLoans, setFilteredLoans] = useState<Loan[]>([]);
  const [compareList, setCompareList] = useState<{ id: number; name: string }[]>([]);
  const router = useRouter();

  const [selectedFilters, setSelectedFilters] = useState<SelectedFilters>({
    banks: [],
    loantypes: [],
    salary: "0",
  });

  useEffect(() => {
    const query = new URLSearchParams();
    if (bankParam) query.append("bank", bankParam);
    if (loantypeParam) query.append("loantype", loantypeParam);
    if (minIncomeParam) query.append("minIncome", minIncomeParam);

    const fetchLoans = async () => {
      try {
        const res = await fetch(`/api/loan?${query.toString()}`);
        const data: Loan[] = await res.json();
        setLoans(data);
        setFilteredLoans(data);
      } catch (err) {
        console.error("Loan API Fetch Error:", err);
      }
    };

    fetchLoans();
  }, [bankParam, loantypeParam, minIncomeParam]);

  useEffect(() => {
    const { banks, loantypes, salary } = selectedFilters;
    const parsedSalary = parseInt(salary) || 0;

    const isAnyFilterActive =
      banks.length > 0 || loantypes.length > 0 || parsedSalary > 0;

    if (!isAnyFilterActive) {
      setFilteredLoans(loans);
      return;
    }

    const filtered = loans.filter((loan) => {
      const matchesBank =
        banks.length === 0 || banks.includes(loan.bankname);

      const matchesLoanType =
        loantypes.length === 0 ||
        (loan.loantypedesc && loantypes.includes(loan.loantypedesc)) ||
        (loan.loantypecode && loantypes.includes(loan.loantypecode));

      const matchesSalary = loan.minIncome >= parsedSalary;

      return matchesBank && matchesLoanType && matchesSalary;
    });

    setFilteredLoans(filtered);
  }, [selectedFilters, loans]);

  const handleCompareChange = (checked: boolean, loan: { id: number; name: string }) => {
    setCompareList((prev) => {
      if (checked) {
        const exists = prev.find((p) => p.id === loan.id);
        if (exists) return prev;
        if (prev.length >= 3) return prev; // limit to 3 selections
        return [...prev, loan];
      }
      return prev.filter((p) => p.id !== loan.id);
    });
  };

  const handleCompareNavigate = () => {
    if (compareList.length === 0) return;
    const ids = compareList.map((c) => c.id).join(",");
    router.push(`/loan/compare?ids=${ids}`);
  };

  return (
    <div className="p-6">
      <div className="mb-6 max-w-[1100px] mx-auto w-full">
        <LoanCalculator />
      </div>

      <div className="flex flex-col lg:flex-row justify-center items-start gap-6 max-w-[1100px] mx-auto">
        <div className="w-full lg:w-72">
          <LoanFilter
            selectedFilters={selectedFilters}
            setSelectedFilters={setSelectedFilters}
          />
        </div>

        <div className="w-full flex-1 space-y-4">
          {filteredLoans.length === 0 ? (
            <p className="text-gray-600">No loans match the selected filters.</p>
          ) : (
            filteredLoans.map((loan) => (
              <BankLoanCard
                id={loan.id}
                key={loan.id}
                bankLogo={loan.image || "/default.webp"}
                bankName={loan.bankname}
                planName={loan.name}
                minSalary={loan.minIncome}
                flatRate={loan.flatInterestRate !== null ? `${loan.flatInterestRate}%` : "N/A"}
                reducingRate={loan.reducingInterestRate !== null ? `${loan.reducingInterestRate}%` : "N/A"}
                loanUrl={loan.loanurl}
                features={loan.features.map((f) => f.details)}
                offers={loan.offers?.map((o) => o.details) ?? []}
                onCompareChange={handleCompareChange}
              />
            ))
          )}
        </div>
      </div>

      {compareList.length > 1 && (
        <div className="fixed bottom-4 left-1/2 transform -translate-x-1/2 bg-white shadow-lg border px-6 py-3 rounded-xl flex items-center space-x-4">
          <p className="text-sm text-gray-700">
            {compareList.length} cards selected (max 3)
          </p>
          <button
            className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700"
            onClick={handleCompareNavigate}
          >
            Compare Now
          </button>
        </div>
      )}
    </div>
  );
}

export default function PersonalLoanPage() {
  return (
    <Suspense fallback={<div className="p-6 text-center">Loading...</div>}>
      <PersonalLoanPageContent />
    </Suspense>
  );
}