{% extends "base.html" %}
{% block title %} — Step 6: Events{% endblock %}

{% block stepper %}
<div class="bg-slate-900/60 border-b border-slate-800">
  <div class="max-w-6xl mx-auto px-4 py-3">
    <div class="flex items-center gap-1 overflow-x-auto">
      {% set step_names = ["Auth", "Opret Bruger", "Tilslut Bank", "Konti", "Transaktioner", "Events"] %}
      {% for i in range(1, 7) %}
        <a href="/demo/step/{{ i }}"
           class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm whitespace-nowrap transition
                  {% if i == 6 %}bg-violet-600 text-white font-semibold
                  {% elif i < 6 %}text-slate-300 hover:text-white
                  {% else %}text-slate-600 hover:text-slate-400{% endif %}">
          <span class="w-5 h-5 rounded-full text-xs font-bold flex items-center justify-center
                       {% if i < 6 %}bg-slate-700 text-slate-300
                       {% elif i == 6 %}bg-violet-500 text-white
                       {% else %}bg-slate-800 text-slate-600{% endif %}">{{ i }}</span>
          {{ step_names[i-1] }}
        </a>
        {% if i < 6 %}
          <span class="text-slate-700">›</span>
        {% endif %}
      {% endfor %}
    </div>
  </div>
</div>
{% endblock %}

{% block content %}
<div class="mb-6">
  <div class="flex items-center gap-2 mb-1">
    <span class="w-8 h-8 rounded-full bg-violet-600 text-white text-sm font-bold flex items-center justify-center">6</span>
    <div>
      <h2 class="text-xl font-bold text-white">Events v2</h2>
      <p class="text-slate-400 text-sm">Real-time Event Feed</p>
    </div>
    <span class="ml-2 text-xs px-2 py-0.5 rounded-full font-mono font-semibold bg-violet-900/50 text-violet-300 border border-violet-700/40">v2 ✦</span>
  </div>
  <p class="text-slate-400 text-sm mt-2 max-w-2xl">
    Tink Events v2 giver real-time notifikationer når transaktioner bogføres. 
    Kombineret med webhooks kan din applikation reagere på bankbevægelser øjeblikkeligt.
  </p>
</div>

{% if error %}
<div class="bg-red-950/50 border border-red-800/50 rounded-xl p-5 mb-6">
  <pre class="text-red-400 text-sm font-mono whitespace-pre-wrap">{{ error }}</pre>
</div>
{% endif %}

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

  <!-- Booked transactions events -->
  <div class="space-y-3">
    <div class="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden">
      <div class="px-4 py-3 border-b border-slate-800">
        <div class="flex items-center justify-between">
          <div>
            <span class="text-sm font-semibold text-white">Bogførte transaktioner</span>
            <code class="block text-xs text-emerald-400 font-mono mt-0.5">GET /events/v2/account-booked-transactions</code>
          </div>
          <span class="text-xs px-2 py-0.5 rounded-full bg-violet-900/50 text-violet-300 border border-violet-700/40 font-mono">v2</span>
        </div>
      </div>
      <!-- curl -->
      <div class="px-4 py-3 border-b border-slate-800 bg-slate-950/40">
        <div class="flex items-center justify-between mb-2">
          <span class="text-xs text-slate-500 uppercase tracking-wider">cURL</span>
          <button onclick="copyToClipboard('curl-booked')"
                  class="text-xs text-slate-400 hover:text-white transition px-2 py-1 rounded bg-slate-800">Kopier</button>
        </div>
        <pre id="curl-booked" class="text-xs text-amber-300 font-mono whitespace-pre-wrap">{{ curl_booked }}</pre>
      </div>
      <!-- response -->
      <div class="p-4 max-h-96 overflow-y-auto">
        {% if result_booked %}
          {% if is_demo %}<p class="text-xs text-amber-400/70 mb-2 font-semibold">⚠ Sample Data</p>{% endif %}
          <pre class="raw-json">{{ result_booked | tojson(indent=2) }}</pre>
        {% else %}
          <p class="text-slate-500 text-sm text-center py-6">Ingen data — tilslut bank i Step 3 først.</p>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- All transaction events -->
  <div class="space-y-3">
    <div class="bg-slate-900 border border-slate-800 rounded-xl overflow-hidden">
      <div class="px-4 py-3 border-b border-slate-800">
        <div class="flex items-center justify-between">
          <div>
            <span class="text-sm font-semibold text-white">Alle transaktionshændelser</span>
            <code class="block text-xs text-emerald-400 font-mono mt-0.5">GET /events/v2/account-transactions</code>
          </div>
          <span class="text-xs px-2 py-0.5 rounded-full bg-violet-900/50 text-violet-300 border border-violet-700/40 font-mono">v2</span>
        </div>
      </div>
      <!-- curl -->
      <div class="px-4 py-3 border-b border-slate-800 bg-slate-950/40">
        <div class="flex items-center justify-between mb-2">
          <span class="text-xs text-slate-500 uppercase tracking-wider">cURL</span>
          <button onclick="copyToClipboard('curl-all')"
                  class="text-xs text-slate-400 hover:text-white transition px-2 py-1 rounded bg-slate-800">Kopier</button>
        </div>
        <pre id="curl-all" class="text-xs text-amber-300 font-mono whitespace-pre-wrap">{{ curl_all }}</pre>
      </div>
      <!-- response -->
      <div class="p-4 max-h-96 overflow-y-auto">
        {% if result_all %}
          {% if is_demo %}<p class="text-xs text-amber-400/70 mb-2 font-semibold">⚠ Sample Data</p>{% endif %}
          <pre class="raw-json">{{ result_all | tojson(indent=2) }}</pre>
        {% else %}
          <p class="text-slate-500 text-sm text-center py-6">Ingen data — tilslut bank i Step 3 først.</p>
        {% endif %}
      </div>
    </div>
  </div>

</div>

<!-- Webhook info box -->
<div class="mt-6 bg-slate-900 border border-slate-800 rounded-xl p-5">
  <h3 class="text-white font-semibold mb-2 flex items-center gap-2">
    <svg class="w-4 h-4 text-violet-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg>
    Webhooks
  </h3>
  <p class="text-slate-400 text-sm mb-3">
    Konfigurer en webhook i Tink Console til at poste events til <code class="text-violet-300">/webhooks/tink</code> på dette endpoint.
    Events sendes i real-time når transaktioner opdateres.
  </p>
  <div class="bg-slate-950 rounded-lg p-3">
    <code class="text-xs text-emerald-400 font-mono">POST {{ app_base_url }}/webhooks/tink</code>
  </div>
</div>

<!-- Final CTA -->
<div class="mt-8 bg-gradient-to-br from-violet-900/30 to-indigo-900/20 border border-violet-700/30 rounded-2xl p-8 text-center">
  <h3 class="text-2xl font-bold text-white mb-2">Det var hele flowet 🎉</h3>
  <p class="text-slate-400 mb-6 max-w-lg mx-auto">
    Fra brugeroprettelse til live transaktioner og events — alt via Tink v2 API. 
    Klar til at integrere i MoneyCapp.
  </p>
  <div class="flex gap-3 justify-center">
    <a href="/" class="px-5 py-2.5 border border-slate-600 text-slate-300 hover:text-white hover:border-slate-400 rounded-xl text-sm transition">Kør demo igen</a>
    <a href="https://docs.tink.com" target="_blank"
       class="px-5 py-2.5 bg-violet-600 hover:bg-violet-500 text-white rounded-xl text-sm font-semibold transition">
      Tink Docs →
    </a>
  </div>
</div>

<!-- Navigation -->
<div class="mt-4 flex justify-start">
  <a href="/demo/step/5"
     class="px-4 py-2.5 border border-slate-700 text-slate-300 hover:text-white hover:border-slate-500 rounded-xl text-sm transition">
    ← Step 5
  </a>
</div>
{% endblock %}