'use client';

import { useRef, useState } from 'react';
import Webcam from 'react-webcam';
import { Button, message } from 'antd';

// Fungsi kompresi gambar agar < 500KB
export const compressImage = async (base64, maxSizeKB = 500, quality = 0.7) => {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = base64;

    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      canvas.width = img.width;
      canvas.height = img.height;

      // Flip secara horizontal (mirror)
      ctx.translate(canvas.width, 0);
      ctx.scale(-1, 1);
      ctx.drawImage(img, 0, 0);

      let compressedBase64 = canvas.toDataURL('image/jpeg', quality);
      let sizeInKB = Math.round((compressedBase64.length * (3 / 4)) / 1024);

      // Loop jika masih > maxSizeKB
      while (sizeInKB > maxSizeKB && quality > 0.1) {
        quality -= 0.05;
        compressedBase64 = canvas.toDataURL('image/jpeg', quality);
        sizeInKB = Math.round((compressedBase64.length * (3 / 4)) / 1024);
      }

      resolve(compressedBase64);
    };
  });
};

export default function CameraComponent({ onCapture }) {
  const webcamRef = useRef(null);
  const [imageSrc, setImageSrc] = useState(null);
  const [loading, setLoading] = useState(false);
  const [messageApi, contextHolder] = message.useMessage();

  const capture = async () => {
    if (!webcamRef.current) return;

    const screenshot = webcamRef.current.getScreenshot();
    if (!screenshot) {
      messageApi.error('Gagal mengambil gambar');
      return;
    }

    setLoading(true);
    const compressed = await compressImage(screenshot);
    setImageSrc(compressed);
    setLoading(false);
    onCapture(compressed);
  };

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

  return (
    <div>
      {!imageSrc ? (
        <>
          <Webcam
            ref={webcamRef}
            audio={false}
            screenshotFormat="image/jpeg"
            width="100%"
            videoConstraints={{ facingMode: 'user' }}
            style={{ transform: 'scaleX(-1)' }}
          />
          <Button type="primary" block onClick={capture} className="mt-4" loading={loading}>
            Ambil Foto
          </Button>
        </>
      ) : (
        <>
          <img
            src={imageSrc}
            alt="Hasil Foto"
            className="w-64 h-64 object-cover border rounded mx-auto"
          />
          <Button type="primary" block className="mt-4" onClick={reset}>
            Ulangi Foto
          </Button>
        </>
      )}
    </div>
  );
}