import React, { useRef, useEffect, useState } from 'react';
import { AlertCircle, ArrowRight, Camera , RefreshCcw} from 'lucide-react';
import Webcam from 'react-webcam';
import { Button } from './ui/Button';
import { FaceRecognitionProps, RegistrationStep } from '../types';
import { useTranslation } from '../i18n/useTranslation';

interface frameProps  extends FaceRecognitionProps{
  setStep: (stap:RegistrationStep) => void;
}


export const SetupFrame: React.FC<frameProps> = ({setStep, lang}) => {

  const videoConstraints = {
    width: 640,
    height: 480,
    facingMode: "user"
  };

  const describ = useTranslation(lang)

  const webcamRef = useRef<Webcam>(null);
  const [isLoading, setIsLoading] = useState(true);

  const [cameraError, setCameraError] = useState<string | null>(null);
  const [cameraAcess, setAcessTrue] = useState<string | number>()

  const handleUserMedia = () => {
    setIsLoading(false)
    setCameraError(null);
    setAcessTrue(describ.setupGranted)
  };

  const handleUserMediaError = () => {
    setCameraError('Acesso à câmera foi negado. Por favor, permita o uso da câmera nas configurações do navegador e recarregue a página.');
  };


  async function requestCameraAccessAgain(): Promise<boolean> {
    setCameraError(null)
    try {
      const stream = await navigator.mediaDevices.getUserMedia({ video: true });

      stream.getTracks().forEach(track => track.stop());
      return true;
    } catch (err) {
      setCameraError('Acesso à câmera foi negado. Por favor, permita o uso da câmera nas configurações do navegador e recarregue a página.')
      console.error('Usuário negou o acesso à câmera ou ocorreu um erro:', err);
      return false;
    }
  }


  useEffect(()=> {
    console.log({webcamRef})
  }, [])
  

    return(
      <div className="text-center px-6">
            <div className="mb-6 flex justify-center">
              <div className="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center animate-pulse">
                <Camera className="w-8 h-8 text-indigo-600" />
              </div>
            </div>
            <h2 className="text-2xl font-bold text-gray-800 mb-4">{describ.setupTitle}</h2>
            {(isLoading || cameraError) && <>
              <p className="text-gray-600 mb-4">
                {!cameraError 
                  ? "Initializing camera and face detection model..."
                  : "Please allow access to your camera to continue with the facial registration process."}
              </p>
            </>}
            <div className="relative">
              <Webcam
                ref={webcamRef}
                audio={false}
                videoConstraints={videoConstraints}
                onUserMedia={handleUserMedia}
                onUserMediaError={handleUserMediaError}
                className="w-full rounded-lg shadow-md"
                mirrored={true}
              />
            </div>
            {cameraError && (
              <div className="bg-red-50 border border-red-200 rounded-md p-4 mt-4 flex items-start">
                <AlertCircle className="w-5 h-5 text-red-500 mr-2 shrink-0 mt-0.5" />
                <p className="text-red-700 text-sm text-left">{cameraError}</p>
              </div>
            )}

            {cameraAcess && (
              <div className="bg-green-50 border border-green-200 rounded-md p-4 mt-4 flex items-start">
                <AlertCircle className="w-5 h-5 text-green-500 mr-2 shrink-0 mt-0.5" />
                <p className={`text-green-700 text-sm text-left`}>{cameraAcess}</p>
              </div>
            )}

            {isLoading && <div className="mt-8 w-full max-w-xs mx-auto">
              <div className="relative pt-1">
                <div className="overflow-hidden h-2 text-xs flex rounded bg-indigo-100">
                  <div
                    className="animate-[loading_1s_ease-in-out_infinite] w-full h-full bg-indigo-500"
                    style={{
                      background: 'linear-gradient(to right, transparent 0%, #4F46E5 50%, transparent 100%)',
                      backgroundSize: '200% 100%',
                    }}
                  />
                </div>
              </div>
            </div>}
            {
              !isLoading && <Button 
              variant="secondary" 
              className="mt-6"
              onClick={ async () => setStep('detection')}
            >
              {describ.setupButton} <ArrowRight className="ml-2 w-4 h-4" />
            </Button>
            }
            {cameraError && (
              <Button 
                variant="secondary" 
                className="mt-6"
                onClick={ async () => {
                  await requestCameraAccessAgain()
                  setStep('setup');
                }}
              >
                Retry Camera Access <RefreshCcw className="ml-2 w-4 h-4" />
              </Button>
            )}
      </div>
    )
}