// /public/app.js
// Small bootstrap moved out of index.html to satisfy CSP (`script-src 'self'`).
(function () {
  const isSecure = location.protocol === 'https:';
  const wsProto = isSecure ? 'wss' : 'ws';
  const base = `${wsProto}://${location.host}`;

  // Camera 0 with control channel
  window.VideoService.attachStream({
    url: `${base}/ws/video0`,
    canvas: document.getElementById('canvas0'),
    statusEl: document.getElementById('status0'),
    control: {
      resSelect: document.getElementById('res0'),
      fpsSelect: document.getElementById('fps0'),
      qSelect: document.getElementById('q0'),
      applyBtn: document.getElementById('apply0'),
      snapshotBtn: document.getElementById('snap0'),
      startBtn: document.getElementById('start0'),
      stopBtn: document.getElementById('stop0'),
      snapshotOutEl: document.getElementById('snapshotLink'),
    }
  });

  // Camera 1 (no control)
  window.VideoService.attachStream({
    url: `${base}/ws/video1`,
    canvas: document.getElementById('canvas1'),
    statusEl: document.getElementById('status1'),
  });

  // Run an automatic snapshot shortly after the page loads so the client
  // receives the freshest annotated image/CSV on startup. This uses a
  // synthetic click on the snapshot button; the handler will no-op if the
  // WebSocket isn't open yet.
  setTimeout(() => {
    const snapBtn = document.getElementById('snap0');
    if (snapBtn) snapBtn.click();
  }, 200);

  // Attach handlers for the Point/Up/Down buttons (no inline JS, CSP-safe)
  const btnPoint = document.getElementById('btnPoint');
  const btnDown = document.getElementById('btnDown');
  const btnUp = document.getElementById('btnUp');
  if (btnPoint) btnPoint.addEventListener('click', () => {
    console.log('FPoint!');
    try { socketDriver.send('FPoint'); socketDriver.send('FShow'); } catch (e) { console.error(e); }
  });
  if (btnDown) btnDown.addEventListener('click', () => {
    console.log('FPlus');
    try { socketDriver.send('FPlus'); socketDriver.send('FShow'); } catch (e) { console.error(e); }
  });
  if (btnUp) btnUp.addEventListener('click', () => {
    console.log('FMinus');
    try { socketDriver.send('FMinus'); socketDriver.send('FShow'); } catch (e) { console.error(e); }
  });

  // Other buttons that were previously using inline onclicks.
  const btnInfo = document.getElementById('b_M114');
  const btnNull = document.getElementById('b_G28');
  const btnListFile = document.getElementById('btnListFile');
  const btnSendGCode = document.getElementById('btnSendGCode');
  if (btnInfo) btnInfo.addEventListener('click', () => { try { socketDriver.send('M114'); } catch (e) { console.error(e); } });
  if (btnNull) btnNull.addEventListener('click', () => { try { socketDriver.send('G28'); } catch (e) { console.error(e); } });
  if (btnListFile) btnListFile.addEventListener('click', () => { try { socketDriver.send('FShow'); } catch (e) { console.error(e); } });
  if (btnSendGCode) btnSendGCode.addEventListener('click', () => {
    try {
      const input = document.getElementById('GKarth');
      if (input && input.value) socketDriver.send(input.value);
    } catch (e) { console.error(e); }
  });
})();