// app/students/components/StudentModal.jsx
'use client';

import React, { useState } from 'react';
import { 
  X, 
  MapPin, 
  GraduationCap, 
  DollarSign, 
  Globe, 
  Clock,
  Award,
  Users,
  BookOpen,
  Calendar,
  CheckCircle,
  Briefcase,
  Sparkles,
  ChevronDown,
  ChevronUp,
  Target,
  Shield,
  Star,
  TrendingUp
} from 'lucide-react';
import Image from 'next/image';

const StudentModal = ({ student, isOpen, onClose, onBookAppointment }) => {
  const [showFullAbout, setShowFullAbout] = useState(false);
  const [showFullExperience, setShowFullExperience] = useState(false);
  
  if (!isOpen) return null;

  // Get the complete image URL with AWS S3 prefix
  const getImageUrl = (imagePath) => {
    if (!imagePath) return '/assets/default-university.webp';
    
    // Check if it already has the full URL
    if (imagePath.startsWith('http')) {
      return imagePath;
    }
    
    // Check if it starts with a slash
    const cleanPath = imagePath.startsWith('/') ? imagePath.slice(1) : imagePath;
    
    // Return the complete AWS S3 URL
    return `https://${process.env.NEXT_PUBLIC_AWS_BUCKET}.s3.${process.env.NEXT_PUBLIC_AWS_DEFAULT_REGION}.amazonaws.com/${cleanPath}`;
  };

  const getEducationLabel = (education) => {
    const labels = {
      high_school: 'High School',
      bachelors: "Bachelor's",
      masters: "Master's",
      phd: 'PhD',
      diploma: 'Diploma',
      certificate: 'Certificate'
    };
    return labels[education] || education;
  };

  const getEducationIcon = (education) => {
    const icons = {
      high_school: '🏫',
      bachelors: '🎓',
      masters: '📚',
      phd: '👨‍🎓',
      diploma: '📜',
      certificate: '📃'
    };
    return icons[education] || '🎓';
  };

  const getGenderIcon = (gender) => {
    const icons = {
      male: '👨',
      female: '👩',
      other: '👤'
    };
    return icons[gender] || '👤';
  };

  // Function to truncate text with show more/less
  const renderTextWithToggle = (text, isExpanded, onToggle, maxLength = 200) => {
    if (!text) return null;
    
    const shouldTruncate = text.length > maxLength && !isExpanded;
    const displayText = shouldTruncate ? `${text.substring(0, maxLength)}...` : text;
    
    return (
      <div className="relative">
        <div className="prose prose-gray max-w-none">
          <p className="text-gray-700 leading-relaxed whitespace-pre-line">
            {displayText}
          </p>
        </div>
        {text.length > maxLength && (
          <button
            onClick={onToggle}
            className="mt-3 text-teal-600 hover:text-teal-700 font-medium flex items-center gap-1 transition-colors"
          >
            {isExpanded ? (
              <>
                Show Less <ChevronUp className="w-4 h-4" />
              </>
            ) : (
              <>
                Read More <ChevronDown className="w-4 h-4" />
              </>
            )}
          </button>
        )}
      </div>
    );
  };

  return (
    <div className="fixed inset-0 z-50 overflow-y-auto">
      {/* Backdrop */}
      <div 
        className="fixed inset-0 bg-black/80 backdrop-blur-lg transition-opacity"
        onClick={onClose}
      />
      
      {/* Modal Container */}
      <div className="flex items-start justify-center min-h-full p-4">
        <div className="relative bg-gradient-to-br from-white to-gray-50/50 rounded-3xl shadow-2xl w-full max-w-5xl max-h-[85vh] flex flex-col overflow-hidden backdrop-blur-sm border border-white/20">
          {/* Header with Gradient Background */}
          <div className="relative shrink-0">
            <div 
              className="h-48 w-full relative overflow-hidden"
              style={{
                background: 'linear-gradient(135deg, #0B6F78 0%, #0a306b 100%)'
              }}
            >
              {/* Pattern Overlay */}
              <div className="absolute inset-0 opacity-10">
                <div className="absolute top-0 left-0 w-64 h-64 bg-white rounded-full -translate-x-1/2 -translate-y-1/2"></div>
                <div className="absolute bottom-0 right-0 w-96 h-96 bg-white rounded-full translate-x-1/3 translate-y-1/3"></div>
              </div>
              
              {/* Close Button */}
              <button
                onClick={onClose}
                className="absolute top-6 right-6 z-20 w-10 h-10 bg-white/10 hover:bg-white/20 backdrop-blur-sm rounded-full flex items-center justify-center text-white transition-all hover:scale-110 border border-white/20"
              >
                <X className="w-6 h-6" />
              </button>
            </div>
            
            {/* Profile Header Section - Image + Name/Status Side by Side */}
            <div className="absolute -bottom-[1px] left-8 right-8 z-20">
              <div className="flex items-end gap-6">
                {/* Profile Image */}
                <div className="relative group">
                  <div className="relative w-32 h-32 rounded-2xl overflow-hidden border-4 border-white shadow-2xl transform group-hover:scale-105 transition-transform duration-300">
                    <div className="absolute inset-0 bg-gradient-to-br from-teal-500/20 to-blue-500/20 mix-blend-overlay"></div>
                    <Image
                      src={getImageUrl(student.profile_picture)}
                      alt={student.name}
                      fill
                      className="object-cover"
                      sizes="(max-width: 128px) 100vw, 128px"
                      priority
                    />
                  </div>
                  
                  {/* Education Icon Badge */}
                  <div className="absolute -bottom-2 -right-2 w-12 h-12 bg-gradient-to-br from-amber-500 to-amber-600 rounded-full border-4 border-white shadow-lg flex items-center justify-center">
                    <span className="text-xl">
                      {getEducationIcon(student.last_education)}
                    </span>
                  </div>
                </div>

                {/* Name and Status Section - To the RIGHT of image */}
                <div className="flex-1 pb-4">
                  <div className="mb-3">
                    <span className="text-white/80 text-sm">
                      Student Profile
                    </span>
                  </div>
                  
                  <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
                    <div>
                      <h2 className="text-3xl font-bold text-white mb-2">
                        {student.name}
                      </h2>
                      <div className="flex flex-wrap items-center gap-3">
                        {student.is_active && (
                          <span className="flex items-center gap-1 bg-green-500/90 text-white text-sm font-medium px-3 py-1.5 rounded-full backdrop-blur-sm">
                            <CheckCircle className="w-4 h-4" />
                            Active & Available
                          </span>
                        )}
                        {student.is_active && (
                          <span className="flex items-center gap-1 bg-blue-500/90 text-white text-sm font-medium px-3 py-1.5 rounded-full backdrop-blur-sm">
                            <Award className="w-4 h-4" />
                            Verified Account
                          </span>
                        )}
                      </div>
                    </div>
                    
                    {/* Quick Location Info */}
                    <div className="hidden lg:block">
                      <div className="flex items-center gap-2 text-white/90">
                        <MapPin className="w-5 h-5" />
                        <div className="text-right">
                          <div className="font-medium">{student.country_name}</div>
                          {student.city && (
                            <div className="text-sm text-white/80">{student.city}</div>
                          )}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {/* Main Content - SCROLLABLE AREA */}
          <div className="flex-1 overflow-y-auto">
            <div className="pt-10 pb-8 px-8">
              <div className="flex flex-col lg:flex-row gap-8">
                {/* Left Column - Profile Details */}
                <div className="lg:w-2/5">
                  <div className="space-y-8">
                    {/* Mobile Location Info (hidden on desktop) */}
                    <div className="lg:hidden bg-gradient-to-br from-white to-gray-50 rounded-2xl p-6 shadow-lg border border-gray-100">
                      <div className="flex items-center gap-3">
                        <div className="w-10 h-10 bg-teal-100 rounded-lg flex items-center justify-center flex-shrink-0">
                          <MapPin className="w-5 h-5 text-teal-600" />
                        </div>
                        <div>
                          <div className="text-sm text-gray-500">Location</div>
                          <div className="font-medium text-gray-900">
                            {student.city ? `${student.city}, ${student.country_name}` : student.country_name}
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Quick Stats Cards */}
                    <div className="grid grid-cols-2 gap-4">
                      <div className="bg-gradient-to-br from-white to-gray-50 rounded-2xl p-4 shadow-lg border border-gray-100">
                        <div className="flex items-center gap-3">
                          <div className="w-10 h-10 bg-gradient-to-br from-teal-100 to-teal-50 rounded-xl flex items-center justify-center">
                            <DollarSign className="w-5 h-5 text-teal-600" />
                          </div>
                          <div>
                            <div className="text-sm text-gray-500">Hourly Rate</div>
                            <div className="text-xl font-bold text-gray-900">
                              ${student.hour_rate}
                              <span className="text-sm font-normal text-gray-600"> /hr</span>
                            </div>
                          </div>
                        </div>
                      </div>

                      <div className="bg-gradient-to-br from-white to-gray-50 rounded-2xl p-4 shadow-lg border border-gray-100">
                        <div className="flex items-center gap-3">
                          <div className="w-10 h-10 bg-gradient-to-br from-amber-100 to-amber-50 rounded-xl flex items-center justify-center">
                            <span className="text-lg">
                              {getGenderIcon(student.gender)}
                            </span>
                          </div>
                          <div>
                            <div className="text-sm text-gray-500">Gender</div>
                            <div className="text-xl font-bold text-gray-900 capitalize">
                              {student.gender}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* Student Details Card */}
                    <div className="bg-gradient-to-br from-white to-gray-50 rounded-2xl p-6 shadow-lg border border-gray-100">
                      <h3 className="text-lg font-semibold text-gray-900 mb-4 flex items-center gap-2">
                        <Sparkles className="w-5 h-5 text-teal-600" />
                        Student Details
                      </h3>
                      
                      <div className="space-y-4">
                        <div className="flex items-center gap-3 p-3 bg-gray-50/50 rounded-xl hover:bg-gray-50 transition-colors">
                          <div className="w-10 h-10 bg-teal-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <GraduationCap className="w-5 h-5 text-teal-600" />
                          </div>
                          <div className="flex-1 min-w-0">
                            <div className="text-sm text-gray-500">Education Level</div>
                            <div className="font-medium text-gray-900">
                              {getEducationLabel(student.last_education)}
                            </div>
                          </div>
                        </div>

                        <div className="flex items-center gap-3 p-3 bg-gray-50/50 rounded-xl hover:bg-gray-50 transition-colors">
                          <div className="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <Globe className="w-5 h-5 text-blue-600" />
                          </div>
                          <div className="flex-1 min-w-0">
                            <div className="text-sm text-gray-500">Timezone</div>
                            <div className="font-medium text-gray-900">
                              {student.timezone}
                            </div>
                          </div>
                        </div>

                        <div className="flex items-center gap-3 p-3 bg-gray-50/50 rounded-xl hover:bg-gray-50 transition-colors">
                          <div className="w-10 h-10 bg-amber-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <Clock className="w-5 h-5 text-amber-600" />
                          </div>
                          <div className="flex-1 min-w-0">
                            <div className="text-sm text-gray-500">Availability</div>
                            <div className="font-medium text-gray-900">
                              {student.is_active ? 'Available Now' : 'Not Available'}
                            </div>
                          </div>
                        </div>

                        <div className="flex items-center gap-3 p-3 bg-gray-50/50 rounded-xl hover:bg-gray-50 transition-colors">
                          <div className="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center flex-shrink-0">
                            <Star className="w-5 h-5 text-purple-600" />
                          </div>
                          <div className="flex-1 min-w-0">
                            <div className="text-sm text-gray-500">Profile Status</div>
                            <div className="font-medium">
                              {student.is_active ? (
                                <span className="text-green-700 bg-green-100 px-3 py-1 rounded-full text-sm">
                                  Fully Verified
                                </span>
                              ) : (
                                <span className="text-amber-700 bg-amber-100 px-3 py-1 rounded-full text-sm">
                                  Pending Verification
                                </span>
                              )}
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    
                  </div>
                </div>

                {/* Right Column - About & Experience */}
                <div className="lg:w-3/5">
                  <div className="space-y-8">
                    {/* About Me Section */}
                    <div className="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
                      <div className="p-6">
                        <h3 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-3">
                          <div className="w-10 h-10 bg-gradient-to-br from-teal-100 to-teal-50 rounded-xl flex items-center justify-center">
                            <Users className="w-5 h-5 text-teal-600" />
                          </div>
                          <span>About Me</span>
                        </h3>
                        
                        <div className="mt-4">
                          {renderTextWithToggle(
                            student.about_me || 'No description provided.',
                            showFullAbout,
                            () => setShowFullAbout(!showFullAbout)
                          )}
                        </div>
                        
                        {!student.about_me && (
                          <div className="text-center py-8 text-gray-500">
                            <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
                              <Users className="w-8 h-8 text-gray-400" />
                            </div>
                            <p>This student hasn't added an about me section yet.</p>
                          </div>
                        )}
                      </div>
                    </div>

                    {/* Experience Section */}
                    {student.experience && (
                      <div className="bg-gradient-to-br from-white to-gray-50 rounded-2xl shadow-lg border border-gray-100 overflow-hidden">
                        <div className="p-6">
                          <h3 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-3">
                            <div className="w-10 h-10 bg-gradient-to-br from-amber-100 to-amber-50 rounded-xl flex items-center justify-center">
                              <Briefcase className="w-5 h-5 text-amber-600" />
                            </div>
                            <span>Experience & Background</span>
                          </h3>
                          
                          <div className="mt-4">
                            {renderTextWithToggle(
                              student.experience,
                              showFullExperience,
                              () => setShowFullExperience(!showFullExperience)
                            )}
                          </div>
                        </div>
                      </div>
                    )}

                    {/* Performance Metrics */}
                    <div className="grid grid-cols-3 gap-4">
                      <div className="text-center p-4 bg-gradient-to-br from-teal-50 to-teal-100/50 rounded-2xl border border-teal-100">
                        <div className="text-2xl font-bold text-teal-700">95%</div>
                        <div className="text-sm text-teal-600 mt-1">Success Rate</div>
                      </div>
                      <div className="text-center p-4 bg-gradient-to-br from-amber-50 to-amber-100/50 rounded-2xl border border-amber-100">
                        <div className="text-2xl font-bold text-amber-700">4.8</div>
                        <div className="text-sm text-amber-600 mt-1">Avg Rating</div>
                      </div>
                      <div className="text-center p-4 bg-gradient-to-br from-blue-50 to-blue-100/50 rounded-2xl border border-blue-100">
                        <div className="text-2xl font-bold text-blue-700">50+</div>
                        <div className="text-sm text-blue-600 mt-1">Sessions</div>
                      </div>
                    </div>

                    {/* Book Appointment Button */}
                    <button
                      onClick={onBookAppointment}
                      disabled={!student.is_active}
                      className={`w-full py-4 rounded-2xl font-bold text-lg transition-all duration-300 flex items-center justify-center gap-3 shadow-xl hover:shadow-2xl transform hover:-translate-y-0.5 ${
                        student.is_active
                          ? 'bg-gradient-to-r from-teal-600 via-teal-700 to-teal-800 text-white hover:from-teal-700 hover:via-teal-800 hover:to-teal-900 cursor-pointer'
                          : 'bg-gradient-to-r from-gray-300 to-gray-400 text-gray-500 cursor-not-allowed'
                      }`}
                    >
                      <div className="relative">
                        <Calendar className="w-6 h-6" />
                        {student.is_active && (
                          <div className="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
                        )}
                      </div>
                      Book Appointment
                      {student.is_active && (
                        <span className="ml-1 text-sm font-normal bg-white/20 px-2 py-1 rounded-full">
                          ${student.hour_rate}/hr
                        </span>
                      )}
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default StudentModal;