// "use client";
// import React, { useRef, useState, useEffect } from "react";
// import "./Register.css"; // Import CSS for styling

// const Register: React.FC = () => {
//   const videoRef = useRef<HTMLVideoElement>(null);
//   const canvasRef = useRef<HTMLCanvasElement>(null);
//   const [name, setName] = useState<string>("");
//   const [error, setError] = useState<string>(""); // State for error message

//   // Automatically open the camera when the component mounts
//   useEffect(() => {
//     const openCamera = async () => {
//       try {
//         const stream = await navigator.mediaDevices.getUserMedia({
//           video: true,
//         });
//         if (videoRef.current) {
//           videoRef.current.srcObject = stream;
//         }
//       } catch (err) {
//         console.error("Error accessing the camera", err);
//       }
//     };

//     openCamera();
//   }, []);

//   // Capture image from video stream
//   const captureImage = () => {
//     if (!name.trim()) {
//       setError("Name is required"); // Set error message if name is empty
//       return;
//     }

//     const video = videoRef.current;
//     const canvas = canvasRef.current;

//     if (video && canvas) {
//       const context = canvas.getContext("2d");
//       if (context) {
//         // Draw the current frame from the video on the canvas
//         context.drawImage(video, 0, 0, canvas.width, canvas.height);
//         canvas.toBlob((blob) => {
//           if (blob) {
//             const file = new File([blob], "captured-image.png", {
//               type: "image/png",
//             });
//             callApi(name, file);
//           }
//         }, "image/png");
//       }
//     }
//   };

//   // Call API with name and image file
//   const callApi = async (name: string, file: File) => {
//     const formData = new FormData();
//     formData.append("name", name);
//     formData.append("image", file);

//     try {
//       const startTime = performance.now();
//       const response = await fetch(
//         `${process.env.NEXT_PUBLIC_BASE_URL}/register`,
//         {
//           method: "POST",
//           body: formData,
//         }
//       );

//       // End measuring time
//       const endTime = performance.now();
//       const totalTime = (endTime - startTime) / 1000; // Convert milliseconds to seconds

//       if (response.ok) {
//         const data = await response.json();
//         console.log("API call successful");
//         alert(
//           `Message: ${data.message}\nName: ${
//             data?.name
//           }\nTime taken: ${totalTime.toFixed(2)} seconds`
//         ); // Show success message with time taken
//         setError(""); // Clear error message on success
//       } else {
//         console.error("API call failed");
//         setError("Failed to register. Please try again."); // Set error message on failure
//       }
//     } catch (error) {
//       console.error("Error calling API", error);
//       setError("An error occurred. Please try again."); // Set error message on exception
//     }
//   };

//   return (
//     <div className="container">
//       <h1 className="title">Face Capture Form</h1>
//       <form className="form">
//         <div className="form-group">
//           <label htmlFor="name" className="label">
//             Name:
//           </label>
//           <input
//             id="name"
//             type="text"
//             value={name}
//             onChange={(e) => {
//               setName(e.target.value);
//               setError(""); // Clear error message when user starts typing
//             }}
//             className="input"
//             placeholder="Enter your name"
//             required
//           />
//           {error && !name.trim() && (
//             <p className="error-message">{error}</p> // Display error message if name is empty
//           )}
//         </div>
//         <div className="video-container">
//           <video ref={videoRef} autoPlay playsInline className="video" />
//         </div>
//         <button type="button" onClick={captureImage} className="capture-button">
//           Capture Image
//         </button>
//         <canvas
//           ref={canvasRef}
//           style={{ display: "none" }}
//           width="640"
//           height="480"
//         />
//       </form>
//     </div>
//   );
// };

// export default Register;


"use client";
import React, { useRef, useState, useEffect } from "react";
import "./Register.css"; // Import CSS for styling

const Register: React.FC = () => {
  const videoRef = useRef<HTMLVideoElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [name, setName] = useState<string>("");
  const [error, setError] = useState<string>(""); // State for error message
  const [selectedFile, setSelectedFile] = useState<File | null>(null); // State for uploaded image

  // Automatically open the camera when the component mounts
  useEffect(() => {
    const openCamera = async () => {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({
          video: true,
        });
        if (videoRef.current) {
          videoRef.current.srcObject = stream;
        }
      } catch (err) {
        console.error("Error accessing the camera", err);
      }
    };

    openCamera();
  }, []);

  // Capture image from video stream
  const captureImage = () => {
    if (!name.trim()) {
      setError("Name is required"); // Set error message if name is empty
      return;
    }

    const video = videoRef.current;
    const canvas = canvasRef.current;

    if (video && canvas) {
      const context = canvas.getContext("2d");
      if (context) {
        // Draw the current frame from the video on the canvas
        context.drawImage(video, 0, 0, canvas.width, canvas.height);
        canvas.toBlob((blob) => {
          if (blob) {
            const file = new File([blob], "captured-image.png", {
              type: "image/png",
            });
            callApi(name, file);
          }
        }, "image/png");
      }
    }
  };

  // Handle file upload
  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0] || null;
    setSelectedFile(file);
  };

  // Submit uploaded file
  const submitUploadedFile = () => {
    if (!name.trim()) {
      setError("Name is required");
      return;
    }

    if (!selectedFile) {
      setError("Please upload an image file.");
      return;
    }

    callApi(name, selectedFile);
  };

  // Call API with name and image file
  const callApi = async (name: string, file: File) => {
    const formData = new FormData();
    formData.append("name", name);
    formData.append("image", file);

    try {
      const startTime = performance.now();
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_BASE_URL}/register`,
        {
          method: "POST",
          body: formData,
        }
      );

      // End measuring time
      const endTime = performance.now();
      const totalTime = (endTime - startTime) / 1000; // Convert milliseconds to seconds

      if (response.ok) {
        const data = await response.json();
        console.log("API call successful");
        alert(
          `Message: ${data.message}\nName: ${data?.name}\nTime taken: ${totalTime.toFixed(2)} seconds`
        ); // Show success message with time taken
        setError(""); // Clear error message on success
      } else {
        console.error("API call failed");
        setError("Failed to register. Please try again."); // Set error message on failure
      }
    } catch (error) {
      console.error("Error calling API", error);
      setError("An error occurred. Please try again."); // Set error message on exception
    }
  };

  return (
    <div className="container">
      <h1 className="title">Face Capture & Upload Form</h1>
      <form className="form">
        <div className="form-group">
          <label htmlFor="name" className="label">
            Name:
          </label>
          <input
            id="name"
            type="text"
            value={name}
            onChange={(e) => {
              setName(e.target.value);
              setError(""); // Clearing error message when user starts typing
            }}
            className="input"
            placeholder="Enter your name"
            required
          />
          {error && !name.trim() && (
            <p className="error-message">{error}</p> // Displaying error message if name is empty
          )}
        </div>

        <div className="video-container">
          <video ref={videoRef} autoPlay playsInline className="video" />
          <button
            type="button"
            onClick={captureImage}
            className="capture-button"
          >
            Capture Image
          </button>
        </div>
        <div>Or</div>

        <div className="file-upload-container">
          <label htmlFor="file-upload" className="label">
            Upload Image:
          </label>
          <input
            id="file-upload"
            type="file"
            accept="image/*"
            onChange={handleFileUpload}
            className="file-input"
          />
          <button
            type="button"
            onClick={submitUploadedFile}
            // className="upload-button"
            className="capture-button"
          >
            Submit Uploaded Image
          </button>
        </div>

        <canvas
          ref={canvasRef}
          style={{ display: "none" }}
          width="640"
          height="480"
        />

        {error && <p className="error-message">{error}</p>}
      </form>
    </div>
  );
};

export default Register;