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

const predictionEl = document.getElementById('prediction');
const confidenceEl = document.getElementById('confidence');

navigator.mediaDevices.getUserMedia({ video: true })
  .then(stream => {
    video.srcObject = stream;
    video.play();
    requestAnimationFrame(drawLoop);
  })
  .catch(err => console.error("Error accessing webcam:", err));

function drawLoop() {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // Draw fixed ROI box
  const x = 100, y = 60, w = 400, h = 360;
  ctx.strokeStyle = 'red';
  ctx.lineWidth = 3;
  ctx.strokeRect(x, y, w, h);

  requestAnimationFrame(drawLoop);
}

setInterval(() => {
  const x = 100, y = 60, w = 400, h = 360;
  const roiCanvas = document.createElement('canvas');
  roiCanvas.width = w;
  roiCanvas.height = h;
  const roiCtx = roiCanvas.getContext('2d');
  roiCtx.drawImage(video, x, y, w, h, 0, 0, w, h);
  const imgData = roiCanvas.toDataURL('image/jpeg');

  fetch('/predict', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({ image: imgData })
  })
  .then(res => res.json())
  .then(data => {
    predictionEl.textContent = data.prediction;
    confidenceEl.textContent = data.confidence.toFixed(1);
  })
  .catch(err => console.error(err));
}, 500);