{% extends "base.html" %}
{% set active = "auswertung" %}

{% block content %}

<!-- Pausen-Modal -->
<div id="pausen-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box" style="max-width:420px;">
        <h3>Pause bearbeiten</h3>
        <input type="hidden" id="pausen-modal-id">
        <div class="form-group">
            <label class="form-label">Beginn</label>
            <input type="datetime-local" id="pausen-start" class="form-control">
        </div>
        <div class="form-group">
            <label class="form-label">Ende</label>
            <input type="datetime-local" id="pausen-end" class="form-control">
        </div>
        <div class="modal-footer">
            <button class="btn btn-stop" id="pausen-modal-loeschen" onclick="pauseLoeschenAusModal()" style="display:none;margin-right:auto">Löschen</button>
            <button class="btn btn-ghost" onclick="schliesseModal('pausen-modal')">Abbrechen</button>
            <button class="btn btn-primary" onclick="speicherePause()">Speichern</button>
        </div>
    </div>
</div>

<!-- Slot-Modal (Erstellen & Bearbeiten) -->
<div id="slot-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box" style="max-width:480px;">
        <h3 id="slot-modal-titel">Neuer Eintrag</h3>
        <input type="hidden" id="slot-modal-id">
        <!-- Typ-Auswahl: nur bei neuem Eintrag sichtbar -->
        <div id="slot-typ-auswahl" style="display:flex;gap:8px;margin-bottom:16px;">
            <button id="typ-btn-arbeit" class="typ-btn typ-btn-aktiv" onclick="slotTypWaehlen('arbeit')">
                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
                Arbeitszeit
            </button>
            <button id="typ-btn-pause" class="typ-btn" onclick="slotTypWaehlen('pause')">
                <svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 8h1a4 4 0 0 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/></svg>
                Pause
            </button>
        </div>
        <div class="form-row">
            <div class="form-group">
                <label>Start</label>
                <input type="datetime-local" id="slot-start" step="60">
            </div>
            <div class="form-group">
                <label>Ende</label>
                <input type="datetime-local" id="slot-end" step="60">
            </div>
        </div>
        <div id="slot-arbeit-felder">
        <div class="form-row" style="margin-top:12px;">
            <div class="form-group">
                <label>Projekt</label>
                <select id="slot-projekt" onchange="ladeSlotAufgaben()">
                    <option value="">– kein Projekt –</option>
                </select>
            </div>
            <div class="form-group">
                <label>Aufgabe</label>
                <select id="slot-aufgabe" disabled>
                    <option value="">– keine Aufgabe –</option>
                </select>
            </div>
        </div>
        <div class="form-group" style="margin-top:12px;">
            <label>Notiz</label>
            <input type="text" id="slot-notiz" placeholder="optional">
        </div>
        </div>
        <div class="modal-actions" style="margin-top:20px;">
            <button class="btn btn-primary" onclick="speichereSlot()">Speichern</button>
            <button class="btn btn-ghost"   onclick="schliesseModal('slot-modal')">Abbrechen</button>
            <button class="btn btn-stop" id="slot-modal-loeschen" style="display:none; margin-left:auto;" onclick="slotLoeschenAusModal()">Löschen</button>
        </div>
    </div>
</div>

<!-- Seiten-Header -->
<div class="page-header">
    <div class="page-header-left">
        <h1 class="page-title">Auswertung</h1>
        <p class="page-subtitle">Monatsübersicht mit Soll/Ist-Vergleich</p>
    </div>
    <div class="page-header-actions">
        <button class="btn btn-primary" onclick="neuerSlot()">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Eintrag
        </button>
        <button class="btn btn-export" onclick="exportCSV()">
            <svg width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            CSV
        </button>
    </div>
</div>

<!-- Monats-Navigation -->
<div class="monat-nav">
    <button class="btn btn-ghost" onclick="navigiere(-1)">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg>
    </button>
    <span class="monat-nav-titel" id="monat-titel">–</span>
    <button class="btn btn-ghost" onclick="navigiere(1)">
        <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg>
    </button>
</div>

<!-- Projekt-Diagramm -->
<div id="projekt-chart-wrap" style="display:none; margin-bottom:24px;">
    <div style="font-size:12px;font-weight:700;color:var(--text-tertiary);
                text-transform:uppercase;letter-spacing:.6px;margin-bottom:14px;">
        Stunden nach Projekt
    </div>
    <div class="projekt-chart-card">
        <!-- Balkendiagramm -->
        <div id="projekt-balken" style="margin-bottom:20px;"></div>
        <!-- Legende -->
        <div id="projekt-legende"></div>
    </div>
</div>

<!-- Konto-Leiste -->
<div class="aw-konto-row" style="grid-template-columns: repeat(4, 1fr);">
    <div class="aw-konto-item">
        <div class="aw-konto-label">Gearbeitet</div>
        <div class="aw-konto-val" id="k-ist">–</div>
    </div>
    <div class="aw-konto-item">
        <div class="aw-konto-label">Soll</div>
        <div class="aw-konto-val" id="k-soll">–</div>
    </div>
    <div class="aw-konto-item" id="k-diff-item">
        <div class="aw-konto-label">Differenz</div>
        <div class="aw-konto-val" id="k-diff">–</div>
    </div>
    <div class="aw-konto-item" id="k-ueberstunden-item" title="Kumulierte Überstunden seit Startdatum">
        <div class="aw-konto-label">Überstunden gesamt</div>
        <div class="aw-konto-val" id="k-ueberstunden">–</div>
    </div>
    <div class="aw-konto-item" id="k-korrekturen-item" title="Überstunden die diesen Monat ausgezahlt wurden" style="display:none;">
        <div class="aw-konto-label">Auszahlungen</div>
        <div class="aw-konto-val" id="k-korrekturen" style="color:#FF3B30;">–</div>
    </div>
</div>
<div style="margin-bottom:16px;">
    <button class="btn btn-ghost" style="font-size:13px;" onclick="ueberstundenAuszahlenZeigen()">
        ± Überstunden auszahlen / korrigieren
    </button>
</div>

<!-- Modal: Überstunden auszahlen -->
<div id="ue-korrektur-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box" style="max-width:420px;">
        <h3 style="margin-bottom:16px;">Überstunden auszahlen / korrigieren</h3>
        <div class="form-row" style="gap:12px;margin-bottom:12px;">
            <div class="form-group" style="flex:1;">
                <label>Datum</label>
                <input type="date" id="ue-datum" class="form-control">
            </div>
            <div class="form-group" style="flex:1;">
                <label>Stunden:Minuten (negativ = Auszahlung)</label>
                <input type="text" id="ue-hhmm" class="form-control" value="-1:00" placeholder="-1:30 oder +0:45">
            </div>
        </div>
        <div class="form-group" style="margin-bottom:16px;">
            <label>Notiz</label>
            <input type="text" id="ue-notiz" class="form-control" placeholder="z.B. Oktober-Auszahlung">
        </div>
        <div id="ue-liste" style="max-height:180px;overflow-y:auto;margin-bottom:16px;"></div>
        <div class="modal-actions">
            <button class="btn btn-primary" onclick="ueKorrekturSpeichern()">Speichern</button>
            <button class="btn btn-ghost" onclick="schliesseModal('ue-korrektur-modal')">Schließen</button>
        </div>
    </div>
</div>

<!-- Haupt-Tabelle -->
<div class="aw-tabelle-wrap">
    <table class="aw-tabelle" id="aw-tabelle">
        <thead>
            <tr>
                <th class="col-datum">Tag</th>
                <th class="col-ist">Gearbeitet</th>
                <th class="col-soll">Soll</th>
                <th class="col-diff">Differenz</th>
                <th class="col-slots">Einträge</th>
                <th class="col-aktionen"></th>
            </tr>
        </thead>
        <tbody id="aw-tbody"></tbody>
    </table>
</div>

{% endblock %}

{% block scripts %}
<script>
var aktuellesJahr  = new Date().getFullYear();
var aktuellerMonat = new Date().getMonth() + 1; // 1-basiert
var alleProjekte   = [];
var monatsDaten    = null;
var startDatum     = null;  // "YYYY-MM-DD" oder null
var startUeberstundenMin = 0;

var MONATE = ["","Januar","Februar","März","April","Mai","Juni",
              "Juli","August","September","Oktober","November","Dezember"];

// ── Init ───────────────────────────────────────────────────────────────────
document.addEventListener("DOMContentLoaded", function() {
    ladeProjekte();
    ladeStartkonfiguration().then(function() { laden(); });
});

async function ladeStartkonfiguration() {
    try {
        var res = await fetch("/api/einstellungen");
        var cfg = await res.json();
        // Leerer String ist falsy → explizit auf String prüfen
        startDatum = (cfg.start_datum && cfg.start_datum.length === 10) ? cfg.start_datum : null;
        startUeberstundenMin = parseInt(cfg.start_ueberstunden_min) || 0;
    } catch(e) {}
}

function ladeProjekte() {
    fetch("/api/projekte").then(function(r){ return r.json(); }).then(function(p){
        alleProjekte = p;
        var sel = document.getElementById("slot-projekt");
        sel.innerHTML = '<option value="">– kein Projekt –</option>';
        p.forEach(function(proj) {
            var o = document.createElement("option");
            o.value = proj.id; o.textContent = proj.name;
            o.dataset.aufgaben = JSON.stringify(proj.aufgaben);
            sel.appendChild(o);
        });
    });
}

function ladeSlotAufgaben() {
    var sel  = document.getElementById("slot-projekt");
    var selA = document.getElementById("slot-aufgabe");
    var opt  = sel.options[sel.selectedIndex];
    selA.innerHTML = '<option value="">– keine Aufgabe –</option>';
    if (!opt || !opt.dataset.aufgaben) { selA.disabled = true; return; }
    var aufgaben = JSON.parse(opt.dataset.aufgaben);
    if (!aufgaben.length) { selA.disabled = true; return; }
    selA.disabled = false;
    aufgaben.forEach(function(a) {
        var o = document.createElement("option");
        o.value = a.id; o.textContent = a.name;
        selA.appendChild(o);
    });
}

// ── Navigation ─────────────────────────────────────────────────────────────
function navigiere(delta) {
    var neuerMonat = aktuellerMonat + delta;
    var neuesJahr  = aktuellesJahr;
    if (neuerMonat > 12) { neuerMonat = 1;  neuesJahr++; }
    if (neuerMonat < 1)  { neuerMonat = 12; neuesJahr--; }

    // Startdatum-Sperre: nicht weiter zurück als Startmonat
    if (startDatum) {
        var startTeile = startDatum.split("-");
        var startJahr  = parseInt(startTeile[0]);
        var startMonat = parseInt(startTeile[1]);
        if (neuesJahr < startJahr || (neuesJahr === startJahr && neuerMonat < startMonat)) {
            showToast("Kein Eintrag vor dem Startdatum verfügbar.", "error");
            return;
        }
    }
    aktuellerMonat = neuerMonat;
    aktuellesJahr  = neuesJahr;
    laden();
}

// ── Daten laden ────────────────────────────────────────────────────────────
function istEinModalOffen() {
    return !!(
        document.querySelector("#slot-modal[style*='flex']") ||
        document.querySelector("#pausen-modal[style*='flex']") ||
        document.querySelector("#kollisions-dialog") ||
        document.querySelector(".modal-overlay[style*='flex']")
    );
}

// laden() mit optionalem erzwingen (force=true umgeht Modal-Check)
function laden(force) {
    if (!force && istEinModalOffen()) return;
    document.getElementById("monat-titel").textContent =
        MONATE[aktuellerMonat] + " " + aktuellesJahr;

    fetch("/api/monatsauswertung?jahr=" + aktuellesJahr + "&monat=" + aktuellerMonat)
        .then(function(r) {
            if (!r.ok) { showToast("Serverfehler: " + r.status, "error"); return null; }
            return r.json();
        })
        .then(function(data) {
            if (!data) return;
            monatsDaten = data;
            renderKonto(data);
            renderTabelle(data);
            renderProjektChart(data);
        })
        .catch(function(err) {
            showToast("Fehler beim Laden: " + err, "error");
        });
}

// ── Konto-Leiste ───────────────────────────────────────────────────────────
function renderKonto(data) {
    var g = data.gesamt;

    // Differenz: negativ rot mit -, positiv grün mit +
    document.getElementById("k-ist").textContent  = g.ist  || "00:00";
    document.getElementById("k-soll").textContent = g.soll || "00:00";

    var diffMin = Math.round((g.diff_sek || 0) / 60);
    var diffEl  = document.getElementById("k-diff");
    diffEl.textContent = formatVZ(diffMin);
    var diffItem = document.getElementById("k-diff-item");
    diffItem.classList.remove("konto-plus","konto-minus");
    if (g.soll_sek > 0 || g.ist_sek > 0) {
        diffItem.classList.add(diffMin >= 0 ? "konto-plus" : "konto-minus");
    }

    // Kumulative Überstunden: Startguthaben + alle Monate seit Start bis jetzt
    ladeKumulativeUeberstunden(data);
}

function minZuHHMM(min) {
    var h = Math.floor(Math.abs(min) / 60), m = Math.abs(min) % 60;
    return String(h).padStart(2,"0") + ":" + String(m).padStart(2,"0");
}

function formatVZ(min) {
    if (min === 0) return "00:00";
    return (min > 0 ? "+" : "-") + minZuHHMM(min);
}

async function ladeKumulativeUeberstunden(aktuellerData) {
    // Berechne Summe aller Monate von Start bis aktuellen Monat
    var ueberMin = startUeberstundenMin;

    if (startDatum) {
        var startTeile = startDatum.split("-");
        var sJahr  = parseInt(startTeile[0]);
        var sMonat = parseInt(startTeile[1]);
        var eJahr  = aktuellesJahr;
        var eMonat = aktuellerMonat;

        // Alle vergangenen Monate (außer dem aktuellen) summieren
        var j = sJahr, mo = sMonat;
        var fetchPromises = [];
        while (j < eJahr || (j === eJahr && mo < eMonat)) {
            (function(fj, fm) {
                fetchPromises.push(
                    fetch("/api/monatsauswertung?jahr=" + fj + "&monat=" + fm)
                        .then(function(r) { return r.json(); })
                        .then(function(d) { return Math.round((d.gesamt.diff_sek || 0) / 60); })
                        .catch(function() { return 0; })
                );
            })(j, mo);
            mo++;
            if (mo > 12) { mo = 1; j++; }
        }
        var ergebnisse = await Promise.all(fetchPromises);
        ergebnisse.forEach(function(m) { ueberMin += m; });
    }

    // Aktuellen Monat addieren
    ueberMin += Math.round((aktuellerData.gesamt.diff_sek || 0) / 60);

    var ueberEl  = document.getElementById("k-ueberstunden");
    ueberEl.textContent = formatVZ(ueberMin);
    var kueEl = document.getElementById("k-ueberstunden-item");
    kueEl.classList.remove("konto-plus","konto-minus");
    kueEl.classList.add(ueberMin >= 0 ? "konto-plus" : "konto-minus");

    // Korrekturen dieses Monats anzeigen
    var korrMin = aktuellerData.gesamt.korrekturen_min || 0;
    var korrItem = document.getElementById("k-korrekturen-item");
    var korrEl   = document.getElementById("k-korrekturen");
    if (korrMin !== 0) {
        korrEl.textContent = formatVZ(korrMin);
        korrItem.style.display = "";
    } else {
        korrItem.style.display = "none";
    }
}

// ── Überstunden auszahlen ──────────────────────────────────────────────────

function minZuHHMMAnzeige(min) {
    // Gibt "+H:MM" oder "-H:MM" zurück
    var abs = Math.abs(min);
    var h   = Math.floor(abs / 60);
    var m   = abs % 60;
    var vz  = min < 0 ? "-" : "+";
    return vz + h + ":" + String(m).padStart(2, "0");
}

function hhmmZuMinuten(str) {
    // Parst "-1:30", "+2:00", "1:30", "-0:45" → Minuten als Integer
    str = str.trim().replace(",", ".");
    var negativ = str.startsWith("-");
    str = str.replace(/^[+-]/, "");
    var teile = str.split(":");
    if (teile.length !== 2) return NaN;
    var h = parseInt(teile[0], 10);
    var m = parseInt(teile[1], 10);
    if (isNaN(h) || isNaN(m) || m < 0 || m > 59) return NaN;
    var result = h * 60 + m;
    return negativ ? -result : result;
}

async function ueberstundenAuszahlenZeigen() {
    // Heutiges Datum vorausfüllen
    var heute = new Date().toISOString().slice(0, 10);
    document.getElementById("ue-datum").value  = heute;
    document.getElementById("ue-hhmm").value   = "-1:00";
    document.getElementById("ue-notiz").value  = "";
    await ueLadeKorrekturen();
    document.getElementById("ue-korrektur-modal").style.display = "flex";
}

async function ueLadeKorrekturen() {
    var r    = await fetch("/api/ueberstunden-korrekturen");
    var list = await r.json();
    var el   = document.getElementById("ue-liste");
    if (!list.length) {
        el.innerHTML = "<p style='color:#8E8E93;font-size:13px;margin:0;'>Noch keine Korrekturen vorhanden.</p>";
        return;
    }
    el.innerHTML = list.map(function(k) {
        var farbe   = k.minuten < 0 ? "#FF3B30" : "#34C759";
        var anzeige = minZuHHMMAnzeige(k.minuten);
        return `<div style="display:flex;justify-content:space-between;align-items:center;padding:6px 0;border-bottom:1px solid var(--border);">
            <span style="font-size:13px;">${k.datum} &nbsp; <span style="color:${farbe};">${anzeige}</span> &nbsp; <span style="color:#8E8E93;">${k.notiz || ""}</span></span>
            <button class="btn btn-ghost" style="padding:2px 8px;font-size:12px;color:#FF3B30;" onclick="ueLoeschen(${k.id})">✕</button>
        </div>`;
    }).join("");
}

async function ueKorrekturSpeichern() {
    var datum   = document.getElementById("ue-datum").value;
    var minuten = hhmmZuMinuten(document.getElementById("ue-hhmm").value);
    var notiz   = document.getElementById("ue-notiz").value;
    if (!datum) { showToast("Datum erforderlich.", "error"); return; }
    if (isNaN(minuten) || minuten === 0) { showToast("Bitte gültige Zeit eingeben, z.B. -1:30", "error"); return; }
    await fetch("/api/ueberstunden-korrekturen", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({datum, minuten, notiz})
    });
    showToast("Korrektur gespeichert.");
    await ueLadeKorrekturen();
    laden(true);
}

async function ueLoeschen(id) {
    await fetch("/api/ueberstunden-korrekturen/" + id, {method: "DELETE"});
    showToast("Korrektur gelöscht.");
    await ueLadeKorrekturen();
    laden(true);
}

// ── Monats-Tabelle ─────────────────────────────────────────────────────────
function wocheSuchen(wochen, nr) {
    for (var i = 0; i < wochen.length; i++) {
        if (wochen[i].woche === nr) return wochen[i];
    }
    return null;
}

function renderTabelle(data) {
    var tbody = document.getElementById("aw-tbody");
    var html  = "";
    var letzteWoche = null;

    data.tage.forEach(function(t) {
        if (t.woche !== letzteWoche) {
            // Wochenzeile für abgeschlossene Vorwoche einfügen
            if (letzteWoche !== null) {
                var wo = wocheSuchen(data.wochen, letzteWoche);
                if (wo) html += wochenzeile(wo);
            }
            letzteWoche = t.woche;
        }
        html += tageszeile(t);
    });

    // Keine abschließende KW-Zeile am Monatsende

    tbody.innerHTML = html;
}

function tageszeile(t) {
    var istWE   = t.ist_wochenende;
    var abw     = t.abwesenheit;
    var ft      = t.feiertag;

    var zeilenKlasse = "aw-tag";
    if (istWE) zeilenKlasse += " aw-wochenende";
    if (ft && !abw) zeilenKlasse += " aw-feiertag";
    var abwTypKlassen = {
        "urlaub":      "aw-urlaub",
        "krank":       "aw-krank",
        "feiertag":    "aw-feiertag-manuell",
        "fortbildung": "aw-fortbildung",
        "sonderurlaub":"aw-sonderurlaub",
        "elternzeit":  "aw-elternzeit",
        "sonstiges":   "aw-sonstiges"
    };
    var abwTypTitel = {
        "urlaub":      "Urlaub",
        "krank":       "Krank",
        "feiertag":    "Feiertag",
        "fortbildung": "Fortbildung",
        "sonderurlaub":"Sonderurlaub",
        "elternzeit":  "Elternzeit",
        "sonstiges":   "Sonstiges"
    };
    if (abw && abwTypKlassen[abw.typ]) zeilenKlasse += " " + abwTypKlassen[abw.typ];

    // Datum-Zelle — Datum aus String-Teilen parsen, kein Date-Objekt-UTC-Problem
    var datumTeile = t.datum.split("-");
    var datumJahr  = parseInt(datumTeile[0]);
    var datumMonat = parseInt(datumTeile[1]); // 1-basiert
    var datumTag   = parseInt(datumTeile[2]);
    var monatNamen = ["","Jan","Feb","Mär","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Dez"];
    var datumTxt   = t.wochentag + ", " + datumTag + ". " + monatNamen[datumMonat];

    // Differenz-Klasse + Vorzeichen-Formatierung
    var diffKlasse = "";
    var diffAnzeige = t.diff || "–";
    if (!istWE && !abw && !ft && (t.soll_sek > 0 || t.ist_sek > 0)) {
        if (t.diff_positiv) {
            diffKlasse  = "diff-plus";
            // Nur + voranstellen wenn noch nicht vorhanden
            if (diffAnzeige !== "–" && diffAnzeige[0] !== "+") diffAnzeige = "+" + diffAnzeige;
        } else {
            diffKlasse  = "diff-minus";
            if (diffAnzeige !== "–" && diffAnzeige[0] !== "-") diffAnzeige = "-" + diffAnzeige;
        }
    }

    // Abwesenheits-Badge (Titel der Abwesenheit)
    var abwBadge = "";
    if (abw && abwTypTitel[abw.typ]) {
        abwBadge = '<span class="aw-badge abw-typ-badge abw-typ-' + abw.typ + '">' + abwTypTitel[abw.typ] + '</span> ';
    } else if (ft && !abw) {
        abwBadge = '<span class="aw-badge badge-ft">' + ft + '</span> ';
    }

    var SVG_BEARBEITEN = '<svg class="aw-edit-icon" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>';
    var SVG_PAUSE     = '<svg class="aw-edit-icon" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M17 8h1a4 4 0 0 1 0 8h-1"/><path d="M3 8h14v9a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4Z"/><line x1="6" y1="2" x2="6" y2="4"/><line x1="10" y1="2" x2="10" y2="4"/><line x1="14" y1="2" x2="14" y2="4"/></svg>';

    // Slots als anklickbare Chips mit einheitlicher Breite
    var chips = "";
    if (t.slots.length > 0) {
        chips = t.slots.map(function(s) {
            if (s.typ === "pause") {
                return '<span class="aw-slot-chip aw-pause-chip aw-slot-klickbar" onclick="pauseBearbeiten(' + s.id + ')" title="Pause bearbeiten">'
                    + SVG_PAUSE
                    + ' <span class="aw-chip-zeit">Pause ' + s.start + '–' + s.end + '</span>'
                    + ' <span class="aw-slot-dauer">' + s.dauer + '</span>'
                    + '</span>';
            }
            var chipStyle = s.farbe && s.farbe !== "#AEAEB2"
                ? 'border-left: 3px solid ' + s.farbe + ';'
                : '';
            var projektTxt = (s.projekt && s.projekt !== "Kein Projekt")
                ? '<em class="aw-chip-projekt" style="color:' + (s.farbe || 'inherit') + '">' + s.projekt + '</em>'
                : '<em class="aw-chip-projekt" style="opacity:0.4">–</em>';
            return '<span class="aw-slot-chip aw-slot-klickbar" onclick="slotBearbeiten(' + s.id + ')" title="Bearbeiten" style="' + chipStyle + '">'
                + SVG_BEARBEITEN
                + ' <span class="aw-chip-zeit">' + s.start + '–' + s.end + '</span>'
                + ' ' + projektTxt
                + ' <span class="aw-slot-dauer">' + s.dauer + '</span>'
                + '</span>';
        }).join("");
    }

    // ArbZG-Warnungen
    var arbzgTxt = "";
    if (t.arbzg_warnungen && t.arbzg_warnungen.length > 0) {
        arbzgTxt = ' <span class="aw-arbzg-warn" title="' + t.arbzg_warnungen.join("\n") + '">' +
            '⚠ ArbZG</span>';
    }

    var plusBtn = '<button class="btn-slot-add" title="Eintrag hinzufügen" onclick="neuerSlotFuerTag(\'' + t.datum + '\')">'
        + '<svg width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>'
        + '</button>';

    // Slots-Zelle: wrap + Plus-Button rechtsbündig am Ende
    var slotsZelle = '<div class="aw-slots-wrap">' + abwBadge + chips + '</div>';

    var arbzgKlasse = (t.arbzg_warnungen && t.arbzg_warnungen.length) ? " aw-arbzg-row" : "";

    // Arbeitsort-Badge
    var arbeitsortBadge = "";
    if (t.arbeitsort) {
        var aoFarbe = t.arbeitsort_farbe || "#8E8E93";
        arbeitsortBadge = ' <span style="display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-secondary);margin-left:4px;">'
            + '<span style="width:7px;height:7px;border-radius:50%;background:' + aoFarbe + ';display:inline-block;flex-shrink:0;"></span>'
            + t.arbeitsort + '</span>';
    }

    return '<tr class="' + zeilenKlasse + arbzgKlasse + '">'
        + '<td class="col-datum"><span class="aw-datum-txt">' + datumTxt + '</span>' + arbeitsortBadge + arbzgTxt + '</td>'
        + '<td class="col-ist mono">' + (t.ist || "–") + '</td>'
        + '<td class="col-soll mono">' + (t.soll || "–") + '</td>'
        + '<td class="col-diff mono ' + diffKlasse + '">' + diffAnzeige + '</td>'
        + '<td class="col-slots">' + slotsZelle + '</td>'
        + '<td class="col-aktionen">' + plusBtn + '</td>'
        + '</tr>';
}

function wochenzeile(wo) {
    var diffKlasse  = (wo.ist_sek > 0 || wo.soll_sek > 0) ? (wo.diff_positiv ? "diff-plus" : "diff-minus") : "";
    var diffAnzeige = wo.diff || "–";
    if (diffAnzeige !== "–") {
        if (wo.diff_positiv && diffAnzeige[0] !== "+") diffAnzeige = "+" + diffAnzeige;
        if (!wo.diff_positiv && diffAnzeige[0] !== "-") diffAnzeige = "-" + diffAnzeige;
    }
    return '<tr class="aw-woche">'
        + '<td class="col-datum">KW ' + wo.woche + '</td>'
        + '<td class="col-ist mono">' + wo.ist + '</td>'
        + '<td class="col-soll mono">' + wo.soll + '</td>'
        + '<td class="col-diff mono ' + diffKlasse + '">' + diffAnzeige + '</td>'
        + '<td class="col-slots"></td>'
        + '<td class="col-aktionen"></td>'
        + '</tr>';
}

// ── Slot-Modal ─────────────────────────────────────────────────────────────
function neuerSlot() {
    var n = new Date();
    var heute = n.getFullYear() + "-" + String(n.getMonth()+1).padStart(2,"0") + "-" + String(n.getDate()).padStart(2,"0");
    modalVorbereiten(null, heute);
}

function neuerSlotFuerTag(datum) {
    modalVorbereiten(null, datum);
}

function modalVorbereiten(id, datum) {
    // Typ-Auswahl: bei neuem Eintrag sichtbar, bei Bearbeiten versteckt
    document.getElementById("slot-typ-auswahl").style.display = id ? "none" : "flex";
    document.getElementById("slot-arbeit-felder").style.display = "";
    _slotTyp = "arbeit";
    document.getElementById("typ-btn-arbeit").className = "typ-btn typ-btn-aktiv";
    document.getElementById("typ-btn-pause").className  = "typ-btn";
    document.getElementById("slot-modal-titel").textContent = id ? "Eintrag bearbeiten" : "Neuer Eintrag";
    document.getElementById("slot-modal-id").value   = id || "";
    document.getElementById("slot-start").value      = datum + "T08:00";
    document.getElementById("slot-end").value        = datum + "T17:00";
    document.getElementById("slot-notiz").value      = "";
    document.getElementById("slot-projekt").value    = "";
    document.getElementById("slot-aufgabe").innerHTML = '<option value="">– keine Aufgabe –</option>';
    document.getElementById("slot-aufgabe").disabled  = true;
    // Löschen-Button nur bei bestehendem Eintrag
    document.getElementById("slot-modal-loeschen").style.display = id ? "inline-flex" : "none";
    document.getElementById("slot-modal").style.display = "flex";
}

function slotLoeschenAusModal() {
    var id = document.getElementById("slot-modal-id").value;
    if (!id) return;
    zeigeBestaetigung("Diesen Eintrag wirklich löschen?", function() {
        fetch("/api/slots/" + id, { method: "DELETE" })
            .then(function() {
                schliesseModal("slot-modal");
                showToast("Eintrag gelöscht.");
                laden(true);
            });
    });
}

function slotBearbeiten(id) {
    fetch("/api/slots/" + id)
        .then(function(r) { return r.json(); })
        .then(function(slot) {
            document.getElementById("slot-modal-titel").textContent = "Eintrag bearbeiten";
            document.getElementById("slot-modal-id").value   = id;
            document.getElementById("slot-start").value      = slot.start_zeit.replace(" ", "T");
            document.getElementById("slot-end").value        = slot.end_zeit.replace(" ", "T");
            document.getElementById("slot-notiz").value      = slot.notiz;
            document.getElementById("slot-projekt").value    = slot.projekt_id || "";
            document.getElementById("slot-modal-loeschen").style.display = "inline-flex";
            ladeSlotAufgaben();
            setTimeout(function() {
                if (slot.aufgabe_id) document.getElementById("slot-aufgabe").value = slot.aufgabe_id;
            }, 60);
            document.getElementById("slot-modal").style.display = "flex";
        });
}

// ── Typ-Wahl im Slot-Modal ─────────────────────────────────────────────────
var _slotTyp = "arbeit";  // "arbeit" oder "pause"

function slotTypWaehlen(typ) {
    _slotTyp = typ;
    document.getElementById("typ-btn-arbeit").className = "typ-btn" + (typ === "arbeit" ? " typ-btn-aktiv" : "");
    document.getElementById("typ-btn-pause").className  = "typ-btn" + (typ === "pause"  ? " typ-btn-aktiv" : "");
    document.getElementById("slot-arbeit-felder").style.display = typ === "arbeit" ? "" : "none";
    document.getElementById("slot-modal-titel").textContent =
        document.getElementById("slot-modal-id").value ? "Eintrag bearbeiten" :
        (typ === "pause" ? "Neue Pause" : "Neuer Eintrag");
}

// ── Pausen-Modal ───────────────────────────────────────────────────────────
function pauseBearbeiten(id) {
    fetch("/api/pausen/" + id)
        .then(function(r) { return r.json(); })
        .then(function(p) {
            document.getElementById("pausen-modal-id").value = id;
            document.getElementById("pausen-start").value    = p.pause_start.replace(" ", "T");
            document.getElementById("pausen-end").value      = p.pause_end.replace(" ", "T");
            document.getElementById("pausen-modal-loeschen").style.display = "inline-flex";
            document.getElementById("pausen-modal").style.display = "flex";
        });
}

function pauseLoeschenAusModal() {
    var id = document.getElementById("pausen-modal-id").value;
    if (!id) return;
    zeigeBestaetigung("Diese Pause wirklich löschen?", function() {
        fetch("/api/pausen/" + id, { method: "DELETE" })
            .then(function() {
                schliesseModal("pausen-modal");
                showToast("Pause gelöscht.");
                laden(true);
            });
    });
}

function speicherePause() {
    var id       = document.getElementById("pausen-modal-id").value;
    var startRaw = document.getElementById("pausen-start").value;
    var endRaw   = document.getElementById("pausen-end").value;
    if (!startRaw || !endRaw) { showToast("Bitte Beginn und Ende angeben.", "error"); return; }
    fetch("/api/pausen/" + id, {
        method:  "PUT",
        headers: { "Content-Type": "application/json" },
        body:    JSON.stringify({
            pause_start: startRaw.replace("T", " "),
            pause_end:   endRaw.replace("T", " ")
        })
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.fehler) { showToast(data.fehler, "error"); return; }
        schliesseModal("pausen-modal");
        showToast("Pause gespeichert.");
        laden(true);
    });
}

function speichereSlot() {
    var id         = document.getElementById("slot-modal-id").value;
    var startRaw   = document.getElementById("slot-start").value;
    var endRaw     = document.getElementById("slot-end").value;
    var pause_min  = 0;  // Pausen werden als eigene Slots verwaltet
    var notiz      = document.getElementById("slot-notiz").value;
    var projekt_id = document.getElementById("slot-projekt").value || null;
    var aufgabe_id = document.getElementById("slot-aufgabe").value || null;

    if (!startRaw || !endRaw) { showToast("Bitte Start und Ende angeben.", "error"); return; }

    var body = {
        start_zeit: startRaw.replace("T"," "),
        end_zeit:   endRaw.replace("T"," "),
        pause_min:  pause_min,
        notiz:      notiz,
        projekt_id: projekt_id,
        aufgabe_id: aufgabe_id
    };

    // Wenn neuer Eintrag und Typ=Pause → direkt als Pause anlegen
    if (!id && _slotTyp === "pause") {
        // Pause hat keinen echten Slot-Bezug bei manueller Erstellung
        // → als Arbeitszeit-Slot mit 100% Pause-Anteil speichern ist falsch
        // → stattdessen: Slot ohne Projekt anlegen, dann Pause-Eintrag dazu
        var pauseBody = {
            start_zeit: startRaw.replace("T"," "),
            end_zeit:   endRaw.replace("T"," "),
            pause_min:  0,
            notiz:      notiz || "Pause",
            projekt_id: null,
            aufgabe_id: null,
            als_pause:  true
        };
        fetch("/api/slots/als-pause", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(pauseBody)
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.fehler) { showToast(data.fehler, "error"); return; }
            schliesseModal("slot-modal");
            showToast(data.geteilt ? "Pause eingetragen. Bestehender Slot wurde automatisch geteilt." : "Pause eingetragen.");
            laden(true);
        });
        return;
    }

    fetch(id ? "/api/slots/" + id : "/api/slots", {
        method: id ? "PUT" : "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body)
    })
    .then(function(r) {
        return r.json().then(function(data) {
            return { status: r.status, data: data };
        });
    })
    .then(function(res) {
        var data = res.data;
        // Kollision erkannt (HTTP 409) → Nachfrage-Dialog
        if (res.status === 409 && data.kollision && id) {
            var k = data.kollisions_slot;
            zeigeKollisionsDialog(k, body, id);
            return;
        }
        if (data.fehler) { showToast(data.fehler, "error"); return; }
        schliesseModal("slot-modal");
        showToast(id ? "Eintrag gespeichert." : "Eintrag erstellt.");
        laden(true);
    });
}

function zeigeKollisionsDialog(kollisionsSlot, body, eigeneId) {
    // Bestehendes Dialog-Element entfernen falls vorhanden
    var alt = document.getElementById("kollisions-dialog");
    if (alt) alt.remove();

    var overlay = document.createElement("div");
    overlay.id  = "kollisions-dialog";
    overlay.style.cssText = [
        "position:fixed","inset:0","background:rgba(0,0,0,0.45)",
        "display:flex","align-items:center","justify-content:center","z-index:9999"
    ].join(";");

    var box = document.createElement("div");
    box.style.cssText = [
        "background:#fff","border-radius:16px","padding:32px 28px","max-width:420px",
        "width:90%","box-shadow:0 8px 40px rgba(0,0,0,0.18)","font-family:inherit"
    ].join(";");

    var titel = document.createElement("div");
    titel.style.cssText = "font-size:17px;font-weight:700;color:#1C1C1E;margin-bottom:10px";
    titel.textContent   = "Zeitüberschneidung";

    var text = document.createElement("div");
    text.style.cssText  = "font-size:14px;color:#48484A;line-height:1.55;margin-bottom:24px";
    text.innerHTML      = "Der verschobene Slot überschneidet sich mit einem bestehenden Eintrag (<b>"
        + kollisionsSlot.start + "–" + kollisionsSlot.end + "</b>).<br><br>"
        + "Soll der bestehende Eintrag automatisch angepasst werden?";

    var btnRow = document.createElement("div");
    btnRow.style.cssText = "display:flex;gap:10px;justify-content:flex-end";

    var btnAbbruch = document.createElement("button");
    btnAbbruch.textContent  = "Abbrechen";
    btnAbbruch.style.cssText = [
        "padding:9px 18px","border-radius:9px","border:1.5px solid #D1D1D6",
        "background:transparent","color:#48484A","font-size:14px","cursor:pointer"
    ].join(";");
    btnAbbruch.onclick = function() { overlay.remove(); };

    var btnAnpassen = document.createElement("button");
    btnAnpassen.textContent  = "Anpassen & Speichern";
    btnAnpassen.style.cssText = [
        "padding:9px 18px","border-radius:9px","border:none",
        "background:#6366F1","color:#fff","font-size:14px",
        "font-weight:600","cursor:pointer"
    ].join(";");
    btnAnpassen.onclick = function() {
        overlay.remove();
        // Mit Anpassungs-Route speichern
        var bodyMitKollision = Object.assign({}, body, { kollisions_id: kollisionsSlot.id });
        fetch("/api/slots/" + eigeneId + "/mit-anpassung", {
            method: "PUT",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify(bodyMitKollision)
        })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (data.fehler) { showToast(data.fehler, "error"); return; }
            schliesseModal("slot-modal");
            if (data.aktion === "geloescht") {
                showToast("Gespeichert. Überschneidender Eintrag war zu kurz und wurde entfernt.");
            } else {
                showToast("Gespeichert. Überschneidender Eintrag wurde angepasst.");
            }
            laden(true);
        });
    };

    btnRow.appendChild(btnAbbruch);
    btnRow.appendChild(btnAnpassen);
    box.appendChild(titel);
    box.appendChild(text);
    box.appendChild(btnRow);
    overlay.appendChild(box);
    document.body.appendChild(overlay);
}

function slotLoeschen(id) {
    zeigeBestaetigung("Diesen Eintrag wirklich löschen?", function() {
        fetch("/api/slots/" + id, { method: "DELETE" })
            .then(function() { laden(); });
    });
}

// ── Projekt-Balkendiagramm ──────────────────────────────────────────────────
function renderProjektChart(data) {
    var projekte = data.projekte || [];
    var wrap     = document.getElementById("projekt-chart-wrap");
    if (!projekte.length || data.gesamt.ist_sek === 0) {
        wrap.style.display = "none";
        return;
    }
    wrap.style.display = "block";

    var balkenEl = document.getElementById("projekt-balken");
    var legendEl = document.getElementById("projekt-legende");

    // ── Gestapelter Einzelbalken ──────────────────────────────────────────
    // Ein Balken, anteilig in Projektfarben eingefärbt
    var balkenHtml = '<div style="display:flex;height:28px;border-radius:6px;overflow:hidden;width:100%;">';
    projekte.forEach(function(p, i) {
        if (p.prozent <= 0) return;
        var radius = "";
        if (i === 0 && projekte.length === 1) radius = "border-radius:6px;";
        balkenHtml +=
            '<div title="' + p.name + ': ' + p.hhmm + ' (' + p.prozent + '%)"' +
            '     style="width:' + p.prozent + '%;background:' + p.farbe + ';' +
            '            height:100%;' + radius +
            '            transition:width .5s ease;"></div>';
    });
    balkenHtml += '</div>';
    balkenEl.innerHTML = balkenHtml;

    // ── Textliste ─────────────────────────────────────────────────────────
    var legHtml = '<div style="margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 24px;">';
    projekte.forEach(function(p) {
        if (p.sek === 0) return;
        legHtml +=
            '<div style="display:flex;align-items:center;gap:7px;font-size:13px;">' +
            '  <div style="width:11px;height:11px;border-radius:3px;flex-shrink:0;' +
            '       background:' + p.farbe + ';"></div>' +
            '  <span style="color:var(--text-secondary);">' + p.name + '</span>' +
            '  <span style="font-weight:600;color:var(--text-primary);">' + p.hhmm + '</span>' +
            '  <span style="color:var(--text-tertiary);font-size:11px;">(' + p.prozent + '%)</span>' +
            '</div>';
    });
    legHtml += '</div>';
    legendEl.innerHTML = legHtml;
}

// ── CSV-Export ─────────────────────────────────────────────────────────────
// Zweistufiger Flow: Schritt 1 = Monat/Zeitraum, Schritt 2 = Projektfokus/Arbeitszeitfokus

function _csvModalEinfuegen() {
    if (document.getElementById("csv-modus-modal")) return;

    // Overlay
    var overlay = document.createElement("div");
    overlay.id = "csv-modus-modal";
    overlay.style.cssText = "display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;align-items:center;justify-content:center;";

    // Card
    var card = document.createElement("div");
    card.style.cssText = "background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px 32px;max-width:440px;width:92%;box-shadow:0 8px 40px rgba(0,0,0,.2);";

    // Titel
    var titel = document.createElement("h3");
    titel.style.cssText = "font-size:16px;font-weight:700;color:var(--text-primary);margin:0 0 4px;";
    titel.textContent = "CSV-Export";

    // Untertitel (dynamisch)
    var sub = document.createElement("p");
    sub.id = "csv-modal-sub";
    sub.style.cssText = "font-size:13px;color:var(--text-secondary);margin:0 0 20px;";
    sub.textContent = "Zeitraum auswählen";

    // Content-Bereich
    var content = document.createElement("div");
    content.id = "csv-modal-content";

    card.appendChild(titel);
    card.appendChild(sub);
    card.appendChild(content);
    overlay.appendChild(card);
    document.body.appendChild(overlay);
}

function csvModalZeigSchritt1() {
    // Schritt 1: Aktueller Monat | Zeitraum | Abbrechen
    document.getElementById("csv-modal-sub").textContent = "Zeitraum wählen";
    var content = document.getElementById("csv-modal-content");
    content.innerHTML = "";

    var wrap = document.createElement("div");
    wrap.style.cssText = "display:flex;flex-direction:column;gap:8px;";

    // Aktueller Monat
    var b1 = _csvBtn("primary", "Aktueller Monat",
        MONATE[aktuellerMonat] + " " + aktuellesJahr,
        svgKalender());
    b1.addEventListener("click", function() { csvModalZeigSchritt2("monat"); });

    // Zeitraum
    var b2 = _csvBtn("ghost", "Zeitraum", "Eigenen Von/Bis-Zeitraum wählen", svgUhr());
    b2.addEventListener("click", function() { csvModalZeigSchritt2("zeitraum"); });

    // Abbrechen
    var bCancel = document.createElement("button");
    bCancel.className = "btn btn-ghost";
    bCancel.style.cssText = "margin-top:4px;justify-content:center;";
    bCancel.textContent = "Abbrechen";
    bCancel.addEventListener("click", csvModalSchliessen);

    wrap.appendChild(b1);
    wrap.appendChild(b2);
    wrap.appendChild(bCancel);
    content.appendChild(wrap);
}

function csvModalZeigSchritt2(modus) {
    // Schritt 2: Projektfokus | Arbeitszeitfokus | Zurück
    var label = modus === "monat"
        ? (MONATE[aktuellerMonat] + " " + aktuellesJahr)
        : "Zeitraum";
    document.getElementById("csv-modal-sub").textContent = label + " – Format wählen";

    var content = document.getElementById("csv-modal-content");
    content.innerHTML = "";
    var wrap = document.createElement("div");
    wrap.style.cssText = "display:flex;flex-direction:column;gap:8px;";

    // Zeitraum-Felder (nur wenn Zeitraum-Modus)
    if (modus === "zeitraum") {
        var zrDiv = document.createElement("div");
        zrDiv.style.cssText = "display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin-bottom:4px;padding:14px;background:var(--surface2);border-radius:10px;";

        var vonDiv = document.createElement("div");
        var vonLabel = document.createElement("label");
        vonLabel.textContent = "Von";
        vonLabel.style.cssText = "font-size:11px;font-weight:700;color:var(--text-secondary);display:block;margin-bottom:4px;";
        var vonInput = document.createElement("input");
        vonInput.type = "date"; vonInput.id = "csv-von";
        vonInput.style.cssText = "padding:8px 12px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text-primary);font-family:inherit;";
        vonDiv.appendChild(vonLabel); vonDiv.appendChild(vonInput);

        var bisDiv = document.createElement("div");
        var bisLabel = document.createElement("label");
        bisLabel.textContent = "Bis";
        bisLabel.style.cssText = "font-size:11px;font-weight:700;color:var(--text-secondary);display:block;margin-bottom:4px;";
        var bisInput = document.createElement("input");
        bisInput.type = "date"; bisInput.id = "csv-bis";
        bisInput.style.cssText = "padding:8px 12px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text-primary);font-family:inherit;";
        bisDiv.appendChild(bisLabel); bisDiv.appendChild(bisInput);

        zrDiv.appendChild(vonDiv); zrDiv.appendChild(bisDiv);
        wrap.appendChild(zrDiv);

        // Vorausfüllen aktueller Monat
        var letzterTag = new Date(aktuellesJahr, aktuellerMonat, 0).getDate();
        vonInput.value = aktuellesJahr + "-" + String(aktuellerMonat).padStart(2,"0") + "-01";
        bisInput.value = aktuellesJahr + "-" + String(aktuellerMonat).padStart(2,"0") + "-" + String(letzterTag).padStart(2,"0");
    }

    // Projektfokus
    var bProj = _csvBtn("primary", "Projektfokus",
        "Jeder Slot einzeln mit Projekt, Aufgabe, Notiz", svgProjekt());
    bProj.addEventListener("click", function() { csvDoExport(modus, "projekt"); });

    // Arbeitszeitfokus
    var bAz = _csvBtn("ghost", "Arbeitszeitfokus",
        "Pro Tag: Arbeitsbeginn bis Feierabend, Nettodauer", svgUhr());
    bAz.addEventListener("click", function() { csvDoExport(modus, "arbeitszeit"); });

    // Zurück
    var bBack = document.createElement("button");
    bBack.className = "btn btn-ghost";
    bBack.style.cssText = "margin-top:4px;justify-content:center;";
    bBack.textContent = "← Zurück";
    bBack.addEventListener("click", csvModalZeigSchritt1);

    wrap.appendChild(bProj);
    wrap.appendChild(bAz);
    wrap.appendChild(bBack);
    content.appendChild(wrap);
}

async function csvDoExport(zeitraumModus, exportModus) {
    var von, bis;

    if (zeitraumModus === "monat") {
        var letzterTag = new Date(aktuellesJahr, aktuellerMonat, 0).getDate();
        von = aktuellesJahr + "-" + String(aktuellerMonat).padStart(2,"0") + "-01";
        bis = aktuellesJahr + "-" + String(aktuellerMonat).padStart(2,"0") + "-" + String(letzterTag).padStart(2,"0");
    } else {
        von = (document.getElementById("csv-von") || {}).value || "";
        bis = (document.getElementById("csv-bis") || {}).value || "";
        if (!von || !bis || bis < von) {
            showToast("Bitte gültigen Zeitraum wählen.", "error");
            return;
        }
    }

    csvModalSchliessen();

    var suffix    = exportModus === "arbeitszeit" ? "_arbeitszeit" : "_projekte";
    var dateiname = "zeiterfassung_" + von + "_" + bis + suffix + ".csv";

    try {
        var res  = await fetch("/api/export/csv?von=" + von + "&bis=" + bis + "&format=text&modus=" + exportModus);
        var data = await res.json();
        if (!data.inhalt) { showToast("Keine Daten für diesen Zeitraum.", "error"); return; }

        // Nativer Speichern-Dialog via Flask-Endpunkt
        try {
            var sr = await fetch("/api/native/csv-speichern", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ dateiname: dateiname, inhalt: data.inhalt })
            });
            var ergebnis = await sr.json();
            if (ergebnis && ergebnis.ok) {
                var anzeige = ergebnis.pfad ? ergebnis.pfad.split("\\").pop().split("/").pop() : dateiname;
                showToast("CSV gespeichert: " + anzeige);
            } else if (ergebnis && ergebnis.abgebrochen) {
                // Nutzer hat abgebrochen - kein Fehler
            } else {
                // Fallback: Browser-Download
                var blob = new Blob(["\uFEFF" + data.inhalt], {type: "text/csv;charset=utf-8"});
                var url  = URL.createObjectURL(blob);
                var a    = document.createElement("a");
                a.href = url; a.download = dateiname;
                document.body.appendChild(a); a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
            }
        } catch(e2) {
            // Fallback: Browser-Download
            var blob = new Blob(["\uFEFF" + data.inhalt], {type: "text/csv;charset=utf-8"});
            var url  = URL.createObjectURL(blob);
            var a    = document.createElement("a");
            a.href = url; a.download = dateiname;
            document.body.appendChild(a); a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        }
    } catch(e) {
        showToast("CSV-Export fehlgeschlagen: " + e, "error");
    }
}

function exportCSV() {
    var m = document.getElementById("csv-modus-modal");
    if (!m) { _csvModalEinfuegen(); }
    csvModalZeigSchritt1();
    document.getElementById("csv-modus-modal").style.display = "flex";
}

function csvModalSchliessen() {
    var m = document.getElementById("csv-modus-modal");
    if (m) m.style.display = "none";
}

// ── Hilfsfunktionen für Modal-Buttons ──────────────────────────────────────
function _csvBtn(typ, titel, beschreibung, svgIcon) {
    var btn = document.createElement("button");
    btn.className = "btn btn-" + typ;
    btn.style.cssText = "justify-content:flex-start;padding:12px 16px;gap:12px;text-align:left;";
    var iconWrap = document.createElement("span");
    iconWrap.style.cssText = "flex-shrink:0;opacity:.8;";
    iconWrap.innerHTML = svgIcon;
    var textWrap = document.createElement("span");
    textWrap.innerHTML = "<strong>" + titel + "</strong><br>"
        + "<small style='font-weight:400;opacity:.7;'>" + beschreibung + "</small>";
    btn.appendChild(iconWrap);
    btn.appendChild(textWrap);
    return btn;
}
function svgKalender() {
    return '<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>';
}
function svgUhr() {
    return '<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>';
}
function svgProjekt() {
    return '<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><rect x="2" y="3" width="20" height="14" rx="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>';
}

document.addEventListener("DOMContentLoaded", _csvModalEinfuegen);
</script>
{% endblock %}