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

{% block content %}

<div class="page-header">
    <div class="page-header-left">
        <h1 class="page-title">Zeiterfassung</h1>
        <p class="page-subtitle">Starte einen neuen Slot oder setze deine Arbeit fort.</p>
    </div>
</div>

<!-- Timer-Karte (Split-Screen) -->
<div class="timer-card" id="timer-card">
    <div class="timer-split">

        <!-- LINKS: Timer -->
        <div class="split-left">
            <div class="timer-status-badge" id="timer-badge">Bereit</div>
            <div class="timer-display" id="timer-display">00:00:00</div>
            <div class="timer-meta" id="timer-meta">–</div>
            <div id="lange-warnung" style="display:none;align-items:center;gap:8px;
                background:rgba(255,149,0,0.12);border:1px solid rgba(255,149,0,0.3);
                border-radius:8px;padding:8px 12px;margin-top:8px;font-size:13px;color:#b36a00;">
                ⚠ Timer läuft seit über 12 Stunden – vergessen zu stoppen?
            </div>

            <!-- Arbeitsort des Tages -->
            <div style="margin-top:10px; margin-bottom:15px; display:flex; align-items:center; gap:8px;">                <span id="arbeitsort-dot" style="width:10px;height:10px;border-radius:50%;background:#C7C7CC;display:inline-block;flex-shrink:0;"></span>
                <select id="arbeitsort-select" class="form-control" style="font-size:13px;padding:4px 8px;height:32px;max-width:200px;" onchange="arbeitsortSetzen(this.value)">
                    <option value="">– Arbeitsort wählen –</option>
                </select>
            </div>

            <!-- IDLE Buttons -->
            <div id="ctrl-idle" class="split-btns">
                <button class="btn btn-start" onclick="startSlot()">
                    <svg width="18" height="18" fill="currentColor" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                    Starten
                </button>
            </div>

            <!-- AKTIV Buttons -->
            <div id="ctrl-aktiv" class="split-btns" style="display:none;">
                <button class="btn btn-pause" onclick="pauseSlot()">
                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg>
                    Pause
                </button>
                <button class="btn btn-stop" onclick="stoppSlot()">
                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>
                    Beenden
                </button>
            </div>

            <!-- PAUSE Buttons -->
            <div id="ctrl-pause" class="split-btns" style="display:none;">
                <div class="pause-hint-wrap">
                    <span class="pause-hint">⏸ Pause</span>
                    <span class="pause-timer" id="pause-timer-display">00:00:00</span>
                </div>
                <button class="btn btn-fortsetzen" onclick="fortsetzenSlot()">
                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg>
                    Fortsetzen
                </button>
                <button class="btn btn-stop" onclick="stoppSlot()">
                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" rx="2"/></svg>
                    Beenden
                </button>
            </div>
        </div>

        <!-- RECHTS: Projektliste -->
        <div class="split-right">
            <div class="split-right-label" id="split-right-label">Projekt wählen</div>
            <div class="projekt-liste" id="projekt-liste">
                <!-- wird per JS befüllt -->
            </div>
        </div>

    </div>
</div>

<!-- Heutige Slots -->
<div class="section-header">
    <h2 class="section-title">Heute</h2>
    <span class="section-total" id="heute-total"></span>
</div>
<div id="heute-slots" class="slots-list">
    <div class="empty-state">Noch keine Einträge heute.</div>
</div>

{% endblock %}

{% block scripts %}
<script>
// ── State ──────────────────────────────────────────────────────────────────
let timerInterval      = null;
let pauseTimerInterval = null;
let startZeit          = null;
let pauseSekunden      = 0;
let pauseStart         = null;
let aktuellerStatus    = "idle";
let alleProjekte       = [];

// Auswahl-State
let gewähltesProjekt = null;  // { id, name, farbe, aufgaben }
let gewählteAufgabe  = null;  // { id, name }

// Laufender Slot — zum Vergleich ob wirklich gewechselt wird
let laufendeProjektId = null;
let laufendeAufgabeId = null;

// ── Init ───────────────────────────────────────────────────────────────────
document.addEventListener("DOMContentLoaded", async () => {
    await ladeProjekte();
    await aktualisiereStatus();
    ladeHeuteSlots();
    setInterval(ladeHeuteSlots, 30000);
});

// ── Projekte laden & Liste aufbauen ────────────────────────────────────────
async function ladeProjekte() {
    const res = await fetch("/api/projekte");
    alleProjekte = await res.json();
    baueProjektListe();
}

function baueProjektListe() {
    const container = document.getElementById("projekt-liste");
    container.innerHTML = "";

    // "Kein Projekt" als erstes Item
    const keins = { id: null, name: "Kein Projekt", farbe: "#AEAEB2", aufgaben: [] };
    const items = [keins, ...alleProjekte];

    items.forEach(p => {
        const isAktiv = gewähltesProjekt?.id === p.id;
        // Im laufenden Timer: Projekt + Aufgabe identisch mit aktuellem → nicht klickbar
        const istGleich = aktuellerStatus !== "idle"
            && gewähltesProjekt?.id === p.id
            && (!p.aufgaben || p.aufgaben.length === 0);

        const row = document.createElement("div");
        row.className = "projekt-liste-item" + (isAktiv ? " aktiv" : "") + (istGleich ? " gesperrt" : "");
        row.dataset.projektId = p.id ?? "";
        row.innerHTML = `
            <div class="pli-dot" style="background:${p.farbe || '#AEAEB2'}"></div>
            <span class="pli-name">${p.name}</span>
            <span class="pli-check">✓</span>
        `;
        if (!istGleich) {
            row.addEventListener("click", () => wähleProjekt(p));
        }
        container.appendChild(row);

        // Aufgaben-Subliste (immer im DOM, sichtbar wenn Projekt gewählt)
        if (p.aufgaben && p.aufgaben.length > 0) {
            const sub = document.createElement("div");
            sub.className = "aufgaben-subliste" + (isAktiv ? " sichtbar" : "");
            sub.id = `aufgaben-sub-${p.id}`;

            // "Keine Aufgabe"
            const keineRow = bauAufgabeRow({ id: null, name: "Keine Aufgabe" }, p, isAktiv && !gewählteAufgabe);
            sub.appendChild(keineRow);

            p.aufgaben.forEach(a => {
                const aRow = bauAufgabeRow(a, p, isAktiv && gewählteAufgabe?.id === a.id);
                sub.appendChild(aRow);
            });

            container.appendChild(sub);
        }
    });
}

function bauAufgabeRow(aufgabe, projekt, isAktiv) {
    // Gleiche Aufgabe im laufenden Timer → nicht klickbar
    const istGleich = aktuellerStatus !== "idle"
        && gewähltesProjekt?.id === projekt.id
        && (aufgabe.id === null ? gewählteAufgabe === null : gewählteAufgabe?.id === aufgabe.id);
    const row = document.createElement("div");
    row.className = "aufgabe-item-row" + (isAktiv ? " aktiv" : "") + (istGleich ? " gesperrt" : "");
    row.innerHTML = `<span>${aufgabe.name}</span><span class="air-check">✓</span>`;
    if (!istGleich) {
        row.addEventListener("click", (e) => {
            e.stopPropagation();
            wähleAufgabe(aufgabe, projekt);
        });
    }
    return row;
}

function wähleProjekt(projekt) {
    gewähltesProjekt = projekt;
    gewählteAufgabe  = null;
    baueProjektListe();
}

function wähleAufgabe(aufgabe, projekt) {
    gewähltesProjekt = projekt;
    gewählteAufgabe  = aufgabe.id === null ? null : aufgabe;
    baueProjektListe();
}

// ── Label rechts aktualisieren ─────────────────────────────────────────────
function aktualisiereSplitLabel(status) {
    const lbl = document.getElementById("split-right-label");
    if (status === "idle") {
        lbl.textContent = "Projekt wählen";
    } else {
        lbl.textContent = "Projekt wechseln";
    }
}

// ── Timer Steuerung ────────────────────────────────────────────────────────
var _startLaeuft = false;
async function startSlot() {
    if (_startLaeuft) return;
    _startLaeuft = true;
    const btn = document.querySelector(".btn-start");
    if (btn) { btn.disabled = true; btn.style.opacity = "0.6"; }
    try {
        const res = await fetch("/api/starten", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                projekt_id: gewähltesProjekt?.id || null,
                aufgabe_id: gewählteAufgabe?.id  || null
            })
        });
        const data = await res.json();
        if (data.fehler) { showToast(data.fehler, "error"); return; }
        await aktualisiereStatus();
        ladeHeuteSlots();
    } finally {
        _startLaeuft = false;
        if (btn) { btn.disabled = false; btn.style.opacity = ""; }
    }
}

async function wechselSlot(projektId, aufgabeId) {
    // Laufende IDs sofort aktualisieren → Doppelklick verhindert
    laufendeProjektId = projektId ?? null;
    laufendeAufgabeId = aufgabeId ?? null;
    const res = await fetch("/api/projektwechsel", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ projekt_id: projektId, aufgabe_id: aufgabeId })
    });
    const data = await res.json();
    if (data.fehler) { showToast(data.fehler, "error"); return; }
    showToast("Projekt gewechselt.");
    await aktualisiereStatus();
    ladeHeuteSlots();
}

async function pauseSlot()     { await fetch("/api/pause",     { method: "POST" }); await aktualisiereStatus(); }
async function fortsetzenSlot(){ await fetch("/api/fortsetzen",{ method: "POST" }); await aktualisiereStatus(); }
async function stoppSlot() {
    await fetch("/api/stopp", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ notiz: "" })
    });
    stopTimer(); stopPauseTimer();
    setzeUI("idle");
    aktuellerStatus = "idle";
    ladeHeuteSlots();
}

// ── Klick auf Projektliste im aktiven Zustand → sofort wechseln ────────────
function handleProjektKlick(projektId, aufgabeId) {
    if (aktuellerStatus === "idle") return; // wird via startSlot() behandelt
    wechselSlot(projektId, aufgabeId);
}

// Wir überschreiben wähleProjekt/wähleAufgabe für den Aktiv-Modus
const _origWähleProjekt = wähleProjekt;
function wähleProjekt(projekt) {
    gewähltesProjekt = projekt;
    gewählteAufgabe  = null;
    baueProjektListe();

    // Im aktiven Modus: sofort wechseln wenn Projekt keine Aufgaben hat
    if (aktuellerStatus !== "idle" && (!projekt.aufgaben || projekt.aufgaben.length === 0)) {
        const neuProjektId = projekt.id ?? null;
        if (neuProjektId === laufendeProjektId && null === laufendeAufgabeId) {
            return; // Identisch → kein Wechsel
        }
        wechselSlot(neuProjektId, null);
    }
}

function wähleAufgabe(aufgabe, projekt) {
    const prev = gewähltesProjekt;
    gewähltesProjekt = projekt;
    gewählteAufgabe  = aufgabe.id === null ? null : aufgabe;
    baueProjektListe();

    // Im aktiven Modus: sofort wechseln — aber nur wenn wirklich unterschiedlich
    if (aktuellerStatus !== "idle") {
        const neuProjektId = projekt.id ?? null;
        const neuAufgabeId = aufgabe.id === null ? null : aufgabe.id;
        if (neuProjektId === laufendeProjektId && neuAufgabeId === laufendeAufgabeId) {
            return; // Identisch → kein Wechsel
        }
        wechselSlot(neuProjektId, neuAufgabeId);
    }
}

// ── Status API ─────────────────────────────────────────────────────────────
async function aktualisiereStatus() {
    const res  = await fetch("/api/status");
    const data = await res.json();

    if (data.status === "idle") {
        stopTimer();
        stopPauseTimer();
        setzeUI("idle");
        aktuellerStatus = "idle";
        aktualisiereSplitLabel("idle");
        return;
    }

    pauseSekunden = data.pause_sekunden || 0;
    startZeit     = new Date(data.start_zeit.replace(" ", "T"));
    pauseStart    = data.pause_start ? new Date(data.pause_start.replace(" ", "T")) : null;

    const metaText = data.status === "pause"
        ? "Pause"
        : ([data.projekt_name, data.aufgabe_name].filter(Boolean).join(" · ") || "Kein Thema");
    document.getElementById("timer-meta").textContent = metaText;

    // Warnung wenn Timer > 12h läuft
    const warningEl = document.getElementById("lange-warnung");
    if (warningEl) warningEl.style.display = data.lange_warnung ? "flex" : "none";

    // Aktive Auswahl in der Liste markieren
    const aktivProjekt = alleProjekte.find(p => p.name === data.projekt_name) || null;
    const aktivAufgabe = aktivProjekt?.aufgaben?.find(a => a.name === data.aufgabe_name) || null;
    gewähltesProjekt  = aktivProjekt || { id: null, name: "Kein Projekt", farbe: "#AEAEB2", aufgaben: [] };
    gewählteAufgabe   = aktivAufgabe || null;
    // Laufende IDs merken — für Doppelwechsel-Schutz
    laufendeProjektId = gewähltesProjekt.id ?? null;
    laufendeAufgabeId = gewählteAufgabe?.id ?? null;
    baueProjektListe();
    aktualisiereSplitLabel("aktiv");

    if (data.status === "pause") {
        setzeUI("pause");
        aktuellerStatus = "pause";
        stopTimer();
        aktualisiereTimerAnzeige();
        // Pause-Timer starten
        stopPauseTimer();
        aktualisierePauseTimerAnzeige();
        pauseTimerInterval = setInterval(aktualisierePauseTimerAnzeige, 1000);
    } else {
        setzeUI("aktiv");
        aktuellerStatus = "aktiv";
        stopTimer();
        stopPauseTimer();
        timerInterval = setInterval(aktualisiereTimerAnzeige, 1000);
    }
}

function aktualisiereTimerAnzeige() {
    let v = Math.floor((new Date() - startZeit) / 1000) - pauseSekunden;
    if (aktuellerStatus === "pause" && pauseStart)
        v -= Math.floor((new Date() - pauseStart) / 1000);
    document.getElementById("timer-display").textContent = formatSekunden(Math.max(0, v));
}

function aktualisierePauseTimerAnzeige() {
    if (!pauseStart) return;
    const p = Math.floor((new Date() - pauseStart) / 1000);
    const el = document.getElementById("pause-timer-display");
    if (el) el.textContent = formatSekunden(Math.max(0, p));
}

function stopTimer() {
    if (timerInterval) { clearInterval(timerInterval); timerInterval = null; }
}

function stopPauseTimer() {
    if (pauseTimerInterval) { clearInterval(pauseTimerInterval); pauseTimerInterval = null; }
    const el = document.getElementById("pause-timer-display");
    if (el) el.textContent = "00:00:00";
}

function setzeUI(status) {
    document.getElementById("ctrl-idle").style.display  = status === "idle"  ? "flex" : "none";
    document.getElementById("ctrl-aktiv").style.display = status === "aktiv" ? "flex" : "none";
    document.getElementById("ctrl-pause").style.display = status === "pause" ? "flex" : "none";

    const badge = document.getElementById("timer-badge");
    const card  = document.getElementById("timer-card");
    card.className = "timer-card";

    if (status === "idle") {
        badge.textContent = "Bereit";
        badge.className   = "timer-status-badge";
        document.getElementById("timer-display").textContent = "00:00:00";
        document.getElementById("timer-meta").textContent    = "–";
        gewähltesProjekt = null;
        gewählteAufgabe  = null;
        baueProjektListe();
    } else if (status === "aktiv") {
        badge.textContent = "● Läuft";
        badge.className   = "timer-status-badge badge-aktiv";
        card.classList.add("card-aktiv");
    } else {
        badge.textContent = "⏸ Pause";
        badge.className   = "timer-status-badge badge-pause";
        card.classList.add("card-pause");
    }
}

// ── Heute-Slots ────────────────────────────────────────────────────────────
async function ladeHeuteSlots() {
    const heute = new Date().toISOString().split("T")[0];
    const container = document.getElementById("heute-slots");
    const totalEl   = document.getElementById("heute-total");

    // Abgeschlossene Slots laden
    const res  = await fetch(`/api/auswertung?von=${heute}&bis=${heute}`);
    const data = await res.json();

    // Aktiven Slot laden
    const statusRes  = await fetch("/api/status");
    const statusData = await statusRes.json();
    const hatAktivenSlot = statusData.status === "aktiv" || statusData.status === "pause";

    if (data.slots.length === 0 && !hatAktivenSlot) {
        container.innerHTML = '<div class="empty-state">Noch keine Einträge heute.</div>';
        totalEl.textContent = "";
        return;
    }

    // Abgeschlossene Slots rendern
    let rows = data.slots.map(s => `
        <div class="slot-row">
            <div class="slot-time">${s.start} – ${s.end}</div>
            <div class="slot-theme">
                <span class="slot-projekt">${s.projekt}</span>
                ${s.aufgabe !== "–" ? `<span class="slot-aufgabe">${s.aufgabe}</span>` : ""}
            </div>
            <div class="slot-dauer">${s.dauer}</div>
        </div>
    `).join("");

    // Aktiven Slot als laufende Zeile anhängen
    if (hatAktivenSlot) {
        const startZeit = statusData.start_zeit
            ? statusData.start_zeit.split(" ")[1].slice(0,5)
            : "–";
        const projektName = statusData.projekt_name || "Kein Projekt";
        const aufgabeName = statusData.aufgabe_name || "";
        const pauseKlasse = statusData.status === "pause" ? " card-pause" : " card-aktiv";
        rows += `
        <div class="slot-row${pauseKlasse}" style="border-color:${statusData.status === "pause" ? "rgba(255,149,0,0.3)" : "rgba(52,199,89,0.3)"}">
            <div class="slot-time">${startZeit} – <span style="color:${statusData.status === "pause" ? "var(--orange)" : "var(--green)"}">laufend</span></div>
            <div class="slot-theme">
                <span class="slot-projekt">${projektName}</span>
                ${aufgabeName ? `<span class="slot-aufgabe">${aufgabeName}</span>` : ""}
            </div>
            <div class="slot-dauer" style="color:${statusData.status === "pause" ? "var(--orange)" : "var(--green)"}">
                ${statusData.status === "pause" ? "Pause" : "●"}
            </div>
        </div>`;
    }

    totalEl.textContent = data.gesamt || "";
    container.innerHTML = rows;
}

function formatSekunden(sek) {
    const h = Math.floor(sek / 3600).toString().padStart(2, "0");
    const m = Math.floor((sek % 3600) / 60).toString().padStart(2, "0");
    const s = (sek % 60).toString().padStart(2, "0");
    return `${h}:${m}:${s}`;
}

// ── Arbeitsorte ────────────────────────────────────────────────────────────

var _arbeitsorte = [];

async function ladeArbeitsorte() {
    var r = await fetch("/api/arbeitsorte");
    _arbeitsorte = await r.json();
    var sel = document.getElementById("arbeitsort-select");
    sel.innerHTML = '<option value="">– Arbeitsort wählen –</option>';
    _arbeitsorte.forEach(function(o) {
        var opt = document.createElement("option");
        opt.value = o.id;
        opt.textContent = o.name;
        opt.dataset.farbe = o.farbe;
        sel.appendChild(opt);
    });
    // Heutigen Arbeitsort laden
    var heute = new Date().toISOString().slice(0, 10);
    var r2 = await fetch("/api/arbeitsort-tag?datum=" + heute);
    var d  = await r2.json();
    if (d && d.id) {
        sel.value = d.id;
        document.getElementById("arbeitsort-dot").style.background = d.farbe || "#C7C7CC";
    }
}

async function arbeitsortSetzen(id) {
    var heute = new Date().toISOString().slice(0, 10);
    await fetch("/api/arbeitsort-tag", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({datum: heute, arbeitsort_id: id ? parseInt(id) : null})
    });
    // Punkt-Farbe aktualisieren
    var sel = document.getElementById("arbeitsort-select");
    var opt = sel.options[sel.selectedIndex];
    document.getElementById("arbeitsort-dot").style.background = (opt && opt.dataset.farbe) ? opt.dataset.farbe : "#C7C7CC";
}

ladeArbeitsorte();
</script>
{% endblock %}