/* TV-Wall Webinterface. Reines Vanilla-JS ohne externe Bibliotheken, damit die

   Oberflaeche auch ohne Internetverbindung (Pi als Access Point) funktioniert. */

'use strict';

const $ = (id) => document.getElementById(id);

const el = {

  deviceLine: $('deviceLine'),

  nowText: $('nowText'),

  statusDot: $('statusDot'),

  pauseBtn: $('pauseBtn'),

  list: $('list'),

  empty: $('empty'),

  counter: $('counter'),

  drop: $('drop'),

  fileInput: $('fileInput'),

  dropHint: $('dropHint'),

  progressWrap: $('progressWrap'),

  progressFill: $('progressFill'),

  progressLabel: $('progressLabel'),

  durationInput: $('durationInput'),

  muteInput: $('muteInput'),

  saveSettings: $('saveSettings'),

  diskLine: $('diskLine'),

  toasts: $('toasts'),

};

let state = null;

let renderedVersion = -1;

let busy = false;          // laeuft gerade ein Upload?

let dragging = false;      // wird gerade sortiert?

let settingsTouched = false;

/* ------------------------------------------------------------------ Helfer */

function toast(msg, kind) {

  const node = document.createElement('div');

  node.className = 'toast' + (kind ? ' ' + kind : '');

  node.textContent = msg;

  el.toasts.appendChild(node);

  setTimeout(() => node.remove(), kind === 'err' ? 6000 : 3200);

}

function formatSize(bytes) {

  if (!bytes) return '0 B';

  const units = ['B', 'KB', 'MB', 'GB', 'TB'];

  let i = 0, n = bytes;

  while (n >= 1024 && i < units.length - 1) { n /= 1024; i++; }

  return (n < 10 && i > 0 ? n.toFixed(1) : Math.round(n)) + ' ' + units[i];

}

async function api(path, body) {

  const opts = body === undefined

    ? {}

    : { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) };

  const res = await fetch(path, opts);

  let data = null;

  try { data = await res.json(); } catch (e) { /* leere Antwort ist ok */ }

  if (!res.ok) throw new Error((data && data.error) || ('HTTP ' + res.status));

  return data;

}

/* -------------------------------------------------------------- Darstellung */

async function refresh() {

  if (busy || dragging) return;

  try {

    state = await api('/api/state');

  } catch (e) {

    el.statusDot.className = 'dot err';

    el.nowText.textContent = 'keine Verbindung';

    return;

  }

  renderStatus();

  if (state.version !== renderedVersion) {

    renderList();

    renderedVersion = state.version;

  } else {

    markPlaying();

  }

}

function renderStatus() {

  const d = state.device, s = state.status;

  el.deviceLine.textContent = d.ssid + ' · ' + d.hostname + '.local';

  if (!s.running) {

    el.statusDot.className = 'dot err';

    el.nowText.textContent = s.last_error ? 'Player-Fehler' : 'Player startet …';

  } else if (s.current) {

    el.statusDot.className = 'dot on';

    el.nowText.textContent = (s.paused ? 'Pause: ' : 'Läuft: ') + s.current;

  } else {

    el.statusDot.className = 'dot';

    el.nowText.textContent = state.entries.length ? 'wird geladen …' : 'Playliste leer';

  }

  el.pauseBtn.textContent = s.paused ? '▶ Weiter' : '⏸ Pause';

  if (!state.entries.length) {

    el.counter.textContent = '';

  } else if (d.active === state.entries.length) {

    el.counter.textContent = `${state.entries.length} Einträge · ${d.images} Bilder · ${d.videos} Videos`;

  } else {

    el.counter.textContent = `${d.active} von ${state.entries.length} aktiv · ${d.images} Bilder · ${d.videos} Videos`;

  }

  if (!settingsTouched) {

    el.durationInput.value = state.settings.image_duration;

    el.muteInput.checked = state.settings.mute;

  }

  el.dropHint.textContent = 'Bilder und Videos · max. ' + d.max_upload_mb + ' MB pro Vorgang';

  const parts = [];

  if (state.disk.total) parts.push(formatSize(state.disk.free) + ' von ' + formatSize(state.disk.total) + ' frei');

  if (s.display) parts.push('Bildausgabe: ' + s.display);

  el.diskLine.textContent = parts.join(' · ');

}

function renderList() {

  el.list.textContent = '';

  el.empty.hidden = state.entries.length > 0;

  for (const entry of state.entries) {

    const li = document.createElement('li');

    li.className = 'item';

    li.dataset.name = entry.name;

    const grip = document.createElement('div');

    grip.className = 'grip';

    grip.textContent = '⠿';

    grip.title = 'Zum Sortieren ziehen';

    grip.addEventListener('pointerdown', (ev) => startDrag(ev, li));

    const toggle = document.createElement('label');

    toggle.className = 'toggle';

    toggle.title = entry.enabled ? 'Wird auf der Wand gezeigt' : 'Wird uebersprungen';

    const box = document.createElement('input');

    box.type = 'checkbox';

    box.checked = entry.enabled;

    box.setAttribute('aria-label', 'Auf der Wand zeigen');

    box.addEventListener('change', () => setEnabled(entry.name, box.checked, li));

    toggle.appendChild(box);

    const img = document.createElement('img');

    img.className = 'thumb';

    img.loading = 'lazy';

    img.alt = '';

    img.src = '/thumb/' + encodeURIComponent(entry.name);

    const meta = document.createElement('div');

    meta.className = 'meta';

    const name = document.createElement('div');

    name.className = 'name';

    name.textContent = entry.name;

    name.title = entry.name;

    const tags = document.createElement('div');

    tags.className = 'tags';

    const badge = document.createElement('span');

    badge.className = 'badge' + (entry.kind === 'video' ? ' video' : '');

    badge.textContent = entry.kind === 'video' ? 'Video' : 'Bild';

    const size = document.createElement('span');

    size.textContent = formatSize(entry.size);

    tags.append(badge, size);

    if (!entry.enabled) {

      const off = document.createElement('span');

      off.className = 'badge off';

      off.textContent = 'ausgeblendet';

      tags.append(off);

    }

    meta.append(name, tags);

    const actions = document.createElement('div');

    actions.className = 'actions';

    actions.append(

      iconButton('↑', 'Nach oben', () => move(entry.name, -1)),

      iconButton('↓', 'Nach unten', () => move(entry.name, 1)),

      iconButton('🗑', 'Löschen', () => remove(entry.name), 'del'),

    );

    li.classList.toggle('off', !entry.enabled);

    li.append(grip, toggle, img, meta, actions);

    el.list.appendChild(li);

  }

  markPlaying();

}

function iconButton(label, title, onClick, extra) {

  const b = document.createElement('button');

  b.className = 'icon-btn' + (extra ? ' ' + extra : '');

  b.type = 'button';

  b.textContent = label;

  b.title = title;

  b.setAttribute('aria-label', title);

  b.addEventListener('click', onClick);

  return b;

}

function markPlaying() {

  const current = state && state.status ? state.status.current : '';

  for (const li of el.list.children) {

    li.classList.toggle('playing', !!current && li.dataset.name === current);

  }

}

/* ------------------------------------------------------------- Sortieren */

function currentOrder() {

  return Array.from(el.list.children).map((li) => li.dataset.name);

}

async function saveOrder() {

  const order = currentOrder();

  try {

    await api('/api/order', { order });

    renderedVersion = -1; // beim naechsten Abruf frisch zeichnen

    toast('Reihenfolge gespeichert', 'ok');

  } catch (e) {

    toast('Reihenfolge speichern fehlgeschlagen: ' + e.message, 'err');

  }

}

function move(name, delta) {

  const items = Array.from(el.list.children);

  const idx = items.findIndex((li) => li.dataset.name === name);

  const target = idx + delta;

  if (idx < 0 || target < 0 || target >= items.length) return;

  if (delta < 0) el.list.insertBefore(items[idx], items[target]);

  else el.list.insertBefore(items[target], items[idx]);

  saveOrder();

}

// Sortieren per Zeigergeraet - funktioniert mit Maus und Finger gleichermassen.

//

// Bewusst OHNE setPointerCapture und ohne Ereignisse am Griff selbst: Beim

// Umsortieren wird die Zeile im DOM verschoben, dabei verliert der Griff die

// Zeigererfassung und es kommen keine weiteren Ereignisse mehr an. Die

// Ereignisse haengen deshalb am Dokument, das sich nie bewegt.

let dragState = null;

function startDrag(ev, li) {

  if (ev.button !== undefined && ev.button !== 0) return;

  ev.preventDefault();

  dragging = true;

  dragState = { li: li, id: ev.pointerId };

  li.classList.add('dragging');

  document.addEventListener('pointermove', onDragMove, { passive: false });

  document.addEventListener('pointerup', endDrag);

  document.addEventListener('pointercancel', endDrag);

}

// Zielposition aus der Zeigerhoehe bestimmen, statt das Element unter dem

// Zeiger zu suchen: unabhaengig davon, was gerade darueber liegt.

function onDragMove(ev) {

  if (!dragState) return;

  if (ev.pointerId !== dragState.id) return;

  ev.preventDefault();

  const y = ev.clientY;

  let eingefuegt = false;

  for (const item of Array.from(el.list.children)) {

    if (item === dragState.li) continue;

    const r = item.getBoundingClientRect();

    if (y < r.top + r.height / 2) {

      el.list.insertBefore(dragState.li, item);

      eingefuegt = true;

      break;

    }

  }

  if (!eingefuegt) el.list.appendChild(dragState.li);

}

function endDrag(ev) {

  if (!dragState) return;

  if (ev && ev.pointerId !== undefined && ev.pointerId !== dragState.id) return;

  document.removeEventListener('pointermove', onDragMove);

  document.removeEventListener('pointerup', endDrag);

  document.removeEventListener('pointercancel', endDrag);

  dragState.li.classList.remove('dragging');

  dragState = null;

  dragging = false;

  saveOrder();

}

async function setEnabled(name, enabled, li) {

  li.classList.toggle('off', !enabled);

  try {

    await api('/api/enabled', { name: name, enabled: enabled });

    renderedVersion = -1;

    toast(enabled ? name + ' wird wieder gezeigt' : name + ' wird übersprungen', 'ok');

  } catch (e) {

    li.classList.toggle('off', enabled);

    toast('Änderung fehlgeschlagen: ' + e.message, 'err');

  }

}

async function remove(name) {

  if (!confirm('"' + name + '" wirklich löschen?')) return;

  try {

    await api('/api/delete', { name });

    renderedVersion = -1;

    await refresh();

    toast('Gelöscht: ' + name, 'ok');

  } catch (e) {

    toast('Löschen fehlgeschlagen: ' + e.message, 'err');

  }

}

/* --------------------------------------------------------------- Hochladen */

function upload(files) {

  const list = Array.from(files || []);

  if (!list.length) {

    toast('Es wurde keine Datei ausgewählt', 'err');

    return;

  }

  const form = new FormData();

  for (const f of list) form.append('files', f, f.name);

  busy = true;

  el.progressWrap.hidden = false;

  el.progressFill.style.width = '0%';

  el.progressLabel.textContent = '0 %';

  const xhr = new XMLHttpRequest();

  xhr.open('POST', '/api/upload');

  xhr.upload.addEventListener('progress', (ev) => {

    if (!ev.lengthComputable) return;

    const pct = Math.round((ev.loaded / ev.total) * 100);

    el.progressFill.style.width = pct + '%';

    el.progressLabel.textContent = pct + ' %';

  });

  xhr.addEventListener('load', () => {

    busy = false;

    el.progressWrap.hidden = true;

    // Erst jetzt zuruecksetzen: iOS gibt die ausgewaehlten Dateien frei,

    // sobald das Feld geleert wird - vorher waere der Upload leer.

    el.fileInput.value = '';

    let data = null;

    try { data = JSON.parse(xhr.responseText); } catch (e) { /* egal */ }

    if (xhr.status >= 200 && xhr.status < 300 && data) {

      if (data.uploaded.length) toast(data.uploaded.length + ' Datei(en) hinzugefügt', 'ok');

      for (const s of data.skipped || []) toast('Übersprungen: ' + s, 'err');

    } else {

      toast('Upload fehlgeschlagen: ' + ((data && data.error) || ('HTTP ' + xhr.status)), 'err');

    }

    renderedVersion = -1;

    refresh();

  });

  xhr.addEventListener('error', () => {

    busy = false;

    el.progressWrap.hidden = true;

    el.fileInput.value = '';

    toast('Upload fehlgeschlagen (Verbindung)', 'err');

  });

  xhr.send(form);

}

/* ----------------------------------------------------------- Verdrahtung */

// Kein click()-Aufruf auf das Feld: das Label oeffnet die Auswahl bereits

// selbst. Beides zusammen laesst die Fotoauswahl auf dem iPhone ohne Ergebnis

// wieder zugehen.

el.fileInput.addEventListener('change', () => upload(el.fileInput.files));

for (const type of ['dragenter', 'dragover']) {

  el.drop.addEventListener(type, (ev) => { ev.preventDefault(); el.drop.classList.add('over'); });

}

for (const type of ['dragleave', 'drop']) {

  el.drop.addEventListener(type, (ev) => { ev.preventDefault(); el.drop.classList.remove('over'); });

}

el.drop.addEventListener('drop', (ev) => {

  if (ev.dataTransfer && ev.dataTransfer.files) upload(ev.dataTransfer.files);

});

// Verhindert, dass der Browser eine daneben abgelegte Datei einfach oeffnet.

window.addEventListener('dragover', (ev) => ev.preventDefault());

window.addEventListener('drop', (ev) => ev.preventDefault());

document.querySelectorAll('[data-action]').forEach((btn) => {

  btn.addEventListener('click', async () => {

    try {

      await api('/api/control', { action: btn.dataset.action });

      setTimeout(refresh, 250);

    } catch (e) {

      toast('Aktion fehlgeschlagen: ' + e.message, 'err');

    }

  });

});

el.durationInput.addEventListener('input', () => { settingsTouched = true; });

el.muteInput.addEventListener('change', () => { settingsTouched = true; });

el.saveSettings.addEventListener('click', async () => {

  const value = parseFloat(el.durationInput.value);

  if (!(value >= 0.5 && value <= 3600)) {

    toast('Anzeigedauer muss zwischen 0,5 und 3600 Sekunden liegen', 'err');

    return;

  }

  try {

    await api('/api/settings', { image_duration: value, mute: el.muteInput.checked });

    settingsTouched = false;

    toast('Einstellungen gespeichert', 'ok');

    refresh();

  } catch (e) {

    toast('Speichern fehlgeschlagen: ' + e.message, 'err');

  }

});

refresh();

setInterval(refresh, 3000);