'use client';

import Image from "next/image";
import { useEffect, useState } from "react";

interface CardOption {
  id: number;
  name: string;
  bankname: string;
  minSalary: string;
  annualFee: string;
  image: string;
  ccurl: string;
}

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


type Props = {
  cards: CardOption[];
  selectedCardCcurl: string | null;
  onSelectCard: (ccurl: string) => void;
};

export default function CardCompareItem({ cards, selectedCardCcurl, onSelectCard }: Props) {
  const [cardData, setCardData] = useState<CardData | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!selectedCardCcurl) {
      setCardData(null);
      return;
    }
    setLoading(true);
    setError(null);
    console.log('Fetching card details for ccurl:', selectedCardCcurl);
    fetch(`/api/carddetails/${encodeURIComponent(selectedCardCcurl)}`)
      .then((res) => {
        if (!res.ok) {
          console.error('Card details fetch failed:', res.status, res.statusText);
          throw new Error("Card not found");
        }
        return res.json();
      })
      .then((data) => {
        console.log('Fetched card data:', data);
        setCardData(data);
      })
      .catch((err) => {
        console.error('Error loading card data:', err);
        setError(`Error loading card data ${err instanceof Error ? err.message : "Unknown error"}`);
        setCardData(null);
      })
      .finally(() => {
        setLoading(false);
      });
  }, [selectedCardCcurl]);

  return (
    <div className="p-0 w-full border-2 border-blue-200 rounded-2xl shadow-sm bg-white transition hover:shadow-md">
      <div className="flex flex-col items-center mb-6">
        <select
          onChange={(e) => onSelectCard(e.target.value)}
          value={selectedCardCcurl || ""}
          className="w-full p-3 border border-blue-200 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 mb-2 text-base font-medium bg-white"
        >
          <option value="">Select a Card</option>
          {(Array.isArray(cards) ? cards : []).map((card) => (
            <option key={card.id} value={card.ccurl}>
              {card.name} - {card.bankname}
            </option>
          ))}
        </select>
      </div>
      {loading && <p className="text-center text-blue-600 text-base font-medium animate-pulse">Loading...</p>}
      {error && error !== 'Error loading card data Card not found' && (
        <p className="text-center text-red-500 text-base font-medium">{error}</p>
      )}
      {cardData && (
        <div className="mt-2 flex flex-col items-center">
          <h2 className="text-xl font-bold text-blue-900 mb-2 text-center">{cardData.title}</h2>
          <Image
            src={cardData.image}
            alt={cardData.title}
            width={224}
            height={128}
            className="rounded-lg object-contain w-56 h-32 mb-4 border border-gray-200 bg-gray-50"
            style={{ boxShadow: '0 2px 12px 0 rgba(0,0,0,0.04)' }}
          />
          <div className="w-full text-sm text-gray-700 mb-2 flex flex-col items-center">
            <div className="flex flex-col items-center gap-1">
              <span className="font-semibold">Minimum Salary:</span>
              <span className="text-gray-900">{cardData.details.find(d => d.label.toLowerCase().includes('salary'))?.value || 'N/A'}</span>
            </div>
            <div className="flex flex-col items-center gap-1 mt-1">
              <span className="font-semibold">Annual Fee:</span>
              <span className="text-gray-900">{cardData.details.find(d => d.label.toLowerCase().includes('annual'))?.value || 'N/A'}</span>
            </div>
          </div>
          <button
            className="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2 rounded-lg shadow mt-3 mb-4 transition"
            style={{ minWidth: 120 }}
          >
            Apply Now
          </button>
          {/* Main Benefits */}
          {cardData.benefits && cardData.benefits.length > 0 && (
            <div className="mt-4 w-full">
              <h3 className="text-lg font-semibold text-blue-700 mb-2">Main Benefits</h3>
              <ul className="border border-blue-200 rounded-lg p-4 bg-blue-50 space-y-2 text-gray-800 text-sm">
                {cardData.benefits.map((benefit, idx) => (
                  <li key={idx} className="flex items-start gap-2">
                    <span className="inline-block mt-1 text-green-500">✔️</span>
                    <span>{benefit}</span>
                  </li>
                ))}
              </ul>
            </div>
          )}
          {/* Grouped Benefit Categories */}
          {cardData.creditcarddetails && cardData.creditcarddetails.length > 0 && (
            <div className="mt-6 w-full">
              {Object.entries(cardData.creditcarddetails.reduce((acc, item) => {
                const cat = item.benfitcatgory;
                if (!acc[cat]) acc[cat] = [];
                acc[cat].push(item.benefitdetails);
                return acc;
              }, {} as Record<string, string[]>)).map(([category, items]) => (
                <div key={category} className="mb-4">
                  <h4 className="text-base font-semibold text-blue-700 mb-1">{category}</h4>
                  <ul className="border border-blue-100 rounded-lg p-3 bg-blue-50 space-y-1 text-gray-700 text-sm">
                    {items.map((detail, idx) => (
                      <li key={idx} className="flex items-start gap-2">
                        <span className="inline-block mt-1 text-green-500">✔️</span>
                        <span>{detail}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}