/* calibration.js – Kalibrierungs-Frontend */

// ── Panel-Loading (lazy) ───────────────────────────────────────────────────────

const _panelLoaded = new Set();

async function loadPanel(tab, src) {
  if (_panelLoaded.has(tab)) return;
  try {
    const r = await fetch(src);
    if (!r.ok) throw new Error(`HTTP ${r.status}`);
    document.getElementById('tab-' + tab).innerHTML = await r.text();
    _panelLoaded.add(tab);

    // h2-Klick → Section ein-/ausklappen
    document.getElementById('tab-' + tab).querySelectorAll('.section h2').forEach(h2 => {
      h2.addEventListener('click', () => h2.closest('.section').classList.toggle('collapsed'));
    });

    // Tab-spezifische Initialisierung
    if      (tab === 'camera-npz') initCameraNpz();
    else if (tab === 'board')      initBoard();

  } catch (err) {
    document.getElementById('tab-' + tab).innerHTML =
      `<p style="color:#f87171;margin:16px">Panel konnte nicht geladen werden: ${err}</p>`;
  }
}

// ── Tab-Switching ─────────────────────────────────────────────────────────────

document.getElementById('tabSidebar').addEventListener('click', e => {
  const btn = e.target.closest('.tab-btn');
  if (!btn) return;
  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
  document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
  btn.classList.add('active');
  document.getElementById('tab-' + btn.dataset.tab).classList.add('active');
  loadPanel(btn.dataset.tab, btn.dataset.src);
});

// Erstes Tab sofort laden
(function () {
  const first = document.querySelector('.tab-btn.active');
  if (first) loadPanel(first.dataset.tab, first.dataset.src);
})();

// ── Shared: SSE-Stream lesen ──────────────────────────────────────────────────

async function readSseStream(response, logFn, onDone) {
  const reader  = response.body.getReader();
  const decoder = new TextDecoder();
  let   buffer  = '';

  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    buffer += decoder.decode(value, { stream: true });

    const parts = buffer.split('\n\n');
    buffer = parts.pop();   // unvollständiges letztes Fragment behalten

    for (const part of parts) {
      for (const line of part.split('\n')) {
        if (!line.startsWith('data: ')) continue;
        try {
          const evt = JSON.parse(line.slice(6));
          if      (evt.type === 'log')  { if (evt.text !== '') logFn(evt.text); }
          else if (evt.type === 'done') { onDone(evt); }
        } catch { /* ungültiges JSON überspringen */ }
      }
    }
  }
}

// ── Camera NPZ ────────────────────────────────────────────────────────────────

function initCameraNpz() {
  const logCamera = document.getElementById('log-camera');

  function logC(msg) {
    const ts = new Date().toLocaleTimeString('de-CH');
    logCamera.value += `[${ts}] ${msg}\n`;
    logCamera.scrollTop = logCamera.scrollHeight;
  }

  function formatDate(isoString) {
    if (!isoString) return '–';
    return new Date(isoString).toLocaleString('de-CH');
  }

  function updateCalibInfo(meta) {
    const sel = document.getElementById('cam-select-calib');
    if (!meta) {
      document.getElementById('info-timestamp').textContent = '(keine Session vorhanden)';
      document.getElementById('info-created').textContent   = '–';
      document.getElementById('info-images').textContent    = '–';
      sel.innerHTML = '<option value="">– Kamera –</option>';
      return;
    }
    document.getElementById('info-timestamp').textContent = meta.timestamp ?? '–';
    document.getElementById('info-created').textContent   = formatDate(meta.createdAt);
    const cameras = meta.cameras ?? [];
    const imgTxt  = meta.imageCount != null
      ? `${meta.imageCount} Bilder total. ${cameras.length} Kamera(s) verwendet.`
      : '–';
    document.getElementById('info-images').textContent = imgTxt;

    const prev = sel.value;
    sel.innerHTML = '<option value="">– Kamera –</option>';
    for (const cam of cameras) {
      const opt = document.createElement('option');
      opt.value = cam; opt.textContent = cam;
      if (cam === prev) opt.selected = true;
      sel.appendChild(opt);
    }
    if (cameras.length === 1) sel.value = cameras[0];
  }

  async function loadCalibCurrent() {
    try {
      const r = await fetch('/api/calibration/current');
      const d = await r.json();
      updateCalibInfo(d.meta);
      if (d.session) logC(`Session geladen: ${d.session}`);
      else           logC('Noch keine Kalibrierungs-Session vorhanden.');
    } catch (err) {
      logC(`Fehler beim Laden: ${err}`);
    }
  }

  async function safeJson(r) {
    const raw = await r.text().catch(() => '');
    try   { return { ok: r.ok, status: r.status, data: JSON.parse(raw) }; }
    catch { return { ok: r.ok, status: r.status, data: null, raw: raw.slice(0, 300) }; }
  }

  // Aktuelle Session laden
  loadCalibCurrent();

  // "Neue Kalibrierung anlegen"
  document.getElementById('btn-new-calib').addEventListener('click', async () => {
    logC('Neue Kalibrierung wird angelegt …');
    try {
      const r = await fetch('/api/calibration/new', { method: 'POST' });
      const d = await r.json();
      if (d.error) { logC(`Fehler: ${d.error}`); return; }
      updateCalibInfo(d.meta);
      if (d.warning) logC(`Warnung: ${d.warning}`);
      else           logC(`Session angelegt: ${d.session}  |  Fotos: ${(d.savedFiles ?? []).join(', ')}`);
    } catch (err) {
      logC(`Fehler: ${err}`);
    }
  });

  // "Foto aufnehmen"
  document.getElementById('btn-foto-calib').addEventListener('click', async () => {
    logC('Fotos werden aufgenommen …');
    try {
      const r = await fetch('/api/calibration/foto', { method: 'POST' });
      const d = await r.json();
      if (d.error) { logC(`Fehler: ${d.error}`); return; }
      updateCalibInfo(d.meta);
      logC(`Gespeichert: ${(d.savedFiles ?? []).join(', ')}`);
    } catch (err) {
      logC(`Fehler: ${err}`);
    }
  });

  // "Kalibrierung berechnen" – SSE
  document.getElementById('btn-compute-calib').addEventListener('click', async () => {
    const camera = document.getElementById('cam-select-calib').value;
    if (!camera) { logC('⚠ Bitte zuerst eine Kamera auswählen.'); return; }
    logC(`Starte Kalibrierung für ${camera} …`);
    const btn = document.getElementById('btn-compute-calib');
    btn.disabled = true;
    try {
      const response = await fetch('/api/calibration/compute', {
        method:  'POST',
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify({ camera }),
      });
      if (!response.ok) {
        const raw = await response.text().catch(() => '');
        let msg;
        try   { msg = JSON.parse(raw).error || raw; }
        catch { msg = raw.slice(0, 300) || response.statusText; }
        logC(`❌ HTTP ${response.status}: ${msg || '(kein Fehlertext – evtl. Server neu starten?)'}`);
        return;
      }
      await readSseStream(response, logC, (evt) => {
        if (evt.exitCode === 0) logC('✅ Kalibrierung abgeschlossen.');
        else logC(`❌ Script beendet mit Exit-Code ${evt.exitCode}`);
      });
    } catch (err) {
      logC(`Fehler: ${err}`);
    } finally {
      btn.disabled = false;
    }
  });

  // "NPZ speichern" → an Webcam-Service übertragen
  document.getElementById('btn-upload-npz').addEventListener('click', async () => {
    const camera = document.getElementById('cam-select-calib').value;
    if (!camera) { logC('⚠ Bitte zuerst eine Kamera auswählen.'); return; }
    logC(`NPZ wird an Webcam-Service übertragen (${camera}) …`);
    try {
      const { ok, status, data, raw } = await safeJson(await fetch('/api/calibration/upload-npz', {
        method:  'POST',
        headers: { 'Content-Type': 'application/json' },
        body:    JSON.stringify({ camera }),
      }));
      if (!ok || data?.error) {
        logC(`❌ HTTP ${status}: ${data?.error ?? raw ?? '(kein Fehlertext)'}`);
        return;
      }
      logC(`✅ Gespeichert: ${data.webcam?.saved}  (${data.size} Bytes)`);
      logC(`   calibrationUrl: ${data.webcam?.calibrationUrl}`);
    } catch (err) {
      logC(`❌ Fehler: ${err}`);
    }
  });
}

// ── Board ─────────────────────────────────────────────────────────────────────

function initBoard() {
  const logBoard = document.getElementById('log-board');

  function logB(msg) {
    const ts = new Date().toLocaleTimeString('de-CH');
    logBoard.value += `[${ts}] ${msg}\n`;
    logBoard.scrollTop = logBoard.scrollHeight;
  }

  document.getElementById('btn-board-run').addEventListener('click', async () => {
    logB('Board-Erkennung wird gestartet …');
    const btn = document.getElementById('btn-board-run');
    btn.disabled = true;
    try {
      const response = await fetch('/api/board/run', { method: 'POST' });
      if (!response.ok) {
        const raw = await response.text().catch(() => '');
        let msg;
        try   { msg = JSON.parse(raw).error || raw; }
        catch { msg = raw.slice(0, 300) || `HTTP ${response.status}`; }
        logB(`❌ HTTP ${response.status}: ${msg}`);
        return;
      }
      await readSseStream(response, logB, (evt) => {
        if (evt.exitCode === 0) {
          logB('✅ Board-Run abgeschlossen.');
          if (evt.runDir) {
            document.getElementById('board-last-run').textContent = evt.runDir;
            // Board-Viewer im iframe nach dem Run neu laden
            const frame = document.getElementById('board-viewer-frame');
            if (frame?.contentWindow) {
              frame.contentWindow.postMessage({ type: 'reload' }, '*');
            }
          }
        } else {
          logB(`❌ Beendet mit Exit-Code ${evt.exitCode}`);
        }
      });
    } catch (err) {
      logB(`❌ Fehler: ${err}`);
    } finally {
      btn.disabled = false;
    }
  });
}