"use client";

import { useState, useEffect } from "react";

interface Testimonial {
  id: number;
  clientName: string;
  clientRole: string | null;
  clientCompany: string | null;
  content: string;
  rating: number | null;
  featured: boolean | null;
}

export default function TestimonialsSection({
  testimonials,
}: {
  testimonials: Testimonial[];
}) {
  const [active, setActive] = useState(0);

  useEffect(() => {
    if (testimonials.length <= 1) return;
    const interval = setInterval(() => {
      setActive((prev) => (prev + 1) % testimonials.length);
    }, 5000);
    return () => clearInterval(interval);
  }, [testimonials.length]);

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

  const renderStars = (rating: number) => {
    return Array.from({ length: 5 }, (_, i) => (
      <span key={i} className={i < rating ? "text-amber-400" : "text-text-muted"}>
        ★
      </span>
    ));
  };

  return (
    <section className="py-24 relative overflow-hidden">
      <div className="absolute inset-0 hero-gradient opacity-30" />

      <div className="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header */}
        <div className="text-center mb-16">
          <span className="inline-block px-4 py-1.5 text-xs font-semibold uppercase tracking-wider text-amber-400 bg-amber-500/10 rounded-full mb-4">
            Testimonials
          </span>
          <h2 className="text-4xl sm:text-5xl font-bold text-text-primary mb-4">
            What Clients <span className="gradient-text">Say</span>
          </h2>
          <p className="text-text-muted max-w-2xl mx-auto text-lg">
            Don&apos;t just take my word for it — hear from some of the amazing
            people I&apos;ve had the pleasure to work with.
          </p>
        </div>

        {/* Featured testimonial */}
        <div className="glass rounded-2xl p-8 md:p-12 mb-8 relative overflow-hidden">
          <div className="absolute top-0 left-0 w-32 h-32 bg-gradient-to-br from-primary/20 to-transparent rounded-full blur-3xl" />
          <div className="absolute bottom-0 right-0 w-40 h-40 bg-gradient-to-tl from-accent/20 to-transparent rounded-full blur-3xl" />

          <div className="relative">
            <div className="text-5xl mb-6 opacity-30">&ldquo;</div>

            <div className="min-h-[150px]">
              {testimonials.map((t, i) => (
                <div
                  key={t.id}
                  className={`transition-all duration-500 ${
                    i === active
                      ? "opacity-100 translate-x-0"
                      : "opacity-0 absolute top-0 translate-x-8"
                  }`}
                >
                  <p className="text-xl md:text-2xl text-text-primary leading-relaxed mb-8">
                    {t.content}
                  </p>

                  <div className="flex items-center gap-4">
                    <div className="w-14 h-14 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center text-white text-xl font-bold">
                      {t.clientName.charAt(0)}
                    </div>
                    <div>
                      <p className="font-bold text-text-primary">{t.clientName}</p>
                      <p className="text-sm text-text-muted">
                        {t.clientRole}
                        {t.clientCompany && ` at ${t.clientCompany}`}
                      </p>
                      <div className="flex items-center gap-0.5 mt-1">
                        {renderStars(t.rating || 5)}
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* Navigation dots */}
        {testimonials.length > 1 && (
          <div className="flex items-center justify-center gap-2">
            {testimonials.map((_, i) => (
              <button
                key={i}
                onClick={() => setActive(i)}
                className={`transition-all ${
                  i === active
                    ? "w-8 h-2 bg-primary rounded-full"
                    : "w-2 h-2 bg-text-muted/30 rounded-full hover:bg-text-muted/50"
                }`}
              />
            ))}
          </div>
        )}

        {/* Client logos placeholder */}
        <div className="mt-16 pt-12 border-t border-border">
          <p className="text-center text-sm text-text-muted mb-8">
            Trusted by companies and startups across industries
          </p>
          <div className="flex flex-wrap items-center justify-center gap-8 opacity-50">
            {["TechPay", "EduLearn", "DataSync", "InnovateTech", "QuickRecharge"].map(
              (company) => (
                <div
                  key={company}
                  className="px-6 py-3 rounded-lg bg-surface-elevated text-text-muted font-semibold"
                >
                  {company}
                </div>
              )
            )}
          </div>
        </div>
      </div>
    </section>
  );
}