{% extends "base.html" %}
{% block title %}Import - FireTracker{% endblock %}
{% block content %}
<div class="max-w-4xl space-y-6">
    <div>
        <h1 class="text-2xl font-bold">Kontoauszug importieren</h1>
        <p class="text-slate-400 mt-1">CSV hochladen — Sparkasse, ING, DKB, Comdirect, N26</p>
    </div>

    <div class="bg-slate-800 rounded-xl p-6 border border-slate-700">
        <form action="/api/import/csv" method="POST" enctype="multipart/form-data" class="space-y-4">
            <div>
                <label class="block text-sm text-slate-400 mb-2">CSV-Datei</label>
                <input type="file" name="file" accept=".csv" required
                    class="w-full bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white file:mr-4 file:py-1 file:px-4 file:rounded-lg file:border-0 file:bg-green-600 file:text-white file:cursor-pointer">
            </div>
            <div>
                <label class="block text-sm text-slate-400 mb-2">Bank-Format</label>
                <select name="bank_format" class="bg-slate-700 border border-slate-600 rounded-lg px-3 py-2 text-white focus:border-green-400 outline-none">
                    <option value="auto">Automatisch erkennen</option>
                    <option value="sparkasse">Sparkasse</option>
                    <option value="ing">ING</option>
                    <option value="dkb">DKB</option>
                    <option value="comdirect">Comdirect</option>
                    <option value="n26">N26</option>
                </select>
            </div>
            <button type="submit" class="bg-blue-600 hover:bg-blue-500 text-white font-medium px-6 py-2 rounded-lg transition">
                Analysieren
            </button>
        </form>
    </div>

    {% if transactions is defined and transactions %}
    <div class="bg-slate-800 rounded-xl p-6 border border-green-500/30">
        <h2 class="text-lg font-semibold mb-4">Ergebnis: {{ count }} Transaktionen</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
            <div class="bg-slate-700/50 rounded-lg p-4">
                <p class="text-xs text-slate-400">Einnahmen</p>
                <p class="text-xl font-bold text-green-400">{{ "{:,.2f}".format(total_income) }} EUR</p>
            </div>
            <div class="bg-slate-700/50 rounded-lg p-4">
                <p class="text-xs text-slate-400">Ausgaben</p>
                <p class="text-xl font-bold text-red-400">{{ "{:,.2f}".format(total_expenses) }} EUR</p>
            </div>
            <div class="bg-slate-700/50 rounded-lg p-4">
                <p class="text-xs text-slate-400">Netto</p>
                <p class="text-xl font-bold {% if net >= 0 %}text-green-400{% else %}text-red-400{% endif %}">{{ "{:,.2f}".format(net) }} EUR</p>
            </div>
            <div class="bg-slate-700/50 rounded-lg p-4">
                <p class="text-xs text-slate-400">Geschaetzte mtl. Ausgaben</p>
                <p class="text-xl font-bold text-yellow-400">{{ "{:,.0f}".format(monthly_estimate) }} EUR</p>
            </div>
        </div>

        <details class="mt-4">
            <summary class="cursor-pointer text-sm text-slate-400 hover:text-slate-300">Alle Transaktionen anzeigen</summary>
            <div class="mt-3 max-h-96 overflow-y-auto">
                <table class="w-full text-sm">
                    <thead class="text-slate-400 border-b border-slate-600">
                        <tr>
                            <th class="text-left py-2">Datum</th>
                            <th class="text-left py-2">Beschreibung</th>
                            <th class="text-right py-2">Betrag</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for t in transactions[:100] %}
                        <tr class="border-b border-slate-700/50">
                            <td class="py-1.5 text-slate-400">{{ t.date }}</td>
                            <td class="py-1.5">{{ t.description[:50] }}</td>
                            <td class="py-1.5 text-right {% if t.amount >= 0 %}text-green-400{% else %}text-red-400{% endif %}">
                                {{ "{:,.2f}".format(t.amount) }} EUR
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </details>
    </div>
    {% endif %}
</div>
{% endblock %}