import React, { useState } from 'react';
import { Button } from './ui/Button';
import { Shield, XCircle, CheckCircle2 } from 'lucide-react';
import { FaceLandmarks } from '../types/faceLandmarks';
// import { useFaceLandmarkDetection } from '../hooks/useFaceLandmarkDetection';
import Webcam from 'react-webcam';
import { useTranslation } from '../i18n/useTranslation';
import { FaceRecognitionProps } from '../types';

interface FaceAuthenticatorProps extends FaceRecognitionProps{
  handlePress:(base64: string)=> void,
  authStatus?:'idle' | 'processing' | 'success' | 'error',
  isLoading?: boolean
  
}

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


export const FaceAuthenticator: React.FC<FaceAuthenticatorProps> = ({
  lang,
  handlePress,
  authStatus = 'idle',
  isLoading=false,
}) => {
  const describ = useTranslation(lang)
  const webcamRef = React.useRef<Webcam>(null);


  async function handleAuthentication(){

    const base64 = captureImage()

    if(base64){
      handlePress(base64)
    }

  }

  const captureImage = (): string | null => {
    const webcam = webcamRef.current;
  
    if (!webcam || !webcam.video) return null;
  
    const video = webcam.video as HTMLVideoElement;
  
    const tempCanvas = document.createElement("canvas");
    tempCanvas.width = video.videoWidth;
    tempCanvas.height = video.videoHeight;
  
    const ctx = tempCanvas.getContext("2d");
    if (!ctx) return null;
  
    ctx.drawImage(video, 0, 0, tempCanvas.width, tempCanvas.height);
  
    return tempCanvas.toDataURL("image/jpeg");
  };

  return (
    <div className="bg-white rounded-lg shadow-lg p-6 max-w-md w-full">
      <div className="flex justify-center mb-4">
        <div className="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center">
          <Shield className="w-6 h-6 text-indigo-600" />
        </div>
      </div>

      <h2 className="text-xl font-semibold text-center mb-4">{describ.authTitle}</h2>

      <div className="relative mb-4">
        <Webcam
          ref={webcamRef}
          audio={false}
          videoConstraints={videoConstraints}
          className="w-full rounded-lg shadow-md"
        />
        
        {authStatus === 'processing' && (
          <div className="absolute inset-0 bg-black/50 flex items-center justify-center rounded-lg">
            <div className="w-10 h-10 border-4 border-white border-t-transparent rounded-full animate-spin" />
          </div>
        )}
      </div>

      {authStatus === 'success' && (
        <div className="bg-green-50 text-green-700 p-3 rounded-lg flex items-center mb-4">
          <CheckCircle2 className="w-5 h-5 mr-2" />
          <span>{describ.authSucess}</span>
        </div>
      )}

      {authStatus === 'error' && (
        <div className="bg-red-50 text-red-700 p-3 rounded-lg flex items-center mb-4">
          <XCircle className="w-5 h-5 mr-2" />
          <span>{describ.authError}</span>
        </div>
      )}

      <Button
        onClick={handleAuthentication}
        disabled={isLoading}
        className="w-full"
      >
        {isLoading ? describ.authButtonProcessing: describ.authButton}
      </Button>
    </div>
  );
};