"use client";

import { useState, useEffect, useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { content } from "@/lib/content";
import { fadeUp } from "@/lib/animations";

const testimonials = content.ar.testimonials;

const avatarColors = ["bg-blue-500", "bg-emerald-500", "bg-purple-500"];

function getInitials(name: string): string {
  const parts = name.split(" ");
  return parts.length > 1
    ? parts[0][0] + parts[1][0]
    : parts[0].slice(0, 2);
}

const slideVariants = {
  enter: (direction: number) => ({
    x: direction > 0 ? 200 : -200,
    opacity: 0,
  }),
  center: {
    x: 0,
    opacity: 1,
    transition: { duration: 0.4, ease: [0.25, 0.46, 0.45, 0.94] as const },
  },
  exit: (direction: number) => ({
    x: direction > 0 ? -200 : 200,
    opacity: 0,
    transition: { duration: 0.3 },
  }),
};

export default function Testimonials() {
  const [current, setCurrent] = useState(0);
  const [direction, setDirection] = useState(1);
  const [isPaused, setIsPaused] = useState(false);

  const goTo = useCallback(
    (index: number) => {
      setDirection(index > current ? 1 : -1);
      setCurrent(index);
    },
    [current]
  );

  useEffect(() => {
    if (isPaused) return;

    const timer = setInterval(() => {
      setDirection(1);
      setCurrent((prev) => (prev + 1) % testimonials.items.length);
    }, 5000);

    return () => clearInterval(timer);
  }, [isPaused]);

  const item = testimonials.items[current];

  return (
    <section className="py-20 md:py-28 bg-white">
      <div className="container mx-auto px-4 md:px-6">
        <motion.h2
          initial="hidden"
          whileInView="visible"
          viewport={{ once: true }}
          variants={fadeUp}
          className="text-3xl md:text-4xl font-bold text-center text-slate-900 mb-16"
        >
          {testimonials.title}
        </motion.h2>

        <div
          className="relative max-w-3xl mx-auto min-h-[280px]"
          onMouseEnter={() => setIsPaused(true)}
          onMouseLeave={() => setIsPaused(false)}
        >
          <AnimatePresence mode="wait" custom={direction}>
            <motion.div
              key={current}
              custom={direction}
              variants={slideVariants}
              initial="enter"
              animate="center"
              exit="exit"
              className="absolute inset-0 flex flex-col items-center text-center px-4"
            >
              {/* Quote */}
              <p className="text-xl md:text-2xl text-slate-700 leading-relaxed mb-8 max-w-2xl">
                &ldquo;{item.quote}&rdquo;
              </p>

              {/* Avatar and info */}
              <div className="flex flex-col items-center gap-3">
                <div
                  className={`w-14 h-14 rounded-full ${avatarColors[current]} flex items-center justify-center text-white font-bold text-lg`}
                >
                  {getInitials(item.name)}
                </div>
                <div className="text-center">
                  <p className="font-bold text-slate-900 text-lg">
                    {item.name}
                  </p>
                  <p className="text-slate-500">
                    {item.role} — {item.location}
                  </p>
                </div>
              </div>
            </motion.div>
          </AnimatePresence>
        </div>

        {/* Navigation dots */}
        <div className="flex justify-center gap-2 mt-8">
          {testimonials.items.map((_, index) => (
            <button
              key={index}
              onClick={() => goTo(index)}
              aria-label={`شهادة ${index + 1}`}
              className={`w-3 h-3 rounded-full transition-all duration-300 ${
                index === current
                  ? "bg-sky-500 w-8"
                  : "bg-slate-300 hover:bg-slate-400"
              }`}
            />
          ))}
        </div>
      </div>
    </section>
  );
}
