'use client';
import React, { useState, useRef } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay, Navigation, Pagination, EffectCoverflow } from 'swiper/modules';
import { useRouter } from 'next/navigation';
import { useSearch } from '../../context/SearchContext';
import { FaSearch, FaMapMarkerAlt, FaStar, FaUsers, FaGraduationCap, FaArrowRight } from 'react-icons/fa';
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/effect-coverflow';

const countries = [
  { 
    name: 'United States', 
    flag: 'https://flagcdn.com/w320/us.png',
    students: '50,000+',
    universities: '500+',
    rating: 4.9,
    popular: 'MBA, Engineering'
  },
  { 
    name: 'United Kingdom', 
    flag: 'https://flagcdn.com/w320/gb.png',
    students: '35,000+',
    universities: '300+',
    rating: 4.8,
    popular: 'Business, Law'
  },
  { 
    name: 'Canada', 
    flag: 'https://flagcdn.com/w320/ca.png',
    students: '25,000+',
    universities: '200+',
    rating: 4.9,
    popular: 'Computer Science, Healthcare'
  },
  { 
    name: 'Germany', 
    flag: 'https://flagcdn.com/w320/de.png',
    students: '15,000+',
    universities: '120+',
    rating: 4.8,
    popular: 'Engineering, Medicine'
  },
  { 
    name: 'France', 
    flag: 'https://flagcdn.com/w320/fr.png',
    students: '12,000+',
    universities: '100+',
    rating: 4.6,
    popular: 'Business, Arts'
  },
  { 
    name: 'Japan', 
    flag: 'https://flagcdn.com/w320/jp.png',
    students: '8,000+',
    universities: '80+',
    rating: 4.7,
    popular: 'Technology, Engineering'
  },
  { 
    name: 'Malaysia', 
    flag: 'https://flagcdn.com/w320/my.png',
    students: '10,000+',
    universities: '60+',
    rating: 4.5,
    popular: 'Business, IT'
  },
  { 
    name: 'China', 
    flag: 'https://flagcdn.com/w320/cn.png',
    students: '18,000+',
    universities: '90+',
    rating: 4.6,
    popular: 'Engineering, Medicine'
  },
  { 
    name: 'New Zealand', 
    flag: 'https://flagcdn.com/w320/nz.png',
    students: '7,000+',
    universities: '40+',
    rating: 4.8,
    popular: 'Agriculture, Tourism'
  },
];

const CountryList = () => {
  const router = useRouter();
  const { setSelectedCountry, setSelectedType } = useSearch();
  const [activeCountry, setActiveCountry] = useState(null);
  const swiperRef = useRef(null);

  const handleCountryClick = (country) => {
    setSelectedCountry(country.name);
    setSelectedType('country');
    const slug = encodeURIComponent(country.name);
    router.push(`/search?type=university&country=${slug}`);
  };

  const handleQuickView = (country, event) => {
    event.stopPropagation();
    setActiveCountry(activeCountry?.name === country.name ? null : country);
  };

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

      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        {/* Enhanced Header Section */}
        <div className="text-center mb-16">
          <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-linear-to-r from-teal-600 to-blue-500 mb-6 shadow-lg">
            <FaMapMarkerAlt className="w-6 h-6 text-white" />
          </div>
          
          <h2 className="text-2xl md:text-2xl lg:text-3xl font-bold text-gray-900 mb-4 leading-tight">
            Global Study{' '}
            <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
              Destinations
            </span>
          </h2>

          <div className="w-24 h-1 bg-linear-to-r from-teal-600 to-blue-500 mx-auto mb-6 rounded-full"></div>
          
          <p className="text-lg md:text-xl text-gray-600 max-w-6xl mx-auto leading-relaxed">
            Explore over 50 countries offering world-class education, globally recognized universities, and cutting-edge research opportunities, while immersing yourself in vibrant cultures, diverse communities, and exciting career prospects. Benefit from our expert international education services and personalized international education advisory services to find the best study abroad programs, scholarships, and professional pathways tailored just for you.
          </p>

          {/* Quick Stats with teal color */}
          <div className="flex flex-wrap justify-center gap-8 mt-8">
            {[
              { number: '20+', label: 'Countries' },
              { number: '1,500+', label: 'Universities' },
              { number: '10,000+', label: 'Students Placed' },
              { number: '98%', label: 'Success Rate' }
            ].map((stat, index) => (
              <div key={index} className="text-center">
                <div className="text-2xl md:text-3xl font-bold text-teal-600">{stat.number}</div>
                <div className="text-sm text-gray-600 font-medium">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>

        {/* Enhanced Swiper Container */}
        <div className="relative max-w-7xl mx-auto">
          {/* Navigation Buttons - Desktop */}
          <div className="hidden lg:flex justify-between items-center absolute top-1/2 -translate-y-1/2 left-0 right-0 z-20 pointer-events-none">
            <button 
              className="country-swiper-button-prev w-14 h-14 rounded-full bg-white shadow-2xl flex items-center justify-center text-teal-600 hover:bg-teal-600 hover:text-white transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-teal-600/20 pointer-events-auto group"
              aria-label="Previous countries"
            >
              <svg className="w-6 h-6 transform group-hover:-translate-x-1 transition-transform duration-200" 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>
            <button 
              className="country-swiper-button-next w-14 h-14 rounded-full bg-white shadow-2xl flex items-center justify-center text-teal-600 hover:bg-teal-600 hover:text-white transition-all duration-300 transform hover:scale-110 focus:outline-none focus:ring-4 focus:ring-teal-600/20 pointer-events-auto group"
              aria-label="Next countries"
            >
              <svg className="w-6 h-6 transform group-hover:translate-x-1 transition-transform duration-200" 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>

          <Swiper
            ref={swiperRef}
            modules={[Autoplay, Navigation, Pagination, EffectCoverflow]}
            spaceBetween={20}
            slidesPerView={1}
            breakpoints={{
              480: { slidesPerView: 1.2, spaceBetween: 20 },
              640: { slidesPerView: 2, spaceBetween: 20 },
              768: { slidesPerView: 2.5, spaceBetween: 24 },
              1024: { slidesPerView: 3, spaceBetween: 24 },
              1280: { slidesPerView: 4, spaceBetween: 24 },
              1536: { slidesPerView: 5, spaceBetween: 24 },
            }}
            autoplay={{ 
              delay: 4000,
              disableOnInteraction: false,
              pauseOnMouseEnter: true
            }}
            navigation={{
              nextEl: '.country-swiper-button-next',
              prevEl: '.country-swiper-button-prev',
            }}
            pagination={{
              clickable: true,
              el: '.country-pagination',
              type: 'bullets',
            }}
            effect="coverflow"
            coverflowEffect={{
              rotate: 0,
              stretch: 0,
              depth: 100,
              modifier: 2.5,
              slideShadows: false,
            }}
            loop={true}
            centeredSlides={true}
            grabCursor={true}
            speed={800}
            className="pb-16"
          >
            {countries.map((country, index) => (
              <SwiperSlide key={index}>
                <div
                  className="group relative bg-white rounded-3xl shadow-lg hover:shadow-2xl transition-all duration-500 cursor-pointer overflow-hidden border-2 border-transparent hover:border-teal-600"
                  onClick={() => handleCountryClick(country)}
                >
                  {/* linear Border Effect */}
                  <div className="absolute inset-0 bg-linear-to-r from-teal-600 to-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl -z-10"></div>
                  <div className="absolute inset-0.5 bg-white rounded-3xl z-10"></div>

                  <div className="relative z-20 p-6">
                    {/* Flag and Basic Info */}
                    <div className="flex items-center justify-between mb-4">
                      <div className="flex items-center space-x-4">
                        <div className="relative">
                          <img
                            src={country.flag}
                            alt={country.name}
                            className="w-16 h-16 rounded-2xl object-cover shadow-md border-2 border-white"
                            loading="lazy"
                          />
                          <div className="absolute -bottom-1 -right-1 w-6 h-6 bg-linear-to-r from-teal-600 to-blue-500 rounded-full flex items-center justify-center">
                            <FaStar className="text-white text-xs" />
                          </div>
                        </div>
                        <div>
                          <h3 className="font-bold text-lg text-gray-900 group-hover:text-teal-600 transition-colors">
                            {country.name}
                          </h3>
                          <div className="flex items-center text-sm text-gray-600">
                            <FaStar className="text-yellow-400 mr-1" />
                            <span>{country.rating}</span>
                          </div>
                        </div>
                      </div>
                      
                      {/* Quick View Button */}
                      <button
                        onClick={(e) => handleQuickView(country, e)}
                        className="w-10 h-10 rounded-full bg-teal-50 hover:bg-teal-600 text-teal-600 hover:text-white transition-all duration-300 flex items-center justify-center group/btn"
                        aria-label="Quick view"
                      >
                        <FaSearch className="text-sm group-hover/btn:scale-110 transition-transform" />
                      </button>
                    </div>

                    {/* Quick View Details */}
                    {activeCountry?.name === country.name && (
                      <div className="bg-linear-to-r from-teal-100 to-blue-100 rounded-xl p-4 mb-4 animate-fadeIn">
                        <div className="grid grid-cols-2 gap-3 text-sm">
                          <div className="flex items-center space-x-2">
                            <FaUsers className="text-teal-600 text-xs" />
                            <span className="font-medium text-gray-700">{country.students} Students</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <FaGraduationCap className="text-blue-500 text-xs" />
                            <span className="font-medium text-gray-700">{country.universities} Universities</span>
                          </div>
                        </div>
                        <div className="mt-2 text-xs text-gray-600">
                          Popular: {country.popular}
                        </div>
                      </div>
                    )}

                    {/* Explore Button - Matching hero button style */}
                    <button className="w-full bg-linear-to-r from-teal-600 to-blue-500 text-white py-3 rounded-xl font-semibold hover:shadow-lg transition-all duration-300 transform group-hover:scale-105 flex items-center justify-center space-x-2 shadow-md">
                      <span>Explore Universities</span>
                      <FaArrowRight className="text-sm group-hover:translate-x-1 transition-transform" />
                    </button>
                  </div>

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

          {/* Mobile Pagination */}
          <div className="country-pagination flex justify-center space-x-2 mt-8 lg:hidden"></div>

          {/* Mobile Navigation */}
          <div className="flex justify-center space-x-4 mt-6 lg:hidden">
            <button className="country-swiper-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">
              <svg className="w-5 h-5" 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>
            <button className="country-swiper-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">
              <svg className="w-5 h-5" 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>
      </div>

      <style jsx>{`
        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(-10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        .animate-fadeIn {
          animation: fadeIn 0.3s ease-out;
        }
        
        /* Custom pagination styles */
        :global(.country-pagination .swiper-pagination-bullet) {
          width: 10px;
          height: 10px;
          background: #E5E7EB;
          opacity: 1;
          margin: 0 4px;
          transition: all 0.3s ease;
        }
        
        :global(.country-pagination .swiper-pagination-bullet-active) {
          background: linear-linear(135deg, #0d9488, #3b82f6);
          transform: scale(1.3);
          opacity: 1;
        }
        
        /* Swiper slide active state */
        :global(.swiper-slide-active) {
          transform: scale(1.05);
          z-index: 1;
        }
        
        /* Mobile touch improvements */
        @media (max-width: 768px) {
          :global(.swiper-slide) {
            opacity: 0.7;
            transition: opacity 0.3s ease;
          }
          
          :global(.swiper-slide-active) {
            opacity: 1;
          }
        }
      `}</style>
    </section>
  );
};

export default CountryList;