"use client";
import React, { useState } from 'react';
import Image from "next/image";
import CreditCardApplyModal from '@/components/customui/CreditCardApplyModal';
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;
  features: Feature[];
  offers: Offer[];
}
 
const Card: React.FC<{ card: CreditCard }> = ({ card }) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
    const [selectedCard, setSelectedCard] = useState<CreditCard | null>(null);
  
   const openApplyModal = async (cardId: number) => {
    try {
      const res = await fetch(`/api/applycard/${cardId}`);
      if (!res.ok) throw new Error('Failed to fetch card details');
      const fullCard = await res.json();
      setSelectedCard(fullCard);
      setIsModalOpen(true);
    } catch (err) {
      alert(`Error loading card details: ${err}`);
    }
  };
  return (
    <div className="border rounded-lg shadow-sm bg-white h-25 overflow-hidden w-full text-sm">
      <div className="flex p-2 gap-4 items-start relative">
        {/* Left Column: Image */}
        <div className="flex-shrink-0">
          <Image
            src={card.image && card.image.trim() !== "" ? card.image : "/default.webp"}
            alt={card.name || "Card Image"}
            width={150}
            height={150}
            className="object-contain rounded-md"
            priority
          />
        </div>

      {/* Right Column: Details */}
<div className="flex-1">
  <div className="flex flex-wrap w-full gap-x-6 gap-y-2 items-start">
    {/* Bank Name & Card Name - full width on mobile, flexible on larger screens */}
    <div className="flex flex-col w-full md:flex-[2]">
      <h3 className="text-sm font-medium text-gray-800 mb-0">{card.bankname}</h3>
      <p className="text-xs text-gray-600 mb-0">{card.name}</p>
    </div>

    {/* Minimum Salary */}
    <div className="flex flex-col w-1/2 md:flex-1">
      <span className="text-sm font-medium text-gray-800">Minimum Salary</span>
      <span className="text-xs text-gray-600 mb-0">(AED): {card.minSalary}</span>
    </div>

    {/* Annual Fee */}
    <div className="flex flex-col w-1/2 md:flex-1">
      <span className="text-sm font-medium text-gray-800">Annual Fee</span>
      <span className="text-xs text-gray-600 mb-0">{card.annualFee}</span>
    </div>
  </div>

  {/* Horizontal line */}
  <div className="block w-full h-px bg-gray-300 mt-2 mb-1" />
</div>



      </div>

      {/* Offers + Buttons Row */}
      {card.offers && card.offers.length > 0 && (
        <div className="flex flex-col md:flex-row justify-between items-start gap-1 p-8 pt-0">
          {/* Offers Section */}
          <div className="flex-1">
            <div className="flex items-center gap-1 mb-1">
              <span className="text-green-600 font-semibold text-sm">🎁 Offers</span>
            </div>
            <ul className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-1 list-disc list-inside text-gray-700 text-xs">
              {card.offers.map((offer) => (
                <li key={offer.id}>{offer.details}</li>
              ))}
            </ul>
          </div>

          {/* Buttons Section */}
          <div className="flex flex-col gap-2 w-full md:w-auto mt-0">
            <button
              //href={`applycard/${card.id}`}
               onClick={() => openApplyModal(card.id)}
            className="w-auto md:w-[140px] border border-blue-500 text-center text-blue-500 px-3 py-1 text-sm font-semibold rounded-md hover:bg-blue-500 hover:text-white"

            >
              Apply
            </button>
            <a
              href={`card/${card.id}`}
              className="w-auto md:w-[140px] border border-red-500 text-center  text-red-500 px-3 py-1 text-sm  font-semibold  rounded-md hover:bg-red-500 hover:text-white"
            >
              Know More
            </a>
          </div>
        </div>
      )}

      {/* Features Section */}
      {card.features && card.features.length > 0 && (
        <div className="mt-0 bg-yellow-100 p-3 rounded-md flex flex-wrap gap-1 w-full text-xs">
          <span className="font-semibold text-gray-800">✨ Features:</span>
          {card.features.map((feature) => (
            <div key={feature.id} className="flex items-center gap-1 text-gray-700">
              <span className="text-green-600">✔</span>
              {feature.details}
            </div>
          ))}
        </div>
      )}
       {/* Reusable Modal */}
      {selectedCard && (
        <CreditCardApplyModal
          open={isModalOpen}
          onClose={() => setIsModalOpen(false)}
          card={{
            id: selectedCard.id,
            name: selectedCard.name,
            bankname: selectedCard.name, // fallback or update if available
            minSalary: selectedCard.minSalary,
            annualFee: selectedCard.annualFee,
            image: selectedCard.image,
            features: selectedCard.features,
            offers: selectedCard.offers,
          }}
          //returnUrl="/cards"
        />
      )}
    </div>
    
  );
};

export default Card;