'use client';

import { useEffect, useState } from "react";
import { useSearchParams } from "next/navigation";
import CardDetails from "@/components/customui/CardDetails";
import { getPublicBaseUrl } from "@/lib/publicBaseUrl";

interface CardData {
  id: number;
  title: string;
  logo: string;
  image: string;
  details: { label: string; value: string }[];
  benefits: string[];
  creditcarddetails?: {
    benefitid: number;
    benefitdetails: string;
    benfitcatgory: string;
  }[];
}

export default function CardPageClient() {
  const searchParams = useSearchParams();
  const cardno = searchParams.get("cardno");

  const [cardData, setCardData] = useState<CardData | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!cardno) {
      setError("Card number (cardno) is missing in the URL.");
      setLoading(false);
      return;
    }

    const fetchCardData = async () => {
      try {
        const baseUrl = getPublicBaseUrl();
        const url = `${baseUrl}/api/carddetails/${encodeURIComponent(cardno)}`;
       console.log("[INFO] Fetching card data from:", url);

        const response = await fetch(url);
        if (!response.ok) {
          console.error("[ERROR] API response not OK:", response.status);
          setError("Something went wrong or invalid card number");
          return;
        }

        const data: CardData = await response.json();
        if (!data || !data.title || !Array.isArray(data.details)) {
          console.error("[ERROR] Invalid data format received:", data);
          setError("Invalid card data format");
          return;
        }

        setCardData(data);
      } catch (err) {
        console.error("[ERROR] Fetch failed:", err);
        setError("An error occurred while loading card details.");
      } finally {
        setLoading(false);
      }
    };

    fetchCardData();
  }, [cardno]);

  if (loading) return <p className="text-center mt-10">Loading...</p>;
  if (error) return <p className="text-center text-red-500">{error}</p>;
  if (!cardData) return null;

return <CardDetails {...cardData} />;
}