"use client";

import { useKeenSlider } from "keen-slider/react";
import "keen-slider/keen-slider.min.css";
import AnimatedSection from "@/components/AnimatedSection";
import { useEffect, useState } from "react";

interface Item {
  emoji: string;
  title: string;
  desc: string;
  age?: string;
  bg: string;
}

interface Props {
  data: Item[];
  showAge?: boolean;
}

/* AUTOPLAY PLUGIN */
function AutoplayPlugin(interval = 3000) {
  return (slider: any) => {
    let timer: any;
    const clear = () => clearTimeout(timer);
    const next = () => slider.next();

    const start = () => {
      clear();
      timer = setTimeout(next, interval);
    };

    slider.on("created", start);
    slider.on("dragStarted", clear);
    slider.on("animationEnded", start);
    slider.on("updated", start);
  };
}

export default function InfoGridOrSlider({ data, showAge = false }: Props) {
  const [currentSlide, setCurrentSlide] = useState(0);

  const [sliderRef, instanceRef] = useKeenSlider<HTMLDivElement>(
    {
      loop: true,
      slideChanged(slider) {
        setCurrentSlide(slider.track.details.rel);
      },
      slides: {
        perView: 4,
        spacing: 16,
      },
      breakpoints: {
        "(max-width: 1024px)": {
          slides: { perView: 2, spacing: 12 },
        },
        "(max-width: 640px)": {
          slides: { perView: 1, spacing: 10 },
        },
      },
    },
    [AutoplayPlugin(3000)] // ⬅ HERE autoplay plugin attached
  );

  /* If more than 4 items → slider mode */
  if (data.length > 4) {
    return (
      <div className="relative">
        <div ref={sliderRef} className="keen-slider">
          {data.map((item, idx) => (
            <AnimatedSection
              key={idx}
              className="keen-slider__slide"
              delay={idx * 60}
            >
              <div
                className="rounded-3xl shadow-md px-6 py-8 text-center h-full"
                style={{ backgroundColor: item.bg }}
              >
                <div className="text-3xl mb-3">{item.emoji}</div>
                <h3 className="text-lg md:text-xl font-bold text-gray-900">
                  {item.title}
                </h3>
                {showAge && (
                  <p className="text-[#FAA631] font-semibold mb-1">
                    {item.age}
                  </p>
                )}
                <p className="text-gray-700 text-sm md:text-base">
                  {item.desc}
                </p>
              </div>
            </AnimatedSection>
          ))}
        </div>

        {/* DOT PAGINATION */}
        <div className="flex justify-center mt-4 gap-2">
          {[...Array(instanceRef.current?.track.details.slides.length || 0)].map(
            (_, idx) => (
              <button
                key={idx}
                className={`w-3 h-3 rounded-full transition ${
                  currentSlide === idx
                    ? "bg-[#FAA631] scale-110"
                    : "bg-gray-300"
                }`}
                onClick={() => instanceRef.current?.moveToIdx(idx)}
              />
            )
          )}
        </div>
      </div>
    );
  }

  /* GRID MODE */
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {data.map((item, idx) => (
        <AnimatedSection key={idx} delay={idx * 60}>
          <div
            className="rounded-3xl shadow-md px-6 py-8 text-center h-full"
            style={{ backgroundColor: item.bg }}
          >
            <div className="text-3xl mb-3">{item.emoji}</div>
            <h3 className="text-lg md:text-xl font-bold text-gray-900">
              {item.title}
            </h3>
            {showAge && (
              <p className="text-[#FAA631] font-semibold mb-1">{item.age}</p>
            )}
            <p className="text-gray-700 text-sm md:text-base">{item.desc}</p>
          </div>
        </AnimatedSection>
      ))}
    </div>
  );
}