'use client';
import React, { useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Pagination, Navigation } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/pagination';
import 'swiper/css/navigation';
import { Quote, Award, Calendar } from 'lucide-react';
import Image from "next/image";
import Link from 'next/link';

const SuccessStories = ({ stories }) => {
  const [activeStory, setActiveStory] = useState(0);

  const formatDate = (dateString) => {
    if (!dateString) return 'Date not available';
    try {
      return new Date(dateString).toLocaleDateString('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
      });
    } catch (e) {
      return 'Invalid date';
    }
  };

  const getShortDate = (dateString) => {
    if (!dateString) return 'N/A';
    try {
      return new Date(dateString).toLocaleDateString('en-US', {
        year: 'numeric'
      });
    } catch (e) {
      return 'N/A';
    }
  };

  // Get image URL
  const getImageUrl = (imagePath) => {
    if (!imagePath) return '/default-story-image.jpg';
    return `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${imagePath}`;
  };

  if (!stories || stories.length === 0) {
    return (
      <section className="py-20 bg-linear-to-b from-gray-50 to-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-4 text-gray-900">Success Stories</h2>
          <p className="text-gray-600">No success stories available at the moment.</p>
        </div>
      </section>
    );
  }

  return (
    <section className="relative py-20 bg-linear-to-b from-gray-50 to-white overflow-hidden">

      <div className="relative z-10 container mx-auto px-4 sm:px-6 lg:px-8">
        {/* Header Section */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center justify-center w-20 h-20 rounded-full bg-linear-to-r from-teal-600 to-blue-500 mb-6 shadow-xl">
            <Award className="w-10 h-10 text-white" />
          </div>
          <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6">
            Success <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">Stories</span>
          </h1>
          <div className="w-32 h-1 bg-linear-to-r from-teal-600 to-blue-500 mx-auto mb-8 rounded-full shadow-lg"></div>
          <p className="text-lg md:text-xl text-gray-600 max-w-6xl mx-auto leading-relaxed">
            Celebrating the achievements and milestones of our students on Universities Page! Our successful learners share how our international education services and expert international education advisory services helped them pursue Higher Education Abroad, excel in Study Abroad Programs, and achieve their academic and career goals with confidence.
          </p>
        </div>

        {/* Stats Section */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-16 max-w-4xl mx-auto">
          {[
            { number: "2,500+", label: 'Student Placed' },
            { number: "50+", label: 'Countries' },
            { number: "98%", label: 'Success Rate' },
            { number: "4.9/5", label: 'Student Rating' }
          ].map((stat, index) => (
            <div key={index} className="text-center p-4">
              <div className="text-2xl md:text-3xl font-bold text-teal-600 mb-2">{stat.number}</div>
              <div className="text-sm text-gray-600 font-medium">{stat.label}</div>
            </div>
          ))}
        </div>

        {/* Success Stories Swiper */}
        <div className="max-w-6xl mx-auto">
          <Swiper
            modules={[Autoplay, Pagination, Navigation]}
            spaceBetween={30}
            slidesPerView={1}
            breakpoints={{
              768: { slidesPerView: 2 },
              1024: { slidesPerView: 3 },
            }}
            autoplay={{ 
              delay: 5000,
              disableOnInteraction: false,
              pauseOnMouseEnter: true
            }}
            pagination={{
              clickable: true,
              el: '.stories-pagination',
              bulletClass: 'stories-bullet',
              bulletActiveClass: 'stories-bullet-active'
            }}
            navigation={{
              nextEl: '.stories-button-next',
              prevEl: '.stories-button-prev',
            }}
            loop={true}
            grabCursor={true}
            speed={800}
            onSlideChange={(swiper) => setActiveStory(swiper.realIndex)}
            className="pb-16"
          >
            {stories.map((story) => (
              <SwiperSlide key={story.id}>
                <div 
                  className="group relative bg-white rounded-2xl overflow-hidden border border-gray-200 hover:border-teal-600 transition-all duration-500 hover:transform hover:-translate-y-2 shadow-lg hover:shadow-xl"
                >
                  {/* Image Section with increased height */}
                  <div className="relative h-80 overflow-hidden">
                    <Image
                      src={getImageUrl(story.image)}
                      alt={story.alt_text || 'Success Story'}
                      fill
                      className="object-contain"
                    />
                    {/* linear Overlay */}
                    <div className="absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent"></div>
                    
                    {/* Featured Badge */}
                    {story.is_featured && (
                      <div className="absolute top-4 right-4 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 px-3 py-1 rounded-full text-sm font-semibold flex items-center space-x-1 shadow-lg">
                        <Award className="w-4 h-4" />
                        <span>Featured</span>
                      </div>
                    )}

                    {/* Date Badge */}
                    <div className="absolute bottom-4 left-4 bg-white/90 backdrop-blur-sm px-4 py-2 rounded-xl shadow-lg">
                      <div className="flex items-center space-x-2">
                        <Calendar className="w-4 h-4 text-teal-600" />
                        <span className="font-semibold text-gray-900">
                          {getShortDate(story.story_date)}
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* Content Section */}
                  <div className="p-6">
                    {/* Header */}
                    <div className="flex items-center space-x-3 mb-4">
                      <div className="w-12 h-12 bg-linear-to-r from-teal-600 to-blue-500 rounded-full flex items-center justify-center shadow-lg">
                        <Quote className="w-6 h-6 text-white" />
                      </div>
                      <div>
                        <h3 className="text-lg font-bold text-gray-900">Success Story</h3>
                        <p className="text-teal-600 text-sm font-medium">
                          {getShortDate(story.story_date)}
                        </p>
                      </div>
                    </div>
                  </div>

                  {/* Hover Effect */}
                  <div className="absolute inset-0 bg-linear-to-br from-teal-600/5 to-blue-500/5 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-2xl pointer-events-none"></div>
                </div>
              </SwiperSlide>
            ))}
          </Swiper>

          {/* Custom Pagination */}
          <div className="stories-pagination flex justify-center space-x-2 mt-8"></div>

          {/* Navigation Buttons */}
          <div className="flex justify-center items-center space-x-4 mt-8">
            <button className="stories-button-prev w-12 h-12 rounded-full bg-white shadow-lg flex items-center justify-center text-teal-600 hover:bg-teal-600 hover:text-white transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-teal-600/20 group">
              <svg className="w-6 h-6 transform group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
              </svg>
            </button>
            
            <div className="text-sm text-gray-600 font-medium">
              {activeStory + 1} / {stories.length}
            </div>
            
            <button className="stories-button-next w-12 h-12 rounded-full bg-white shadow-lg flex items-center justify-center text-teal-600 hover:bg-teal-600 hover:text-white transition-all duration-300 focus:outline-none focus:ring-4 focus:ring-teal-600/20 group">
              <svg className="w-6 h-6 transform group-hover:scale-110" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
              </svg>
            </button>
          </div>
        </div>

        {/* CTA Section */}
        <div className="text-center mt-16">
          <div className="bg-linear-to-r from-teal-600 to-blue-500 rounded-2xl p-12 max-w-4xl mx-auto shadow-xl">
            <h3 className="text-3xl font-bold text-white mb-6">Start Your Success with International Education Services</h3>
            <p className="text-white/90 text-lg mb-8 max-w-4xl mx-auto">
              Join the Universities Page (Top Study Abroad Consultants in Pakistan) and begin your journey to academic success with our international education services. Connect with a community of successful students, explore Higher Education Abroad opportunities, and get expert guidance to choose the right programs, secure Student Visa & Admission Services, and achieve your study abroad dreams.
            </p>
            <div className="flex flex-col sm:flex-row gap-6 justify-center items-center">
              <Link href={"/success-stories"}>
                <button className="px-8 py-4 cursor-pointer bg-white text-teal-600 font-semibold rounded-2xl hover:bg-gray-100 transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 shadow-lg">
                  Begin Your Journey
                </button>
              </Link>
              <Link href="/contact-us">
                <button className="px-8 py-4 bg-transparent border-2 border-white text-white font-semibold rounded-2xl hover:bg-white hover:text-teal-600 transition-all duration-300 transform hover:-translate-y-1 hover:scale-105">
                  Contact Us
                </button>
              </Link>
            </div>
          </div>
        </div>
      </div>

      <style jsx>{`
        .stories-bullet {
          display: inline-block;
          width: 12px;
          height: 12px;
          background: #E5E7EB;
          border-radius: 50%;
          margin: 0 4px;
          cursor: pointer;
          transition: all 0.3s ease;
        }
        
        .stories-bullet-active {
          background: linear-linear(135deg, #0d9488, #3b82f6);
          transform: scale(1.2);
        }
        
        .swiper-pagination {
          position: relative;
          margin-top: 2rem;
        }
      `}</style>
    </section>
  );
};

export default SuccessStories;