"use client";

import { useEffect, useState } from "react";
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[];
}

// 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 [cards, setCards] = useState<CreditCard[]>([]);
  const [filteredCards, setFilteredCards] = useState<CreditCard[]>([]);
  const [selectedFilters, setSelectedFilters] = useState<{ banks: string[]; features: string[]; salary: string }>({
    banks: [],
    features: [],
    salary: "50000",
  });

  useEffect(() => {
    fetch("/api/creditcards")
      .then((res) => res.json())
      .then((data: CreditCard[]) => {
        setCards(data);
        setFilteredCards(data);
      })
      .catch((err) => console.error("API Fetch Error:", err));
  }, []);

  useEffect(() => {
    const filtered = cards.filter((card: CreditCard) => {
      return (
        (selectedFilters.banks.length === 0 || selectedFilters.banks.includes(card.bankname)) &&
        (selectedFilters.features.length === 0 ||
          selectedFilters.features.some((feature) => card.features.includes(feature))) &&
        (card.minSalary <= parseInt(selectedFilters.salary))
      );
    });

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

  return (
    <div className="p-6">
      {/* Breadcrumbs */}
      {/* <div className="mb-2 text-sm text-gray-600">{getBreadcrumb()}</div>

      {/* Dynamic Heading */}
      {/* <h1 className="text-2xl font-bold mb-6">{getHeading()}</h1> */} 

      {/* Cards List */}
      {cards.length === 0 ? (
        <p className="text-gray-600">No cards available.</p>
      ) : (
        <div className="mx-auto max-w-4xl flex flex-col gap-4">
          {cards.map((card, index) => (
            <Card key={card.id || `${card.name}-${index}`} card={card} />
          ))}
        </div>
      )}
    </div>
  );
};

export default Page;