"use client";

import React, { useState } from 'react';
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { CheckCircle } from "lucide-react";
import Image from "next/image";
import CreditCardApplyModal from '@/components/customui/CreditCardApplyModal';
import Link from "next/link";
import { getPublicBaseUrl } from "@/lib/publicBaseUrl";

interface CardDetailsRow {
  benefitid: number;
  benefitdetails: string;
  benfitcatgory: string;
}

interface CardDetailsProps {
  id: number;
  title: string;
  logo: string;
  image: string;
  details: { label: string; value: string }[];
  benefits: string[];
  creditcarddetails?: CardDetailsRow[];
}

type Feature = { id: number; details: string };
type Offer = { id: number; details: string };

interface Card {
  id: number;
  name: string;
  minSalary: string;
  annualFee: string;
  image: string;
  ccurl: string; // Assuming this is the URL for card details
  points: string[];
  features: Feature[];
  offers: Offer[];
}

const CardDetails: React.FC<CardDetailsProps> = ({
  id,
  title,
  image,
  details,
  benefits,
  creditcarddetails,
}) => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedCard, setSelectedCard] = useState<Card | null>(null);

  const openApplyModal = async (cardId: number) => {
    try {
      const baseUrl = getPublicBaseUrl();
      const url = `${baseUrl}/api/applycard/${encodeURIComponent(String(cardId))}`;
      const res = await fetch(url);
      console.log("[INFO] Fetching apply card details from:", url);

      if (!res.ok) {
        console.error("[ERROR] Failed to fetch card details. Status:", res.status);
        return;
      }

      const fullCard: Card = await res.json();
      if (
        !Array.isArray(fullCard.features) ||
        !Array.isArray(fullCard.offers) ||
        typeof fullCard.minSalary !== 'string'
      ) {
        console.error("[ERROR] Invalid card data structure received:", fullCard);
        return;
      }

      setSelectedCard(fullCard);
      setIsModalOpen(true);
    } catch (err) {
      console.error("[ERROR] openApplyModal failed:", err);
      alert(`Error loading card details: ${err instanceof Error ? err.message : 'Unknown error'}`);
    }
  };

  const safeImage = image || "/default.webp";
  const safeDetails = Array.isArray(details) ? details : [];
  const safeBenefits = Array.isArray(benefits) ? benefits : [];
  const safeCreditCardDetails = Array.isArray(creditcarddetails) ? creditcarddetails : [];

  const groupedDetails = safeCreditCardDetails.reduce((acc, item) => {
    const category = item.benfitcatgory;
    if (!acc[category]) acc[category] = [];
    acc[category].push(item.benefitdetails);
    return acc;
  }, {} as Record<string, string[]>);

  console.log("[DEBUG] Rendering card with title:", title);
  console.log("[DEBUG] Grouped details:", groupedDetails);

  return (
    
    <div className="max-w-4xl mx-auto p-6">
      {/* Breadcrumb Navigation */}
     <nav className="text-sm text-gray-600 mb-4" aria-label="Breadcrumb">
  <ol className="list-none p-0 inline-flex space-x-2">
    <li className="inline-flex items-center">
      <Link href="/" className="hover:underline text-blue-600">Home</Link>
      <span className="mx-2">/</span>
    </li>
    <li className="inline-flex items-center">
      <Link href="/creditcards" className="hover:underline text-blue-600">Credit Cards</Link>
      <span className="mx-2">/</span>
    </li>
    <li className="text-gray-500" aria-current="page">{title}</li>
  </ol>
</nav>
      <h2 className="text-2xl font-bold">{title}</h2>

      <Card className="mt-4 border border-blue-300">
        <CardContent className="p-6 flex flex-col md:flex-row items-center md:items-start gap-6">
          {safeImage && (
            <div className="flex-shrink-0">
              <Image
                src={safeImage}
                alt={title}
                width={0}
                height={0}
                sizes="100vw"
                className="w-28 h-16 sm:w-72 sm:h-40 object-contain rounded-md"
                unoptimized={false}
              />
            </div>
          )}

          <div className="flex-1 grid grid-cols-2 gap-4 text-sm">
            {safeDetails.map((item, index) => (
              <div key={index} className="flex justify-between">
                <span className="font-medium text-xs text-gray-700">{item.label}</span>
                <span className="text-xs">{item.value}</span>
              </div>
            ))}
          </div>

          <div>
            <Button onClick={() => openApplyModal(id)} className="bg-blue-600 text-white px-6 py-2">
              Apply Now
            </Button>
          </div>
        </CardContent>
      </Card>

      {/* Main Benefits */}
      {safeBenefits.length > 0 && (
        <div className="mt-6 border border-blue-300 p-6 rounded-lg">
          <h3 className="text-lg font-semibold text-blue-700">Main Benefits</h3>
          <ul className="mt-3 space-y-2 text-sm text-gray-700">
            {safeBenefits.map((benefit, index) => (
              <li key={index} className="flex items-start gap-2">
                <CheckCircle className="w-4 h-4 text-green-500 mt-1" />
                <span>{benefit}</span>
              </li>
            ))}
          </ul>
        </div>
      )}

      {/* Grouped Benefit Categories */}
      {Object.entries(groupedDetails).map(([category, items]) => (
        <div key={category} className="mt-6 border border-blue-300 p-6 rounded-lg">
          <h3 className="text-lg font-semibold text-blue-700">{category}</h3>
          <ul className="mt-3 space-y-2 text-sm text-gray-700">
            {items.map((detail, index) => (
              <li key={index} className="flex items-start gap-2">
                <CheckCircle className="w-4 h-4 text-green-500 mt-1" />
                <span>{detail}</span>
              </li>
            ))}
          </ul>
        </div>
      ))}

      {/* Modal */}
      {selectedCard && isModalOpen && (
        <CreditCardApplyModal
          open={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          card={{
            id: selectedCard.id,
            name: selectedCard.name,
            bankname: selectedCard.name,
            minSalary: parseInt(selectedCard.minSalary || "0"),
            annualFee: selectedCard.annualFee,
            image: selectedCard.image,
            features: selectedCard.features,
            offers: selectedCard.offers,
          }}
        />
      )}
    </div>
  );
};

export default CardDetails;