{% extends "base.html" %}
{% import "macros/ui.html" as m %}

{% block title %}Notifications — Ontoref{% endblock title %}
{% block nav_notifications %}active{% endblock nav_notifications %}
{% block nav_group_track %}active{% endblock nav_group_track %}

{% block content %}
<div class="mb-6 flex items-center justify-between">
  <div>
    <h1 class="text-2xl font-bold">Notifications</h1>
    <p class="text-base-content/50 text-sm mt-0.5">{{ total }} total</p>
  </div>
  {% if other_projects %}
  <button onclick="document.getElementById('emit-modal').showModal()"
          class="btn btn-sm btn-primary gap-1.5">
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
    </svg>
    Emit notification
  </button>
  {% endif %}
</div>

{% if notifications | length == 0 %}
  {{ m::empty_state(message="No notifications in store") }}
{% else %}
<div class="overflow-x-auto">
  <table class="table table-zebra table-sm w-full bg-base-200 rounded-lg">
    <thead>
      <tr class="text-base-content/50 text-xs uppercase tracking-wider">
        <th>#</th>
        <th>Type</th>
        <th>Project</th>
        <th>Content</th>
        <th>Source</th>
        <th>Age</th>
      </tr>
    </thead>
    <tbody>
      {% for n in notifications %}
      <tr>
        <td class="font-mono text-xs text-base-content/40">{{ n.id }}</td>
        <td>
          {% if n.is_custom %}
            <span class="badge badge-xs badge-primary font-mono">{{ n.custom_kind | default(value="custom") }}</span>
          {% else %}
            {{ m::event_badge(event=n.event) }}
          {% endif %}
        </td>
        <td class="font-mono text-sm">
          {{ n.project }}
          {% if n.source_project and n.source_project != n.project %}
            <span class="text-xs text-base-content/40 block">← {{ n.source_project }}</span>
          {% endif %}
        </td>
        <td>
          {% if n.is_custom %}
            <div class="font-medium text-sm">{{ n.custom_title | default(value="") }}</div>
            {% if n.custom_payload %}
            {% set p = n.custom_payload %}
            {% if p.actions %}
            <!-- DAG action buttons -->
            <div class="flex flex-wrap gap-1 mt-1.5">
              {% for act in p.actions %}
              <form hx-post="{{ base_url }}/notifications/{{ n.id }}/action"
                    hx-target="this"
                    hx-swap="outerHTML"
                    class="inline">
                <input type="hidden" name="action_id" value="{{ act.id }}">
                <button type="submit" class="btn btn-xs
                  {% if act.mode == 'backlog_approve' %}btn-success
                  {% elif act.mode == 'backlog_reject' %}btn-ghost
                  {% elif act.mode == 'auto' %}btn-error
                  {% elif act.mode == 'semi' %}btn-warning
                  {% else %}btn-ghost{% endif %} gap-1">
                  {% if act.mode == 'backlog_approve' %}✓
                  {% elif act.mode == 'backlog_reject' %}✕
                  {% elif act.mode == 'auto' %}▶{% elif act.mode == 'semi' %}◑{% else %}→{% endif %}
                  {{ act.label }}
                </button>
              </form>
              {% endfor %}
            </div>
            {% else %}
            <details class="mt-1">
              <summary class="text-xs text-base-content/40 cursor-pointer">payload</summary>
              <pre class="text-xs text-base-content/60 mt-1 bg-base-300 rounded p-2 max-w-xs overflow-auto">{{ p | json_encode(pretty=true) }}</pre>
            </details>
            {% endif %}
            {% endif %}
          {% else %}
            <div class="flex flex-col gap-0.5">
              {% for f in n.files %}
                <code class="text-xs text-base-content/60">{{ f }}</code>
              {% endfor %}
            </div>
          {% endif %}
        </td>
        <td class="text-xs font-mono text-base-content/50">
          {{ n.source_actor | default(value="—") }}
        </td>
        <td class="text-xs text-base-content/60 whitespace-nowrap">{{ n.age_secs }}s ago</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

{% if other_projects %}
<!-- Emit notification modal -->
<dialog id="emit-modal" class="modal">
  <div class="modal-box max-w-lg">
    <h3 class="font-bold text-base mb-4">Emit Notification</h3>
    <form hx-post="{{ base_url }}/notifications/emit"
          hx-swap="none"
          hx-on::after-request="if(event.detail.successful){document.getElementById('emit-modal').close();this.reset()}"
          class="space-y-3">
      <div class="form-control">
        <label class="label py-1"><span class="label-text text-sm">Target project</span></label>
        <select name="target_slug" class="select select-bordered select-sm" required>
          {% for p in other_projects %}
          <option value="{{ p }}" {% if p == slug %}selected{% endif %}>{{ p }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="grid grid-cols-2 gap-3">
        <div class="form-control">
          <label class="label py-1"><span class="label-text text-sm">Kind</span></label>
          <input type="text" name="kind" id="emit-kind" required
                 placeholder="e.g. backlog_delegation"
                 list="kind-suggestions"
                 class="input input-bordered input-sm w-full">
          <datalist id="kind-suggestions">
            <option value="backlog_delegation">
            <option value="cross_ref">
            <option value="alert">
            <option value="review_request">
            <option value="status_update">
          </datalist>
        </div>
        <div class="form-control">
          <label class="label py-1"><span class="label-text text-sm">Actor (optional)</span></label>
          <input type="text" name="source_actor" placeholder="your name or role"
                 class="input input-bordered input-sm w-full">
        </div>
      </div>
      <div class="form-control">
        <label class="label py-1"><span class="label-text text-sm">Title</span></label>
        <input type="text" name="title" id="emit-title" required
               placeholder="Short description"
               class="input input-bordered input-sm w-full">
      </div>
      <div class="form-control">
        <label class="label py-1"><span class="label-text text-sm">Payload (JSON, optional)</span></label>
        <textarea name="payload" id="emit-payload" rows="4"
                  placeholder='{ "item_id": "TSK-001", "url": "..." }'
                  class="textarea textarea-bordered textarea-sm w-full font-mono text-xs"></textarea>
      </div>
      <div class="modal-action mt-2">
        <button type="button" onclick="document.getElementById('emit-modal').close()"
                class="btn btn-sm btn-ghost">Cancel</button>
        <button type="submit" class="btn btn-sm btn-primary">Send</button>
      </div>
    </form>
  </div>
  <form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>
{% endif %}
{% endblock content %}

{% block scripts %}
<script>
// Pre-fill emit modal from URL params (?kind=...&title=...&payload=...&target=...)
(function() {
  const p = new URLSearchParams(location.search);
  if (!p.has('kind') && !p.has('title')) return;
  const modal = document.getElementById('emit-modal');
  if (!modal) return;
  ['kind','title','payload'].forEach(k => {
    const v = p.get(k);
    const el = document.getElementById('emit-' + k);
    if (v && el) el.value = v;
  });
  const target = p.get('target');
  if (target) {
    const sel = modal.querySelector('select[name=target_slug]');
    if (sel) sel.value = target;
  }
  modal.showModal();
  history.replaceState(null, '', location.pathname);
})();
</script>
{% endblock scripts %}