"use client";
import { useEffect } from "react";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";
import { Service } from "@/lib/api/serviceService";

interface ServiceProcessProps {
  service: Service;
}

const ServiceProcess = ({ service }: ServiceProcessProps) => {
  useEffect(() => {
    gsap.registerPlugin(ScrollTrigger);
    
    // Modern entrance animations
    gsap.set(".process-step", {
      y: 60,
      opacity: 0,
      scale: 0.9,
    });

    ScrollTrigger.batch(".process-step", {
      start: "-150px bottom",
      onEnter: (elements) =>
        gsap.to(elements, {
          y: 0,
          opacity: 1,
          scale: 1,
          stagger: {
            amount: 0.6,
            from: "start"
          },
          duration: 1,
          ease: "power3.out",
        }),
    });
    
    // Animate section header
    gsap.fromTo(".section-header", 
      {
        y: 40,
        opacity: 0
      },
      {
        y: 0,
        opacity: 1,
        duration: 1,
        ease: "power3.out",
        scrollTrigger: {
          trigger: ".section-header",
          start: "-100px bottom"
        }
      }
    );
  }, []);

  if (!service.process_steps) {
    return null;
  }

  // Split process steps by common separators
  const processSteps = service.process_steps
    .split(/[,;•\n]/)
    .map(step => step.trim())
    .filter(step => step.length > 0);

  return (
    <section className="enterprise-process py-4">
      <div className="container">
        <div className="row justify-content-center">
          <div className="col-12 col-xl-10">
            <div className="section-header text-center mb-4">
              <span className="enterprise-section-tag">Our Process</span>
              <h2 className="enterprise-section-title mb-3">
                {service.title} Process
              </h2>
              <p className="enterprise-section-description">
                {service.process_description || `Our proven methodology ensures successful delivery of your ${service.title.toLowerCase()} project.`}
              </p>
            </div>
            
            <div className="row g-5">
              {processSteps.map((step, index) => (
                <div key={index} className="col-12 col-md-6 col-lg-4">
                  <div className="process-step enterprise-process-step-compact">
                    <div className="step-number">
                      <span className="step-number-text">
                        {String(index + 1).padStart(2, '0')}
                      </span>
                    </div>
                    <div className="step-content">
                      <h6 className="step-title">
                        {step}
                      </h6>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

// Helper function to generate step descriptions based on step name and service
const getStepDescription = (step: string, serviceTitle: string): string => {
  const descriptions: { [key: string]: string } = {
    'Requirements Analysis': 'We analyze your business requirements and technical specifications to ensure we understand your goals.',
    'System Design': 'Our team creates a comprehensive system architecture and design that meets your specific needs.',
    'Development': 'We implement the solution using industry best practices and modern technologies.',
    'Testing': 'Rigorous testing ensures your solution is reliable, secure, and performs optimally.',
    'Deployment': 'We handle the deployment process and ensure smooth transition to production.',
    'Training': 'We provide comprehensive training to your team for successful adoption.',
    'API Planning': 'We design the API architecture and define endpoints based on your integration needs.',
    'API Development': 'We build robust, scalable APIs using modern frameworks and best practices.',
    'Documentation': 'Comprehensive API documentation ensures easy integration and maintenance.',
    'Integration': 'We integrate the API with your existing systems and third-party services.',
    'Assessment': 'We evaluate your current infrastructure and identify migration opportunities.',
    'Migration Planning': 'We create a detailed migration strategy with minimal downtime.',
    'Implementation': 'We execute the migration plan with careful monitoring and rollback procedures.',
    'Optimization': 'We optimize your cloud infrastructure for performance and cost efficiency.',
    'Support': 'Ongoing support and maintenance ensure your solution continues to perform optimally.'
  };

  return descriptions[step] || `This step involves ${step.toLowerCase()} to ensure the success of your ${serviceTitle.toLowerCase()} project.`;
};

export default ServiceProcess;