"use client";

import { useEffect, useState } from "react";
import BankAccountCard from "@/components/customui/BankAccountCard";
import BankAccountFilter from "@/components/customui/bankaccountfilter";

type BankAccount = {
  id: number;
  bankLogo: string;
  bankName: string;
  accountName: string;
  minBalance?: number | null;
  minIncome?: number | null;
  accountType?: string;
  features: string[];
  offers?: string[];
  accountUrl?: string;
};

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

export default function BankAccountsPage() {
  const [filteredAccounts, setFilteredAccounts] = useState<BankAccount[]>([]);
  const [selectedFilters, setSelectedFilters] = useState<SelectedFilters>({
    banks: [],
    accounttypes: [],
    salary: "0",
  });

  useEffect(() => {
    // Fetch all bank accounts from API
    const fetchAccounts = async () => {
      try {
        const params = new URLSearchParams();
        if (selectedFilters.banks.length > 0)
          params.append("banks", selectedFilters.banks.join(","));
        if (selectedFilters.accounttypes.length > 0)
          params.append("accounttypes", selectedFilters.accounttypes.join(","));
        if (selectedFilters.salary && selectedFilters.salary !== "0")
          params.append("salary", selectedFilters.salary);
        const res = await fetch(`/api/bankaccounts?${params.toString()}`);
        const data: BankAccount[] = await res.json();
        setFilteredAccounts(data);
      } catch {
        setFilteredAccounts([]);
      }
    };
    fetchAccounts();
  }, [selectedFilters]);

  return (
    <div className="p-6">
      <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">
          <BankAccountFilter
            selectedFilters={selectedFilters}
            setSelectedFilters={setSelectedFilters}
          />
        </div>
        <div className="w-full flex-1 space-y-4">
          {filteredAccounts.length === 0 ? (
            <p className="text-gray-600">
              No bank accounts match the selected filters.
            </p>
          ) : (
            filteredAccounts.map((account) => (
              <BankAccountCard
                key={account.id}
                id={account.id}
                bankLogo={account.bankLogo}
                bankName={account.bankName}
                accountName={account.accountName}
                minBalance={account.minBalance}
                minIncome={account.minIncome}
                accountType={account.accountType}
                features={account.features}
                offers={account.offers}
                accountUrl={account.accountUrl}
              />
            ))
          )}
        </div>
      </div>
    </div>
  );
}