{% extends "base.html" %}
{% block title %}Webhooks — ComplyForm Dashboard{% endblock %}
{% block content %}
<div class="max-w-3xl mx-auto px-4 py-6">
  <div class="flex items-center justify-between mb-6">
    <h1 class="text-xl font-semibold" style="color: var(--text-primary);">Webhooks</h1>
    <a href="/dashboard/settings" class="text-sm" style="color: var(--accent);">Back to Settings</a>
  </div>

  {% if can_create %}
  <section class="mb-8 p-4 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
    <h2 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">Create Webhook</h2>
    <form hx-post="/dashboard/settings/webhooks/create"
          hx-target="#webhooks-list" hx-swap="outerHTML"
          class="space-y-3">
      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
      <div>
        <label class="block text-xs mb-1" style="color: var(--text-secondary);">URL (HTTPS)</label>
        <input type="url" name="url" required pattern="https://.*"
               class="w-full px-3 py-1.5 rounded text-sm"
               style="background: var(--bg-surface-hover); color: var(--text-primary); border: 1px solid var(--border-default);">
      </div>
      <div>
        <label class="block text-xs mb-1" style="color: var(--text-secondary);">Event Types</label>
        <div class="flex flex-wrap gap-2">
          {% for et in ["scan.completed", "score.changed", "drift.detected", "report.generated", "license.expiring", "member.invited"] %}
          <label class="flex items-center gap-1 text-xs" style="color: var(--text-primary);">
            <input type="checkbox" name="event_types" value="{{ et }}"> {{ et }}
          </label>
          {% endfor %}
        </div>
      </div>
      <button type="submit" class="px-4 py-1.5 rounded text-sm font-medium"
              style="background: var(--accent); color: white;">
        Create Webhook
      </button>
    </form>
  </section>
  {% endif %}

  <div id="webhooks-list">
    <section class="p-4 rounded-lg" style="background: var(--bg-surface); border: 1px solid var(--border-default);">
      <h2 class="text-lg font-semibold mb-3" style="color: var(--text-primary);">
        Endpoints ({{ webhooks|length }}/{{ webhook_limit }})
      </h2>
      {% for wh in webhooks %}
      <div class="mb-4 p-3 rounded" style="border: 1px solid var(--border-default);">
        <div class="flex justify-between items-start mb-2">
          <div>
            <code class="text-sm" style="color: var(--text-primary);">{{ wh.url[:60] }}{% if wh.url|length > 60 %}...{% endif %}</code>
            <div class="mt-1">
              <span class="px-2 py-0.5 rounded text-xs font-medium"
                    style="background: {% if wh.status == 'active' %}#dcfce7; color: #166534{% elif wh.status == 'unhealthy' %}#fef9c3; color: #854d0e{% else %}#f3f4f6; color: #6b7280{% endif %};">
                {{ wh.status }}
              </span>
              {% for et in wh.event_types %}
              <span class="ml-1 px-1.5 py-0.5 rounded text-xs" style="background: var(--bg-surface-hover); color: var(--text-secondary);">{{ et }}</span>
              {% endfor %}
            </div>
          </div>
          <div class="flex gap-2">
            <button hx-post="/dashboard/settings/webhooks/{{ wh.webhook_id }}/test"
                    class="text-xs px-2 py-1 rounded"
                    style="color: var(--accent); border: 1px solid var(--border-default);">
              Test
            </button>
            <button hx-delete="/dashboard/settings/webhooks/{{ wh.webhook_id }}"
                    hx-target="#webhooks-list" hx-swap="outerHTML"
                    hx-confirm="Delete this webhook?"
                    class="text-xs px-2 py-1 rounded"
                    style="color: #dc2626; border: 1px solid var(--border-default);">
              Delete
            </button>
          </div>
        </div>
        <details>
          <summary class="text-xs cursor-pointer" style="color: var(--text-secondary);">Delivery Log</summary>
          <div hx-get="/dashboard/settings/webhooks/{{ wh.webhook_id }}/deliveries"
               hx-trigger="toggle" hx-swap="innerHTML"
               class="mt-2 text-xs" style="color: var(--text-secondary);">
            Loading...
          </div>
        </details>
      </div>
      {% endfor %}
      {% if not webhooks %}
      <p class="text-sm" style="color: var(--text-secondary);">No webhooks configured.</p>
      {% endif %}
    </section>
  </div>
</div>

<div id="secret-modal" class="hidden fixed inset-0 z-50 flex items-center justify-center"
     style="background: rgba(0,0,0,0.5);">
  <div class="p-6 rounded-lg max-w-md w-full" style="background: var(--bg-surface);">
    <h3 class="text-lg font-semibold mb-2" style="color: var(--text-primary);">Signing Secret</h3>
    <p class="text-sm mb-3" style="color: var(--text-secondary);">
      Copy this secret now. It will not be shown again.
    </p>
    <code id="secret-value" class="block p-2 rounded text-sm break-all"
          style="background: var(--bg-surface-hover); color: var(--text-primary);"></code>
    <button onclick="document.getElementById('secret-modal').classList.add('hidden')"
            class="mt-4 px-4 py-1.5 rounded text-sm font-medium"
            style="background: var(--accent); color: white;">
      Done
    </button>
  </div>
</div>
{% endblock %}