"use client";

import { useCallback, useEffect, useRef, useState } from "react";
import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
import { testimonials } from "@/lib/content/company";

const INTERVAL = 8000;

export default function Testimonials() {
  const [index, setIndex] = useState(0);
  const [playing, setPlaying] = useState(true);
  const [hovered, setHovered] = useState(false);
  const reduced = useReducedMotion();
  const timer = useRef<ReturnType<typeof setInterval> | null>(null);

  const active = playing && !hovered && !reduced;

  const go = useCallback(
    (n: number) => setIndex((n + testimonials.length) % testimonials.length),
    []
  );

  useEffect(() => {
    if (!active) return;
    timer.current = setInterval(() => go(index + 1), INTERVAL);
    return () => {
      if (timer.current) clearInterval(timer.current);
    };
  }, [active, index, go]);

  const t = testimonials[index];

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      onFocus={() => setHovered(true)}
      onBlur={() => setHovered(false)}
    >
      <div className="min-h-[280px] md:min-h-[240px]" aria-live="polite">
        <AnimatePresence mode="wait">
          <motion.figure
            key={index}
            initial={reduced ? false : { opacity: 0, y: 16 }}
            animate={{ opacity: 1, y: 0 }}
            exit={reduced ? undefined : { opacity: 0, y: -12 }}
            transition={{ duration: 0.45, ease: [0.22, 1, 0.36, 1] }}
          >
            <div
              className="font-[family-name:var(--font-display)] text-7xl leading-[0.6] text-ice opacity-85"
              aria-hidden
            >
              “
            </div>
            <blockquote className="mt-6 max-w-[26em] font-[family-name:var(--font-display)] text-[clamp(1.35rem,2.6vw,1.9rem)] font-medium leading-[1.35] tracking-tight text-thi [text-wrap:balance]">
              {t.text}
            </blockquote>
            <figcaption className="mt-7 flex items-center gap-4">
              <span
                className="grid h-12 w-12 place-items-center rounded-full bg-gradient-to-br from-azure-bright to-ice font-[family-name:var(--font-display)] text-[1.05rem] font-bold text-[#04122B]"
                aria-hidden
              >
                {t.initials}
              </span>
              <div>
                <b className="block font-semibold text-thi">{t.role}</b>
                <span className="text-[0.87rem] text-tmid">
                  {t.org} · name withheld under NDA
                </span>
              </div>
            </figcaption>
          </motion.figure>
        </AnimatePresence>
      </div>

      <div className="mt-9 flex flex-wrap items-center gap-5">
        <button
          onClick={() => go(index - 1)}
          aria-label="Previous testimonial"
          className="grid h-11 w-11 place-items-center rounded-full border border-white/15 text-tmid transition-all hover:scale-105 hover:border-ice hover:text-ice"
        >
          ←
        </button>
        <button
          onClick={() => go(index + 1)}
          aria-label="Next testimonial"
          className="grid h-11 w-11 place-items-center rounded-full border border-white/15 text-tmid transition-all hover:scale-105 hover:border-ice hover:text-ice"
        >
          →
        </button>
        <button
          onClick={() => setPlaying(!playing)}
          aria-label={playing ? "Pause rotation" : "Resume rotation"}
          aria-pressed={!playing}
          className="grid h-11 w-11 place-items-center rounded-full border border-white/15 text-tmid transition-all hover:border-ice hover:text-ice"
        >
          {playing ? "⏸" : "▶"}
        </button>
        <span className="font-[family-name:var(--font-mono)] text-[0.8rem] tracking-[0.1em] text-tlo tnum">
          {String(index + 1).padStart(2, "0")} / {String(testimonials.length).padStart(2, "0")}
        </span>
      </div>
    </div>
  );
}