import React, { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';


import { AnimatePresence, motion } from 'framer-motion';
import { X } from 'lucide-react';
import { IntroFrame } from './IntroFrame';
import { SetupFrame } from './SetupFrame';
import { DetectionFrame } from './DetectionFrame';
import type { FaceRecognitionProps, RegistrationStep } from '../types';
import { ProcessingFrame } from './ProcessingFrame';
import { SuccessFrame } from './SuccessFrame';
import { ErrorFrame } from './ErrorFrame';

interface FaceRegistrationModalProps extends FaceRecognitionProps {
  onClose: () => void;
}


export const FaceRegistrationModal: React.FC<FaceRegistrationModalProps> = ({ onClose , onComplete,
  lang,
  step
}) => {

  const [stepFlow, setStep] = useState<RegistrationStep>('intro');

  const renderContent = () => {

    switch(stepFlow) {
      case 'intro':
        return(
          <IntroFrame setStep={el => setStep(el)}  lang={lang}/>
        )
      case 'setup':
        return(
          <SetupFrame setStep={el => setStep(el)} lang={lang} />
        )
      case 'detection':
        return(
          <DetectionFrame  onComplete={el => onComplete&&onComplete(el)}  lang={lang} />
        )
      case 'processing':
        return(
          <ProcessingFrame lang={lang} />
        )
       case 'success':
        return(
          <SuccessFrame  lang={lang}  />
        )
      case 'error':
        return(
          <ErrorFrame lang={lang} />
        )
    }

  };


  useEffect(()=>{
    if(step){
      setStep(step)
    }
  },[step])

  return createPortal(
    <AnimatePresence>
      <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.9 }}
          className="bg-white rounded-xl shadow-2xl w-full max-w-xl overflow-hidden"
        >
          <div className="relative">
            {stepFlow !== 'detection' && (
              <button 
                onClick={onClose} 
                className="absolute right-4 top-4 text-gray-400 hover:text-gray-600 transition-colors"
                aria-label="Close modal"
              >
                <X className="w-5 h-5" />
              </button>
            )}
            <div className="p-6">
              {renderContent()}
            </div>
          </div>
        </motion.div>
      </div>
    </AnimatePresence>,
    document.body
  );
};