{% extends "base.html" %}
{% block title %}Dashboard — Dockhand Backup{% endblock %}

{% macro status_badge(status) %}
  {% set cls = {
    'running': 'bg-emerald-500/20 text-emerald-300',
    'stopped': 'bg-slate-500/20 text-slate-300',
    'partial': 'bg-amber-500/20 text-amber-300',
    'created': 'bg-sky-500/20 text-sky-300',
  }.get(status, 'bg-slate-700/40 text-slate-400') %}
  <span class="rounded-full px-2 py-0.5 text-xs font-medium {{ cls }}">{{ status }}</span>
{% endmacro %}

{% block content %}
<div class="flex flex-wrap items-center justify-between gap-3 mb-5">
  <div>
    <h1 class="text-xl font-semibold text-white">Stacks <span class="text-slate-500 text-base">({{ stacks|length }})</span></h1>
    <p class="text-sm text-slate-400">
      Dockhand: <span class="font-medium text-slate-300">{{ dockhand_mode }}</span>
      · Nächster Lauf:
      <span class="font-medium text-slate-300">{{ next_run.strftime('%Y-%m-%d %H:%M %Z') if next_run else 'deaktiviert' }}</span>
    </p>
  </div>
  <div class="flex gap-2">
    <button type="button" onclick="document.getElementById('reorder-modal').classList.remove('hidden')"
            class="rounded-md border border-slate-700 px-3 py-2 text-sm hover:bg-slate-800">Reihenfolge</button>
    <form method="post" action="{{ url_for('main.refresh_paths') }}">
      <button class="rounded-md border border-slate-700 px-3 py-2 text-sm hover:bg-slate-800" title="Bind-Pfade per Container-Inspect neu ermitteln">Pfade aktualisieren</button>
    </form>
    <form method="post" action="{{ url_for('main.discover') }}">
      <button class="rounded-md border border-slate-700 px-3 py-2 text-sm hover:bg-slate-800">Neue übernehmen</button>
    </form>
    <form method="post" action="{{ url_for('main.backup_all') }}"
          onsubmit="return confirm('Jetzt ein Backup ALLER Stacks starten?');">
      <button class="rounded-md bg-sky-600 px-3 py-2 text-sm font-medium text-white hover:bg-sky-500">Backup: alle</button>
    </form>
  </div>
</div>

{% if new_stacks %}
<div class="mb-5 rounded-md border border-sky-800 bg-sky-900/30 px-4 py-3 text-sm text-sky-200">
  Neue Stacks erkannt: <strong>{{ new_stacks|join(', ') }}</strong> — werden beim nächsten Lauf automatisch übernommen.
</div>
{% endif %}

<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  {% for s in stacks %}
  <div class="rounded-lg border border-slate-800 bg-slate-900/40 p-3 flex flex-col gap-2 {{ 'opacity-60' if not s.enabled }}">
    <div class="flex items-start justify-between gap-2">
      <div class="min-w-0">
        <div class="font-medium text-white truncate" title="{{ s.name }}">{{ s.name }}</div>
        <div class="mt-1 flex flex-wrap items-center gap-1">
          {{ status_badge(s.status) }}
          {% if not s.enabled %}<span class="rounded-full bg-rose-500/20 px-2 py-0.5 text-xs text-rose-300">ausgeschlossen</span>{% endif %}
        </div>
      </div>
    </div>

    <div class="text-xs text-slate-400 leading-relaxed">
      {% if s.bind_total %}{{ s.bind_active }}/{{ s.bind_total }} Binds aktiv{% endif %}
      {% if s.extra_paths %}{% if s.bind_total %} · {% endif %}{{ s.extra_paths|length }} Extra{% endif %}
      <br>
      Letztes Backup:
      {% if s.last %}
        <span class="text-slate-300">{{ s.last.ts|short_ts }}</span>
        <span class="{{ 'text-emerald-400' if s.last.status in ('ok','simulated') else 'text-amber-400' if s.last.status=='partial' else 'text-rose-400' }}">{{ s.last.status }}</span>
        <span class="text-slate-500">({{ s.last.size|human_size }})</span>
      {% else %}<span class="text-slate-500">nie</span>{% endif %}
    </div>

    <div class="mt-auto flex flex-wrap gap-1 pt-1">
      <form method="post" action="{{ url_for('main.backup_one', name=s.name) }}"
            onsubmit="return confirm('Jetzt ein Backup von „{{ s.name }}“ starten?');">
        <button class="rounded-md bg-slate-700 px-2.5 py-1.5 text-xs font-medium text-white hover:bg-slate-600">Backup</button>
      </form>
      <button type="button"
        onclick="openPaths(this)"
        data-name="{{ s.name }}"
        data-binds='{{ s.bind_paths|tojson }}'
        data-disabled='{{ s.disabled_binds|tojson }}'
        data-extra="{{ s.extra_paths|join('\n') }}"
        class="rounded-md border border-slate-700 px-2.5 py-1.5 text-xs hover:bg-slate-800">Pfade</button>
      <form method="post" action="{{ url_for('main.toggle', name=s.name) }}">
        <button class="rounded-md border border-slate-700 px-2.5 py-1.5 text-xs hover:bg-slate-800">
          {{ 'Einschließen' if not s.enabled else 'Ausschließen' }}
        </button>
      </form>
    </div>
  </div>
  {% else %}
  <p class="text-slate-400 text-sm">Noch keine Stacks. „Neue übernehmen" klicken oder auf den nächsten Lauf warten.</p>
  {% endfor %}
</div>

<!-- ===== Reorder modal ===== -->
<div id="reorder-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
  <div class="w-full max-w-md rounded-xl border border-slate-700 bg-slate-900 p-4 shadow-xl">
    <div class="flex items-center justify-between mb-3">
      <h2 class="font-semibold text-white">Reihenfolge festlegen</h2>
      <button type="button" onclick="document.getElementById('reorder-modal').classList.add('hidden')" class="text-slate-400 hover:text-white">✕</button>
    </div>
    <p class="text-xs text-slate-400 mb-2">Namen ziehen zum Sortieren. Diese Reihenfolge bestimmt, in welcher die Stacks gesichert werden.</p>
    <ul id="reorder-list" class="max-h-[60vh] overflow-y-auto space-y-1">
      {% for s in stacks %}
      <li data-name="{{ s.name }}" class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-950 px-3 py-2 cursor-grab">
        <span class="text-slate-600">⋮⋮</span>
        <span class="text-sm text-slate-200">{{ s.name }}</span>
      </li>
      {% endfor %}
    </ul>
    <div class="mt-4 flex justify-end gap-2">
      <button type="button" onclick="document.getElementById('reorder-modal').classList.add('hidden')"
              class="rounded-md border border-slate-700 px-3 py-2 text-sm hover:bg-slate-800">Abbrechen</button>
      <button type="button" onclick="saveOrder()"
              class="rounded-md bg-sky-600 px-3 py-2 text-sm font-medium text-white hover:bg-sky-500">Speichern</button>
    </div>
  </div>
</div>

<!-- ===== Paths modal (bind toggles + extra paths) ===== -->
<div id="paths-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-4">
  <form id="paths-form" method="post" class="w-full max-w-lg rounded-xl border border-slate-700 bg-slate-900 p-4 shadow-xl max-h-[85vh] overflow-y-auto">
    <div class="flex items-center justify-between mb-3">
      <h2 class="font-semibold text-white">Pfade — <span id="paths-stack"></span></h2>
      <button type="button" onclick="document.getElementById('paths-modal').classList.add('hidden')" class="text-slate-400 hover:text-white">✕</button>
    </div>

    <div class="mb-2 flex items-center justify-between">
      <label class="block text-xs text-slate-400">Erkannte Bind-Mounts — abgeschaltete werden <strong>ohne Warnung</strong> übersprungen:</label>
      <div class="text-xs text-slate-500">
        <button type="button" onclick="setAllBinds(true)" class="hover:text-white">alle an</button> ·
        <button type="button" onclick="setAllBinds(false)" class="hover:text-white">alle aus</button>
      </div>
    </div>
    <div id="paths-binds" class="mb-4 space-y-1 rounded-md border border-slate-800 bg-slate-950 p-2 text-sm">
      <!-- checkboxes injected by JS -->
    </div>

    <label class="block text-xs text-slate-400 mb-1">Zusätzliche Pfade (ein Pfad pro Zeile):</label>
    <textarea id="paths-textarea" name="extra_paths" rows="4"
      class="w-full rounded-md border border-slate-700 bg-slate-950 px-2 py-1.5 text-sm font-mono"
      placeholder="/mnt/user/appdata/foo"></textarea>

    <div class="mt-4 flex justify-end gap-2">
      <button type="button" onclick="document.getElementById('paths-modal').classList.add('hidden')"
              class="rounded-md border border-slate-700 px-3 py-2 text-sm hover:bg-slate-800">Abbrechen</button>
      <button class="rounded-md bg-sky-600 px-3 py-2 text-sm font-medium text-white hover:bg-sky-500">Speichern</button>
    </div>
  </form>
</div>

<script>
  var REORDER_URL = '{{ url_for("main.reorder") }}';
  var PATHS_URL_TMPL = '{{ url_for("main.save_paths", name="__NAME__") }}';

  document.addEventListener('DOMContentLoaded', function () {
    var list = document.getElementById('reorder-list');
    if (list && typeof Sortable !== 'undefined') {
      Sortable.create(list, { animation: 150 });
    }
  });

  function saveOrder() {
    var list = document.getElementById('reorder-list');
    var names = Array.from(list.querySelectorAll('li')).map(li => li.dataset.name);
    var body = new URLSearchParams();
    names.forEach(n => body.append('order[]', n));
    fetch(REORDER_URL, { method: 'POST', body: body }).then(() => location.reload());
  }

  function openPaths(btn) {
    var name = btn.dataset.name;
    var binds = JSON.parse(btn.dataset.binds || '[]');
    var disabled = JSON.parse(btn.dataset.disabled || '[]');
    var extra = btn.dataset.extra || '';

    document.getElementById('paths-stack').textContent = name;
    document.getElementById('paths-textarea').value = extra;

    var box = document.getElementById('paths-binds');
    box.innerHTML = '';
    if (!binds.length) {
      box.innerHTML = '<p class="text-xs text-slate-500">Keine Bind-Mounts erkannt. „Pfade aktualisieren" auf dem Dashboard klicken.</p>';
    }
    binds.forEach(function (p) {
      var on = disabled.indexOf(p) === -1;
      var row = document.createElement('label');
      row.className = 'flex items-center gap-2 py-0.5 cursor-pointer';
      row.innerHTML =
        '<input type="hidden" name="all_bind" value="' + escapeAttr(p) + '">' +
        '<input type="checkbox" name="enabled_bind" value="' + escapeAttr(p) + '"' + (on ? ' checked' : '') + '>' +
        '<span class="font-mono text-xs ' + (on ? 'text-slate-200' : 'text-slate-500 line-through') + '">' + escapeHtml(p) + '</span>';
      var cb = row.querySelector('input[type=checkbox]');
      var span = row.querySelector('span');
      cb.addEventListener('change', function () {
        span.className = 'font-mono text-xs ' + (cb.checked ? 'text-slate-200' : 'text-slate-500 line-through');
      });
      box.appendChild(row);
    });

    document.getElementById('paths-form').action = PATHS_URL_TMPL.replace('__NAME__', encodeURIComponent(name));
    document.getElementById('paths-modal').classList.remove('hidden');
  }

  function setAllBinds(on) {
    document.querySelectorAll('#paths-binds input[type=checkbox]').forEach(function (cb) {
      cb.checked = on;
      cb.dispatchEvent(new Event('change'));
    });
  }

  function escapeHtml(s) {
    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }
  function escapeAttr(s) {
    return s.replace(/&/g, '&amp;').replace(/"/g, '&quot;');
  }
</script>
{% endblock %}