{% extends "base.html" %}
{% block title %}{{ site_name }} - Cockpit{% endblock %}
{% block body_class %}page-cockpit{% endblock %}
{% block content %}
<div class="dashboard-content">
  <div class="tabs">
    <button class="active" onclick="switchTab('system')">System</button>
    <button id="tabBtn-users" onclick="switchTab('users')" {% if role != 'admin' %}style="display:none"{% endif %}>Benutzer</button>
    <button id="tabBtn-receivers" onclick="switchTab('receivers')" {% if role != 'admin' %}style="display:none"{% endif %}>Receiver</button>
    <button id="tabBtn-aircraft" onclick="switchTab('aircraft')" {% if role != 'admin' %}style="display:none"{% endif %}>Flugzeuge</button>
    <button id="tabBtn-airports" onclick="switchTab('airports')" {% if role != 'admin' %}style="display:none"{% endif %}>Flughäfen</button>
    <button id="tabBtn-photospots" onclick="switchTab('photospots')" {% if role != 'admin' %}style="display:none"{% endif %}>Photo Spots</button>
    <button onclick="switchTab('alerting')">Alerting</button>
  </div>

  <!-- Tab: System -->
  <div id="tab-system" class="tab-content active">
    <div class="panel">
      <h3>System-Übersicht</h3>
      <table class="stats-table" id="system-stats">
        <tr><td>Version</td><td id="stat-version">lade...</td></tr>
        <tr><td>Schema-Version</td><td id="stat-schema">lade...</td></tr>
        <tr><td>Empfänger gesamt</td><td id="stat-receivers-total">lade...</td></tr>
        <tr><td>Empfänger online</td><td id="stat-receivers-online">lade...</td></tr>
        <tr><td>Benutzer</td><td id="stat-users-total">lade...</td></tr>
        <tr><td>Flugzeuge in Registry</td><td id="stat-registry-total">lade...</td></tr>
        <tr><td>Unbekannte Hex-Codes</td><td id="stat-unknown-total">lade...</td></tr>
        <tr><td>Verschiedene Länder</td><td id="stat-countries-total">lade...</td></tr>
        <tr><td>Flughäfen</td><td id="stat-airports-total">lade...</td></tr>
        <tr><td>Track-Punkte gespeichert</td><td id="stat-trackpoints-total">lade...</td></tr>
        <tr><td>Letzte Daten</td><td id="stat-last-data">lade...</td></tr>
      </table>
    </div>
  </div>

  <!-- Tab: Benutzer (nur Admin) -->
  <div id="tab-users" class="tab-content">
    <div class="admin-only panel" id="pending-panel" style="display:none">
      <h3>Ausstehende Freischaltungen</h3>
      <table><thead><tr><th>Email</th><th>Erstellt</th><th>Rolle</th></tr></thead>
      <tbody id="pending-list"><tr><td colspan="3">Laden...</td></tr></tbody></table>
    </div>
    <div class="panel">
      <h3>Alle Benutzer <button class="btn btn-success" onclick="showAddUser()" style="float:right">+ Hinzufügen</button></h3>
      <table><thead><tr><th>Aktionen</th><th>Username</th><th>Email</th><th>Display Name</th><th>Rolle</th><th>Status</th><th>Letzter Login</th></tr></thead>
      <tbody id="user-list"><tr><td colspan="7">Laden...</td></tr></tbody></table>
    </div>
    <div class="panel" id="add-user-panel" style="display:none">
      <h3>Benutzer hinzufügen</h3>
      <input id="new-username" placeholder="Username (Email)" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px">
      <select id="new-role" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px;margin-right:8px">
        <option value="user">user</option>
        <option value="admin">admin</option>
        <option value="pending">pending</option>
      </select>
      <button class="btn btn-success" onclick="addUser()">Speichern</button>
      <button class="btn" onclick="hideAddUser()">Abbrechen</button>
    </div>
    <div class="panel" id="edit-user-panel" style="display:none">
      <h3 id="edit-user-title">Benutzer bearbeiten</h3>
      <input id="edit-user-username" placeholder="Username" readonly style="background:#1a1f2e;color:#888;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:150px">
      <input id="edit-user-email" placeholder="Email" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:160px">
      <input id="edit-user-display" placeholder="Display Name" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:160px">
      <select id="edit-user-role" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px;margin-right:8px">
        <option value="admin">admin</option>
        <option value="user">user</option>
        <option value="pending">pending</option>
      </select>
      <button class="btn btn-success" onclick="saveUser()">Speichern</button>
      <button class="btn" onclick="resetUserPassword()" id="btn-reset-pwd" style="margin-left:4px">Passwort zurücksetzen</button>
      <span id="edit-user-2fa-status" style="color:#888;font-size:12px;margin-left:8px"></span>
      <button class="btn" onclick="hideEditUser()">Abbrechen</button>
    </div>
  </div>

  <!-- Tab: Receiver (nur Admin) -->
  <div id="tab-receivers" class="tab-content">
    <div class="admin-only panel" id="pending-receivers-panel" style="display:none">
      <h3>Ausstehende Receiver-Freischaltungen</h3>
      <table><thead><tr><th>Receiver-ID</th><th>Installation-ID</th><th>Name</th><th>Registriert</th><th>Version</th><th>Aktionen</th></tr></thead>
      <tbody id="pending-receivers-list"><tr><td colspan="6">Laden...</td></tr></tbody></table>
    </div>
    <div class="panel">
      <h3>Receiver <button class="btn" onclick="addReceiver()" style="float:right;margin-left:8px">+ Neu</button></h3>
      <table><thead><tr><th>Aktionen</th><th>ID</th><th>Name</th><th>Status</th><th>Standort</th><th>Letztes Update</th></tr></thead>
      <tbody id="receiver-list"><tr><td colspan="6">Laden...</td></tr></tbody></table>
    </div>
    <div class="panel" id="edit-receiver-panel" style="display:none">
      <h3 id="edit-receiver-title">Receiver bearbeiten</h3>
      <input id="edit-rec-name" placeholder="Name" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px">
      <input id="edit-rec-slug" placeholder="Slug" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px">
      <input id="edit-rec-lat" placeholder="Lat" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px">
      <input id="edit-rec-lon" placeholder="Lon" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px">
      <input id="edit-rec-desc" placeholder="Beschreibung" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px">
      <label style="color:#aaa;font-size:13px;margin-right:8px"><input id="edit-rec-enabled" type="checkbox" checked> Aktiv</label>
      <button class="btn btn-success" onclick="saveReceiver()">Speichern</button>
      <button class="btn" onclick="approveReceiver()" id="btn-approve-rec" style="display:none">Freischalten</button>
      <button class="btn btn-danger" onclick="revokeReceiver()" id="btn-revoke-rec" style="display:none">Sperren</button>
      <button class="btn" onclick="rotateReceiverToken()" id="btn-rotate-rec-token" style="display:none">Token neu generieren</button>
      <button class="btn" onclick="hideEditReceiver()">Abbrechen</button>
      <div id="rec-token-display" style="display:none;margin-top:8px;padding:8px;background:#1a2a1a;border:1px solid #4caf50;border-radius:4px;">
        <strong style="color:#4caf50">Neuer Token:</strong>
        <code id="rec-new-token-value" style="display:block;margin-top:4px;word-break:break-all;color:#e0e0e0"></code>
        <p style="color:#aaa;font-size:12px;margin-top:4px;">Diesen Token in die Collector-Konfiguration unter ADSB_API_INGEST_TOKEN eintragen.</p>
      </div>
    </div>
  </div>

  <!-- Tab: Flugzeuge (nur Admin) -->
  <div id="tab-aircraft" class="tab-content">
    <div class="panel" id="registry-panel">
      <h3>Flugzeug-Registry
        <button class="btn btn-success" onclick="showAddAircraft()" style="float:right">+ Hinzufügen</button>
        <button class="btn" id="toggleViewBtn" onclick="toggleAircraftView()" style="float:right;margin-right:8px">Unbekannte</button>
      </h3>
      <div id="registry-view">
        <table><thead><tr><th>Aktionen</th><th>Hex</th><th>Callsign</th><th>Registration</th><th>Land</th><th>Typ</th><th>Betreiber</th><th>Zuletzt aktualisiert</th></tr></thead>
        <tbody id="aircraft-list"><tr><td colspan="8">Laden...</td></tr></tbody></table>
        <div id="aircraft-pagination"></div>
      </div>
      <div id="unknown-view" style="display:none">
        <p style="color:#888;font-size:13px;">Flugzeuge die kürzlich gesehen wurden, aber noch nicht in der Registry sind.</p>
        <table><thead><tr><th>Aktionen</th><th>Hex</th><th>Callsign</th><th>Registration</th><th>Zuletzt gesehen</th><th>ADS-B Exchange</th></tr></thead>
        <tbody id="unknown-list"></tbody></table>
        <button class="btn" onclick="toggleAircraftView()" style="margin-top:8px">Zurück zur Registry</button>
      </div>
    </div>
    <div class="panel" id="add-aircraft-panel" style="display:none">
      <h3>Flugzeug hinzufügen</h3>
      <input id="new-ac-hex" placeholder="Hex (z.B. abc123)" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:120px">
      <input id="new-ac-callsign" placeholder="Callsign" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="new-ac-registration" placeholder="Registration" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="new-ac-country" placeholder="Land" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:120px">
      <input id="new-ac-type" placeholder="Typ (z.B. B738)" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="new-ac-operator" placeholder="Betreiber" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:150px">
      <button class="btn btn-success" onclick="addAircraft()">Speichern</button>
      <button class="btn" onclick="hideAddAircraft()">Abbrechen</button>
    </div>
    <div class="panel" id="edit-aircraft-panel" style="display:none">
      <h3 id="edit-aircraft-title">Flugzeug bearbeiten</h3>
      <input id="edit-ac-hex" placeholder="Hex" readonly style="background:#1a1f2e;color:#888;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:120px">
      <input id="edit-ac-callsign" placeholder="Callsign" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="edit-ac-registration" placeholder="Registration" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="edit-ac-country" placeholder="Land" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:120px">
      <input id="edit-ac-type" placeholder="Typ" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="edit-ac-operator" placeholder="Betreiber" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:150px">
      <button class="btn btn-success" onclick="saveAircraft()">Speichern</button>
      <button class="btn" onclick="hideEditAircraft()">Abbrechen</button>
    </div>
  </div>

  <!-- Tab: Flughäfen (nur Admin) -->
  <div id="tab-airports" class="tab-content">
    <div class="panel">
      <div id="airport-list-panel">
      <h3>Flughafen-Registry <button class="btn btn-success" onclick="showAddAirport()" style="float:right">+ Hinzufügen</button></h3>
      <table><thead><tr><th>Aktionen</th><th>Code</th><th>ICAO</th><th>IATA</th><th>Name</th><th>Lat</th><th>Lon</th><th>Radius</th><th>Aktiv</th></tr></thead>
      <tbody id="airport-list"><tr><td colspan="9">Laden...</td></tr></tbody></table>
      <div id="airport-pagination"></div>
      </div>
    </div>
    <div class="panel" id="add-airport-panel" style="display:none">
      <h3>Flughafen hinzufügen</h3>
      <input id="new-ap-code" placeholder="Code (z.B. EDDL)" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="new-ap-icao" placeholder="ICAO" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:80px">
      <input id="new-ap-iata" placeholder="IATA" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:60px">
      <input id="new-ap-name" placeholder="Name" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:200px">
      <input id="new-ap-lat" placeholder="Lat" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="new-ap-lon" placeholder="Lon" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="new-ap-radius" placeholder="Radius km" value="5" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:80px">
      <button class="btn btn-success" onclick="addAirport()">Speichern</button>
      <button class="btn" onclick="hideAddAirport()">Abbrechen</button>
    </div>
  </div>

  <!-- Tab: Photo Spots (nur Admin) -->
  <div id="tab-photospots" class="tab-content">
    <div class="panel" id="photospot-admin-panel">
      <h3>Photo Spots verwalten <button class="btn btn-success" onclick="showAddPhotoSpot()" style="float:right">+ Neu</button></h3>
      <p style="color:#aaa;font-size:13px;margin-bottom:12px">Hier siehst du alle vorgeschlagenen Photo Spots und kannst sie freischalten oder löschen.</p>
      <table><thead><tr><th>Aktionen</th><th>Name</th><th>Adresse</th><th>Von</th><th>Status</th><th>Erstellt</th></tr></thead>
      <tbody id="photospot-list"><tr><td colspan="6">Laden...</td></tr></tbody></table>
      <div id="photospot-pagination"></div>
    </div>
    <div class="panel" id="add-photospot-panel" style="display:none">
      <h3>Neuen Photo Spot anlegen</h3>
      <input id="new-ps-name" placeholder="Name *" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:200px">
      <input id="new-ps-address" placeholder="Adresse" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:250px"><br><br>
      <input id="new-ps-lat" placeholder="Breitengrad" type="number" step="any" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:120px">
      <input id="new-ps-lon" placeholder="Längengrad" type="number" step="any" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:120px"><br><br>
      <textarea id="new-ps-desc" placeholder="Beschreibung" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;width:500px;height:60px;margin-bottom:8px"></textarea><br>
      <button class="btn btn-success" onclick="addPhotoSpot()">Speichern</button>
      <button class="btn" onclick="hideAddPhotoSpot()">Abbrechen</button>
    </div>
  </div>

  <!-- Tab: Alerting (eigene Regeln verwalten, JWT-geschützt) -->
  <div id="tab-alerting" class="tab-content">
    <div class="panel">
      <h3>Telegram-Alerting <button class="btn btn-success" onclick="showAddAlertRule()" style="float:right">+ Neue Regel</button></h3>
      <p style="color:#aaa;font-size:14px;line-height:1.6;">
        Erhalte Benachrichtigungen über interessante Flugzeuge direkt auf dein Telefon.<br><br>
        <b>So richtest du Alerting ein:</b><br>
        1. Öffne Telegram und suche nach <b>@adsbnby_bot</b><br>
        2. Sende <code>/start</code> an den Bot — er antwortet mit deiner Chat-ID<br>
        3. Die Chat-ID muss im Benutzerprofil (im Cockpit unter Benutzer) manuell eingetragen werden<br>
        4. Lege unten deine ersten Alert-Regeln an<br>
      </p>
    </div>
    <div class="panel">
      <h3>Meine Alerting-Regeln</h3>
      <table><thead><tr><th>ID</th><th>Typ</th><th>Name</th><th>Parameter</th><th>Aktionen</th></tr></thead>
      <tbody id="alert-rule-list"><tr><td colspan="5">Laden...</td></tr></tbody></table>
    </div>
    <div class="panel" id="add-alert-rule-panel" style="display:none">
      <h3>Neue Alert-Regel</h3>
      <div style="margin-bottom:8px">
        <label style="color:#aaa;font-size:13px;margin-right:8px">Name:</label>
        <input id="new-ar-name" placeholder="z.B. DUS Anflug" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:16px;width:180px">
        <label style="color:#aaa;font-size:13px;margin-right:8px">Typ:</label>
        <select id="new-ar-type" onchange="toggleAlertRuleFields()" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px;margin-right:8px">
          <option value="radius">Radius</option>
          <option value="airport">Flughafen</option>
          <option value="callsign">Callsign</option>
          <option value="hex">Hex</option>
        </select>
      </div>
      <div id="ar-fields-radius" style="margin-bottom:8px">
        <label style="color:#aaa;font-size:13px;margin-right:8px">Lat:</label>
        <input id="new-ar-lat" placeholder="51.57" type="number" step="any" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
        <label style="color:#aaa;font-size:13px;margin-right:8px">Lon:</label>
        <input id="new-ar-lon" placeholder="7.06" type="number" step="any" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
        <label style="color:#aaa;font-size:13px;margin-right:8px">Radius (km):</label>
        <input id="new-ar-radius" placeholder="10" type="number" step="any" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:70px">
        <label style="color:#aaa;font-size:13px;margin-right:8px">Max Höhe (ft):</label>
        <input id="new-ar-max-alt" placeholder="5000" type="number" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:80px">
        <label style="color:#aaa;font-size:13px;margin-right:8px">Min Höhe (ft):</label>
        <input id="new-ar-min-alt" placeholder="" type="number" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:80px">
      </div>
      <div id="ar-fields-airport" style="display:none;margin-bottom:8px">
        <label style="color:#aaa;font-size:13px;margin-right:8px">Flughafen-Code:</label>
        <input id="new-ar-airport" placeholder="EDDL" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:80px">
        <label style="color:#aaa;font-size:13px;margin-right:8px">Umkreis (km):</label>
        <input id="new-ar-airport-radius" placeholder="10" type="number" step="any" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:70px">
        <label style="color:#aaa;font-size:13px;margin-right:8px">Max Höhe (ft):</label>
        <input id="new-ar-airport-max-alt" placeholder="5000" type="number" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:80px">
      </div>
      <div id="ar-fields-callsign" style="display:none;margin-bottom:8px">
        <label style="color:#aaa;font-size:13px;margin-right:8px">Callsign-Muster:</label>
        <input id="new-ar-callsign" placeholder="DLH*" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:120px">
      </div>
      <div id="ar-fields-hex" style="display:none;margin-bottom:8px">
        <label style="color:#aaa;font-size:13px;margin-right:8px">Hex-Code:</label>
        <input id="new-ar-hex" placeholder="3c49cc" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      </div>
      <button class="btn btn-success" onclick="addAlertRule()">Speichern</button>
      <button class="btn" onclick="hideAddAlertRule()">Abbrechen</button>
      <span id="add-ar-error" style="color:#f55;margin-left:8px;display:none"></span>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts_extra %}
<script>
TOKEN=*** token_js_escaped|tojson }};
</script>
<script src="/static/js/admin.js"></script>
{% endblock %}