{% extends "global/Page.html" %}
{% block content %}

<h2>Audio/Video Check</h2>
<p>
Please allow camera + microphone. Then say <b>"hello"</b> for 2 seconds.
</p>

<button type="button" id="run">Run test</button>
<div id="status" style="margin-top:12px;"></div>

<form method="post" id="form" style="margin-top:16px; display:none;">
  {{ formfield 'tech_ok' }}
  {{ formfield 'tech_fail_reason' }}
  {{ formfield 'tech_audio_max_rms' }}
  {{ formfield 'tech_video_is_live' }}
  <button class="btn btn-primary">Continue</button>
</form>

<script>
const statusEl = document.getElementById('status');
const runBtn = document.getElementById('run');
const form = document.getElementById('form');

function setStatus(msg){ statusEl.innerHTML = msg; }

async function runTechCheck(){
  setStatus("Requesting permissions…");
  let stream;
  try{
    stream = await navigator.mediaDevices.getUserMedia({ video:true, audio:true });
  }catch(e){
    setResults(false, "permission_denied");
    return;
  }

  // ---------- VIDEO “is live” test (detect frozen / black) ----------
  const video = document.createElement('video');
  video.autoplay = true; video.playsInline = true; video.muted = true;
  video.srcObject = stream;

  await new Promise(r => video.onloadedmetadata = r);

  const canvas = document.createElement('canvas');
  canvas.width = 160; canvas.height = 120;
  const ctx = canvas.getContext('2d', { willReadFrequently:true });

  let changes = 0;
  let prev = null;

  function sampleFrame(){
    ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
    const data = ctx.getImageData(0,0,canvas.width,canvas.height).data;
    // very cheap fingerprint: sum every 50th channel
    let sum = 0;
    for(let i=0;i<data.length;i+=200){ sum += data[i]; }
    if(prev !== null && Math.abs(sum - prev) > 50) changes++;
    prev = sum;
  }

  // sample ~2 seconds
  for(let i=0;i<10;i++){
    sampleFrame();
    await new Promise(r => setTimeout(r, 200));
  }
  const videoLive = changes >= 2;

  // ---------- AUDIO RMS test ----------
  let maxRms = 0;
  try{
    const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    const src = audioCtx.createMediaStreamSource(stream);
    const analyser = audioCtx.createAnalyser();
    analyser.fftSize = 2048;
    src.connect(analyser);

    const buf = new Float32Array(analyser.fftSize);

    const t0 = performance.now();
    while(performance.now() - t0 < 2500){
      analyser.getFloatTimeDomainData(buf);
      // RMS
      let s=0;
      for(let i=0;i<buf.length;i++){ s += buf[i]*buf[i]; }
      const rms = Math.sqrt(s/buf.length);
      if(rms > maxRms) maxRms = rms;
      await new Promise(r => setTimeout(r, 50));
    }
    audioCtx.close();
  }catch(e){
    // if audio ctx fails, treat as fail
    maxRms = 0;
  }

  // stop tracks
  stream.getTracks().forEach(t => t.stop());

  // threshold is intentionally modest; adjust after seeing real distributions
  const audioOk = maxRms > 0.02;

  if(videoLive && audioOk){
    setResults(true, "", maxRms, true);
  }else{
    const reason = (!videoLive && !audioOk) ? "video_frozen_and_mic_silent"
                 : (!videoLive) ? "video_frozen"
                 : "mic_silent";
    setResults(false, reason, maxRms, videoLive);
  }
}

function setResults(ok, reason, maxRms=0, videoLive=false){
  document.getElementById('id_tech_ok').checked = !!ok;
  document.getElementById('id_tech_fail_reason').value = reason || "";
  document.getElementById('id_tech_audio_max_rms').value = maxRms || 0;
  document.getElementById('id_tech_video_is_live').checked = !!videoLive;

  if(ok){
    setStatus("✅ Passed. Click Continue.");
    form.style.display = "block";
  }else{
    setStatus(
      "❌ Failed: <b>"+reason+"</b><br>" +
      "Fix it (permissions, close Zoom/Teams, try Chrome), then run test again."
    );
    form.style.display = "none";
  }
}

runBtn.addEventListener('click', runTechCheck);
</script>

{% endblock %}