'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;
  ccurl: string; // Assuming this is the URL for card details
  features: Feature[];
  offers: Offer[];
}

interface SelectedFilters {
  banks: string[];
  features: string[]; // Now contains feature strings
  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
        //console.log("Fetched cards:333", 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 isAnyFilterActive =
      banks.length > 0 || features.length > 0 || parsedSalary > 0;

    if (!isAnyFilterActive) {
      setFilteredCards(cards);
      return;
    }

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

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

      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-[1000px] mx-auto">
      {/* Filter Sidebar */}
      {/* <div className="w-full lg:w-72">
        <Filter
          selectedFilters={selectedFilters}
          setSelectedFilters={setSelectedFilters}
        />
      </div> */}
<div className="w-full lg:w-90">
  <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>
  );
}