'use strict';

// Kamera-Konfiguration: liest GET /api/config, baut pro Kamera eine ComboBox
// (Aus + erlaubte Auflösungen), POSTet die Auswahl zurück. Server wendet die
// Auflösung sofort an (Hot-Reload) und persistiert in cameras.json.

const OFF = '__off__';
let liveSizes = [];

async function load() {
  const r = await fetch('/api/config');
  if (!r.ok) throw new Error(`HTTP ${r.status}`);
  const cfg = await r.json();
  liveSizes = cfg.liveSizes || [];
  render(cfg.cameras || []);
  setStatus('bereit', '');
  document.getElementById('saveBtn').disabled = false;
}

function render(cameras) {
  const tbody = document.getElementById('rows');
  tbody.innerHTML = '';
  for (const cam of cameras) {
    const tr = document.createElement('tr');

    const tdId = document.createElement('td');
    tdId.textContent = cam.id;

    const tdName = document.createElement('td');
    tdName.textContent = cam.name || cam.id;
    if (cam.id === 'cam2') {
      const w = document.createElement('span');
      w.className = 'warn-badge';
      w.textContent = ' ⚠';
      w.title = 'C920: bei kleinen 4:3-Auflösungen überdurchschnittlich Bandbreite';
      tdName.appendChild(w);
    }

    const tdSel = document.createElement('td');
    const sel = document.createElement('select');
    sel.dataset.id = cam.id;
    const isOff = cam.stream === false;
    sel.add(new Option('Aus', OFF, false, isOff));
    for (const s of liveSizes) {
      sel.add(new Option(s.replace('x', '×'), s, false, !isOff && cam.liveSize === s));
    }
    tdSel.appendChild(sel);

    const tdCur = document.createElement('td');
    tdCur.className = 'cur';
    tdCur.textContent = isOff ? 'aus' : (cam.liveSize || '?');

    tr.append(tdId, tdName, tdSel, tdCur);
    tbody.appendChild(tr);
  }
}

function collect() {
  return Array.from(document.querySelectorAll('select[data-id]')).map((sel) => {
    const id = sel.dataset.id;
    if (sel.value === OFF) return { id, stream: false };
    return { id, stream: true, liveSize: sel.value };
  });
}

async function save() {
  const btn = document.getElementById('saveBtn');
  btn.disabled = true;
  setStatus('speichert…', '');
  try {
    const r = await fetch('/api/config', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ cameras: collect() }),
    });
    const body = await r.json().catch(() => ({}));
    if (!r.ok) throw new Error(body.error || `HTTP ${r.status}`);
    render(body.cameras || []);
    setStatus('gespeichert & angewendet', 'ok');
  } catch (e) {
    setStatus('Fehler: ' + e.message, 'err');
  } finally {
    btn.disabled = false;
  }
}

function setStatus(text, cls) {
  const el = document.getElementById('status');
  el.textContent = text;
  el.className = cls || '';
}

document.getElementById('saveBtn').addEventListener('click', save);
load().catch((e) => setStatus('Laden fehlgeschlagen: ' + e.message, 'err'));