{% extends "base.html" %}
{% from "_macros.html" import money %}

{% block title %}Bank{% endblock %}
{% block heading %}Bank · Camt-Import{% endblock %}
{% block topbar_actions %}
  <div class="tabs">
    <a class="tab {% if not status_filter %}is-active{% endif %}" href="/bank">Alle</a>
    <a class="tab {% if status_filter == 'suggested' %}is-active{% endif %}" href="/bank?status=suggested">Vorschläge</a>
    <a class="tab {% if status_filter == 'unmatched' %}is-active{% endif %}" href="/bank?status=unmatched">Offen</a>
    <a class="tab {% if status_filter == 'matched' %}is-active{% endif %}" href="/bank?status=matched">Gebucht</a>
    <a class="tab {% if status_filter == 'ignored' %}is-active{% endif %}" href="/bank?status=ignored">Ignoriert</a>
  </div>
{% endblock %}

{% block content %}
{% if request.query_params.get('error') %}
<div class="card mb-4" style="border-color:#ef4444;background:rgba(239,68,68,0.08);">
  <div class="p-4 text-sm" style="color:#fca5a5;">
    ✗ {{ request.query_params.get('error') }}
  </div>
</div>
{% endif %}

{# ============== IMPORT-FORM ============== #}
<div class="card mb-4 max-w-4xl">
  <div class="card-header"><div>
    <h2>camt.053-XML importieren</h2>
    <p class="sub">Bank-Statement-Datei vom Online-Banking herunterladen und hier hochladen</p>
  </div></div>
  <form method="post" action="/bank/import" enctype="multipart/form-data"
        class="p-5 flex flex-wrap items-center gap-3">
    <input class="input" type="file" name="file" accept=".xml" required style="flex:1;min-width:200px;">
    <button class="btn btn-primary" type="submit">Importieren</button>
  </form>
  <p class="px-5 pb-4 text-[11px]" style="color: var(--card-text-muted);">
    Nach dem Import sucht der Auto-Matcher in jedem Verwendungszweck nach
    Rechnungsnummern im Format <code>RE-JJJJ-NNNN</code> und schlägt Treffer als
    „Vorschläge" vor — Bestätigung mit einem Klick.
  </p>
</div>

{# ============== STATEMENTS-LISTE ============== #}
{% if statements %}
<div class="card mb-4">
  <div class="card-header"><div>
    <h2>Importierte Statements</h2>
  </div></div>
  <table class="data-table">
    <thead>
      <tr>
        <th>Datei</th>
        <th>IBAN</th>
        <th class="num">Zeitraum</th>
        <th class="num">Eröffnung</th>
        <th class="num">Schluss</th>
        <th class="num">Tx</th>
        <th class="num">Offen</th>
        <th class="num">Vorschläge</th>
        <th>Importiert</th>
      </tr>
    </thead>
    <tbody>
      {% for s in statements %}
      <tr>
        <td class="text-xs nums" style="max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ s.file_name or '—' }}</td>
        <td class="text-xs nums">{{ s.iban or '—' }}</td>
        <td class="num text-xs nums">{{ s.from_date or '—' }} → {{ s.to_date or '—' }}</td>
        <td class="num nums">{{ money(s.opening_bal or 0) }}</td>
        <td class="num nums">{{ money(s.closing_bal or 0) }}</td>
        <td class="num nums">{{ s.tx_count }}</td>
        <td class="num nums">
          {% if s.unmatched %}<span style="color:#fbbf24;font-weight:700;">{{ s.unmatched }}</span>{% else %}—{% endif %}
        </td>
        <td class="num nums">
          {% if s.suggested %}<span style="color:#6ee7b7;font-weight:700;">{{ s.suggested }}</span>{% else %}—{% endif %}
        </td>
        <td class="text-xs nums" style="color: var(--card-text-muted);">{{ s.imported_at[:16] }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

{# ============== TRANSAKTIONEN ============== #}
<div class="card">
  <div class="card-header"><div>
    <h2>Transaktionen
      {% if status_filter %}<span class="text-neutral-400 font-normal text-sm">· {{ status_filter }}</span>{% endif %}
    </h2>
  </div></div>
  {% if transactions %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Datum</th>
        <th>Gegenpartei</th>
        <th>Verwendungszweck</th>
        <th class="num">Betrag</th>
        <th>Vorschlag / Match</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for t in transactions %}
      <tr data-tx-id="{{ t.id }}">
        <td class="text-xs nums" style="white-space:nowrap;">{{ t.booking_date or '—' }}</td>
        <td>
          <div class="text-sm">{{ t.counterparty_name or '—' }}</div>
          {% if t.counterparty_iban %}<div class="text-xs nums" style="color: var(--card-text-muted);">{{ t.counterparty_iban }}</div>{% endif %}
        </td>
        <td class="text-xs" style="max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--card-text-muted);" title="{{ t.remittance_info }}">
          {{ t.remittance_info or '—' }}
        </td>
        <td class="num nums font-semibold" style="color: {% if t.credit_debit == 'CRDT' %}#6ee7b7{% else %}#fca5a5{% endif %};">
          {{ '+ ' if t.credit_debit == 'CRDT' else '- ' }}{{ '%.2f'|format(t.amount) }} {{ t.currency }}
        </td>
        <td>
          {% if t.status == 'matched' %}
            <a href="/invoices/{{ t.matched_invoice_id }}" class="badge badge-emerald" style="text-decoration:none;">
              ✓ {{ t.matched_invoice_no }}
            </a>
            {% if t.matched_customer %}<div class="text-xs mt-1" style="color: var(--card-text-muted);">{{ t.matched_customer }}</div>{% endif %}
          {% elif t.status == 'suggested' %}
            <div>
              <a href="/invoices/{{ t.matched_invoice_id }}" style="color:#fbbf24;font-weight:700;" target="_blank">
                {{ t.matched_invoice_no }}
              </a>
              {% if t.note %}<div class="text-xs mt-1" style="color:#fcd34d;">⚠ {{ t.note }}</div>{% endif %}
            </div>
          {% elif t.status == 'ignored' %}
            <span class="badge badge-neutral">Ignoriert</span>
          {% else %}
            <span class="text-xs" style="color: var(--card-text-muted);">— offen —</span>
          {% endif %}
        </td>
        <td class="text-right" style="white-space:nowrap;">
          {% if t.status == 'suggested' %}
            <button type="button" class="btn btn-sm btn-primary tx-confirm-btn" data-tx-id="{{ t.id }}"
                    data-invoice-id="{{ t.matched_invoice_id }}">Bestätigen</button>
            <button type="button" class="btn btn-sm btn-secondary tx-ignore-btn" data-tx-id="{{ t.id }}">Ignorieren</button>
          {% elif t.status == 'unmatched' and t.credit_debit == 'CRDT' %}
            <button type="button" class="btn btn-sm btn-secondary tx-manual-btn" data-tx-id="{{ t.id }}"
                    data-amount="{{ t.amount }}">Manuell zuordnen</button>
            <button type="button" class="btn btn-sm btn-secondary tx-ignore-btn" data-tx-id="{{ t.id }}">Ignorieren</button>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center">
    <div style="font-size: 48px; line-height: 1; opacity: 0.20; margin-bottom: 12px;">🏦</div>
    <p class="text-sm" style="color: var(--card-text-muted);">Keine Transaktionen{% if status_filter %} mit Status „{{ status_filter }}"{% endif %}.</p>
  </div>
  {% endif %}
</div>

{# ============== MANUAL-MATCH-DIALOG ============== #}
<div id="match-dialog" style="display:none;position:fixed;inset:0;
     background:rgba(0,0,0,0.60);z-index:100;align-items:center;justify-content:center;">
  <div style="background:rgba(15,22,48,0.96);backdrop-filter:blur(14px);
       border:1px solid rgba(255,255,255,0.10);border-radius:14px;
       width:560px;max-width:90vw;padding:20px;color:white;">
    <h3 style="font-size:14px;font-weight:700;margin:0 0 6px;">Manueller Match</h3>
    <p style="font-size:11px;color:rgba(255,255,255,0.60);margin:0 0 12px;">
      Suche nach Rechnungs-Nr. oder Kundenname.
    </p>
    <input id="match-search" type="text" placeholder="z.B. RE-2026-0042 oder Müller GmbH"
           style="width:100%;padding:10px 14px;background:rgba(0,0,0,0.30);
                  color:white;border:1px solid rgba(255,255,255,0.18);
                  border-radius:8px;font-size:13px;">
    <div id="match-results" style="margin-top:10px;max-height:280px;overflow-y:auto;"></div>
    <div style="margin-top:14px;display:flex;justify-content:flex-end;gap:8px;">
      <button id="match-cancel" type="button" class="btn btn-secondary">Abbrechen</button>
    </div>
  </div>
</div>

<script>
(function () {
  function api(url, payload) {
    return fetch(url, {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(payload || {}),
    }).then(r => r.json());
  }
  document.querySelectorAll('.tx-confirm-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const txId = btn.dataset.txId;
      const invId = parseInt(btn.dataset.invoiceId, 10);
      btn.disabled = true;
      api(`/api/bank/transactions/${txId}/match`, {invoice_id: invId})
        .then(d => { if (d.ok) location.reload();
                     else { btn.disabled = false; alert('Match fehlgeschlagen'); }});
    });
  });
  document.querySelectorAll('.tx-ignore-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      if (!confirm('Transaktion ignorieren?')) return;
      const txId = btn.dataset.txId;
      api(`/api/bank/transactions/${txId}/ignore`)
        .then(d => { if (d.ok) location.reload(); });
    });
  });

  // Manual match dialog
  const dialog = document.getElementById('match-dialog');
  const search = document.getElementById('match-search');
  const results = document.getElementById('match-results');
  let currentTxId = null;
  let searchTimer = null;

  document.querySelectorAll('.tx-manual-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      currentTxId = btn.dataset.txId;
      search.value = '';
      results.innerHTML = '';
      dialog.style.display = 'flex';
      search.focus();
    });
  });
  document.getElementById('match-cancel').addEventListener('click', () => {
    dialog.style.display = 'none'; currentTxId = null;
  });
  search.addEventListener('input', () => {
    clearTimeout(searchTimer);
    const q = search.value.trim();
    if (q.length < 2) { results.innerHTML = ''; return; }
    searchTimer = setTimeout(() => {
      fetch('/api/bank/invoice-search?q=' + encodeURIComponent(q))
        .then(r => r.json()).then(d => {
          results.innerHTML = (d.invoices || []).map(inv => `
            <div data-iid="${inv.id}" class="match-result"
                 style="padding:10px 12px;border-bottom:1px solid rgba(255,255,255,0.08);
                        cursor:pointer;display:flex;justify-content:space-between;
                        align-items:center;gap:10px;">
              <div>
                <div style="font-weight:600;font-size:13px;">${inv.invoice_no}</div>
                <div style="font-size:11px;color:rgba(255,255,255,0.55);">${inv.customer || '—'} · ${inv.issue_date || ''}</div>
              </div>
              <div style="font-size:13px;font-weight:700;color:#fbbf24;">${inv.open_amount.toFixed(2)} €</div>
            </div>`).join('') ||
            '<div style="padding:14px;color:rgba(255,255,255,0.45);font-size:12px;">Keine Treffer.</div>';
          results.querySelectorAll('.match-result').forEach(el => {
            el.addEventListener('click', () => {
              const invId = parseInt(el.dataset.iid, 10);
              api(`/api/bank/transactions/${currentTxId}/match`, {invoice_id: invId})
                .then(d => {
                  if (d.ok) location.reload();
                  else alert('Match fehlgeschlagen');
                });
            });
            el.addEventListener('mouseenter', () => el.style.background = 'rgba(242,88,27,0.20)');
            el.addEventListener('mouseleave', () => el.style.background = '');
          });
        });
    }, 200);
  });
})();
</script>
{% endblock %}