"use client";

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import Filter from "@/components/customui/Filter";
import Card from "@/components/customui/Card";

// Interfaces
interface Feature {
  id: number;
  details: string;
}

interface Offer {
  id: number;
  details: string;
}

interface CreditCard {
  id: number;
  name: string;
  bankname: string;
  minSalary: number;
  annualFee: string;
  image: string;
  features: Feature[];
  offers: Offer[];
}

interface Bank {
  code: string;
  description: string;
}

// Helper: Parse salary from "30K" or "20000 AED"
const parseSalary = (salaryStr: string | undefined): number => {
  if (!salaryStr) return 0;
  const cleaned = salaryStr.replace(/\D/g, "");
  const number = parseInt(cleaned, 10);
  return isNaN(number)
    ? 0
    : salaryStr.toUpperCase().includes("K")
    ? number * 1000
    : number;
};

const Page = () => {
  const searchParams = useSearchParams();
  const bank = searchParams.get("bank");
  const type = searchParams.get("type");
  const categoryId = searchParams.get("category");

  const [cards, setCards] = useState<CreditCard[]>([]);
  const [filteredCards, setFilteredCards] = useState<CreditCard[]>([]);
  const [banksList, setBanksList] = useState<Bank[]>([]); // bank list here
  const [selectedFilters, setSelectedFilters] = useState<{
    banks: string[];
    features: string[];
    salary: string;
  }>({
    banks: [],
    features: [],
    salary: "0",
  });

  // Fetch bank list from filters API
  useEffect(() => {
    const fetchBanks = async () => {
      try {
        const res = await fetch("/api/cardlists/filters");
        const data = await res.json();
        setBanksList(data.banks || []);
      } catch (err) {
        console.error("Banks API Fetch Error:", err);
      }
    };

    fetchBanks();
  }, []);

  // Fetch and normalize cards from API based on URL query params
  useEffect(() => {
    const query = new URLSearchParams();
    if (bank) query.append("bank", bank);
    if (type) query.append("type", type);
    if (categoryId) query.append("category", categoryId);

    fetch(`/api/cardlists?${query.toString()}`)
      .then((res) => res.json())
      .then((data) => {
        const normalized: CreditCard[] = data.map((card: any) => ({
          ...card,
          minSalary: parseSalary(card.minSalary),
        }));
        setCards(normalized);
        setFilteredCards(normalized);
      })
      .catch((err) => console.error("API Fetch Error:", err));
  }, [bank, type, categoryId]);

  // Apply client-side filters (bank, features, salary)
  useEffect(() => {
    const { banks, features, salary } = selectedFilters;
    const parsedSalary = parseInt(salary) || 0;

    const noFilterActive =
      banks.length === 0 && features.length === 0 && parsedSalary === 0;

    if (noFilterActive) {
      setFilteredCards(cards);
      return;
    }

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

      const matchesFeatures =
        features.length === 0 ||
        features.some((filter) =>
          card.features?.some((f) =>
            f.details.toLowerCase().includes(filter.toLowerCase())
          )
        );

      const matchesSalary = card.minSalary >= parsedSalary;


      return matchesBank && matchesFeatures && matchesSalary;
    });

    setFilteredCards(filtered);
  }, [selectedFilters, cards]);

  return (
    <div className="flex flex-col lg:flex-row gap-6 p-6">
      {/* Filters */}
      <Filter
        selectedFilters={selectedFilters}
        setSelectedFilters={setSelectedFilters}
        banksList={banksList} // pass bank list here
      />

      {/* Cards */}
      <div className="flex-1">
        <h1 className="text-2xl font-bold mb-4">
          Most Popular Credit Cards in UAE
        </h1>

        {filteredCards.length === 0 ? (
          <p className="text-gray-600">No cards match the selected filters.</p>
        ) : (
          <div className="flex flex-col gap-4">
            {filteredCards.map((card, index) => (
              <Card key={card.id || `${card.name}-${index}`} card={card} />
            ))}
          </div>
        )}
      </div>
    </div>
  );
};

export default Page;