'use client';
import React, { useState } from 'react';
import { 
  Quote, 
  GraduationCap, 
  Award, 
  Calendar, 
  Star, 
  Users, 
  Globe, 
  Trophy,
  Sparkles,
  ChevronRight,
  ChevronLeft,
  MessageSquare,
  Filter,
  Zap
} from 'lucide-react';
import Image from "next/image";
import Link from 'next/link';
import ModernCard from '../../components/shared/ModernCard';
import StatCard from '../../components/shared/StatCard';

const SuccessStories = ({ stories }) => {
  const [currentPage, setCurrentPage] = useState(1);
  const storiesPerPage = 9;

  const getYear = (dateString) => {
    if (!dateString) return 'N/A';
    try {
      return new Date(dateString).getFullYear();
    } 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}`;
  };

  const featuredStories = stories || [];

  // Calculate pagination
  const indexOfLastStory = currentPage * storiesPerPage;
  const indexOfFirstStory = indexOfLastStory - storiesPerPage;
  const currentStories = featuredStories.slice(indexOfFirstStory, indexOfLastStory);
  const totalPages = Math.ceil(featuredStories.length / storiesPerPage);

  // Handle page change
  const handlePageChange = (pageNumber) => {
    setCurrentPage(pageNumber);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  if (!stories || stories.length === 0) {
    return (
      <div className="min-h-screen bg-linear-to-b from-gray-50 to-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 text-center">
          <div className="inline-flex items-center gap-2 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 px-6 py-3 rounded-full text-sm font-semibold mb-4">
            <Trophy className="w-5 h-5" />
            Success Stories
          </div>
          <h2 className="text-3xl font-bold text-gray-900 mb-4">No Success Stories Available</h2>
          <p className="text-gray-600">Check back soon for inspiring student journeys.</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-linear-to-b from-gray-50 to-white">
      {/* Hero Section */}
      <div className="relative">
        <div className="absolute inset-0 bg-linear-to-r from-teal-50/50 to-blue-50/50"></div>
        
        <div className="absolute top-0 left-0 w-full h-full overflow-hidden">
          {[...Array(20)].map((_, i) => (
            <div
              key={i}
              className="absolute rounded-full bg-linear-to-r from-teal-200/20 to-blue-200/20 animate-float"
              style={{
                width: Math.random() * 100 + 50,
                height: Math.random() * 100 + 50,
                top: `${Math.random() * 100}%`,
                left: `${Math.random() * 100}%`,
                animationDelay: `${Math.random() * 5}s`,
                animationDuration: `${Math.random() * 10 + 10}s`
              }}
            />
          ))}
        </div>

        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 md:py-24">
          <div className="text-center">
            <div className="inline-flex items-center gap-2 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 px-6 py-3 rounded-full text-sm font-semibold mb-6 animate-pulse">
              <Sparkles className="w-5 h-5" />
              Celebrating Student Success
            </div>

            <h1 className="text-4xl md:text-6xl font-bold text-gray-900 mb-6 leading-tight">
              Inspiring{' '}
              <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
                Success Stories
              </span>
            </h1>

            <p className="text-lg md:text-xl text-gray-600 mb-8 max-w-3xl mx-auto leading-relaxed">
              Celebrating the remarkable journeys of students who turned their study abroad dreams into reality
            </p>
          </div>
        </div>
      </div>

      {/* Featured Stories Section */}
      <div className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <div className="inline-flex items-center gap-2 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 px-6 py-3 rounded-full text-sm font-semibold mb-4">
              <GraduationCap className="w-5 h-5" />
              Student Success Stories
            </div>
            <h2 className="text-3xl font-bold text-gray-900 mb-4">
              Real Stories,{' '}
              <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
                Real Success
              </span>
            </h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              Highlighting our most inspiring student achievements and remarkable journeys
            </p>
          </div>

          {/* Stories Grid - 3 columns for 9 items per page */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
            {currentStories.map((story) => (
              <ModernCard key={story.id} className="overflow-hidden group">
                {/* Image Section */}
                <div className="relative h-64 w-full">
                  <Image
                    src={getImageUrl(story.image)}
                    alt={story.alt_text || 'Success Story'}
                    fill
                    className="object-contain"
                  />
                  <div className="absolute inset-0 bg-linear-to-t from-black/50 via-transparent to-transparent"></div>
                  
                  {/* Year Badge */}
                  <div className="absolute bottom-4 left-4">
                    <div className="flex items-center gap-2 bg-white/90 backdrop-blur-sm px-4 py-2 rounded-xl">
                      <Calendar className="w-4 h-4 text-teal-600" />
                      <span className="font-semibold text-gray-900">
                        {getYear(story.story_date)}
                      </span>
                    </div>
                  </div>
                </div>

                {/* Content Section */}
                <div className="p-6">
                  <div className="flex items-center gap-4 mb-4">
                    <div className="p-3 rounded-xl bg-linear-to-r from-teal-50 to-blue-50 border border-teal-100">
                      <Quote className="w-6 h-6 text-teal-600" />
                    </div>
                    <div>
                      <h3 className="text-lg font-bold text-gray-900">Success Story</h3>
                      <p className="text-teal-600 text-sm font-medium">
                        {getYear(story.story_date)}
                      </p>
                    </div>
                  </div>

                  {story.name && (
                    <div className="flex items-center gap-2 text-gray-700 mb-2">
                      <span className="font-medium">Student:</span>
                      <span>{story.name}</span>
                    </div>
                  )}

                  {story.university && (
                    <div className="flex items-center gap-2 text-gray-700 mb-2">
                      <span className="font-medium">University:</span>
                      <span>{story.university}</span>
                    </div>
                  )}

                  {story.country && (
                    <div className="flex items-center gap-2 text-gray-700 mb-4">
                      <span className="font-medium">Country:</span>
                      <span>{story.country}</span>
                    </div>
                  )}

                  {story.description && (
                    <p className="text-gray-600 text-sm line-clamp-3">
                      {story.description}
                    </p>
                  )}
                </div>
              </ModernCard>
            ))}
          </div>

          {/* Pagination */}
          {totalPages > 1 && (
            <div className="flex justify-center mt-12">
              <div className="flex items-center gap-2">
                <button
                  onClick={() => handlePageChange(currentPage - 1)}
                  disabled={currentPage === 1}
                  className="px-4 py-3 rounded-xl border border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 flex items-center font-medium transition"
                >
                  <ChevronLeft className="w-5 h-5 mr-2" />
                  Previous
                </button>
                
                <div className="flex items-center gap-1">
                  {Array.from({ length: totalPages }, (_, i) => i + 1)
                    .filter(page => 
                      page === 1 || 
                      page === totalPages || 
                      Math.abs(page - currentPage) <= 1
                    )
                    .map((page, index, array) => {
                      const showEllipsis = index > 0 && page - array[index - 1] > 1;
                      return (
                        <div key={page} className="flex items-center">
                          {showEllipsis && <span className="px-2 text-gray-400">...</span>}
                          <button
                            onClick={() => handlePageChange(page)}
                            className={`w-12 h-12 rounded-xl font-medium transition ${
                              currentPage === page
                                ? 'bg-linear-to-r from-teal-600 to-blue-500 text-white shadow-lg'
                                : 'border border-gray-300 hover:bg-gray-50 text-gray-700'
                            }`}
                          >
                            {page}
                          </button>
                        </div>
                      );
                    })}
                </div>
                
                <button
                  onClick={() => handlePageChange(currentPage + 1)}
                  disabled={currentPage === totalPages}
                  className="px-4 py-3 rounded-xl border border-gray-300 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 flex items-center font-medium transition"
                >
                  Next
                  <ChevronRight className="w-5 h-5 ml-2" />
                </button>
              </div>
            </div>
          )}

          {/* Page Info */}
          <div className="text-center mt-6 text-gray-600">
            Showing {indexOfFirstStory + 1}-{Math.min(indexOfLastStory, featuredStories.length)} of {featuredStories.length} success stories
          </div>
        </div>
      </div>

      {/* CTA Section */}
      <div className="bg-linear-to-r from-teal-600 to-blue-500 rounded-3xl p-12 text-center max-w-7xl mx-auto my-20">
        <div className="max-w-2xl mx-auto">
          <div className="inline-flex items-center gap-2 bg-white/20 backdrop-blur-sm px-6 py-2 rounded-full mb-6">
            <MessageSquare className="w-5 h-5 text-white" />
            <span className="text-sm font-semibold text-white">Start Your Journey</span>
          </div>
          
          <h2 className="text-3xl font-bold text-white mb-4">
            Ready to Write Your Success Story?
          </h2>
          
          <p className="text-white/80 text-lg mb-8 max-w-xl mx-auto">
            Join thousands of successful students who have transformed their lives through international education.
          </p>
          
          <div className="flex flex-col sm:flex-row gap-4 justify-center">
            <Link 
              href="/free-consultation"
              className="inline-flex items-center justify-center gap-2 bg-white/20 backdrop-blur-sm text-white font-semibold py-3 px-8 rounded-xl hover:bg-white/30 transition-all duration-300"
            >
              <Sparkles className="w-5 h-5" />
              Free Consultation
            </Link>
            
            <Link 
              href="/contact-us"
              className="inline-flex items-center justify-center gap-2 border-2 border-white/30 text-white font-semibold py-3 px-8 rounded-xl hover:bg-white/10 transition-all duration-300"
            >
              <Zap className="w-5 h-5" />
              Contact Our Experts
            </Link>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SuccessStories;