'use client';

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

// Hook to detect screen size
const useIsMobile = () => {
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const check = () => setIsMobile(window.innerWidth < 768);
    check();
    window.addEventListener('resize', check);
    return () => window.removeEventListener('resize', check);
  }, []);

  return isMobile;
};

interface Card {
  id: number;
  name: string;
  minSalary: string;
  annualFee: string;
  image: string;
  points: string[];
}

interface CardGroup {
  title: string;
  cards: Card[];
}

const CardOfferCarousel: React.FC = () => {
  const [cardGroups, setCardGroups] = useState<CardGroup[]>([]);
  const [activeGroupIndex, setActiveGroupIndex] = useState(0);
  const [activeSlideIndex, setActiveSlideIndex] = useState(0);
  const [cardsPerSlide, setCardsPerSlide] = useState(5);
  const isMobile = useIsMobile();

  // const updateCardsPerSlide = () => {
  //   const width = window.innerWidth;
  //   if (width < 640) setCardsPerSlide(2);
  //   else if (width < 1024) setCardsPerSlide(3);
  //   else if (width < 1280) setCardsPerSlide(4);
  //   else setCardsPerSlide(5);
  // };
 const updateCardsPerSlide = () => {
    const width = window.innerWidth;
    if (width < 640) {
      setCardsPerSlide(2); // Always 2 cards per slide on mobile
    } else if (width < 1024) {
      setCardsPerSlide(3);
    } else if (width < 1280) {
      setCardsPerSlide(4);
    } else {
      setCardsPerSlide(5);
    }
  };
  useEffect(() => {
    updateCardsPerSlide();
    window.addEventListener('resize', updateCardsPerSlide);
    return () => window.removeEventListener('resize', updateCardsPerSlide);
  }, []);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch('/api/creditcards/cards');
        const data = await res.json();
        setCardGroups(data);
      } catch (err) {
        console.error('Failed to fetch card data', err);
      }
    };

    fetchData();
  }, []);
  //const totalSlides = 1;
  const totalSlides = () =>1;
  useEffect(() => {
    const groupInterval = setInterval(() => {
      setActiveGroupIndex((prev) => (prev + 1) % cardGroups.length);
      setActiveSlideIndex(0);
    }, 15000);
    return () => clearInterval(groupInterval);
  }, [cardGroups.length]);

  useEffect(() => {
    const slideInterval = setInterval(() => {
      setActiveSlideIndex((prev) => (prev + 1) % totalSlides());
    }, 6000);
    return () => clearInterval(slideInterval);
  }, [cardsPerSlide, cardGroups, activeGroupIndex]);

  const currentGroup = cardGroups[activeGroupIndex] || { title: '', cards: [] };
  // const totalSlides = () =>
  //   Math.ceil(currentGroup.cards.length / cardsPerSlide) || 1;

  return (
    <section className="py-10 bg-gray-100 w-full">
      <div className="text-center mb-6">
        <h2 className="text-2xl font-bold bg-gradient-to-r from-blue-500 to-purple-500 text-transparent bg-clip-text">
          {currentGroup.title}
        </h2>
      </div>

      <div className="relative overflow-hidden w-full">
        <div
          className="flex transition-transform duration-700 ease-in-out"
          style={{
            transform: `translateX(-${activeSlideIndex * (100 / totalSlides())}%)`,
            width: `${totalSlides() * 100}%`,
          }}
        >
          {Array.from({ length: totalSlides() }).map((_, slideIdx) => {
            const start = slideIdx * cardsPerSlide;
            const cardsInSlide = currentGroup.cards.slice(
              start,
              start + cardsPerSlide
            );

            return (
              <div
                key={slideIdx}
                className="flex flex-shrink-0 w-full px-4 gap-4 justify-center flex-wrap"
              >
                {cardsInSlide.map((card) => (
                  // <div
                  //   key={card.id}
                  //   className={`bg-white shadow-md rounded-lg p-4 transition-all ${
                  //     isMobile ? 'w-full' : 'w-[calc(100%/5-1rem)]'
                  //   }`}
                  // >
                  //   <div
                  //     className={`flex ${
                  //       isMobile
                  //         ? 'flex-row items-start gap-4'
                  //         : 'flex-col items-center'
                  //     }`}
                  //   >
                  //     <Image
                  //       src={card.image || '/default.webp'}
                  //       width={isMobile ? 80 : 300}
                  //       height={isMobile ? 80 : 180}
                  //       alt={card.name}
                  //       className={`rounded-lg object-contain ${
                  //         isMobile ? 'w-20 h-20' : 'w-full h-32'
                  //       }`}
                  //     />
                  //     <div className={isMobile ? '' : 'text-center'}>
                  //       <h5 className="text-md font-semibold mt-2">
                  //         {card.name}
                  //       </h5>
                  //       <ul className="text-sm text-gray-700 mt-2 pl-4 list-disc text-left">
                  //         {card.points.map((point, i) => (
                  //           <li key={i}>{point}</li>
                  //         ))}
                  //       </ul>
                  //     </div>
                  //   </div>

                  //   <div className="flex justify-between mt-4">
                  //     <a
                  //       href={`card/${card.id}`}
                  //       className="border border-blue-500 text-blue-500 px-3 py-1 text-sm rounded-md hover:bg-blue-500 hover:text-white"
                  //     >
                  //       Know More
                  //     </a>
                  //     <a
                  //       href="#"
                  //       className="border border-red-500 text-red-500 px-3 py-1 text-sm rounded-md hover:bg-red-500 hover:text-white"
                  //     >
                  //       Apply Now
                  //     </a>
                  //   </div>
                  // </div>
                  <div
  key={card.id}
  className={`bg-white shadow-md rounded-lg p-4 transition-all flex flex-col justify-between ${
    isMobile ? 'w-full h-auto' : 'w-[calc(100%/5-1rem)] h-[420px]'
  }`}
>
  <div className={`flex ${isMobile ? 'flex-row items-start gap-4' : 'flex-col items-center'}`}>
    <Image
      src={card.image || '/default.webp'}
      width={isMobile ? 80 : 300}
      height={isMobile ? 80 : 180}
      alt={card.name}
      className={`rounded-lg object-contain ${isMobile ? 'w-20 h-20' : 'w-full h-32'}`}
    />
    <div className={isMobile ? '' : 'text-center'}>
      <h5 className="text-md font-semibold mt-2">{card.name}</h5>
      {/* <ul className="text-sm text-gray-700 mt-2 pl-4 list-disc text-left">
        {card.points.map((point, i) => (
          <li key={i}>{point}</li>
        ))}
      </ul> */
      <ul className="text-sm text-gray-700 mt-2 pl-4 list-disc text-left space-y-1">
  {card.points.slice(0, 4).map((point, i) => (
    <li key={i} title={point}>
      {point.length > 80 ? point.slice(0, 80) + '...' : point}
    </li>
  ))}
</ul>}
    </div>
  </div>

  {/* Button section pushed to the bottom */}
  <div className="flex justify-between mt-4 pt-4 border-t border-gray-200">
    <a
      href={`card/${card.id}`}
      className="border border-blue-500 text-blue-500 px-3 py-1 text-sm rounded-md hover:bg-blue-500 hover:text-white"
    >
      Know More
    </a>
     <a
      href={`applycard/${card.id}`}
      className="border border-red-500 text-red-500 px-3 py-1 text-sm rounded-md hover:bg-red-500 hover:text-white"
    >
      Apply Now
    </a>
  </div>
</div>

                ))}
              </div>
            );
          })}
        </div>
      </div>

      <div className="flex justify-center mt-6 space-x-2">
        {cardGroups.map((_, i) => (
          <button
            key={i}
            onClick={() => {
              setActiveGroupIndex(i);
              setActiveSlideIndex(0);
            }}
            className={`w-4 h-4 rounded-full ${
              i === activeGroupIndex ? 'bg-blue-500' : 'bg-gray-300'
            }`}
          ></button>
        ))}
      </div>
    </section>
  );
};

export default CardOfferCarousel;