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

interface SelectedFilters {
  banks: string[];
  features: string[];
  salary: string;
}

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<SelectedFilters>({
    banks: [],
    features: [],
    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); // Show all cards initially
      } catch (err) {
        console.error("API Fetch Error:", err);
      }
    };

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

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

    // Check if any filter is active (non-empty banks/features or salary > 0)
    const isAnyFilterActive =
      banks.length > 0 || features.length > 0 || parsedSalary > 0;

    if (!isAnyFilterActive) {
      // No filters selected — show all cards
      setFilteredCards(cards);
      return;
    }

    // Apply filters only if any filter is active
    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 justify-center items-start px-4 py-6 gap-6 max-w-[1200px] mx-auto">
  {/* Filter Sidebar */}
  <div className="w-full lg:w-72">
    <Filter selectedFilters={selectedFilters} setSelectedFilters={setSelectedFilters} />
  </div>

  {/* Cards Section */}
  <div className="w-full flex-1">
    {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>



  );
}