"use client";

import { useEffect, useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Quote, Star } from "lucide-react";

export type ReviewSlide = {
  id: string;
  authorName: string;
  rating: number;
  comment?: string | null;
  productName?: string | null;
};

export function ReviewCarousel({ reviews }: { reviews: ReviewSlide[] }) {
  const [index, setIndex] = useState(0);
  const items = reviews.length
    ? reviews
    : [
        {
          id: "fallback-1",
          authorName: "Andi P.",
          rating: 5,
          comment: "Checkout rapi, kode langsung masuk. Feel-nya premium banget.",
          productName: "Steam Wallet",
        },
        {
          id: "fallback-2",
          authorName: "Sinta R.",
          rating: 5,
          comment: "Top up MLBB cepat, support responsif. Recommended.",
          productName: "Mobile Legends",
        },
        {
          id: "fallback-3",
          authorName: "Rafi K.",
          rating: 4,
          comment: "Harga kompetitif, UI-nya clean seperti store AAA.",
          productName: "Netflix Premium",
        },
      ];

  useEffect(() => {
    const timer = setInterval(() => {
      setIndex((prev) => (prev + 1) % items.length);
    }, 4500);
    return () => clearInterval(timer);
  }, [items.length]);

  const current = items[index];

  return (
    <div className="relative overflow-hidden rounded-[1.75rem] border border-border bg-gradient-to-br from-surface to-bg p-8 md:p-10">
      <Quote className="absolute right-8 top-8 h-16 w-16 text-accent/10" />
      <AnimatePresence mode="wait">
        <motion.div
          key={current.id}
          initial={{ opacity: 0, y: 12 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: -12 }}
          transition={{ duration: 0.35 }}
          className="relative max-w-2xl"
        >
          <div className="mb-4 flex gap-1">
            {Array.from({ length: 5 }).map((_, i) => (
              <Star
                key={i}
                className={`h-4 w-4 ${i < current.rating ? "fill-accent text-accent" : "text-border"}`}
              />
            ))}
          </div>
          <p className="font-[family-name:var(--font-space)] text-xl leading-relaxed md:text-2xl">
            “{current.comment || "Pengalaman belanja yang luar biasa."}”
          </p>
          <div className="mt-6">
            <p className="font-semibold">{current.authorName}</p>
            <p className="text-sm text-muted">{current.productName || "Pelanggan 305 Gaming"}</p>
          </div>
        </motion.div>
      </AnimatePresence>

      <div className="mt-8 flex gap-2">
        {items.map((item, i) => (
          <button
            key={item.id}
            type="button"
            aria-label={`Review ${i + 1}`}
            onClick={() => setIndex(i)}
            className={`h-1.5 rounded-full transition-all ${
              i === index ? "w-8 bg-accent" : "w-3 bg-white/15 hover:bg-white/30"
            }`}
          />
        ))}
      </div>
    </div>
  );
}