{% extends "base.html" %}

{% block title %}Währungskurse{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/settings" class="hover:underline">Einstellungen</a> / Währungen</p>{% endblock %}
{% block heading %}EZB-Tageskurse{% endblock %}
{% block topbar_actions %}
  <button type="button" id="cur-pull-btn" class="btn btn-sm btn-primary">Jetzt aktualisieren</button>
{% endblock %}

{% block content %}
<div class="card mb-4">
  <div class="card-header"><div>
    <h2>Aktive Währungen</h2>
    <p class="sub">Quelle: <a href="https://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml" class="hover:underline" style="color:#f2581b;" target="_blank" rel="noopener">EZB-Daily-XML</a> · automatischer Pull alle 6 Stunden</p>
  </div></div>
  {% if summary %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Währung</th>
        <th class="num">Kurs (X → 1 EUR)</th>
        <th class="num">EUR pro 1 X</th>
        <th>Stand</th>
        <th class="num">Historie</th>
      </tr>
    </thead>
    <tbody>
      {% for s in summary %}
      <tr>
        <td class="font-bold">{{ s.currency }}</td>
        <td class="num nums font-semibold">{{ '%.4f'|format(s.latest_rate) }}</td>
        <td class="num nums">{{ '%.4f'|format(1.0 / s.latest_rate) if s.latest_rate else '—' }}</td>
        <td class="text-xs nums" style="color: var(--card-text-muted);">{{ s.latest_date }}</td>
        <td class="num text-xs">{{ s.history|length }} Tag(e)</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center">
    <p class="text-sm" style="color: var(--card-text-muted);">
      Noch keine Kurse importiert. Klick „Jetzt aktualisieren" oben rechts.
    </p>
  </div>
  {% endif %}
</div>

<div class="card">
  <div class="card-header"><div>
    <h2>Konverter</h2>
    <p class="sub">Schnell-Test mit den aktuellen Kursen</p>
  </div></div>
  <div class="p-5 grid grid-cols-1 md:grid-cols-4 gap-3 text-sm">
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Betrag</label>
      <input class="input mt-1 w-full nums" type="number" id="conv-amount" value="100" step="0.01">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Von</label>
      <select id="conv-from" class="select mt-1 w-full">
        <option>EUR</option>
        {% for s in summary %}<option>{{ s.currency }}</option>{% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Nach</label>
      <select id="conv-to" class="select mt-1 w-full">
        <option>EUR</option>
        {% for s in summary %}<option>{{ s.currency }}</option>{% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Ergebnis</label>
      <div id="conv-result" class="input mt-1 w-full nums" style="display:flex;align-items:center;font-weight:700;color:var(--brand-orange);">—</div>
    </div>
  </div>
</div>

<script>
(function () {
  document.getElementById('cur-pull-btn')?.addEventListener('click', async () => {
    const btn = document.getElementById('cur-pull-btn');
    btn.disabled = true; btn.textContent = '… läuft';
    try {
      const r = await fetch('/api/currencies/pull', { method: 'POST' });
      const d = await r.json();
      if (d.ok) {
        if (window.toast) toast(d.imported + ' Kurse importiert', 'success', { ttl: 2500 });
        setTimeout(() => location.reload(), 600);
      } else {
        alert(d.error || 'Pull fehlgeschlagen');
        btn.disabled = false; btn.textContent = 'Jetzt aktualisieren';
      }
    } catch (e) {
      alert('Netzwerk-Fehler'); btn.disabled = false; btn.textContent = 'Jetzt aktualisieren';
    }
  });

  // Live-Konverter
  const a = document.getElementById('conv-amount');
  const f = document.getElementById('conv-from');
  const t = document.getElementById('conv-to');
  const out = document.getElementById('conv-result');
  function recalc() {
    const params = new URLSearchParams({
      amount: a.value || 0, from_ccy: f.value, to_ccy: t.value,
    });
    fetch('/api/currencies/convert?' + params).then(r => r.json()).then(d => {
      out.textContent = d.amount.toFixed(2) + ' ' + d.to;
    });
  }
  [a, f, t].forEach(el => el.addEventListener('input', recalc));
  recalc();
})();
</script>
{% endblock %}