Frontend/scripts.js

const video = document.querySelector("#videoElement");
let currentFacingMode = "user"; // "user" = front, "environment" = back
let stream = null;

// Initialize camera with given facing mode
function startCamera(facingMode = "user") {
  if (stream) {
    stream.getTracks().forEach(track => track.stop());
  }

  const constraints = {
    video: {
      facingMode: { exact: facingMode }
    }
  };

  navigator.mediaDevices.getUserMedia(constraints)
    .then((newStream) => {
      stream = newStream;
      video.srcObject = stream;

      // ✅ iOS fix: playsinline and manual play
      video.setAttribute("playsinline", true);
      video.play().catch(err => console.warn("Autoplay issue:", err));
    })
    .catch((err) => {
      console.warn("Exact facingMode failed, trying fallback. Error:", err);

      // Fallback if iOS/older browser doesn’t support exact
      navigator.mediaDevices.getUserMedia({ video: true })
        .then((fallbackStream) => {
          stream = fallbackStream;
          video.srcObject = stream;
          video.setAttribute("playsinline", true);
          video.play().catch(err => console.warn("Autoplay issue:", err));
        })
        .catch((error) => {
          console.error("Error accessing camera:", error);
          alert("Camera access failed. Please allow camera permissions.");
        });
    });
}

// Flip between front and back camera
function toggleCamera() {
  currentFacingMode = currentFacingMode === "user" ? "environment" : "user";
  startCamera(currentFacingMode);
}

// Capture current frame from video, show it, and send to backend
function captureAndSend() {
  if (!stream) {
    alert("Camera is not started yet!");
    return;
  }

  const canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  const context = canvas.getContext('2d');
  context.drawImage(video, 0, 0, canvas.width, canvas.height);

  const dataUrl = canvas.toDataURL("image/jpeg");

  document.getElementById("snapshotImage").src = dataUrl;

  fetch("https://prime810-facefeel.hf.space/process_image", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ image: dataUrl })
  })
  .then(response => response.json())
  .then(data => {
    document.getElementById("emojiDisplay").innerHTML =
      `<img src="${data.emoji}" style="width:200px; border-radius:10px;">`;
    document.getElementById("emotionText").textContent =
      `Emotion: ${data.emotion}`;
    
    const link = document.getElementById("downloadEmoji");
    link.href = data.emoji;
    link.style.display = "inline-block";

    const sound = document.getElementById("emojiSound");
    if (sound) sound.play();
  })
  .catch(error => {
    console.error("Error:", error);
    alert("Failed to get emoji. Is your backend running?");
  });
}

// ✅ Start camera automatically on page load
startCamera();