"use client";

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

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[];
}

export default function CreditCardsClient() {
  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 [selectedFilters, setSelectedFilters] = useState({
    banks: [] as string[],
    features: [] as string[],
    salary: "0",
  });

  useEffect(() => {
    const query = new URLSearchParams();
    if (bank) query.append("bank", bank);
    if (type) query.append("type", type);
    if (categoryId) query.append("category", categoryId);

    const fetchCards = async () => {
      try {
        const res = await fetch(`/api/creditcards?${query.toString()}`);
        const data: CreditCard[] = await res.json();
        setCards(data);
        setFilteredCards(data);
      } catch (err) {
        console.error("API Fetch Error:", err);
      }
    };

    fetchCards();
  }, [bank, type, categoryId]);

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

    const filtered = cards.filter((card) => {
      const matchesBank = banks.length === 0 || banks.includes(card.bankname);
      const matchesFeatures =
        features.length === 0 ||
        features.some((feature) =>
          card.features?.some((f) =>
            f.details.toLowerCase().includes(feature.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">
      <Filter
        selectedFilters={selectedFilters}
        setSelectedFilters={setSelectedFilters}
      />
      <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>
  );
}