'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 CameraComponent({ onCapture }) {
  const webcamRef = useRef(null);
  const canvasRef = useRef(null);
  const [faceDetected, setFaceDetected] = useState(false);
  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,
        };

        // Samakan ukuran canvas dengan video
        canvas.width = displaySize.width;
        canvas.height = displaySize.height;

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

        setFaceDetected(detections.length > 0);

        const resized = faceapi.resizeResults(detections, displaySize);

        // Gambar bounding box mirror
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.save();
        ctx.scale(-1, 1);
        ctx.translate(-canvas.width, 0);
        faceapi.draw.drawDetections(canvas, resized);
        ctx.restore();
      }
    }, 400);
  };

  const capture = () => {
    const screenshot = webcamRef.current.getScreenshot();
    setImageSrc(screenshot);
    onCapture(screenshot);
  };

  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 }
                                }}
            //   style={{ transform: 'scaleX(-1)' }}
              
            />
            <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">
            {faceDetected ? (
              <span className="text-green-600">Wajah terdeteksi ✅</span>
            ) : (
              <span className="text-red-500">Arahkan wajah ke kamera ❌</span>
            )}
          </div>

          <Button
            type="primary"
            block
            className="mt-4"
            onClick={capture}
            disabled={!faceDetected}
          >
            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>
  );
}