"use client";

import { motion } from "framer-motion";
import { Quote, Star, MessageSquareQuote } from "lucide-react";

export interface ReviewView {
  _id: string;
  author: string;
  role?: string;
  content: string;
  rating: number;
  avatarFileId?: string | null;
}

function initials(name: string) {
  return name
    .split(/\s+/)
    .map((p) => p[0])
    .join("")
    .slice(0, 2)
    .toUpperCase();
}

export default function ReviewsSection({
  reviews,
}: {
  reviews: ReviewView[];
}) {
  return (
    <section
      id="yorumlar"
      className="max-w-7xl mx-auto px-6 lg:px-10 mt-24 lg:mt-32 scroll-mt-24"
    >
      <motion.div
        initial={{ opacity: 0, y: 16 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, margin: "-50px" }}
        transition={{ duration: 0.5 }}
        className="text-center mb-10"
      >
        <span className="inline-flex items-center gap-2 px-3 py-1 rounded-full glass text-xs text-brand-200 mb-3">
          <MessageSquareQuote className="w-3.5 h-3.5" />
          Müşteri Yorumları
        </span>
        <h2 className="text-3xl sm:text-4xl lg:text-5xl font-bold heading-gradient">
          Müşteri Yorumları
        </h2>
        <p className="mt-3 text-brand-300 max-w-2xl mx-auto">
          Müşterilerimizin Source Setups hakkında görüşleri.
        </p>
      </motion.div>

      {reviews.length === 0 ? (
        <div className="glass rounded-2xl p-12 text-center">
          <p className="text-brand-300">
            Henüz yorum eklenmemiş.
          </p>
        </div>
      ) : (
        <div className="grid gap-5 md:grid-cols-2 lg:grid-cols-3">
          {reviews.slice(0, 6).map((r, i) => (
            <ReviewCard key={r._id} review={r} index={i} />
          ))}
        </div>
      )}
    </section>
  );
}

function ReviewCard({ review, index }: { review: ReviewView; index: number }) {
  return (
    <motion.article
      initial={{ opacity: 0, y: 24 }}
      whileInView={{ opacity: 1, y: 0 }}
      viewport={{ once: true, margin: "-30px" }}
      transition={{ duration: 0.5, delay: 0.05 * index }}
      whileHover={{ y: -4 }}
      className="glass-strong rounded-2xl p-6 relative"
    >
      <Quote className="absolute top-4 right-4 w-6 h-6 text-brand-700/40" />
      <div className="flex items-center gap-1 mb-3">
        {Array.from({ length: 5 }).map((_, i) => (
          <Star
            key={i}
            className={`w-4 h-4 ${
              i < (review.rating ?? 5)
                ? "text-amber-400 fill-amber-400"
                : "text-brand-700"
            }`}
          />
        ))}
      </div>
      <p className="text-sm text-brand-100 leading-relaxed">
        “{review.content}”
      </p>
      <div className="mt-5 pt-4 border-t border-brand-700/30 flex items-center gap-3">
        {review.avatarFileId ? (
          <img
            src={`/api/files/${review.avatarFileId}`}
            alt={review.author}
            className="w-9 h-9 rounded-full object-cover border border-brand-700/40"
          />
        ) : (
          <div
            className="w-9 h-9 rounded-full flex items-center justify-center text-white text-xs font-bold border border-brand-700/40"
            style={{
              background:
                "linear-gradient(135deg, rgba(124,146,174,0.35), rgba(66,83,105,0.7))",
            }}
          >
            {initials(review.author)}
          </div>
        )}
        <div>
          <div className="text-sm font-semibold text-white">
            {review.author}
          </div>
          {review.role && (
            <div className="text-xs text-brand-400">{review.role}</div>
          )}
        </div>
      </div>
    </motion.article>
  );
}