'use client';

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

const groupedCardData = [
  {
    title: 'Best Cash Back Card',
    cards: [
      { imgSrc: '/gems-world-card.webp', title: 'Detail 1', points: ['Cashback up to 5%', 'No Annual Fee', 'Airport Lounge Access'], id: 1 },
      { imgSrc: '/fab-cashback-credit-card.webp', title: 'Detail 2', points: ['1% Cashback on All Purchases', 'Low Interest Rate', 'Free Movie Tickets'], id: 2 },
      { imgSrc: '/fab-low-rate-credit-card.webp', title: 'Detail 3', points: ['0% Balance Transfer', 'No Foreign Transaction Fee', 'Bonus Points on Signup'], id: 3 },
      { imgSrc: '/du-titanium-credit-card-2.webp', title: 'Detail 4', points: ['Exclusive Travel Benefits', 'Hotel Discounts', 'Priority Customer Support'], id: 4 },
      { imgSrc: '/fab-low-rate-credit-card.webp', title: 'Detail 5', points: ['Flat Cashback', 'Online Deals', 'No Joining Fee'], id: 5 },
          ],
  },
  {
    title: 'Best Travel Deals',
    cards: [
      { imgSrc: '/du-titanium-credit-card-2.webp', title: 'Travel 1', points: ['Free Flights', 'Hotel Discounts'], id: 7 },
      { imgSrc: '/fab-low-rate-credit-card.webp', title: 'Travel 2', points: ['Travel Insurance', 'Miles on Spend'], id: 8 },
      { imgSrc: '/gems-world-card.webp', title: 'Travel 3', points: ['Visa Concierge', '5% Cashback'], id: 9 },
      { imgSrc: '/fab-cashback-credit-card.webp', title: 'Travel 4', points: ['Bonus Miles', 'No Foreign Fees'], id: 10 },
      { imgSrc: '/du-titanium-credit-card-2.webp', title: 'Travel 5', points: ['Lounge Membership'], id: 11 },
    ],
  },
];
// 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;
};

const CardOfferCarousel: React.FC = () => {
  const [activeGroupIndex, setActiveGroupIndex] = useState(0);
  const [activeSlideIndex, setActiveSlideIndex] = useState(0);
  const [cardsPerSlide, setCardsPerSlide] = useState(5);
  const currentGroup = groupedCardData[activeGroupIndex];
  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);
  }, []);

  const totalSlides = 1;

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

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

  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.imgSrc}
                        width={isMobile ? 80 : 300}
                        height={isMobile ? 80 : 180}
                        alt={card.title}
                        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.title}</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>
            );
          })}
        </div>
      </div>

      <div className="flex justify-center mt-6 space-x-2">
        {groupedCardData.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;