'use client';

import React, { useState, useEffect } from 'react';
import Image from 'next/image';
import CreditCardApplyModal from '@/components/customui/CreditCardApplyModal';

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

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

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

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 [cardGroups, setCardGroups] = useState<CardGroup[]>([]);
  const [activeGroupIndex, setActiveGroupIndex] = useState(0);
  const [activeSlideIndex, setActiveSlideIndex] = useState(0);
  const [cardsPerSlide, setCardsPerSlide] = useState(5);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [selectedCard, setSelectedCard] = useState<Card | null>(null);

  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);
  };

  useEffect(() => {
    updateCardsPerSlide();
    window.addEventListener('resize', updateCardsPerSlide);
    return () => window.removeEventListener('resize', updateCardsPerSlide);
  }, []);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const res = await fetch('/api/creditcards/cards');
        if (!res.ok) throw new Error('Failed to load cards');
        const data = await res.json();
        setCardGroups(data);
        setLoading(false);
      } catch (err) {
        if (err instanceof Error) {
          setError(err.message);
        } else {
          setError('Something went wrong');
        }
        setLoading(false);
      }
    };
    fetchData();
  }, []);

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

  useEffect(() => {
    const slideInterval = setInterval(() => {
      const totalSlides = Math.ceil(
        cardGroups[activeGroupIndex]?.cards.length / cardsPerSlide
      );
      setActiveSlideIndex((prev) => (prev + 1) % totalSlides);
    }, 6000);
    return () => clearInterval(slideInterval);
  }, [cardsPerSlide, activeGroupIndex, cardGroups]);

  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}`);
    }
  };

  if (loading) return <div className="text-center py-8">Loading cards...</div>;
  if (error) return <div className="text-center text-red-500 py-8">{error}</div>;

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

  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 flex flex-col justify-between ${
                      isMobile ? 'w-full' : 'w-[calc(100%/5-1rem)]'
                    }`}
                    style={{ height: isMobile ? 'auto' : '420px' }}
                  >
                    <div className="flex flex-col items-center">
                      <Image
                        src={card.image || '/default.webp'}
                        width={300}
                        height={180}
                        alt={card.name}
                        className="rounded-lg object-contain w-full h-32"
                      />
                      <div className="text-center mt-2 w-full">
                        <h5 className="text-md font-semibold">{card.name}</h5>
                        <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>

                    <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>
                      <button
                        onClick={() => openApplyModal(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
                      </button>
                    </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>

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

export default CardOfferCarousel;