import React, { useEffect } from 'react';
import { motion, AnimatePresence } from 'motion/react';
import { X } from 'lucide-react';

interface TeamMember {
  name: string;
  role: string;
  image: string;
  fullBio?: string;
  experience?: string;
  expertise?: string[];
  education?: string;
  achievements?: string[];
  clientWork?: string;
  boardRoles?: string;
}

interface TeamMemberModalProps {
  member: TeamMember | null;
  isOpen: boolean;
  onClose: () => void;
}

export function TeamMemberModal({ member, isOpen, onClose }: TeamMemberModalProps) {
  // Prevent background scroll when modal is open
  useEffect(() => {
    if (isOpen) {
      // Disable body scroll
      document.body.style.overflow = 'hidden';
      document.body.style.height = '100%';
    } else {
      // Re-enable body scroll
      document.body.style.overflow = '';
      document.body.style.height = '';
    }

    // Cleanup function to restore scroll on unmount
    return () => {
      document.body.style.overflow = '';
      document.body.style.height = '';
    };
  }, [isOpen]);

  // Handle escape key press
  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isOpen) {
        onClose();
      }
    };

    if (isOpen) {
      document.addEventListener('keydown', handleEscape);
    }

    return () => {
      document.removeEventListener('keydown', handleEscape);
    };
  }, [isOpen, onClose]);

  if (!member) return null;

  return (
    <AnimatePresence>
      {isOpen && (
        <>
          {/* Overlay */}
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 team-member-modal-overlay z-[9998]"
            onClick={onClose}
            style={{ zIndex: 9998 }}
          />
          
          {/* Modal */}
          <div 
            className="fixed inset-0 flex items-center justify-center p-4 z-[9999]"
            style={{ zIndex: 9999 }}
          >
            <motion.div
              initial={{ opacity: 0, scale: 0.95, y: 20 }}
              animate={{ opacity: 1, scale: 1, y: 0 }}
              exit={{ opacity: 0, scale: 0.95, y: 20 }}
              transition={{ duration: 0.3, ease: [0.4, 0, 0.2, 1] }}
              className="relative w-full max-w-6xl xl:max-w-5xl lg:max-w-4xl md:max-w-3xl sm:max-w-full max-h-[70vh] lg:max-h-[75vh] md:max-h-[80vh] sm:max-h-[85vh] overflow-hidden team-member-modal-container rounded-2xl"
              style={{ backgroundColor: '#FFFFFF' }}
              onClick={(e) => e.stopPropagation()}
            >
              {/* Modal Content */}
              <div 
                className="rounded-2xl overflow-hidden"
                style={{ 
                  backgroundColor: '#FFFFFF'
                }}
              >
                {/* Close Button */}
                <button
                  onClick={onClose}
                  className="absolute top-4 right-4 md:top-6 md:right-6 z-10 w-10 h-10 md:w-12 md:h-12 bg-white/90 hover:bg-white rounded-full flex items-center justify-center transition-all duration-200 shadow-lg hover:shadow-xl"
                  style={{ color: '#26231A' }}
                  aria-label="Close modal"
                >
                  <X size={20} className="md:w-6 md:h-6" />
                </button>

                <div className="overflow-y-auto max-h-[70vh] lg:max-h-[75vh] md:max-h-[80vh] sm:max-h-[85vh] team-member-modal-scroll">
                  {/* Header Section */}
                  <div className="relative p-6 md:p-8 lg:p-12 rounded-t-2xl" style={{ backgroundColor: '#FFFFFF' }}>
                    <div className="flex flex-col lg:flex-row gap-8 lg:gap-12">
                      {/* Profile Image */}
                      <div className="flex-shrink-0">
                        <div className="w-32 h-32 lg:w-40 lg:h-40 rounded-2xl overflow-hidden shadow-lg">
                          <img
                            src={member.image}
                            alt={member.name}
                            className="w-full h-full object-cover"
                          />
                        </div>
                      </div>

                      {/* Basic Info */}
                      <div className="flex-1">
                        <h2 
                          className="text-h2 mb-3"
                          style={{ 
                            fontFamily: 'var(--font-family-base)',
                            color: '#26231A'
                          }}
                        >
                          {member.name}
                        </h2>
                        <p 
                          className="text-h4 mb-6"
                          style={{ 
                            fontFamily: 'var(--font-family-base)',
                            color: '#04045B'
                          }}
                        >
                          {member.role}
                        </p>
                        
                        {member.experience && (
                          <div className="mb-6">
                            <h4 
                              className="text-body-lg mb-2"
                              style={{ 
                                fontFamily: 'var(--font-family-base)',
                                color: '#26231A',
                                fontWeight: '600'
                              }}
                            >
                              Experience Overview
                            </h4>
                            <p 
                              className="text-body leading-relaxed"
                              style={{ 
                                fontFamily: 'var(--font-family-base)',
                                color: '#6F6F6F'
                              }}
                            >
                              {member.experience}
                            </p>
                          </div>
                        )}
                      </div>
                    </div>
                  </div>

                  {/* Detailed Content */}
                  <div className="px-6 md:px-8 lg:px-12 pb-6 md:pb-8 lg:pb-12 rounded-b-2xl">
                    {/* Full Bio */}
                    {member.fullBio && (
                      <div className="mb-8">
                        <h3 
                          className="text-h4 mb-4"
                          style={{ 
                            fontFamily: 'var(--font-family-base)',
                            color: '#26231A'
                          }}
                        >
                          Professional Background
                        </h3>
                        <div 
                          className="text-body leading-relaxed space-y-4"
                          style={{ 
                            fontFamily: 'var(--font-family-base)',
                            color: '#26231A'
                          }}
                        >
                          {member.fullBio.split('\n\n').map((paragraph, index) => (
                            <p key={index}>{paragraph}</p>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* Expertise Areas */}
                    {member.expertise && member.expertise.length > 0 && (
                      <div className="mb-8">
                        <h3 
                          className="text-h4 mb-4"
                          style={{ 
                            fontFamily: 'var(--font-family-base)',
                            color: '#26231A'
                          }}
                        >
                          Areas of Expertise
                        </h3>
                        <div className="flex flex-wrap gap-3">
                          {member.expertise.map((skill, index) => (
                            <span
                              key={index}
                              className="px-4 py-2 rounded-lg text-small"
                              style={{
                                backgroundColor: 'rgba(4, 4, 91, 0.1)',
                                color: '#04045B',
                                fontFamily: 'var(--font-family-base)',
                                fontWeight: '500'
                              }}
                            >
                              {skill}
                            </span>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* Achievements */}
                    {member.achievements && member.achievements.length > 0 && (
                      <div className="mb-8">
                        <h3 
                          className="text-h4 mb-4"
                          style={{ 
                            fontFamily: 'var(--font-family-base)',
                            color: '#26231A'
                          }}
                        >
                          Key Achievements
                        </h3>
                        <div className="space-y-3">
                          {member.achievements.map((achievement, index) => (
                            <div key={index} className="flex items-start gap-3">
                              <div 
                                className="w-2 h-2 rounded-full mt-2 flex-shrink-0"
                                style={{ backgroundColor: '#F8C301' }}
                              />
                              <p 
                                className="text-body"
                                style={{ 
                                  fontFamily: 'var(--font-family-base)',
                                  color: '#26231A'
                                }}
                              >
                                {achievement}
                              </p>
                            </div>
                          ))}
                        </div>
                      </div>
                    )}

                    {/* Client Work */}
                    {member.clientWork && (
                      <div className="mb-8">
                        <h3 
                          className="text-h4 mb-4"
                          style={{ 
                            fontFamily: 'var(--font-family-base)',
                            color: '#26231A'
                          }}
                        >
                          Client Portfolio
                        </h3>
                        <p 
                          className="text-body leading-relaxed"
                          style={{ 
                            fontFamily: 'var(--font-family-base)',
                            color: '#26231A'
                          }}
                        >
                          {member.clientWork}
                        </p>
                      </div>
                    )}

                    {/* Board Roles */}
                    {member.boardRoles && (
                      <div className="mb-8">
                        <h3 
                          className="text-h4 mb-4"
                          style={{ 
                            fontFamily: 'var(--font-family-base)',
                            color: '#26231A'
                          }}
                        >
                          Board Positions & Leadership Roles
                        </h3>
                        <p 
                          className="text-body leading-relaxed"
                          style={{ 
                            fontFamily: 'var(--font-family-base)',
                            color: '#26231A'
                          }}
                        >
                          {member.boardRoles}
                        </p>
                      </div>
                    )}

                    {/* Education */}
                    {member.education && (
                      <div className="mb-8">
                        <h3 
                          className="text-h4 mb-4"
                          style={{ 
                            fontFamily: 'var(--font-family-base)',
                            color: '#26231A'
                          }}
                        >
                          Education & Qualifications
                        </h3>
                        <p 
                          className="text-body leading-relaxed"
                          style={{ 
                            fontFamily: 'var(--font-family-base)',
                            color: '#26231A'
                          }}
                        >
                          {member.education}
                        </p>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            </motion.div>
          </div>
        </>
      )}
    </AnimatePresence>
  );
}