{% extends "admin/base.html" %}
{% set active = 'tm_db_editor' %}

{% block title %}TM DB-Editor{% endblock %}

{% block content %}
<h1>TeamManagement DB-Editor</h1>
<p style="color:var(--muted);font-size:13px;margin-bottom:20px;">
  Direkte Bearbeitung der <code>teammanagement.db</code> für manuelle Fehlerbehebung.
  Änderungen wirken sofort — ohne Bestätigung.
</p>

<!-- Tabellen-Auswahl -->
<div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;" id="table-tabs">
  {% for t in tables %}
  <button class="btn btn-secondary btn-sm" id="tab-{{ t }}" onclick="ladeTabelle('{{ t }}')">
    {{ t }}
  </button>
  {% endfor %}
</div>

<!-- Tabellen-Inhalt -->
<div class="card" id="tabelle-container">
  <p style="color:var(--muted);font-size:13px;">Tabelle auswählen um Daten anzuzeigen.</p>
</div>

<!-- Zähler -->
<div id="row-count" style="font-size:12px;color:var(--muted);margin-top:-8px;margin-bottom:16px;display:none;">
  <span id="row-count-text"></span>
</div>

<!-- Edit-Modal -->
<div id="edit-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);
     z-index:1000;align-items:flex-start;justify-content:center;padding-top:60px;overflow-y:auto;">
  <div class="card" style="max-width:560px;width:90%;margin:0 auto 40px;">
    <h2 style="margin-bottom:16px;font-size:15px;">Zeile bearbeiten
      <span id="edit-rowid-label" style="font-size:12px;color:var(--muted);font-weight:400;"></span>
    </h2>
    <div id="edit-fields"></div>
    <div class="btn-row" style="margin-top:20px;">
      <button class="btn btn-secondary" onclick="schliesseModal()">Abbrechen</button>
      <button class="btn btn-primary" onclick="speichernBestaetigen()">Speichern</button>
    </div>
    <div id="edit-error" style="display:none;margin-top:12px;font-size:12px;color:var(--danger);"></div>
  </div>
</div>

<script>
  let _aktiveTabelle = null;
  let _editRowid     = null;
  let _columns       = [];

  // ── Tabelle laden ──────────────────────────────────────────────────────────

  async function ladeTabelle(name) {
    _aktiveTabelle = name;

    // Tab hervorheben
    document.querySelectorAll('#table-tabs button').forEach(b => {
      b.style.background = '';
      b.style.color = '';
    });
    const tab = document.getElementById('tab-' + name);
    if (tab) {
      tab.style.background = 'var(--accent)';
      tab.style.color = '#fff';
    }

    const container = document.getElementById('tabelle-container');
    container.innerHTML = '<p style="color:var(--muted);font-size:13px;">Lade…</p>';
    document.getElementById('row-count').style.display = 'none';

    const res = await fetch('/admin/teammanagement/db-editor/rows/' + name, {
      credentials: 'include',
    });
    if (!res.ok) {
      container.innerHTML = '<p style="color:var(--danger);font-size:13px;">Fehler beim Laden: ' + res.status + '</p>';
      return;
    }
    const data = await res.json();
    _columns = data.columns;
    renderTabelle(data.columns, data.rows);
  }

  // ── Tabelle rendern ────────────────────────────────────────────────────────

  function renderTabelle(columns, rows) {
    const container = document.getElementById('tabelle-container');
    const rowCount  = document.getElementById('row-count');
    const rowCountTxt = document.getElementById('row-count-text');

    if (rows.length === 0) {
      container.innerHTML = '<p style="color:var(--muted);font-size:13px;">Keine Einträge vorhanden.</p>';
      rowCount.style.display = 'none';
      return;
    }

    rowCountTxt.textContent = rows.length + ' Zeile' + (rows.length !== 1 ? 'n' : '');
    rowCount.style.display = 'block';

    // Sichtbare Spalten (ohne _rowid in der Kopfzeile, kommt als Aktions-Datum)
    const visCols = columns.filter(c => c !== '_rowid');

    let html = '<div style="overflow-x:auto;">';
    html += '<table><thead><tr>';
    for (const c of visCols) {
      html += '<th>' + esc(c) + '</th>';
    }
    html += '<th style="width:100px;">Aktionen</th>';
    html += '</tr></thead><tbody>';

    for (const row of rows) {
      const rowid = row['_rowid'];
      html += '<tr id="row-' + rowid + '">';
      for (const c of visCols) {
        const val = row[c];
        const display = val === null ? '<span style="color:var(--muted);font-style:italic;">null</span>'
                      : esc(String(val));
        const truncated = val !== null && String(val).length > 40
          ? '<span title="' + esc(String(val)) + '">' + esc(String(val).substring(0, 38)) + '…</span>'
          : display;
        html += '<td style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">' + truncated + '</td>';
      }
      html += '<td><button class="btn btn-secondary btn-sm" style="margin-right:4px;" '
           + 'onclick="oeffneEdit(' + rowid + ', ' + JSON.stringify(JSON.stringify(row)) + ')">Edit</button>'
           + '<button class="btn btn-danger btn-sm" '
           + 'onclick="loeschenBestaetigen(' + rowid + ')">Del</button></td>';
      html += '</tr>';
    }

    html += '</tbody></table></div>';
    container.innerHTML = html;
  }

  // ── Edit-Modal öffnen ─────────────────────────────────────────────────────

  function oeffneEdit(rowid, rowJson) {
    _editRowid = rowid;
    const row  = JSON.parse(rowJson);

    document.getElementById('edit-rowid-label').textContent = '(rowid ' + rowid + ')';
    document.getElementById('edit-error').style.display = 'none';

    const fieldsDiv = document.getElementById('edit-fields');
    let html = '';
    for (const col of _columns) {
      if (col === '_rowid') continue;
      const val = row[col];
      html += '<div class="form-group">';
      html += '<label>' + esc(col) + '</label>';
      html += '<input type="text" id="field-' + esc(col) + '" value="'
           + (val !== null ? esc(String(val)) : '') + '" '
           + 'placeholder="' + (val === null ? 'null' : '') + '">';
      if (val === null) {
        html += '<div class="form-hint">Aktuell: null — leer lassen = null setzen</div>';
      }
      html += '</div>';
    }
    fieldsDiv.innerHTML = html;

    document.getElementById('edit-modal').style.display = 'flex';
  }

  function schliesseModal() {
    document.getElementById('edit-modal').style.display = 'none';
    _editRowid = null;
  }

  // ── Speichern ─────────────────────────────────────────────────────────────

  async function speichernBestaetigen() {
    if (_editRowid === null || !_aktiveTabelle) return;

    const payload = {};
    for (const col of _columns) {
      if (col === '_rowid') continue;
      const input = document.getElementById('field-' + col);
      if (!input) continue;
      const val = input.value;
      payload[col] = val === '' ? null : val;
    }

    const res = await fetch(
      '/admin/teammanagement/db-editor/rows/' + _aktiveTabelle + '/' + _editRowid,
      {
        method: 'PATCH',
        credentials: 'include',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(payload),
      }
    );
    if (!res.ok) {
      const d = await res.json().catch(() => ({}));
      const errDiv = document.getElementById('edit-error');
      errDiv.textContent = 'Fehler: ' + (d.error || res.status);
      errDiv.style.display = 'block';
      return;
    }
    schliesseModal();
    await ladeTabelle(_aktiveTabelle);
  }

  // ── Löschen ───────────────────────────────────────────────────────────────

  async function loeschenBestaetigen(rowid) {
    if (!confirm('Zeile ' + rowid + ' wirklich löschen?')) return;

    const res = await fetch(
      '/admin/teammanagement/db-editor/rows/' + _aktiveTabelle + '/' + rowid,
      {method: 'DELETE', credentials: 'include'}
    );
    if (!res.ok) {
      const d = await res.json().catch(() => ({}));
      alert('Fehler beim Löschen: ' + (d.error || res.status));
      return;
    }
    // Zeile aus DOM entfernen (sofort, ohne neu laden)
    const row = document.getElementById('row-' + rowid);
    if (row) row.remove();

    // Zähler aktualisieren
    const remaining = document.querySelectorAll('#tabelle-container tbody tr').length;
    document.getElementById('row-count-text').textContent =
      remaining + ' Zeile' + (remaining !== 1 ? 'n' : '');
  }

  // ── Hilfsfunktionen ───────────────────────────────────────────────────────

  function esc(str) {
    return str
      .replace(/&/g, '&amp;')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;');
  }

  // Modal schließen bei Klick außerhalb
  document.getElementById('edit-modal').addEventListener('click', function(e) {
    if (e.target === this) schliesseModal();
  });

  // Enter im Edit-Formular speichert
  document.getElementById('edit-fields').addEventListener('keydown', function(e) {
    if (e.key === 'Enter' && !e.shiftKey) speichernBestaetigen();
  });
</script>
{% endblock %}