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

'use client';

import { motion } from 'framer-motion';
import { useInView } from 'react-intersection-observer';
import { 
  CheckCircle, ArrowRight, ClipboardList, FileCheck, 
  Rocket, Clock, Users, Shield, Zap, 
  LucideIcon
} from 'lucide-react';
import { ProcessSectionProps, ProcessStep, ProcessStat } from '@/lib/page-builder/types';

// Default steps data
const defaultSteps: ProcessStep[] = [
  {
    number: '01',
    title: 'Choose Premium Website',
    description: 'Browse our curated portfolio of high-authority websites and select the perfect platform for your content.',
    icon: 'ClipboardList',
    color: 'from-blue-500 to-cyan-500',
    bgColor: 'bg-blue-50',
    borderColor: 'border-blue-200',
    features: ['DA 40+ Websites', 'DR 50+ Authority', 'Multiple Niches'],
    duration: '2-3 hours'
  },
  {
    number: '02',
    title: 'Place Order & Submit Content',
    description: 'Complete your purchase and submit your well-crafted content or use our professional writing service.',
    icon: 'FileCheck',
    color: 'from-purple-500 to-pink-500',
    bgColor: 'bg-purple-50',
    borderColor: 'border-purple-200',
    features: ['Quick Checkout', 'Content Guidelines', 'Writer Assignment'],
    duration: '15 minutes'
  },
  {
    number: '03',
    title: 'Content Review & Approval',
    description: 'Our editorial team reviews your content for quality and ensures it meets publication standards.',
    icon: 'CheckCircle',
    color: 'from-green-500 to-emerald-500',
    bgColor: 'bg-green-50',
    borderColor: 'border-green-200',
    features: ['Quality Check', 'SEO Optimization', 'Editor Approval'],
    duration: '24-48 hours'
  },
  {
    number: '04',
    title: 'Live Publication & Reporting',
    description: 'Your content goes live on the chosen website with detailed reporting and performance tracking.',
    icon: 'Rocket',
    color: 'from-orange-500 to-red-500',
    bgColor: 'bg-orange-50',
    borderColor: 'border-orange-200',
    features: ['Live URL', 'Performance Report', 'Google Indexing'],
    duration: '24 hours'
  }
];

const defaultStats: ProcessStat[] = [
  { number: '98%', label: 'Success Rate', icon: 'CheckCircle' },
  { number: '3-7', label: 'Days Average', icon: 'Clock' },
  { number: '5K+', label: 'Publications', icon: 'Users' },
  { number: '100%', label: 'Satisfaction', icon: 'Shield' }
];

const iconMap: Record<string, LucideIcon> = {
  CheckCircle: CheckCircle,
  ClipboardList: ClipboardList,
  FileCheck: FileCheck,
  Rocket: Rocket,
  Clock: Clock,
  Users: Users,
  Shield: Shield,
  Zap: Zap
};

const getIconComponent = (iconName: string): LucideIcon => {
  return iconMap[iconName] || ClipboardList;
};

export default function ProcessSection(props: ProcessSectionProps) {
  const {
    id,
    className = '',
    title = 'How It Works',
    description = 'Get featured on premium websites with our streamlined 4-step process.',
    badgeText = 'Streamlined Publishing Process',
    showBadge = true,
    steps = defaultSteps,
    stats = defaultStats,
    showStats = true,
    showCTA = true,
    ctaTitle = 'Ready to Boost Your Authority?',
    ctaDescription = 'Join thousands of successful brands that have transformed their online presence through our premium publishing network.',
    ctaButtonText = 'Browse Premium Websites',
    ctaButtonLink = '/websites',
    ctaSecondaryButtonText = 'Get Free Strategy Session',
    ctaSecondaryButtonLink = '/consultation',
    footerText = '⚡ Average turnaround: 3-7 days • 🛡️ 100% satisfaction guaranteed • 📈 98% success rate',
  } = props;

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

  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.2
      }
    }
  };

  const itemVariants = {
    hidden: { y: 60, opacity: 0, scale: 0.9 },
    visible: {
      y: 0,
      opacity: 1,
      scale: 1,
      transition: {
        type: "spring" as const,
        stiffness: 100,
        damping: 15,
        duration: 0.8
      }
    }
  };

  const floatingAnimation = {
    y: [-10, 10, -10],
    transition: {
      duration: 4,
      repeat: Infinity,
      ease: "easeInOut" as const
    }
  };

  const pulseAnimation = {
    scale: [1, 1.05, 1],
    opacity: [0.7, 1, 0.7],
    transition: {
      duration: 3,
      repeat: Infinity,
      ease: "easeInOut" as const
    }
  };

  return (
    <section id={id} className={`py-24 bg-linear-to-br from-slate-50/50 via-white to-blue-50/30 relative overflow-hidden ${className}`}>
      {/* Light Background Elements */}
      <div className="absolute top-10 left-10 w-80 h-80 bg-blue-100/10 rounded-full blur-3xl"></div>
      <div className="absolute bottom-10 right-10 w-96 h-96 bg-purple-100/10 rounded-full blur-3xl"></div>

      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        {/* Section Header */}
        <motion.div
          ref={ref}
          initial={{ opacity: 0, y: 40 }}
          animate={inView ? { opacity: 1, y: 0 } : {}}
          transition={{ duration: 0.8 }}
          className="text-center mb-20"
        >
          {showBadge && (
            <motion.div
              initial={{ opacity: 0, scale: 0.8 }}
              animate={inView ? { opacity: 1, scale: 1 } : {}}
              transition={{ duration: 0.6, delay: 0.2 }}
              className="inline-flex items-center gap-3 bg-linear-to-r from-blue-50 to-cyan-50 text-blue-700 px-6 py-3 rounded-2xl text-sm font-semibold mb-8 border border-blue-200/50"
            >
              <motion.div animate={pulseAnimation}>
                <Zap className="h-5 w-5" />
              </motion.div>
              {badgeText}
            </motion.div>
          )}
          
          <motion.h2
            initial={{ opacity: 0, y: 30 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.3 }}
            className="text-5xl md:text-6xl font-bold text-gray-900 mb-6"
          >
            {title}
          </motion.h2>
          
          <motion.p
            initial={{ opacity: 0, y: 20 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.4 }}
            className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed font-light"
          >
            {description}
            <span className="font-semibold text-blue-600"> Fast, transparent, and results-driven.</span>
          </motion.p>
        </motion.div>

        {/* Stats Bar */}
        {showStats && (
          <motion.div
            initial={{ opacity: 0, y: 20 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 0.5 }}
            className="grid grid-cols-2 lg:grid-cols-4 gap-6 mb-20"
          >
            {stats.map((stat, index) => {
              const IconComponent = getIconComponent(stat.icon);
              return (
                <motion.div
                  key={stat.label}
                  initial={{ opacity: 0, scale: 0.8 }}
                  animate={inView ? { opacity: 1, scale: 1 } : {}}
                  transition={{ duration: 0.6, delay: 0.6 + index * 0.1 }}
                  className="text-center p-6 bg-white/80 rounded-2xl shadow-lg border border-gray-100/80 hover:shadow-xl transition-all duration-300 backdrop-blur-sm"
                >
                  <IconComponent className="h-8 w-8 text-blue-600 mx-auto mb-3" />
                  <div className="text-3xl font-bold text-gray-900 mb-1">{stat.number}</div>
                  <div className="text-gray-600 text-sm font-medium">{stat.label}</div>
                </motion.div>
              );
            })}
          </motion.div>
        )}

        {/* Process Steps */}
        <motion.div
          ref={ref}
          variants={containerVariants}
          initial="hidden"
          animate={inView ? "visible" : "hidden"}
          className="relative"
        >
          {/* Animated Connection Line */}
          <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-linear-to-b from-blue-200 via-purple-200 to-cyan-200 hidden lg:block rounded-full">
            <motion.div
              initial={{ scaleY: 0 }}
              animate={inView ? { scaleY: 1 } : {}}
              transition={{ duration: 2, ease: "easeOut" }}
              className="absolute top-0 left-0 w-full h-full bg-linear-to-b from-blue-500 via-purple-500 to-cyan-500 rounded-full origin-top"
            />
          </div>

          {/* Steps Container */}
          <div className="space-y-8 lg:space-y-12">
            {steps.map((step, index) => {
              const IconComponent = getIconComponent(step.icon);
              return (
                <motion.div
                  key={step.number}
                  variants={itemVariants}
                  className={`flex flex-col lg:flex-row items-center gap-8 group ${
                    index % 2 === 0 ? 'lg:flex-row' : 'lg:flex-row-reverse'
                  }`}
                >
                  {/* Step Content */}
                  <motion.div
                    whileHover={{ y: -5 }}
                    className={`flex-1 ${step.bgColor} rounded-3xl p-8 border ${step.borderColor} shadow-lg hover:shadow-xl transition-all duration-500 backdrop-blur-sm`}
                  >
                    <div className="flex items-start gap-6">
                      {/* Step Icon */}
                      <motion.div
                        animate={floatingAnimation}
                        className={`shrink-0 w-16 h-16 rounded-2xl bg-linear-to-r ${step.color} shadow-lg flex items-center justify-center`}
                      >
                        <IconComponent className="h-8 w-8 text-white" />
                      </motion.div>

                      <div className="flex-1">
                        {/* Step Header */}
                        <div className="flex items-center gap-4 mb-4">
                          <div className="px-4 py-2 bg-white rounded-full border border-gray-200 shadow-sm">
                            <span className="text-sm font-bold text-gray-700">Step {step.number}</span>
                          </div>
                          <div className="flex items-center gap-2 text-sm text-gray-500">
                            <Clock className="h-4 w-4" />
                            {step.duration}
                          </div>
                        </div>

                        <h3 className="text-2xl font-bold text-gray-900 mb-3">
                          {step.title}
                        </h3>
                        
                        <p className="text-gray-600 mb-6 text-lg leading-relaxed">
                          {step.description}
                        </p>

                        {/* Features List */}
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
                          {step.features.map((feature, featureIndex) => (
                            <motion.div
                              key={featureIndex}
                              initial={{ opacity: 0, x: -20 }}
                              animate={inView ? { opacity: 1, x: 0 } : {}}
                              transition={{ duration: 0.5, delay: 1 + (index * 0.3) + (featureIndex * 0.1) }}
                              className="flex items-center gap-3 p-3 bg-white/80 rounded-xl border border-white/50"
                            >
                              <div className={`w-2 h-2 rounded-full bg-linear-to-r ${step.color}`}></div>
                              <span className="text-sm font-medium text-gray-700">{feature}</span>
                            </motion.div>
                          ))}
                        </div>
                      </div>
                    </div>
                  </motion.div>

                  {/* Step Number Connector */}
                  <motion.div
                    initial={{ opacity: 0, scale: 0 }}
                    animate={inView ? { opacity: 1, scale: 1 } : {}}
                    transition={{ duration: 0.6, delay: 0.8 + index * 0.2 }}
                    className="shrink-0 relative"
                  >
                    <div className="w-16 h-16 rounded-2xl bg-white border-2 border-gray-200 shadow-lg flex items-center justify-center">
                      <span className="text-xl font-bold bg-linear-to-r from-gray-700 to-gray-900 bg-clip-text text-transparent">
                        {step.number}
                      </span>
                    </div>
                    
                    {/* Next Step Arrow */}
                    {index < steps.length - 1 && (
                      <motion.div
                        initial={{ opacity: 0, y: 20 }}
                        animate={inView ? { opacity: 1, y: 0 } : {}}
                        transition={{ duration: 0.6, delay: 1.2 + index * 0.2 }}
                        className="absolute -bottom-12 left-1/2 transform -translate-x-1/2"
                      >
                        <motion.div
                          animate={{ y: [0, 8, 0] }}
                          transition={{ duration: 2, repeat: Infinity, ease: "easeInOut" }}
                          className="text-blue-500"
                        >
                          <ArrowRight className="h-6 w-6 rotate-90" />
                        </motion.div>
                      </motion.div>
                    )}
                  </motion.div>
                </motion.div>
              );
            })}
          </div>
        </motion.div>

        {/* CTA Section */}
        {showCTA && (
          <motion.div
            initial={{ opacity: 0, y: 40 }}
            animate={inView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.8, delay: 1 }}
            className="text-center mt-20"
          >
            <div className="bg-linear-to-br from-blue-600 to-cyan-600 rounded-3xl p-12 text-white shadow-2xl relative overflow-hidden">
              <div className="relative">
                <h3 className="text-3xl md:text-4xl font-bold mb-4">
                  {ctaTitle}
                </h3>
                <p className="text-blue-100 mb-8 max-w-2xl mx-auto text-lg leading-relaxed">
                  {ctaDescription}
                </p>
                <div className="flex flex-col sm:flex-row gap-4 justify-center">
                  <motion.a
                    href={ctaButtonLink}
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                    className="bg-white text-gray-900 hover:bg-gray-100 px-8 py-4 rounded-2xl font-semibold transition-all duration-300 shadow-lg hover:shadow-xl flex items-center gap-3"
                  >
                    <ClipboardList className="h-5 w-5" />
                    {ctaButtonText}
                  </motion.a>
                  <motion.a
                    href={ctaSecondaryButtonLink}
                    whileHover={{ scale: 1.05 }}
                    whileTap={{ scale: 0.95 }}
                    className="border-2 border-white/30 text-white hover:bg-white/10 px-8 py-4 rounded-2xl font-semibold transition-all duration-300 backdrop-blur-sm"
                  >
                    {ctaSecondaryButtonText}
                  </motion.a>
                </div>
              </div>
            </div>
            
            {footerText && (
              <p className="text-gray-500 mt-6 text-sm">
                {footerText}
              </p>
            )}
          </motion.div>
        )}
      </div>
    </section>
  );
}