// src/app/components/admin/blocks/TestimonialsSection.tsx

'use client';

import { motion, AnimatePresence } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { useState, useEffect, useCallback } from 'react';
import { 
  Star, 
  Quote, 
  ArrowRight, 
  TrendingUp, 
  Search, 
  Target,
  CheckCircle,
  ChevronLeft,
  ChevronRight,
  Sparkles,
  Zap
} from 'lucide-react';
import { TestimonialsSectionProps, Testimonial } from '@/lib/page-builder/types';

// Default testimonials data
const defaultTestimonials: Testimonial[] = [
  {
    id: 1,
    name: "Sarah Chen",
    company: "TechGrowth Inc.",
    role: "Marketing Director",
    image: "/api/placeholder/80/80",
    content: "Working with this platform transformed our SEO strategy. We saw a 240% increase in organic traffic within 3 months. The quality of publications exceeded our expectations.",
    rating: 5,
    before: {
      traffic: "5.2K",
      keywords: "120",
      authority: "28"
    },
    after: {
      traffic: "17.8K",
      keywords: "450",
      authority: "62"
    }
  },
  {
    id: 2,
    name: "Marcus Rodriguez",
    company: "StartupScale",
    role: "Founder & CEO",
    image: "/api/placeholder/80/80",
    content: "The ROI from our guest posting campaign was incredible. We acquired high-quality backlinks that boosted our domain authority and drove qualified leads to our business.",
    rating: 5,
    before: {
      traffic: "2.1K",
      keywords: "85",
      authority: "22"
    },
    after: {
      traffic: "8.9K",
      keywords: "320",
      authority: "48"
    }
  },
  {
    id: 3,
    name: "Emily Watson",
    company: "DigitalFirst Agency",
    role: "SEO Manager",
    image: "/api/placeholder/80/80",
    content: "Outstanding service from start to finish. The editorial team ensured our content was perfectly optimized, and the publication process was seamless. Highly recommended!",
    rating: 5,
    before: {
      traffic: "8.7K",
      keywords: "210",
      authority: "35"
    },
    after: {
      traffic: "24.3K",
      keywords: "680",
      authority: "71"
    }
  },
  {
    id: 4,
    name: "James Kim",
    company: "SaaSPro Solutions",
    role: "Growth Manager",
    image: "/api/placeholder/80/80",
    content: "The before-and-after results speak for themselves. Our organic visibility skyrocketed, and we're now ranking for competitive keywords we never thought possible.",
    rating: 5,
    before: {
      traffic: "3.5K",
      keywords: "95",
      authority: "26"
    },
    after: {
      traffic: "14.2K",
      keywords: "380",
      authority: "58"
    }
  }
];

export default function TestimonialsSection(props: TestimonialsSectionProps) {
  const {
    id,
    className = '',
    title = 'Real',
    highlightedText = 'Results',
    description = "Don't just take our word for it. See what our clients have to say",
    badgeText = 'Client Success Stories',
    showBadge = true,
    testimonials = defaultTestimonials,
    autoRotate = true,
    autoRotateInterval = 5000,
    showSEOStats = true,
    showProgressBar = true,
    seoImprovementTitle = 'SEO Transformation',
    seoImprovementLabel = 'Overall SEO Improvement',
    seoImprovementPercentage = 85,
    seoStats = {
      trafficIncrease: '+240%',
      keywordsIncrease: '+275%',
      authorityIncrease: '+122%'
    }
  } = props;

  const [ref, inView] = useInView({
    triggerOnce: true,
    threshold: 0.1,
  });

  const [currentTestimonial, setCurrentTestimonial] = useState(0);
  const [direction, setDirection] = useState(0);

  const nextTestimonial = useCallback(() => {
    setDirection(1);
    setCurrentTestimonial((prev) => (prev + 1) % testimonials.length);
  }, [testimonials.length]);

  const prevTestimonial = useCallback(() => {
    setDirection(-1);
    setCurrentTestimonial((prev) => (prev - 1 + testimonials.length) % testimonials.length);
  }, [testimonials.length]);

  useEffect(() => {
    if (!autoRotate) return;
    const interval = setInterval(nextTestimonial, autoRotateInterval);
    return () => clearInterval(interval);
  }, [autoRotate, autoRotateInterval, nextTestimonial]);

  const slideVariants = {
    enter: (direction: number) => ({
      x: direction > 0 ? 400 : -400,
      opacity: 0,
      scale: 0.8,
      rotateY: direction > 0 ? 15 : -15
    }),
    center: {
      x: 0,
      opacity: 1,
      scale: 1,
      rotateY: 0,
      transition: {
        type: "spring" as const,
        stiffness: 300,
        damping: 30,
        mass: 0.8
      }
    },
    exit: (direction: number) => ({
      x: direction < 0 ? 400 : -400,
      opacity: 0,
      scale: 0.8,
      rotateY: direction < 0 ? 15 : -15,
      transition: {
        type: "spring" as const,
        stiffness: 300,
        damping: 30
      }
    })
  };

  const currentTestimonialData = testimonials[currentTestimonial];

  return (
    <section 
      id={id} 
      className={`py-32 bg-white relative overflow-hidden ${className}`}
    >
      {/* Modern Gradient Background */}
      <div className="absolute inset-0 bg-linear-to-br from-gray-50 via-white to-blue-50/30"></div>
      
      {/* Abstract Shapes */}
      <div className="absolute top-0 right-0 w-125 h-125 bg-linear-to-br from-blue-200/20 to-purple-200/20 rounded-full blur-3xl"></div>
      <div className="absolute bottom-0 left-0 w-100 h-100 bg-linear-to-tr from-cyan-200/20 to-teal-200/20 rounded-full blur-3xl"></div>
      
      {/* Grid Pattern */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-size-[40px_40px]"></div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header - Modern & Minimal */}
        <motion.div
          ref={ref}
          initial={{ opacity: 0, y: 30 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6 }}
          className="text-center mb-20"
        >
          {showBadge && (
            <motion.div
              initial={{ opacity: 0, scale: 0.9 }}
              animate={inView ? { opacity: 1, scale: 1 } : {}}
              transition={{ duration: 0.4, delay: 0.1 }}
              className="inline-flex items-center gap-2 bg-blue-50 text-blue-600 px-4 py-2 rounded-full text-sm font-semibold mb-6"
            >
              <Sparkles className="h-4 w-4" />
              {badgeText}
            </motion.div>
          )}
          
          <motion.h2
            initial={{ opacity: 0, y: 20 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.2 }}
            className="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-6"
          >
            {title}
            <span className="bg-linear-to-r from-blue-600 to-cyan-600 bg-clip-text text-transparent ml-3">
              {highlightedText}
            </span>
          </motion.h2>
          
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: 0.3 }}
            className="text-lg text-gray-600 max-w-2xl mx-auto"
          >
            {description}
          </motion.p>
        </motion.div>

        {/* Main Content - Modern Grid Layout */}
        <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
          {/* Testimonial Card - Takes more space */}
          <div className="lg:col-span-7">
            <motion.div
              initial={{ opacity: 0, x: -30 }}
              animate={inView ? { opacity: 1, x: 0 } : {}}
              transition={{ duration: 0.6, delay: 0.4 }}
              className="relative"
            >
              {/* Main Card */}
              <div className="bg-white rounded-3xl shadow-2xl border border-gray-100 overflow-hidden">
                <div className="relative p-8 md:p-10">
                  {/* Quote Icon */}
                  <div className="absolute top-8 right-8 opacity-5">
                    <Quote className="h-24 w-24 text-gray-900" />
                  </div>

                  {/* Rating */}
                  <div className="flex items-center gap-1 mb-8">
                    {[...Array(5)].map((_, i) => (
                      <Star 
                        key={i} 
                        className={`h-5 w-5 ${
                          i < currentTestimonialData.rating 
                            ? 'fill-yellow-400 text-yellow-400' 
                            : 'text-gray-300'
                        }`} 
                      />
                    ))}
                  </div>

                  {/* Testimonial Content with Animation */}
                  <div className="min-h-50">
                    <AnimatePresence mode="wait" custom={direction}>
                      <motion.blockquote
                        key={currentTestimonial}
                        custom={direction}
                        variants={slideVariants}
                        initial="enter"
                        animate="center"
                        exit="exit"
                        className="text-gray-700 text-lg md:text-xl leading-relaxed mb-8"
                      >
                        {currentTestimonialData.content}
                      </motion.blockquote>
                    </AnimatePresence>
                  </div>

                  {/* Author Info */}
                  <div className="flex items-center justify-between pt-6 border-t border-gray-100">
                    <div className="flex items-center gap-4">
                      <div className="w-14 h-14 bg-linear-to-br from-blue-500 to-cyan-500 rounded-full flex items-center justify-center text-white font-bold text-xl shadow-lg">
                        {currentTestimonialData.name.split(' ').map(n => n[0]).join('')}
                      </div>
                      <div>
                        <h4 className="font-semibold text-gray-900 text-lg">
                          {currentTestimonialData.name}
                        </h4>
                        <p className="text-gray-500 text-sm">
                          {currentTestimonialData.role} at {currentTestimonialData.company}
                        </p>
                      </div>
                    </div>

                    {/* Verified Badge */}
                    <div className="flex items-center gap-2 text-green-600">
                      <CheckCircle className="h-5 w-5" />
                      <span className="text-sm font-medium">Verified Client</span>
                    </div>
                  </div>
                </div>

                {/* Navigation */}
                <div className="bg-gray-50 px-8 py-4 flex items-center justify-between border-t border-gray-100">
                  <div className="flex items-center gap-2">
                    {testimonials.map((_, index) => (
                      <button
                        key={index}
                        onClick={() => {
                          setDirection(index > currentTestimonial ? 1 : -1);
                          setCurrentTestimonial(index);
                        }}
                        className={`h-2 rounded-full transition-all duration-300 ${
                          index === currentTestimonial 
                            ? 'bg-blue-600 w-8' 
                            : 'bg-gray-300 w-2 hover:bg-gray-400'
                        }`}
                      />
                    ))}
                  </div>
                  
                  <div className="flex items-center gap-2">
                    <button
                      onClick={prevTestimonial}
                      className="p-2 hover:bg-gray-200 rounded-xl transition-colors"
                    >
                      <ChevronLeft className="h-5 w-5 text-gray-600" />
                    </button>
                    <button
                      onClick={nextTestimonial}
                      className="p-2 hover:bg-gray-200 rounded-xl transition-colors"
                    >
                      <ChevronRight className="h-5 w-5 text-gray-600" />
                    </button>
                  </div>
                </div>
              </div>
            </motion.div>
          </div>

          {/* SEO Stats - Modern Cards */}
          {showSEOStats && (
            <div className="lg:col-span-5 space-y-6">
              <motion.div
                initial={{ opacity: 0, y: 30 }}
                animate={inView ? { opacity: 1, y: 0 } : {}}
                transition={{ duration: 0.6, delay: 0.5 }}
                className="text-left"
              >
                <h3 className="text-2xl font-bold text-gray-900 mb-2">
                  {seoImprovementTitle}
                </h3>
                <p className="text-gray-500 text-sm">
                  Measurable results from our clients
                </p>
              </motion.div>

              {/* Stats Cards */}
              <motion.div
                initial={{ opacity: 0 }}
                animate={inView ? { opacity: 1 } : {}}
                transition={{ duration: 0.6, delay: 0.6 }}
                className="space-y-4"
              >
                {/* Traffic Card */}
                <div className="group relative bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-blue-200">
                  <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
                    <div className="w-8 h-8 bg-green-50 rounded-full flex items-center justify-center">
                      <TrendingUp className="h-4 w-4 text-green-600" />
                    </div>
                  </div>
                  
                  <div className="flex items-start justify-between mb-4">
                    <div>
                      <p className="text-gray-500 text-sm font-medium mb-1">Organic Traffic</p>
                      <p className="text-3xl font-bold text-gray-900">{seoStats.trafficIncrease}</p>
                    </div>
                    <div className="w-12 h-12 bg-green-50 rounded-2xl flex items-center justify-center">
                      <TrendingUp className="h-6 w-6 text-green-600" />
                    </div>
                  </div>
                  
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500">Before: {currentTestimonialData.before.traffic}</span>
                    <ArrowRight className="h-4 w-4 text-gray-400" />
                    <span className="text-green-600 font-semibold">After: {currentTestimonialData.after.traffic}</span>
                  </div>
                </div>

                {/* Keywords Card */}
                <div className="group relative bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-blue-200">
                  <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
                    <div className="w-8 h-8 bg-blue-50 rounded-full flex items-center justify-center">
                      <Search className="h-4 w-4 text-blue-600" />
                    </div>
                  </div>
                  
                  <div className="flex items-start justify-between mb-4">
                    <div>
                      <p className="text-gray-500 text-sm font-medium mb-1">Ranking Keywords</p>
                      <p className="text-3xl font-bold text-gray-900">{seoStats.keywordsIncrease}</p>
                    </div>
                    <div className="w-12 h-12 bg-blue-50 rounded-2xl flex items-center justify-center">
                      <Search className="h-6 w-6 text-blue-600" />
                    </div>
                  </div>
                  
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500">Before: {currentTestimonialData.before.keywords}</span>
                    <ArrowRight className="h-4 w-4 text-gray-400" />
                    <span className="text-blue-600 font-semibold">After: {currentTestimonialData.after.keywords}</span>
                  </div>
                </div>

                {/* Authority Card */}
                <div className="group relative bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 hover:border-blue-200">
                  <div className="absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity">
                    <div className="w-8 h-8 bg-purple-50 rounded-full flex items-center justify-center">
                      <Target className="h-4 w-4 text-purple-600" />
                    </div>
                  </div>
                  
                  <div className="flex items-start justify-between mb-4">
                    <div>
                      <p className="text-gray-500 text-sm font-medium mb-1">Domain Authority</p>
                      <p className="text-3xl font-bold text-gray-900">{seoStats.authorityIncrease}</p>
                    </div>
                    <div className="w-12 h-12 bg-purple-50 rounded-2xl flex items-center justify-center">
                      <Target className="h-6 w-6 text-purple-600" />
                    </div>
                  </div>
                  
                  <div className="flex items-center justify-between text-sm">
                    <span className="text-gray-500">Before: {currentTestimonialData.before.authority}</span>
                    <ArrowRight className="h-4 w-4 text-gray-400" />
                    <span className="text-purple-600 font-semibold">After: {currentTestimonialData.after.authority}</span>
                  </div>
                </div>

                {/* Progress Bar */}
                {showProgressBar && (
                  <div className="bg-linear-to-br from-blue-50 to-cyan-50 rounded-2xl p-6 border border-blue-100">
                    <div className="flex items-center justify-between mb-3">
                      <div className="flex items-center gap-2">
                        <Zap className="h-5 w-5 text-blue-600" />
                        <span className="font-semibold text-gray-900">{seoImprovementLabel}</span>
                      </div>
                      <span className="text-blue-600 font-bold text-lg">{seoImprovementPercentage}%</span>
                    </div>
                    
                    <div className="w-full bg-white rounded-full h-2 overflow-hidden">
                      <motion.div
                        initial={{ width: 0 }}
                        animate={inView ? { width: `${seoImprovementPercentage}%` } : {}}
                        transition={{ duration: 1.5, delay: 0.8 }}
                        className="h-full bg-linear-to-r from-blue-600 to-cyan-500 rounded-full"
                      />
                    </div>
                    
                    <p className="text-xs text-gray-500 mt-3">
                      Average improvement across all clients
                    </p>
                  </div>
                )}
              </motion.div>
            </div>
          )}
        </div>

        {/* Trust Indicators */}
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.6, delay: 0.9 }}
          className="mt-16 text-center"
        >
          <div className="flex items-center justify-center gap-8 flex-wrap">
            <div className="flex items-center gap-2 text-gray-500">
              <CheckCircle className="h-4 w-4 text-green-500" />
              <span className="text-sm">100+ verified reviews</span>
            </div>
            <div className="flex items-center gap-2 text-gray-500">
              <CheckCircle className="h-4 w-4 text-green-500" />
              <span className="text-sm">98% client satisfaction</span>
            </div>
            <div className="flex items-center gap-2 text-gray-500">
              <CheckCircle className="h-4 w-4 text-green-500" />
              <span className="text-sm">Trusted by 5000+ businesses</span>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}