"use client";

import { useEffect, useState } from "react";
import Link from "next/link";
import api from "@/lib/api";
import { AnimatePresence, motion } from "framer-motion";

interface Banner {
  id: number;
  title: string;
  image: string;
  link: string;
}

export default function CampaignSlider() {
  const [banners, setBanners] = useState<Banner[]>([]);
  const [visible, setVisible] = useState<number[]>([0, 1, 2]);

    const [changingCard, setChangingCard] = useState(0);

    const [nextBanner, setNextBanner] = useState(3);

  useEffect(() => {
    fetchBanners();
  }, []);

  const fetchBanners = async () => {
    try {
      const res = await api.get("/banners");

      const campaignBanners =
        res.data.data?.filter(
          (item: any) => item.position === "campaign_slider"
        ) || [];

      setBanners(campaignBanners);
    } catch (error) {
      console.log(error);
    }
  };

    useEffect(() => {
    if (banners.length <= 3) return;

    const interval = setInterval(() => {

        setVisible((prev) => {
        const updated = [...prev];

        updated[changingCard] = nextBanner;

        return updated;
        });

        setNextBanner((prev) => {
        return (prev + 1) % banners.length;
        });

        setChangingCard((prev) => {
        return (prev + 1) % 3;
        });

    }, 4000);

    return () => clearInterval(interval);

    }, [banners, changingCard, nextBanner]);

  if (!banners.length) return null;

  return (
    <section className="py-12 bg-[#fafafa] overflow-hidden">
      <div className="max-w-7xl mx-auto px-4">

        <div
          className="
            flex
            md:grid
            md:grid-cols-3
            gap-5
            overflow-x-auto
            md:overflow-visible
            snap-x
            scrollbar-hide
          "
        >
          {visible.map((bannerIndex, cardIndex) => {
            const banner = banners[bannerIndex];

            return (
              <div
                key={cardIndex}
                className="
                  min-w-[85%]
                  sm:min-w-[60%]
                  md:min-w-0
                  snap-center
                "
              >
                <AnimatePresence mode="wait">
                  <motion.div
                    key={banner.id}
                    initial={{ opacity: 0 }}
                    animate={{ opacity: 1 }}
                    exit={{ opacity: 0 }}
                    transition={{
                       duration: 3,
                        ease: "easeInOut",
                    }}
                  >
                    <Link
                      href={banner.link || "#"}
                      className="block group"
                    >
                      <div
                        className="
                          overflow-hidden
                          rounded-3xl
                          bg-white
                          shadow-md
                          hover:shadow-2xl
                          transition-all
                          duration-500
                        "
                      >
                        <img
                          src={banner.image}
                          alt={banner.title}
                          className="
                            w-full
                            h-[250px]
                            md:h-[360px]
                            object-cover
                            group-hover:scale-105
                            transition-transform
                            duration-700
                          "
                        />
                      </div>
                    </Link>
                  </motion.div>
                </AnimatePresence>
              </div>
            );
          })}
        </div>

      </div>
    </section>
  );
}