'use client';

import { useState } from 'react';
import Head from 'next/head';
import Image from 'next/image';
import Link from 'next/link';
import { 
  MapPin, 
  BookOpen, 
  GraduationCap, 
  Building,
  ChevronRight,
  Trophy,
  Sparkles,
  Globe,
  Clock,
  Shield,
  Award,
  Users,
  CheckCircle,
  Smartphone,
  Music
} from 'lucide-react';
import FreeConsultationModal from '../../components/organisms/FreeConsultationModal';

// Import Shared Components
import ModernCard from '../../components/shared/ModernCard';
import StatCard from '../../components/shared/StatCard';
import FeatureCard from '../../components/shared/FeatureCard';
import TextDisplay from '../../components/clientcomponents/TextDisplay';

export default function SouthKoreaPage({ serverData, country = "South Korea" }) {
  const [universities, setUniversities] = useState(serverData?.universities || []);
  const [courses, setCourses] = useState(serverData?.courses || []);
  const [countryDescriptions, setCountryDescriptions] = useState(serverData?.countryDescriptions || {
    before_description: "",
    after_description: ""
  });
  const [isConsultationModalOpen, setIsConsultationModalOpen] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

  // If no server data, show error state
  const hasData = serverData && (universities.length > 0 || courses.length > 0);
  const loading = !serverData;

  // Consultation modal functions
  const openConsultationModal = (item = null) => {
    setSelectedItem(item);
    setIsConsultationModalOpen(true);
  };

  const closeConsultationModal = () => {
    setIsConsultationModalOpen(false);
    setSelectedItem(null);
  };

  // Quick facts about studying in South Korea
  const quickFacts = [
    { number: '160,000+', label: 'International Students', icon: Users, color: 'teal' },
    { number: '1,000+', label: 'English Programs', icon: BookOpen, color: 'blue' },
    { number: '70%+', label: 'Scholarship Rate', icon: Award, color: 'emerald' },
    { number: '#10', label: 'Global Education Rank', icon: Trophy, color: 'amber' }
  ];

  return (
    <>
      <Head>
        <title>Study in South Korea - Top Universities & Programs 2024 | UniversitiesPage</title>
        <meta name="description" content="Study in South Korea with expert guidance from UniversitiesPage. Get admission to top Korean universities with scholarship opportunities in technology and innovation." />
      </Head>

      {/* Consultation Modal */}
      <FreeConsultationModal
        isOpen={isConsultationModalOpen}
        onClose={closeConsultationModal}
        title=""
        description={`Get expert guidance about studying in South Korea${selectedItem ? ` at ${selectedItem.university || selectedItem.name}` : ''} - completely free!`}
      />

      {/* Hero Section */}
      <div className="relative min-h-screen bg-linear-to-b from-gray-50 to-white">
        {/* Animated Background */}
        <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>

        {/* Hero Content */}
        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-28">
          <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-8 animate-pulse">
              <Sparkles className="w-5 h-5 text-teal-600" />
              Asia`s Rising Education Powerhouse
            </div>

            <h1 className="text-5xl md:text-7xl font-bold text-gray-900 mb-8 leading-tight">
              Study in{' '}
              <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
                South Korea
              </span>
            </h1>

            <p className="text-xl md:text-2xl text-gray-600 mb-12 max-w-3xl mx-auto leading-relaxed">
              Discover world-class education in one of Asia`s most dynamic nations, where cutting-edge technology meets rich cultural heritage
            </p>

            {/* Quick Facts */}
            <div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12 max-w-4xl mx-auto">
              {quickFacts.map((fact, index) => (
                <StatCard 
                  key={index}
                  Icon={fact.icon}
                  number={fact.number}
                  label={fact.label}
                  color={fact.color}
                />
              ))}
            </div>

            <div className="flex flex-col sm:flex-row gap-4 justify-center">
              <button 
                onClick={() => openConsultationModal()}
                className="bg-linear-to-r from-teal-600 to-blue-500 text-white px-8 py-3 rounded-xl font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center shadow-lg"
              >
                <GraduationCap className="w-5 h-5 mr-2" />
                Start Korea Application
              </button>
              <Link 
                href="#universities" 
                className="border-2 border-teal-600 text-teal-600 px-8 py-3 rounded-xl font-semibold hover:bg-teal-600 hover:text-white transition-all duration-300 flex items-center justify-center"
              >
                Explore Universities
                <ChevronRight className="w-5 h-5 ml-2" />
              </Link>
            </div>
          </div>
        </div>
      </div>

      {/* Before Description Section */}
      {countryDescriptions.before_description && (
        <section className="py-12 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <ModernCard className="p-8">
              <div className="prose prose-lg max-w-none sn-content">
                <TextDisplay 
                  content={countryDescriptions.before_description}
                  className="text-gray-700 leading-relaxed"
                />
              </div>
            </ModernCard>
          </div>
        </section>
      )}

      {/* Popular Universities Section */}
      <section id="universities" className="py-16 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 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 px-6 py-3 rounded-full text-sm font-semibold mb-8">
              <Building className="w-5 h-5 mr-2" />
              TOP UNIVERSITIES IN SOUTH KOREA
            </div>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Premier{' '}
              <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
                Korean Universities
              </span>
            </h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Partner with globally recognized SKY universities and other prestigious institutions
            </p>
          </div>

          {loading ? (
            <div className="text-center py-12">
              <div className="flex justify-center">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-600"></div>
              </div>
              <p className="mt-4 text-gray-600">Loading universities...</p>
            </div>
          ) : !hasData ? (
            <ModernCard className="p-8 text-center">
              <div className="bg-red-50 border border-red-200 rounded-xl p-6 max-w-md mx-auto">
                <p className="text-red-600">Failed to load data. Please refresh the page.</p>
              </div>
            </ModernCard>
          ) : universities.length === 0 ? (
            <ModernCard className="p-8 text-center">
              <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6 max-w-md mx-auto">
                <p className="text-yellow-700">No universities found for South Korea.</p>
              </div>
            </ModernCard>
          ) : (
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
              {universities.map((university, index) => (
                <ModernCard key={university.id} className="overflow-hidden group hover:shadow-lg transition-all duration-300">
                  {/* University Header */}
                  <div className="relative h-40 bg-linear-to-r from-teal-50 to-blue-50 overflow-hidden">
                    <div className="absolute inset-0 flex items-center justify-center p-4">
                      <div className="text-center">
                        <div className="w-20 h-20 bg-white/80 rounded-xl flex items-center justify-center mx-auto mb-3 backdrop-blur-sm overflow-hidden border border-gray-100">
                          <Image
                            src={
                              university.logo
                                ? `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${university.logo}`
                                : "/assets/default-university.webp"
                            }
                            alt={university.name || "University logo"}
                            width={80}
                            height={80}
                            className="object-contain p-3"
                          />
                        </div>
                        <h3 className="font-bold text-gray-900 text-sm leading-tight px-2">
                          {university.name}
                        </h3>
                      </div>
                    </div>
                    <div className="absolute top-3 right-3">
                      <div className="bg-white/90 backdrop-blur-sm px-3 py-1 rounded-full text-xs font-semibold text-teal-600">
                        #{index + 1}
                      </div>
                    </div>
                  </div>

                  {/* University Details */}
                  <div className="p-5">
                    <div className="flex items-center text-xs text-gray-600 mb-3">
                      <MapPin className="w-3 h-3 mr-1 text-gray-400" />
                      <span className="truncate">{university.location || university.city || 'South Korea'}</span>
                    </div>

                    <div className="space-y-2 mb-4">
                      <div className="flex justify-between text-xs">
                        <span className="text-gray-500">Global Ranking:</span>
                        <span className="font-semibold text-teal-600">Top {university.ranking || '500'}</span>
                      </div>
                      <div className="flex justify-between text-xs">
                        <span className="text-gray-500">Programs:</span>
                        <span className="font-semibold text-teal-600">{university.courses_count || 0}+</span>
                      </div>
                      <div className="flex justify-between text-xs">
                        <span className="text-gray-500">Scholarships:</span>
                        <span className="font-semibold text-green-600">{university.scholarship ? "Available" : "Not Available"}</span>
                      </div>
                    </div>

                    <div className="flex gap-2">
                      <Link 
                        href={`/university/${university.slug || university.id}`}
                        className="flex-1 bg-linear-to-r from-teal-600 to-blue-500 text-white text-center py-2.5 rounded-lg text-sm font-semibold hover:shadow-lg transition-all duration-300"
                      >
                        View University
                      </Link>
                      <button 
                        onClick={() => openConsultationModal(university)}
                        className="flex-1 border border-teal-600 text-teal-600 text-center py-2.5 rounded-lg hover:bg-teal-600 hover:text-white transition-all duration-300 text-sm font-semibold"
                      >
                        Consultation
                      </button>
                    </div>
                  </div>
                </ModernCard>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* Popular Courses Section */}
      <section className="py-16 bg-gray-50">
        <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 bg-linear-to-r from-teal-100 to-blue-100 text-teal-700 px-6 py-3 rounded-full text-sm font-semibold mb-8">
              <BookOpen className="w-5 h-5 mr-2" />
              FEATURED COURSES IN SOUTH KOREA
            </div>
            <h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
              Popular{' '}
              <span className="bg-linear-to-r from-teal-600 to-blue-500 bg-clip-text text-transparent">
                Courses
              </span>
            </h2>
            <p className="text-lg text-gray-600 max-w-2xl mx-auto">
              Leading programs in technology, business, and cultural studies that prepare you for global careers
            </p>
          </div>

          {loading ? (
            <div className="text-center py-12">
              <div className="flex justify-center">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-teal-600"></div>
              </div>
              <p className="mt-4 text-gray-600">Loading courses...</p>
            </div>
          ) : !hasData ? (
            <ModernCard className="p-8 text-center">
              <div className="bg-red-50 border border-red-200 rounded-xl p-6 max-w-md mx-auto">
                <p className="text-red-600">Failed to load data. Please refresh the page.</p>
              </div>
            </ModernCard>
          ) : courses.length === 0 ? (
            <ModernCard className="p-8 text-center">
              <div className="bg-yellow-50 border border-yellow-200 rounded-xl p-6 max-w-md mx-auto">
                <p className="text-yellow-700">No courses found for South Korea.</p>
              </div>
            </ModernCard>
          ) : (
            <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
              {courses.map((course, index) => (
                <ModernCard key={course.id} className="overflow-hidden group hover:shadow-lg transition-all duration-300">
                  {/* Course Header */}
                  <div className="relative h-28 bg-white flex items-center justify-center overflow-hidden">
                    <div className="w-20 h-20 bg-linear-to-r from-teal-50 to-blue-50 rounded-xl flex items-center justify-center mx-auto backdrop-blur-sm overflow-hidden border border-gray-100">
                      <Image
                        src={
                          course.university_logo || course.logo
                            ? `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${course.university_logo || course.logo}`
                            : "/assets/default-course.webp"
                        }
                        alt={course.name || "Course image"}
                        width={80}
                        height={80}
                        className="object-contain p-4 transition-transform duration-700 group-hover:scale-110"
                      />
                    </div>
                  </div>

                  {/* Course Content */}
                  <div className="p-5">
                    <h3 className="font-semibold text-gray-900 mb-2 text-sm leading-tight line-clamp-2">
                      {course.name}
                    </h3>
                    
                    <div className="flex items-center text-xs text-gray-600 mb-3">
                      <GraduationCap className="w-3 h-3 mr-1 text-gray-400" />
                      <span className="truncate">{course.university || 'Korean University'}</span>
                    </div>

                    <div className="space-y-2 mb-4">
                      <div className="flex justify-between text-xs">
                        <span className="text-gray-500">Duration:</span>
                        <span className="font-semibold text-teal-600">{course.duration || '4 years'}</span>
                      </div>
                      <div className="flex justify-between text-xs">
                        <span className="text-gray-500">Tuition:</span>
                        <span className="font-semibold text-teal-600">{course.currency_symbol || '₩'}{course.yearly_fee || course.tuition_fee || 'N/A'}/yr</span>
                      </div>
                      <div className="flex justify-between text-xs">
                        <span className="text-gray-500">Scholarship:</span>
                        <span className="font-semibold text-green-600">{course.scholarship ? "Available" : "Not Available"}</span>
                      </div>
                    </div>

                    <div className="flex gap-2">
                      <Link 
                        href={`/${course.university_slug}/${course.slug}`}
                        className="flex-1 bg-linear-to-r from-teal-600 to-blue-500 text-white text-center py-2.5 rounded-lg text-xs font-semibold hover:shadow-lg transition-all duration-300"
                      >
                        View Details
                      </Link>
                      <button 
                        onClick={() => openConsultationModal(course)}
                        className="flex-1 border border-teal-600 text-teal-600 text-center py-2.5 rounded-lg hover:bg-teal-600 hover:text-white transition-all duration-300 text-xs font-semibold"
                      >
                        Consultation
                      </button>
                    </div>
                  </div>
                </ModernCard>
              ))}
            </div>
          )}
        </div>
      </section>

      {/* After Description Section */}
      {countryDescriptions.after_description && (
        <section className="py-12 bg-white">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <ModernCard className="p-8">
              <div className="prose prose-lg max-w-none sn-content">
                <TextDisplay 
                  content={countryDescriptions.after_description}
                  className="text-gray-700 leading-relaxed"
                />
              </div>
            </ModernCard>
          </div>
        </section>
      )}

      {/* CTA Section */}
      <section className="py-16 bg-linear-to-b from-gray-50 to-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="bg-linear-to-r from-teal-600 to-blue-500 rounded-3xl p-8 md:p-12 text-center overflow-hidden relative">
            <div className="relative">
              <h2 className="text-2xl md:text-3xl font-bold text-white mb-4">
                Ready to Begin Your Korean Education Journey?
              </h2>
              <p className="text-white/80 mb-8 max-w-2xl mx-auto">
                Join 160,000+ international students who have achieved their academic dreams in South Korea with our expert guidance
              </p>
              
              <div className="flex flex-col sm:flex-row gap-4 justify-center">
                <button
                  onClick={() => openConsultationModal()}
                  className="bg-white text-teal-600 px-8 py-3 rounded-xl font-semibold hover:shadow-lg transition-all duration-300 transform hover:scale-105 shadow-lg"
                >
                  Get Free Consultation
                </button>
                <Link
                  href="/contact-us"
                  className="bg-white/20 backdrop-blur-sm text-white border-2 border-white/30 px-8 py-3 rounded-xl font-semibold hover:bg-white/30 transition-all duration-300"
                >
                  Contact Expert
                </Link>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}