{% extends "base.html" %}

{% block title %}Workflows{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/settings" class="hover:underline">Einstellungen</a> / Workflows</p>{% endblock %}
{% block heading %}Workflow-Regeln{% endblock %}

{% block content %}
<form method="post" action="/settings/workflows/new" class="card max-w-4xl mb-4">
  <div class="card-header"><div>
    <h2>Neue Regel</h2>
    <p class="sub">
      Trigger → JSON-Definition → Aktion(en). Jede Regel feuert wenn ihr Trigger
      auftritt und die optionale Bedingung passt.
    </p>
  </div></div>
  <div class="p-5 grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Name *</label>
      <input class="input mt-1 w-full" type="text" name="name" required
             placeholder="z.B. Mahnung-2 nach 14 Tagen">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Trigger *</label>
      <select name="trigger" required class="select mt-1 w-full">
        {% for code, label in triggers.items() %}
        <option value="{{ code }}">{{ label }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="md:col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Definition (JSON)</label>
      <textarea name="definition" rows="6" class="input mt-1 w-full" style="font-family:monospace;font-size:12px;"
                placeholder='{"days": 14, "actions": [{"type": "send_email", "to": "kunde@x.de", "template": "mahnung-2"}, {"type": "set_dunning"}]}'>{}</textarea>
      <details class="mt-2">
        <summary style="cursor:pointer;font-size:11px;color:#fbbf24;">Verfügbare Aktionen anzeigen</summary>
        <table style="font-size:11px;margin-top:6px;">
          {% for code, label in actions.items() %}
          <tr>
            <td style="padding:2px 12px 2px 0;color:var(--brand-blue-light);font-weight:700;">{{ code }}</td>
            <td style="color:var(--card-text-muted);">{{ label }}</td>
          </tr>
          {% endfor %}
        </table>
      </details>
    </div>
    <label class="flex items-center gap-2 text-sm md:col-span-2">
      <input type="checkbox" name="is_enabled" value="1" checked>
      Sofort aktivieren
    </label>
  </div>
  <div class="px-5 py-4 border-t flex justify-end" style="border-color: var(--card-border-2);">
    <button class="btn btn-primary" type="submit">Regel anlegen</button>
  </div>
</form>

<div class="card">
  <div class="card-header"><div>
    <h2>Alle Regeln <span class="text-neutral-400 font-normal text-sm">· {{ workflows|length }}</span></h2>
  </div></div>
  {% if workflows %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>Trigger</th>
        <th>Definition</th>
        <th class="num">Läufe</th>
        <th class="num">Letzter Lauf</th>
        <th>Aktiv</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for w in workflows %}
      <tr>
        <td class="font-semibold">{{ w.name }}</td>
        <td class="text-xs">{{ triggers.get(w.trigger, w.trigger) }}</td>
        <td class="text-xs nums" style="max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--card-text-muted);"
            title="{{ w.definition }}">
          <code>{{ w.definition }}</code>
        </td>
        <td class="num text-xs nums">{{ w.run_count }}</td>
        <td class="text-xs nums" style="color: var(--card-text-muted);">
          {% if w.last_run_at %}{{ w.last_run_at[:16] }}<br><span style="font-size:9px;">{{ w.last_status or '' }}</span>{% else %}—{% endif %}
        </td>
        <td>
          <label style="display:inline-flex;align-items:center;cursor:pointer;">
            <input type="checkbox" data-wf-id="{{ w.id }}" class="wf-toggle" {% if w.is_enabled %}checked{% endif %}>
          </label>
        </td>
        <td class="text-right">
          <button type="button" class="btn btn-sm btn-secondary wf-delete-btn"
                  data-wf-id="{{ w.id }}"
                  style="color:#ef4444;border-color:#ef4444;">Löschen</button>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center" style="color: var(--card-text-muted);">
    <div style="font-size: 48px; line-height: 1; opacity: 0.20; margin-bottom: 12px;">⚙</div>
    <p class="text-sm">Noch keine Workflow-Regeln definiert.</p>
  </div>
  {% endif %}
</div>

<script>
document.addEventListener('change', e => {
  const cb = e.target.closest('.wf-toggle');
  if (!cb) return;
  fetch('/api/workflows/' + cb.dataset.wfId + '/toggle', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({enabled: cb.checked}),
  });
});
document.addEventListener('click', e => {
  const btn = e.target.closest('.wf-delete-btn');
  if (!btn) return;
  if (!confirm('Workflow-Regel löschen?')) return;
  fetch('/api/workflows/' + btn.dataset.wfId + '/delete', { method: 'POST' })
    .then(r => r.json()).then(d => { if (d.ok) location.reload(); });
});
</script>
{% endblock %}