const video = document.getElementById('video');
const previewImg = document.getElementById('preview-img');
const canvas = document.getElementById('canvas');
const cameraStatus = document.getElementById('camera-status');
const studentNumberInput = document.getElementById('student-number');
const inputError = document.getElementById('input-error');
const captureBtn = document.getElementById('capture-btn');
const downloadLink = document.getElementById('download-link');

let captured = false;

async function startCamera() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
    video.srcObject = stream;
    cameraStatus.classList.add('hidden');
    captureBtn.disabled = false;
  } catch (err) {
    cameraStatus.textContent = 'Unable to access camera: ' + err.message;
  }
}

function sanitizeFilename(name) {
  return name.trim().replace(/[^a-z0-9_-]+/gi, '_');
}

function showLiveView() {
  previewImg.classList.add('hidden');
  video.classList.remove('hidden');
  downloadLink.classList.add('hidden');
  captureBtn.textContent = 'Capture Photo';
  captured = false;
}

function showCapturedView() {
  video.classList.add('hidden');
  previewImg.classList.remove('hidden');
  captureBtn.textContent = 'Retake Photo';
  captured = true;
}

function capturePhoto() {
  if (captured) {
    showLiveView();
    return;
  }

  const studentNumber = studentNumberInput.value.trim();
  if (!studentNumber) {
    inputError.classList.remove('hidden');
    studentNumberInput.focus();
    return;
  }
  inputError.classList.add('hidden');

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

  const dataUrl = canvas.toDataURL('image/png');
  const filename = `${sanitizeFilename(studentNumber)}.png`;

  previewImg.src = dataUrl;
  downloadLink.href = dataUrl;
  downloadLink.download = filename;
  downloadLink.classList.remove('hidden');

  showCapturedView();

  downloadLink.click();
}

captureBtn.addEventListener('click', capturePhoto);

studentNumberInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    event.preventDefault();
    capturePhoto();
  }
});

startCamera();