import { useEffect, useState } from "react";
import { ChevronLeft, ChevronRight, Quote } from "lucide-react";
import { cn } from "@/lib/utils";
import type { TestimonialDto } from "@/lib/public-data.functions";
import { Reveal } from "@/components/brand/Reveal";

/** Soft carousel of quotes on alternating jungle-green and ivory cards. */
export function TestimonialCarousel({ items }: { items: TestimonialDto[] }) {
  const [index, setIndex] = useState(0);
  const [paused, setPaused] = useState(false);

  useEffect(() => {
    if (paused || items.length < 2) return;
    const t = window.setInterval(() => setIndex((i) => (i + 1) % items.length), 6500);
    return () => window.clearInterval(t);
  }, [paused, items.length]);

  if (items.length === 0) return null;

  return (
    <Reveal>
      <div
        className="relative mx-auto max-w-3xl"
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
      >
        <div className="overflow-hidden">
          <div
            className="flex transition-transform duration-700 ease-[cubic-bezier(0.22,1,0.36,1)]"
            style={{ transform: `translateX(-${index * 100}%)` }}
          >
            {items.map((t, i) => (
              <figure
                key={t.id}
                className={cn(
                  "w-full shrink-0 rounded-2xl border p-8 sm:p-12",
                  i % 2 === 0
                    ? "border-ivory/15 bg-jungle text-ivory"
                    : "border-gold/30 bg-card text-foreground",
                )}
              >
                <Quote
                  aria-hidden="true"
                  className={cn("mb-6 h-10 w-10 fill-current", i % 2 === 0 ? "text-gold" : "text-gold")}
                />
                <blockquote className="font-display text-xl leading-relaxed sm:text-2xl">
                  “{t.quote}”
                </blockquote>
                <figcaption
                  className={cn(
                    "mt-8 flex flex-col gap-1",
                    i % 2 === 0 ? "text-ivory/80" : "text-muted-foreground",
                  )}
                >
                  <span className="font-semibold tracking-wide">{t.name}</span>
                  {t.role ? <span className="text-sm">{t.role}</span> : null}
                </figcaption>
              </figure>
            ))}
          </div>
        </div>

        <div className="mt-8 flex items-center justify-center gap-6">
          <button
            type="button"
            aria-label="Previous testimonial"
            onClick={() => setIndex((i) => (i - 1 + items.length) % items.length)}
            className="rounded-full border border-gold/50 p-2 text-gold transition-colors hover:bg-gold hover:text-jungle-deep"
          >
            <ChevronLeft className="h-4 w-4" />
          </button>
          <div className="flex gap-2">
            {items.map((t, i) => (
              <button
                key={t.id}
                type="button"
                aria-label={`Show testimonial ${i + 1}`}
                onClick={() => setIndex(i)}
                className={cn(
                  "h-2 w-2 rounded-full transition-colors",
                  i === index ? "bg-gold" : "bg-gold/30",
                )}
              />
            ))}
          </div>
          <button
            type="button"
            aria-label="Next testimonial"
            onClick={() => setIndex((i) => (i + 1) % items.length)}
            className="rounded-full border border-gold/50 p-2 text-gold transition-colors hover:bg-gold hover:text-jungle-deep"
          >
            <ChevronRight className="h-4 w-4" />
          </button>
        </div>
      </div>
    </Reveal>
  );
}