import React, { useState } from 'react';
import { Shield } from 'lucide-react';
import { Button } from './components/ui/Button';
import type { FaceRecognitionProps } from './types';
import { FaceRegistrationModal } from './components';
import { useTranslation } from './i18n/useTranslation';
import { SetupFrame } from './components/SetupFrame';
import { AnimatePresence , motion} from 'framer-motion';
import { createPortal } from 'react-dom';


export const FaceCaptureFlow: React.FC<FaceRecognitionProps> = ({ onComplete, lang }) => {

  const describ = useTranslation(lang)

  const [isModalOpen, setIsModalOpen] = useState(false);
  const openModal = () => setIsModalOpen(true);
  const closeModal = () => setIsModalOpen(false);





  if(isModalOpen){

    return(
      <div>
         {isModalOpen && <FaceRegistrationModal lang={lang} onClose={closeModal}  onComplete={result => onComplete&&onComplete(result)}/>}
      </div>
    )
  }

  

  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-md overflow-hidden"
        >
          <div className="relative">

            <div className="p-6">
            <div className="max-w-md w-full bg-white/80 backdrop-blur-md rounded-xl shadow-xl p-8 text-center">
        <div className="flex justify-center mb-6">
          <div className="w-16 h-16 bg-indigo-600 rounded-full flex items-center justify-center shadow-lg">
            <Shield className="w-9 h-9 text-white" />
          </div>
        </div>
        
        <h1 className="text-3xl font-bold text-gray-800 mb-2">{describ.startTitle}</h1>
        <p className="text-gray-600 mb-8">
          {describ.startDescription}
        </p>
        
        <Button onClick={openModal} className="w-full">
          {describ.startButton}
        </Button>
      </div>
            </div>
          </div>
        </motion.div>
      </div>
    </AnimatePresence>,
    document.body
  );
};