{% extends "base.html" %}

{% block title %}Admin – MK Control{% endblock %}

{% block content %}
<div class="container my-5">
  <h1 class="mb-4">Admin-Bereich</h1>

  <div class="row mb-4">
    <div class="col">
      <a href="{{ url_for('admin.logs') }}" class="btn btn-outline-info">
        <i class="bi bi-journal-text me-2"></i>Logs ansehen
      </a>
    </div>
    <div class="col text-end">
      <a href="#" class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#newConfigModal">
        <i class="bi bi-plus-circle me-2"></i>Neue Konfiguration
      </a>
    </div>
  </div>

  <h3 class="mt-5 mb-3">Vorhandene Konfigurationen</h3>

  {% if configs %}
    <div class="table-responsive">
      <table class="table table-hover align-middle">
        <thead class="table-dark">
          <tr>
            <th>Name</th>
            <th>Hub-ID</th>
            <th>Datei</th>
            <th>Aktionen</th>
          </tr>
        </thead>
        <tbody>
          {% for cfg in configs %}
            <tr>
              <td>{{ cfg.name }}</td>
              <td>{{ cfg.hub_id | default('–') }}</td>
              <td><code>{{ cfg.filename }}</code></td>
              <td>
                <a href="{{ url_for('admin.admin_edit_config', filename=cfg.filename) }}"
                   class="btn btn-sm btn-primary">
                  <i class="bi bi-pencil"></i> Bearbeiten
                </a>
                <button class="btn btn-sm btn-danger delete-config-btn"
                        data-filename="{{ cfg.filename }}"
                        data-name="{{ cfg.name }}">
                  <i class="bi bi-trash"></i> Löschen
                </button>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  {% else %}
    <div class="alert alert-info">
      Noch keine Konfigurationen vorhanden. Erstelle eine neue.
    </div>
  {% endif %}
</div>

<!-- Modal für neue Config (Platzhalter – später ausbauen) -->
<div class="modal fade" id="newConfigModal" tabindex="-1" aria-labelledby="newConfigModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="newConfigModalLabel">Neue Konfiguration anlegen</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Hier könnte später ein Formular kommen (Name, Hub-ID, Kanäle...).<br>
           Für den Moment: Erstelle einfach eine .json-Datei im <code>configs/</code>-Ordner.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Schließen</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
  document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.delete-config-btn').forEach(btn => {
      btn.addEventListener('click', async () => {
        const filename = btn.dataset.filename;
        const name = btn.dataset.name;
        
        if (!confirm(`Sicher löschen: ${name} (${filename}) ?`)) return;
        
        try {
          const res = await fetch(`/admin/delete/${filename}`, { method: 'POST' });
          const data = await res.json();
          if (data.success) {
            alert('Gelöscht');
            location.reload();
          } else {
            alert('Fehler: ' + data.message);
          }
        } catch (err) {
          alert('Netzwerkfehler beim Löschen');
        }
      });
    });
  });
</script>
{% endblock %}