"use client";

import * as React from "react";
import { motion, AnimatePresence } from "framer-motion";
import { ChevronLeft, ChevronRight, Star, Quote } from "lucide-react";

export type Testimonial = {
  id: string;
  name: string;
  position: string | null;
  company: string | null;
  content: string;
  rating: number;
  avatar: string | null;
};

export function TestimonialsCarousel({ items }: { items: Testimonial[] }) {
  const [index, setIndex] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const count = items.length;

  React.useEffect(() => {
    if (paused || count <= 1) return;
    const t = setInterval(() => setIndex((i) => (i + 1) % count), 5500);
    return () => clearInterval(t);
  }, [paused, count]);

  if (count === 0) return null;
  const active = items[index];

  const initials = (name: string) =>
    name.split(" ").map((p) => p[0]).slice(0, 2).join("").toUpperCase();

  return (
    <div
      className="relative"
      onMouseEnter={() => setPaused(true)}
      onMouseLeave={() => setPaused(false)}
    >
      <div className="relative overflow-hidden rounded-3xl">
        <AnimatePresence mode="wait">
          <motion.div
            key={active.id}
            initial={{ opacity: 0, x: 40 }}
            animate={{ opacity: 1, x: 0 }}
            exit={{ opacity: 0, x: -40 }}
            transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
            className="bg-white rounded-3xl border border-border shadow-soft p-8 sm:p-12"
          >
            <Quote className="size-10 text-[var(--brand-royal)]/20 mb-4 fill-[var(--brand-royal)]/10" />
            <div className="flex gap-1 mb-5">
              {Array.from({ length: 5 }).map((_, i) => (
                <Star
                  key={i}
                  className={`size-4 ${i < active.rating ? "fill-amber-400 text-amber-400" : "text-muted-foreground/30"}`}
                />
              ))}
            </div>
            <p className="text-lg sm:text-xl text-foreground/85 leading-relaxed font-medium text-balance">
              “{active.content}”
            </p>
            <div className="mt-7 flex items-center gap-4">
              <div className="grid place-items-center size-12 rounded-full brand-gradient text-white font-bold text-sm shrink-0">
                {active.avatar ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={active.avatar} alt={active.name} className="size-full rounded-full object-cover" />
                ) : (
                  initials(active.name)
                )}
              </div>
              <div>
                <div className="font-bold text-foreground">{active.name}</div>
                <div className="text-sm text-muted-foreground">
                  {[active.position, active.company].filter(Boolean).join(" · ")}
                </div>
              </div>
            </div>
          </motion.div>
        </AnimatePresence>
      </div>

      {count > 1 && (
        <div className="flex items-center justify-between mt-6">
          <div className="flex gap-2">
            {items.map((_, i) => (
              <button
                key={i}
                onClick={() => setIndex(i)}
                aria-label={`Go to testimonial ${i + 1}`}
                className={`h-2 rounded-full transition-all ${
                  i === index ? "w-8 bg-[var(--brand-royal)]" : "w-2 bg-muted-foreground/30 hover:bg-muted-foreground/50"
                }`}
              />
            ))}
          </div>
          <div className="flex gap-2">
            <button
              onClick={() => setIndex((i) => (i - 1 + count) % count)}
              className="grid place-items-center size-10 rounded-full border border-border hover:bg-accent transition-colors"
              aria-label="Previous"
            >
              <ChevronLeft className="size-4" />
            </button>
            <button
              onClick={() => setIndex((i) => (i + 1) % count)}
              className="grid place-items-center size-10 rounded-full border border-border hover:bg-accent transition-colors"
              aria-label="Next"
            >
              <ChevronRight className="size-4" />
            </button>
          </div>
        </div>
      )}
    </div>
  );
}