"use client";

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
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;
  ccurl:string;
  features: Feature[];
  offers: Offer[];
}

// Helper: Capitalize first letter and replace dashes with spaces
const formatLabelFallback = (str: string) =>
  str.charAt(0).toUpperCase() + str.slice(1).replace(/-/g, " ");

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

  const [cards, setCards] = useState<CreditCard[]>([]);
  const [bankName, setBankName] = useState<string | null>(null);
  const [typeName, setTypeName] = useState<string | null>(null);
  const [categoryName, setCategoryName] = useState<string | null>(null);

  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: CreditCard[]) => {
        setCards(data);
        //console.log("Fetched cards: 2222", data);
      })
      .catch((err) => console.error("API Fetch Error:", err));
  }, [bank, type, categoryId]);

  useEffect(() => {
    if (bank) {
      fetch(`/api/banks?code=${bank}`)
        .then((res) => res.json())
        .then((data: { description?: string }) =>
          setBankName(data.description || formatLabelFallback(bank))
        )
        .catch(() => setBankName(formatLabelFallback(bank)));
    } else {
      setBankName(null);
    }
  }, [bank]);

  useEffect(() => {
    if (type) {
      fetch(`/api/types?code=${type}`)
        .then((res) => res.json())
        .then((data: { description?: string }) =>
          setTypeName(data.description || formatLabelFallback(type))
        )
        .catch(() => setTypeName(formatLabelFallback(type)));
    } else {
      setTypeName(null);
    }
  }, [type]);

  useEffect(() => {
    if (categoryId) {
      fetch(`/api/categories?code=${categoryId}`)
        .then((res) => res.json())
        .then((data: { description?: string }) =>
          setCategoryName(data.description || formatLabelFallback(categoryId))
        )
        .catch(() => setCategoryName(formatLabelFallback(categoryId)));
    } else {
      setCategoryName(null);
    }
  }, [categoryId]);

  const getBreadcrumb = () => {
    const crumbs = ["Home", "Credit Card"];
    if (bankName) crumbs.push(bankName);
    if (typeName) crumbs.push(typeName);
    if (categoryName) crumbs.push(categoryName);
    return crumbs.join(" > ");
  };

  const getHeading = () => {
    if (categoryName) return `Top ${categoryName} Credit Cards in UAE`;
    if (typeName) return `Top ${typeName} Credit Cards in UAE`;
    if (bankName) return `Top Credit Cards from ${bankName} in UAE`;
    return "Most Popular Credit Cards in UAE";
  };

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

      {/* Styled Header Section (match card width) */}
      <div className="mx-auto max-w-4xl rounded-2xl bg-gradient-to-r from-blue-600 to-blue-400 text-white px-6 py-6 mb-8 shadow-md">
        <div className="uppercase text-xs font-semibold tracking-wider mb-1 opacity-80">CREDIT CARD TYPE</div>
        <h1 className="text-2xl sm:text-3xl font-bold mb-1">{getHeading()}</h1>
        <p className="text-white text-sm opacity-90">
          Find the best credit cards in the UAE. Compare features, offers, and apply online instantly.
        </p>
      </div>

      {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 CardListsClient;