{% extends "base.html" %}
{% block title %}Notifications{% endblock %}
{% block heading %}🔔 Notifications · WhatsApp / Slack / Email{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Einstellungen / Notifications</p>{% endblock %}

{% block content %}
<p style="font-size:13px;color:var(--card-text-muted);margin-bottom:14px;">
  Outbound-Notifications bei Events wie <code>order.created</code>, <code>invoice.overdue</code>,
  <code>maintenance.due</code>. Kann an Slack/Discord-Webhook, Telegram-Bot,
  WhatsApp (via Twilio/360dialog) oder Email gesendet werden.
</p>

<div class="card" style="margin-bottom:14px;">
  <div class="card-header"><h2>Neuer Channel</h2></div>
  <form method="post" action="/notifications/channels/new" class="p-5"
        style="display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;align-items:end;">
    <div>
      <label class="text-[10px] uppercase font-semibold text-neutral-500">Typ</label>
      <select name="kind" class="select mt-1 w-full">
        <option value="slack">Slack/Discord-Webhook</option>
        <option value="telegram">Telegram-Bot</option>
        <option value="whatsapp">WhatsApp (Twilio)</option>
        <option value="email">E-Mail</option>
        <option value="webhook">Generischer Webhook</option>
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase font-semibold text-neutral-500">Name *</label>
      <input class="input mt-1 w-full" name="name" required placeholder="z.B. Werkstattleiter-Slack">
    </div>
    <div style="grid-column:span 2;">
      <label class="text-[10px] uppercase font-semibold text-neutral-500">Ziel *</label>
      <input class="input mt-1 w-full" name="target" required
             placeholder="Webhook-URL / Phone-Nr / E-Mail">
    </div>
    <div style="grid-column:span 2;">
      <label class="text-[10px] uppercase font-semibold text-neutral-500">Event-Filter (komma-getrennt, leer = alle)</label>
      <input class="input mt-1 w-full" name="event_filter"
             placeholder="z.B. order.created,invoice.overdue,maintenance.due">
    </div>
    <div><button class="btn btn-primary w-full" type="submit">Hinzufügen</button></div>
  </form>
</div>

<div class="card">
  <div class="card-header"><div><h2>Aktive Channels ({{ channels|length }})</h2></div></div>
  <table class="data-table">
    <thead><tr><th>Typ</th><th>Name</th><th>Ziel</th><th>Filter</th><th>Aktiv</th></tr></thead>
    <tbody>
      {% for c in channels %}
      <tr>
        <td><span class="badge badge-neutral" style="font-size:10px;">{{ c.kind }}</span></td>
        <td><strong>{{ c.name }}</strong></td>
        <td class="text-xs" style="font-family:monospace;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ c.target }}</td>
        <td class="text-xs">{{ c.event_filter or '— alle —' }}</td>
        <td>{% if c.active %}✓{% else %}—{% endif %}</td>
      </tr>
      {% else %}
      <tr><td colspan="5" style="text-align:center;padding:24px;color:var(--card-text-muted);">
        Noch keine Channels eingerichtet.
      </td></tr>
      {% endfor %}
    </tbody>
  </table>
  <div class="p-4 border-t" style="border-color:var(--card-border-2);">
    <button class="btn btn-secondary btn-sm" onclick="
      fetch('/api/notifications/test', {
        method:'POST',
        headers:{'Content-Type':'application/json'},
        body: JSON.stringify({event:'test.event', payload:{message:'Hello from Takoma!'}})
      }).then(r=>r.json()).then(d=>{
        if(window.toast) window.toast('Test gesendet an ' + d.sent + ' Channels', 'success');
      });
    ">🧪 Test-Nachricht senden</button>
  </div>
</div>

<p style="margin-top:14px;font-size:11px;color:var(--card-text-muted);">
  <strong>Verfügbare Events:</strong>
  <code>order.created</code> · <code>order.released</code> · <code>order.completed</code>
  · <code>invoice.created</code> · <code>invoice.overdue</code>
  · <code>po.approval</code> · <code>maintenance.due</code> · <code>incident.reported</code>
</p>
{% endblock %}