'use client';

import { useEffect, useRef, useState } from 'react';
import Webcam from 'react-webcam';
import { Button, message } from 'antd';
import { loadFaceApi } from '@/utils/loadFaceApi';

export default function CameraFaceComponent({ onCapture }) {
  const webcamRef = useRef(null);
  const canvasRef = useRef(null);
  const [eyesDetected, setEyesDetected] = useState(false);
  const [faceBox, setFaceBox] = useState(null);
  const [imageSrc, setImageSrc] = useState(null);
  const [messageApi, contextHolder] = message.useMessage();
  const intervalRef = useRef(null);

  useEffect(() => {
    initFaceDetection();
    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, []);

  const initFaceDetection = async () => {
    const faceapi = await loadFaceApi();

    intervalRef.current = setInterval(async () => {
      if (
        webcamRef.current &&
        webcamRef.current.video &&
        webcamRef.current.video.readyState === 4
      ) {
        const video = webcamRef.current.video;
        const canvas = canvasRef.current;
        const ctx = canvas.getContext('2d');

        const displaySize = {
          width: video.videoWidth,
          height: video.videoHeight,
        };

        canvas.width = displaySize.width;
        canvas.height = displaySize.height;

        const detections = await faceapi
          .detectAllFaces(
            video,
            new faceapi.TinyFaceDetectorOptions({
              inputSize: 416,
              scoreThreshold: 0.5,
            })
          )
          .withFaceLandmarks();

        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.scale(-1, 1);
        ctx.translate(-canvas.width, 0);
        faceapi.draw.drawDetections(canvas, faceapi.resizeResults(detections, displaySize));
        ctx.restore();

        let isEyesVisible = false;
        let boundingBox = null;

        if (detections.length > 0) {
          const detection = detections[0];
          const landmarks = detection.landmarks;

          const leftEye = landmarks.getLeftEye();
          const rightEye = landmarks.getRightEye();

          isEyesVisible = leftEye.length > 0 || rightEye.length > 0;
          boundingBox = detection.detection.box;
        }

        setEyesDetected(isEyesVisible);
        setFaceBox(boundingBox);
      } else {
        setEyesDetected(false);
        setFaceBox(null);
      }
    }, 400);
  };

  const capture = () => {
    const video = webcamRef.current.video;

    if (!eyesDetected) {
        messageApi.error('Wajah tidak terdeteksi!');
        return;
    }

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const videoWidth = video.videoWidth;
    const videoHeight = video.videoHeight;

    canvas.width = videoWidth;
    canvas.height = videoHeight;

    ctx.drawImage(video, 0, 0, videoWidth, videoHeight);

    const fullImage = canvas.toDataURL('image/jpeg');
    setImageSrc(fullImage);
    onCapture(fullImage);
    };

  const reset = () => {
    setImageSrc(null);
    onCapture(null);
  };

  return (
    <div className="relative w-full">
      {contextHolder}

      {!imageSrc ? (
        <>
          <div className="relative w-full">
            <Webcam
              ref={webcamRef}
              audio={false}
              screenshotFormat="image/jpeg"
              width="100%"
              videoConstraints={{
                facingMode: 'user',
                width: { ideal: 640 },
                height: { ideal: 480 },
              }}
            />
            <canvas
              ref={canvasRef}
              className="absolute top-0 left-0 z-10"
              style={{
                transform: 'scaleX(-1)',
                width: '100%',
                height: '100%',
              }}
            />
          </div>

          <div className="text-center mt-2 text-sm">
            {eyesDetected ? (
              <span className="text-green-600">Wajah terdeteksi ✅</span>
            ) : (
              <span className="text-red-500">Arahkan wajah agar terlihat ❌</span>
            )}
          </div>

          <Button
            type="primary"
            block
            className="mt-4"
            onClick={capture}
            disabled={!eyesDetected || !faceBox}
          >
            Ambil Foto
          </Button>
        </>
      ) : (
        <>
          <img
            src={imageSrc}
            alt="Foto"
            className="w-64 h-64 object-cover mx-auto border rounded"
          />
          <Button block className="mt-4" onClick={reset}>
            Ulangi Foto
          </Button>
        </>
      )}
    </div>
  );
}