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

{% block content %}
<div class="page-header">
    <div class="page-header-left">
        <h1 class="page-title">Einstellungen</h1>
        <p class="page-subtitle">Konfiguriere deine Zeiterfassung.</p>
    </div>
</div>

<!-- ══════════════════════════════════════════════════════════════════════ -->
<!-- GRUPPE 1: Arbeitszeit & Konto                                         -->
<!-- ══════════════════════════════════════════════════════════════════════ -->
<div class="settings-group-title">Arbeitszeit &amp; Konto</div>

<!-- Arbeitszeit -->
<div class="settings-section">
    <div class="settings-section-title">Arbeitszeit</div>
    <div class="settings-card">
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Wochenarbeitszeit</div>
                <div class="settings-row-sub">Basis für Mehr- und Minderarbeit in der Auswertung</div>
            </div>
            <div class="settings-row-control">
                <div class="stunden-input-group">
                    <input type="number" id="wochenstunden" min="1" max="80" step="0.5"
                           value="40" style="width:70px; text-align:center;">
                    <span class="stunden-unit">Std. / Woche</span>
                </div>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Arbeitstage pro Woche</div>
                <div class="settings-row-sub">Für die Berechnung der Tagessoll-Zeit</div>
            </div>
            <div class="settings-row-control">
                <div class="tage-toggle" id="tage-toggle">
                    <button class="tag-btn" data-tag="Mo" onclick="toggleTag(this)">Mo</button>
                    <button class="tag-btn" data-tag="Di" onclick="toggleTag(this)">Di</button>
                    <button class="tag-btn" data-tag="Mi" onclick="toggleTag(this)">Mi</button>
                    <button class="tag-btn" data-tag="Do" onclick="toggleTag(this)">Do</button>
                    <button class="tag-btn" data-tag="Fr" onclick="toggleTag(this)">Fr</button>
                    <button class="tag-btn" data-tag="Sa" onclick="toggleTag(this)">Sa</button>
                    <button class="tag-btn" data-tag="So" onclick="toggleTag(this)">So</button>
                </div>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div class="settings-derived">
            <div class="derived-item">
                <div class="derived-label">Tagessoll</div>
                <div class="derived-value" id="tagessoll">8:00 Std.</div>
            </div>
            <div class="derived-item">
                <div class="derived-label">Monatssoll (Ø)</div>
                <div class="derived-value" id="monatssoll">173:00 Std.</div>
            </div>
        </div>
        <div class="settings-save-row">
            <button class="btn btn-primary" onclick="speichereEinstellungen()">Speichern</button>
            <span class="save-hint" id="save-hint-arbeitszeit"></span>
        </div>
    </div>
</div>

<!-- Stundenkonto -->
<div class="settings-section">
    <div class="settings-section-title">Stundenkonto</div>
    <div class="settings-card">
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Startdatum der Zeiterfassung</div>
                <div class="settings-row-sub">Vor diesem Datum ist keine Auswertung sichtbar</div>
            </div>
            <div class="settings-row-control">
                <input type="date" id="start-datum" style="width:180px;">
            </div>
        </div>
        <div class="settings-divider"></div>
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Überstunden zum Startdatum</div>
                <div class="settings-row-sub">Guthaben aus früherer Zeiterfassung (z.B. +02:30 oder -01:15)</div>
            </div>
            <div class="settings-row-control" style="display:flex;align-items:center;gap:10px;">
                <select id="start-ueberstunden-vorzeichen" style="width:70px;">
                    <option value="+">+</option>
                    <option value="-">-</option>
                </select>
                <input type="text" id="start-ueberstunden-hhmm" placeholder="HH:MM" style="width:100px;">
            </div>
        </div>
        <div class="settings-divider"></div>
        <div style="padding:16px 24px;">
            <button class="btn btn-primary" onclick="speichereStundenkonto()">Speichern</button>
            <span class="save-hint" id="save-hint-stundenkonto"></span>
        </div>
    </div>
</div>

<!-- Zeitrundung -->
<div class="settings-section">
    <div class="settings-section-title">Zeitrundung</div>
    <div class="settings-card">
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Offset für neue Slots</div>
                <div class="settings-row-sub">
                    Arbeitsbeginn wird <strong>abgerundet</strong>, Feierabend <strong>aufgerundet</strong>
                </div>
            </div>
            <div class="settings-row-control">
                <div class="offset-toggle" id="offset-toggle">
                    <button class="offset-btn aktiv" data-val="0"  onclick="wähleOffset(this)">Exakt</button>
                    <button class="offset-btn"       data-val="5"  onclick="wähleOffset(this)">5 min</button>
                    <button class="offset-btn"       data-val="15" onclick="wähleOffset(this)">15 min</button>
                </div>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div class="offset-preview" id="offset-preview">
            <div class="preview-row">
                <span class="preview-label">Arbeitsbeginn (Beispiel 08:23)</span>
                <span class="preview-arrow">→</span>
                <span class="preview-val" id="prev-start">08:23</span>
            </div>
            <div class="preview-row">
                <span class="preview-label">Feierabend (Beispiel 17:44)</span>
                <span class="preview-arrow">→</span>
                <span class="preview-val" id="prev-end">17:44</span>
            </div>
        </div>
        <div class="settings-save-row">
            <button class="btn btn-primary" onclick="speichereOffset()">Speichern</button>
            <span class="save-hint" id="save-hint-offset"></span>
        </div>
    </div>
</div>

<!-- ArbZG -->
<div class="settings-section">
    <div class="settings-section-title">Arbeitszeitgesetz (ArbZG)</div>
    <div class="settings-card">
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">ArbZG-Prüfung aktiv</div>
                <div class="settings-row-sub">Warnung bei Überschreitung der gesetzlichen Grenzen in der Auswertung</div>
            </div>
            <div class="settings-row-control">
                <label class="toggle-switch">
                    <input type="checkbox" id="arbzg-aktiv" checked>
                    <span class="toggle-slider"></span>
                </label>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Max. Arbeitszeit pro Tag</div>
                <div class="settings-row-sub">Standard: 10 Stunden (§3 ArbZG)</div>
            </div>
            <div class="settings-row-control" style="display:flex;align-items:center;gap:8px;">
                <input type="number" id="arbzg-max-tag" value="10" min="1" max="24" style="width:70px;">
                <span style="font-size:13px;color:var(--text-secondary);">Stunden</span>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Mindestpause ab 6 Stunden</div>
                <div class="settings-row-sub">Standard: 30 Minuten (§4 ArbZG)</div>
            </div>
            <div class="settings-row-control" style="display:flex;align-items:center;gap:8px;">
                <input type="number" id="arbzg-pause-6h" value="30" min="0" max="120" style="width:70px;">
                <span style="font-size:13px;color:var(--text-secondary);">Minuten</span>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Mindestpause ab 9 Stunden</div>
                <div class="settings-row-sub">Standard: 45 Minuten (§4 ArbZG)</div>
            </div>
            <div class="settings-row-control" style="display:flex;align-items:center;gap:8px;">
                <input type="number" id="arbzg-pause-9h" value="45" min="0" max="120" style="width:70px;">
                <span style="font-size:13px;color:var(--text-secondary);">Minuten</span>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div style="padding:16px 24px;">
            <button class="btn btn-primary" onclick="speichereArbZG()">Speichern</button>
            <span class="save-hint" id="save-hint-arbzg"></span>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════════════════════════════ -->
<!-- GRUPPE 2: Abwesenheiten                                               -->
<!-- ══════════════════════════════════════════════════════════════════════ -->
<div class="settings-group-title">Abwesenheiten</div>

<!-- Urlaub -->
<div class="settings-section">
    <div class="settings-section-title">Urlaub</div>
    <div class="settings-card">
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Jahresurlaubstage</div>
                <div class="settings-row-sub">Gesamtanspruch pro Kalenderjahr</div>
            </div>
            <div class="settings-row-control">
                <div class="stunden-input-group">
                    <input type="number" id="urlaubstage-gesamt" min="1" max="60" step="1"
                           value="30" style="width:60px; text-align:center;">
                    <span class="stunden-unit">Tage / Jahr</span>
                </div>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div class="settings-derived" id="urlaub-konto">
            <div class="derived-item">
                <div class="derived-label">Gesamt</div>
                <div class="derived-value" id="urlaub-gesamt">–</div>
            </div>
            <div class="derived-item">
                <div class="derived-label">Genommen</div>
                <div class="derived-value" id="urlaub-genommen">–</div>
            </div>
            <div class="derived-item">
                <div class="derived-label">Verbleibend</div>
                <div class="derived-value" id="urlaub-verbleibend">–</div>
            </div>
        </div>
        <div class="settings-save-row">
            <button class="btn btn-primary" onclick="speichereUrlaubstage()">Speichern</button>
            <span class="save-hint" id="save-hint-urlaub"></span>
        </div>
    </div>
</div>

<!-- Feiertage -->
<div class="settings-section">
    <div class="settings-section-title">Feiertage</div>
    <div class="settings-card">
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Bundesland</div>
                <div class="settings-row-sub">Nur Feiertage des gewählten Bundeslandes werden berücksichtigt</div>
            </div>
            <div class="settings-row-control">
                <select id="bundesland-select" style="min-width:200px;">
                    <option value="">– bitte wählen –</option>
                    <option value="BW">Baden-Württemberg</option>
                    <option value="BY">Bayern</option>
                    <option value="BE">Berlin</option>
                    <option value="BB">Brandenburg</option>
                    <option value="HB">Bremen</option>
                    <option value="HH">Hamburg</option>
                    <option value="HE">Hessen</option>
                    <option value="MV">Mecklenburg-Vorpommern</option>
                    <option value="NI">Niedersachsen</option>
                    <option value="NW">Nordrhein-Westfalen</option>
                    <option value="RP">Rheinland-Pfalz</option>
                    <option value="SL">Saarland</option>
                    <option value="SN">Sachsen</option>
                    <option value="ST">Sachsen-Anhalt</option>
                    <option value="SH">Schleswig-Holstein</option>
                    <option value="TH">Thüringen</option>
                </select>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div id="feiertage-status-bereich" style="padding:12px 24px;">
            <div id="feiertage-status" style="font-size:13px;color:var(--text-secondary);">–</div>
        </div>
        <div class="settings-divider"></div>
        <div style="padding:14px 24px;">
            <div style="font-size:13px;color:var(--text-secondary);margin-bottom:12px;">
                Feiertagsdaten für weitere Jahre können importiert werden:
            </div>
            <div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap;">
                <input type="file" id="feiertage-datei" accept=".json" style="display:none;"
                       onchange="importiereFeiertage(this)">
                <button class="btn btn-primary" onclick="document.getElementById('feiertage-datei').click()">
                    JSON-Datei importieren
                </button>
                <span class="save-hint" id="save-hint-feiertage"></span>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div style="padding:16px 24px;">
            <button class="btn btn-primary" onclick="speichereBundesland()">Speichern</button>
            <span class="save-hint" id="save-hint-bundesland"></span>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════════════════════════════ -->
<!-- GRUPPE 3: App & System                                                -->
<!-- ══════════════════════════════════════════════════════════════════════ -->
<div class="settings-group-title">App &amp; System</div>

<!-- Darstellung -->
<div class="settings-section">
    <div class="settings-section-title">Darstellung</div>
    <div class="settings-card">
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Farbschema</div>
                <div class="settings-row-sub">Wähle zwischen hellem und dunklem Erscheinungsbild</div>
            </div>
            <div class="settings-row-control">
                <div class="offset-toggle">
                    <button id="schema-light" class="offset-btn schema-light" onclick="setzeFarbschema('light')">Hell</button>
                    <button id="schema-dark"  class="offset-btn schema-dark"  onclick="setzeFarbschema('dark')">Dunkel</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- System -->
<div class="settings-section">
    <div class="settings-section-title">System</div>
    <div class="settings-card">
        {% if is_windows %}
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Autostart bei Windows-Anmeldung</div>
                <div class="settings-row-sub">App automatisch starten wenn Windows hochfährt</div>
            </div>
            <div class="settings-row-control">
                <label class="toggle-switch">
                    <input type="checkbox" id="autostart-toggle" onchange="autostartAendern(this.checked)">
                    <span class="toggle-slider"></span>
                </label>
            </div>
        </div>
        <div class="settings-divider"></div>
        {% endif %}
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Version</div>
                <div class="settings-row-sub">Aktuelle Programmversion</div>
            </div>
            <div class="settings-row-control">
                <span style="font-family:var(--font-mono,monospace);font-size:13px;
                             color:var(--text-secondary);"> v{{ app_version }}</span>
            </div>
        </div>
        <div class="settings-divider"></div>
        <!-- Datenbank -->
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Datenbank – Speicherort</div>
                <div class="settings-row-sub">Aktueller Pfad der Datenbankdatei</div>
            </div>
            <div class="settings-row-control" style="min-width:340px;">
                <div id="db-pfad-anzeige" style="font-family:var(--font-mono,monospace); font-size:11px;
                     color:var(--text-secondary); background:var(--surface2); border:1px solid var(--border);
                     border-radius:var(--radius-sm); padding:8px 12px; word-break:break-all;">–</div>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Datenbank – Dateigröße</div>
            </div>
            <div class="settings-row-control">
                <span id="db-groesse" style="font-family:var(--font-mono,monospace);
                      font-size:13px; color:var(--text-secondary);">–</span>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div style="padding:14px 24px; background:rgba(255,149,0,0.06); border-radius:0 0 var(--radius) var(--radius);">
            <div style="font-size:13px; font-weight:600; color:var(--orange); margin-bottom:6px;">Empfehlung zur Datensicherung</div>
            <div style="font-size:12px; color:var(--text-secondary); line-height:1.7;">
                Es wird empfohlen, die Datenbankdatei <strong>jährlich zu sichern</strong> und mit einer
                frischen Datenbank ins neue Jahr zu starten. So bleibt die Anwendung schnell und übersichtlich.<br>
                <strong>Vorgehen:</strong> Datei aus dem Speicherordner kopieren, umbenennen (z.B. <code>zeiterfassung_2026.db</code>)
                und die Originaldatei löschen. Die Anwendung legt beim nächsten Start automatisch eine neue Datenbank an.
            </div>
        </div>
    </div>
</div>

<!-- ══════════════════════════════════════════════════════════════════════ -->
<!-- GRUPPE 4: Konto & Lizenz                                              -->
<!-- ══════════════════════════════════════════════════════════════════════ -->
<div class="settings-group-title">Konto &amp; Lizenz</div>

<!-- Lizenz -->
<div class="settings-section">
    <div class="settings-section-title">Lizenz</div>
    <div class="settings-card">
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Lizenzschlüssel</div>
                <div class="settings-row-sub">Ihr aktivierter Lizenzschlüssel</div>
            </div>
            <div class="settings-row-control">
                <span id="lizenz-key" style="font-family:var(--font-mono,monospace);
                      font-size:13px; color:var(--text-secondary); letter-spacing:1px;">–</span>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Gültig bis</div>
            </div>
            <div class="settings-row-control">
                <span id="lizenz-gueltig" style="font-family:var(--font-mono,monospace);
                      font-size:13px; color:var(--text-secondary);">–</span>
                <span id="lizenz-tage"    style="font-size:12px; color:var(--text-tertiary);
                      margin-left:8px;"></span>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Inhaber</div>
            </div>
            <div class="settings-row-control">
                <span id="lizenz-inhaber" style="font-size:13px; color:var(--text-secondary);">–</span>
            </div>
        </div>
        <div class="settings-divider"></div>
        <div class="settings-row">
            <div class="settings-row-info">
                <div class="settings-row-label">Lizenztyp</div>
                <div class="settings-row-sub">Lokal oder Online mit Synchronisierung</div>
            </div>
            <div class="settings-row-control">
                <span id="lizenz-typ-badge" style="display:inline-flex;align-items:center;gap:6px;
                    font-size:12px;font-weight:700;padding:4px 14px;border-radius:20px;
                    background:var(--surface2);color:var(--text-secondary);">–</span>
            </div>
        </div>
    </div>
</div>

<!-- Online-Synchronisierung -->
<div class="settings-section">
    <div class="settings-section-title">Online-Synchronisierung</div>
    <div class="settings-card">
        <div style="padding:20px 24px; text-align:center;">
            <div style="font-size:32px; margin-bottom:12px;">🔒</div>
            <div style="font-size:15px; font-weight:600; color:var(--text-primary); margin-bottom:8px;">
                Online-Synchronisierung erfordert eine Online-Lizenz
            </div>
            <div style="font-size:13px; color:var(--text-secondary); margin-bottom:20px;">
                Mit einer Online-Lizenz können Sie Ihre Daten auf mehreren Geräten synchronisieren.
            </div>
            <a href="mailto:info@dt-factories.de?subject=DT-Zeiterfassung Online-Lizenz"
               class="btn btn-primary" style="display:inline-flex;">
                Upgrade →
            </a>
        </div>
        <div id="sync-eingeloggt" style="display:none; padding:0 24px 20px;">
            <div class="settings-row">
                <div class="settings-row-info">
                    <div class="settings-row-label">Konto</div>
                </div>
                <div class="settings-row-control">
                    <span id="sync-email" style="font-size:13px;color:var(--text-secondary);">–</span>
                </div>
            </div>
            <div class="settings-divider"></div>
            <div style="padding:12px 0 0;">
                <button class="btn btn-ghost" onclick="syncLogout()">Abmelden</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
const STORAGE_KEY = "dt_zeiterfassung_einstellungen";
let aktiveTage  = ["Mo","Di","Mi","Do","Fr"];
let aktuellerOffset = 0;

// ── Init ───────────────────────────────────────────────────────────────────
document.addEventListener("DOMContentLoaded", async () => {
    await ladeEinstellungenVomServer();
    aktualisiereBerechnung();
    aktualisiereOffsetVorschau();
    document.getElementById("wochenstunden").addEventListener("input", aktualisiereBerechnung);
    await ladeUrlaubsKonto();
    await ladeFeiertageStatus();
    await ladeDbInfo();
    ladeFarbschema();
    await ladeLizenzInfo();
    await ladeSyncInfo();
});

// ── Laden vom Server ───────────────────────────────────────────────────────
async function ladeEinstellungenVomServer() {
    try {
        const res = await fetch("/api/einstellungen");
        const cfg = await res.json();
        if (cfg.wochenstunden) document.getElementById("wochenstunden").value = cfg.wochenstunden;
        if (cfg.aktive_tage)   aktiveTage = cfg.aktive_tage.split(",");
        if (cfg.offset_minuten !== undefined) aktuellerOffset = parseInt(cfg.offset_minuten);
        if (cfg.bundesland) document.getElementById("bundesland-select").value = cfg.bundesland;
        if (cfg.urlaubstage_gesamt) document.getElementById("urlaubstage-gesamt").value = cfg.urlaubstage_gesamt;
        // Stundenkonto – immer setzen, auch wenn leer oder 0
        document.getElementById("start-datum").value = cfg.start_datum || "";
        {
            const min = parseInt(cfg.start_ueberstunden_min) || 0;
            document.getElementById("start-ueberstunden-vorzeichen").value = min < 0 ? "-" : "+";
            const absMin = Math.abs(min);
            const hh = String(Math.floor(absMin / 60)).padStart(2, "0");
            const mm = String(absMin % 60).padStart(2, "0");
            // Nur setzen wenn != 00:00 oder explizit gespeichert
            document.getElementById("start-ueberstunden-hhmm").value = hh + ":" + mm;
        }
        // ArbZG
        if (cfg.arbzg_aktiv !== undefined)
            document.getElementById("arbzg-aktiv").checked = cfg.arbzg_aktiv === "1";
        if (cfg.arbzg_max_tag_min !== undefined)
            document.getElementById("arbzg-max-tag").value = Math.round(cfg.arbzg_max_tag_min / 60);
        if (cfg.arbzg_pause_ab_6h_min !== undefined)
            document.getElementById("arbzg-pause-6h").value = cfg.arbzg_pause_ab_6h_min;
        if (cfg.arbzg_pause_ab_9h_min !== undefined)
            document.getElementById("arbzg-pause-9h").value = cfg.arbzg_pause_ab_9h_min;
    } catch(e) {}
    renderTageButtons();
    renderOffsetButtons();
    aktualisiereBerechnung();
    aktualisiereOffsetVorschau();
    ladeAutostartStatus();
}

// ── Tage ───────────────────────────────────────────────────────────────────
function renderTageButtons() {
    document.querySelectorAll(".tag-btn").forEach(btn => {
        btn.classList.toggle("aktiv", aktiveTage.includes(btn.dataset.tag));
    });
}
function toggleTag(btn) {
    const tag = btn.dataset.tag;
    if (aktiveTage.includes(tag)) {
        if (aktiveTage.length === 1) return;
        aktiveTage = aktiveTage.filter(t => t !== tag);
    } else {
        aktiveTage.push(tag);
    }
    renderTageButtons();
    aktualisiereBerechnung();
}

// ── Berechnung ─────────────────────────────────────────────────────────────
function aktualisiereBerechnung() {
    const wochenstunden = parseFloat(document.getElementById("wochenstunden").value) || 40;
    const tagssoll   = wochenstunden / (aktiveTage.length || 5);
    const monatssoll = (wochenstunden * 52) / 12;
    document.getElementById("tagessoll").textContent  = formatStunden(tagssoll);
    document.getElementById("monatssoll").textContent = formatStunden(monatssoll);
}
function formatStunden(h) {
    const s = Math.floor(h);
    const m = Math.round((h - s) * 60);
    return `${s}:${m.toString().padStart(2,"0")} Std.`;
}

// ── Offset ─────────────────────────────────────────────────────────────────
function renderOffsetButtons() {
    document.querySelectorAll(".offset-btn").forEach(btn => {
        btn.classList.toggle("aktiv", parseInt(btn.dataset.val) === aktuellerOffset);
    });
}
function wähleOffset(btn) {
    aktuellerOffset = parseInt(btn.dataset.val);
    renderOffsetButtons();
    aktualisiereOffsetVorschau();
}

function rundeAb(hhmm, offset) {
    if (offset === 0) return hhmm;
    const [h, m] = hhmm.split(":").map(Number);
    const total = h * 60 + m;
    const gerundet = Math.floor(total / offset) * offset;
    return `${String(Math.floor(gerundet/60)).padStart(2,"0")}:${String(gerundet%60).padStart(2,"0")}`;
}
function rundeAuf(hhmm, offset) {
    if (offset === 0) return hhmm;
    const [h, m] = hhmm.split(":").map(Number);
    const total = h * 60 + m;
    const gerundet = Math.ceil(total / offset) * offset;
    const capped = Math.min(gerundet, 1439);
    return `${String(Math.floor(capped/60)).padStart(2,"0")}:${String(capped%60).padStart(2,"0")}`;
}

function aktualisiereOffsetVorschau() {
    const o = aktuellerOffset;
    document.getElementById("prev-start").textContent       = rundeAb("08:23", o);
    document.getElementById("prev-end").textContent         = rundeAuf("17:44", o);
}

// ── Speichern Arbeitszeit ──────────────────────────────────────────────────
async function speichereEinstellungen() {
    const wochenstunden = parseFloat(document.getElementById("wochenstunden").value) || 40;
    await fetch("/api/einstellungen", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ wochenstunden, aktiveTage })
    });
    zeigeHint("save-hint-arbeitszeit");
}

// ── Speichern Offset ───────────────────────────────────────────────────────
async function speichereOffset() {
    await fetch("/api/einstellungen", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ offsetMinuten: aktuellerOffset })
    });
    zeigeHint("save-hint-offset");
}

// ── Stundenkonto speichern ────────────────────────────────────────────────
async function speichereStundenkonto() {
    const datum     = document.getElementById("start-datum").value;
    const vorzeichen = document.getElementById("start-ueberstunden-vorzeichen").value;
    const hhmm      = document.getElementById("start-ueberstunden-hhmm").value.trim();

    // HH:MM parsen
    let minuten = 0;
    if (hhmm) {
        const teile = hhmm.split(":");
        const h = parseInt(teile[0] || "0", 10);
        const m = parseInt(teile[1] || "0", 10);
        if (isNaN(h) || isNaN(m) || m < 0 || m > 59) {
            showToast("Ungültiges Format – bitte HH:MM eingeben (z.B. 02:30).", "error");
            return;
        }
        minuten = h * 60 + m;
    }
    if (vorzeichen === "-") minuten = -minuten;

    const res = await fetch("/api/einstellungen", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ start_datum: datum, start_ueberstunden_min: minuten })
    });
    const result = await res.json();
    if (result.ok) {
        zeigeHint("save-hint-stundenkonto");
        // Felder neu laden zur Bestätigung
        await ladeEinstellungenVomServer();
    } else {
        showToast("Fehler beim Speichern.", "error");
    }
}

// ── Autostart ─────────────────────────────────────────────────────────────
async function ladeAutostartStatus() {
    const toggle = document.getElementById("autostart-toggle");
    if (!toggle) return;
    try {
        const r = await fetch("/api/native/autostart-status");
        const d = await r.json();
        toggle.checked = !!d.aktiv;
    } catch(e) {}
}
async function autostartAendern(aktiv) {
    const toggle = document.getElementById("autostart-toggle");
    if (toggle) toggle.checked = aktiv;
    try {
        const r = await fetch("/api/native/autostart-setzen", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ aktiv })
        });
        const d = await r.json();
        if (d.ok) {
            showToast(aktiv ? "Autostart aktiviert." : "Autostart deaktiviert.");
        } else {
            showToast("Autostart konnte nicht geaendert werden.", "error");
            if (toggle) toggle.checked = !aktiv;
        }
    } catch(e) {
        showToast("Autostart konnte nicht geaendert werden.", "error");
        if (toggle) toggle.checked = !aktiv;
    }
}

// ── ArbZG speichern ────────────────────────────────────────────────────────
async function speichereArbZG() {
    const aktiv  = document.getElementById("arbzg-aktiv").checked ? "1" : "0";
    const maxTag = parseInt(document.getElementById("arbzg-max-tag").value) || 10;
    const p6h    = parseInt(document.getElementById("arbzg-pause-6h").value) || 30;
    const p9h    = parseInt(document.getElementById("arbzg-pause-9h").value) || 45;
    await fetch("/api/einstellungen", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
            arbzg_aktiv:          aktiv,
            arbzg_max_tag_min:    maxTag * 60,
            arbzg_pause_ab_6h_min: p6h,
            arbzg_pause_ab_9h_min: p9h,
        })
    });
    zeigeHint("save-hint-arbzg");
}

// ── DB-Info ────────────────────────────────────────────────────────────────
async function ladeDbInfo() {
    const res  = await fetch("/api/db-info");
    const data = await res.json();
    if (data.pfad) {
        document.getElementById("db-pfad-anzeige").textContent = data.pfad;
        document.getElementById("db-groesse").textContent      = data.groesse || "–";
    }
}


// ── Lizenzinfo ──────────────────────────────────────────────────────────────
async function ladeLizenzInfo() {
    try {
        const res  = await fetch("/api/lizenz-info");
        const data = await res.json();
        if (data._fehler) {
            document.getElementById("lizenz-key").textContent = "Fehler: " + data._fehler;
            return;
        }
        if (data.key) {
            document.getElementById("lizenz-key").textContent     = data.key;
            document.getElementById("lizenz-inhaber").textContent = data.customer || "–";

            // Gesperrt?
            if (data.gesperrt) {
                showToast("Lizenz gesperrt: " + (data.meldung || "Ungültig"), "error");
                document.getElementById("lizenz-gueltig").textContent = "Gesperrt";
                if (document.getElementById("lizenz-tage"))
                    document.getElementById("lizenz-tage").textContent = "";
            } else if (data.valid_until) {
                const bis    = new Date(data.valid_until);
                const heute  = new Date();
                const tage   = Math.ceil((bis - heute) / 86400000);
                const bisStr = bis.toLocaleDateString("de-DE", {day:"2-digit",month:"2-digit",year:"numeric"});
                document.getElementById("lizenz-gueltig").textContent = bisStr;
                const tageEl = document.getElementById("lizenz-tage");
                if (tageEl) {
                    if (tage > 0) {
                        tageEl.textContent = `(noch ${tage} Tage)`;
                        tageEl.style.color = tage <= 30 ? "var(--orange)" : "var(--text-secondary)";
                    } else {
                        tageEl.textContent = "Abgelaufen";
                        tageEl.style.color = "var(--red)";
                    }
                }
            } else {
                document.getElementById("lizenz-gueltig").textContent = "–";
            }

            // Lizenztyp-Badge
            const typBadge = document.getElementById("lizenz-typ-badge");
            if (typBadge) {
                const typ = data.lizenz_typ || "lokal";
                if (typ === "online") {
                    typBadge.textContent = "☁ Online";
                    typBadge.style.background = "rgba(52,199,89,0.12)";
                    typBadge.style.color = "var(--green)";
                } else {
                    typBadge.textContent = "💻 Lokal";
                    typBadge.style.background = "var(--surface2)";
                    typBadge.style.color = "var(--text-secondary)";
                }
            }
        } else {
            document.getElementById("lizenz-key").textContent     = "Nicht aktiviert";
            document.getElementById("lizenz-gueltig").textContent = "–";
        }
    } catch(e) {
        document.getElementById("lizenz-key").textContent = "Fehler: " + e.message;
    }
}

// Hintergrundprüfung alle 6 Stunden
setInterval(ladeLizenzInfo, 6 * 60 * 60 * 1000);
// ── Farbschema ──────────────────────────────────────────────────────────────
function setzeFarbschema(schema) {
    localStorage.setItem("dt_farbschema", schema);
    document.documentElement.setAttribute("data-theme", schema);
    document.getElementById("schema-light").classList.toggle("aktiv", schema === "light");
    document.getElementById("schema-dark").classList.toggle("aktiv",  schema === "dark");
    fetch("/api/einstellungen", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ farbschema: schema })
    });
}

function ladeFarbschema() {
    const schema = localStorage.getItem("dt_farbschema") || "light";
    document.getElementById("schema-light").classList.toggle("aktiv", schema === "light");
    document.getElementById("schema-dark").classList.toggle("aktiv",  schema === "dark");
}

function zeigeHint(id) {
    const el = document.getElementById(id);
    el.textContent = "✓ Gespeichert";
    el.style.color = "#34C759";
    setTimeout(() => { el.textContent = ""; }, 2500);
}

// ── Urlaubskonto ───────────────────────────────────────────────────────────
async function ladeUrlaubsKonto() {
    const res  = await fetch(`/api/urlaub/konto?jahr=${new Date().getFullYear()}`);
    const data = await res.json();
    document.getElementById("urlaubstage-gesamt").value    = data.gesamt;
    document.getElementById("urlaub-gesamt").textContent      = data.gesamt + " Tage";
    document.getElementById("urlaub-genommen").textContent    = data.genommen + " Tage";
    document.getElementById("urlaub-verbleibend").textContent = data.verbleibend + " Tage";
}

async function speichereUrlaubstage() {
    const tage = parseInt(document.getElementById("urlaubstage-gesamt").value) || 30;
    await fetch("/api/einstellungen", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ urlaubstageGesamt: tage })
    });
    await ladeUrlaubsKonto();
    zeigeHint("save-hint-urlaub");
}

// ── Feiertage ──────────────────────────────────────────────────────────────
async function ladeFeiertageStatus() {
    const res   = await fetch("/api/feiertage/jahre");
    const jahre = await res.json();
    const el    = document.getElementById("feiertage-status");
    if (jahre.length === 0) {
        el.textContent = "Keine Feiertagsdaten geladen.";
    } else {
        el.textContent = `Verfügbare Jahre: ${jahre.join(", ")}`;
    }
}

async function importiereFeiertage(input) {
    const file = input.files[0];
    if (!file) return;
    const formData = new FormData();
    formData.append("datei", file);
    const res  = await fetch("/api/feiertage/import", { method: "POST", body: formData });
    const data = await res.json();
    if (data.fehler) { showToast(data.fehler, "error"); return; }
    showToast(`${data.jahr}: ${data.importiert} Feiertage importiert.`);
    await ladeFeiertageStatus();
    input.value = "";
}

async function speichereBundesland() {
    const bl = document.getElementById("bundesland-select").value;
    if (!bl) { showToast("Bitte ein Bundesland wählen.", "error"); return; }
    await fetch("/api/einstellungen", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ bundesland: bl })
    });
    zeigeHint("save-hint-bundesland");
}

// ── Sync-Styles ───────────────────────────────────────────────────────────────
const syncStyle = document.createElement('style');
syncStyle.textContent = `
.sync-tab {
    padding: 7px 16px; border: none; border-radius: 6px; font-size: 13px;
    font-weight: 500; cursor: pointer; background: transparent;
    color: var(--text-secondary); font-family: inherit; transition: all .15s;
}
.sync-tab.aktiv { background: var(--surface); color: var(--text-primary);
    box-shadow: var(--shadow-sm); }
html[data-theme="dark"] .sync-tab.aktiv { background: var(--surface2); }
`;
document.head.appendChild(syncStyle);

// ── Sync Init ─────────────────────────────────────────────────────────────────
async function ladeSyncInfo() {
    try {
        const res  = await fetch("/api/sync/info");
        const data = await res.json();

        const cardKeinPlan = document.getElementById("sync-card-kein-plan");
        const cardLogin    = document.getElementById("sync-card-login");
        const cardAktiv    = document.getElementById("sync-card-aktiv");

        // Lizenztyp aus lizenz-info prüfen
        const lizenzRes  = await fetch("/api/lizenz-info");
        const lizenzData = await lizenzRes.json();
        const istOnline  = lizenzData.lizenz_typ === "online";

        if (!istOnline) {
            cardKeinPlan.style.display = "block";
            cardLogin.style.display    = "none";
            cardAktiv.style.display    = "none";
            return;
        }
        cardKeinPlan.style.display = "none";

        if (data.eingeloggt && data.sync_aktiv) {
            cardLogin.style.display  = "none";
            cardAktiv.style.display  = "block";
            document.getElementById("sync-name-anzeige").textContent  = data.name  || "–";
            document.getElementById("sync-email-anzeige").textContent = data.email || "–";

            if (data.letzter_sync) {
                const d = new Date(data.letzter_sync);
                document.getElementById("sync-letzter-sync").textContent =
                    d.toLocaleString("de-DE");
            }
            const q = data.queue_laenge || 0;
            const qEl = document.getElementById("sync-queue-badge");
            qEl.textContent = q === 0 ? "Alles synchronisiert" : q + " ausstehend";
            qEl.style.color = q > 0 ? "var(--orange)" : "var(--text-secondary)";
        } else {
            cardLogin.style.display = "block";
            cardAktiv.style.display = "none";
        }
    } catch(e) {
        // Bei Fehler: Login-Karte zeigen (nicht kein-plan)
        const cp = document.getElementById("sync-card-kein-plan");
        const cl = document.getElementById("sync-card-login");
        const ca = document.getElementById("sync-card-aktiv");
        if (cp) cp.style.display = "none";
        if (cl) cl.style.display = "block";
        if (ca) ca.style.display = "none";
    }
}

function syncTab(id, btn) {
    document.querySelectorAll(".sync-tab").forEach(t => t.classList.remove("aktiv"));
    btn.classList.add("aktiv");
    document.getElementById("sync-panel-login").style.display    = id === "login"    ? "block" : "none";
    document.getElementById("sync-panel-register").style.display = id === "register" ? "block" : "none";
}

async function syncLogin() {
    const email = document.getElementById("sync-login-email").value.trim();
    const pw    = document.getElementById("sync-login-pw").value;
    const hint  = document.getElementById("sync-login-hint");
    if (!email || !pw) { hint.textContent = "E-Mail und Passwort erforderlich."; return; }
    hint.textContent = "Wird angemeldet…"; hint.style.color = "var(--text-secondary)";
    const res  = await fetch("/api/sync/login", {
        method: "POST", headers: {"Content-Type":"application/json"},
        body: JSON.stringify({email, passwort: pw})
    });
    const data = await res.json();
    if (data.success) {
        hint.textContent = "✓ Angemeldet!"; hint.style.color = "var(--green)";
        setTimeout(ladeSyncInfo, 800);
        showToast("Erfolgreich angemeldet – Sync aktiv.");
    } else {
        hint.textContent = data.message || "Fehler."; hint.style.color = "var(--red)";
    }
}

async function syncRegistrieren() {
    const name  = document.getElementById("sync-reg-name").value.trim();
    const email = document.getElementById("sync-reg-email").value.trim();
    const pw    = document.getElementById("sync-reg-pw").value;
    const hint  = document.getElementById("sync-reg-hint");
    if (!name || !email || !pw) { hint.textContent = "Alle Felder erforderlich."; return; }
    hint.textContent = "Wird registriert…"; hint.style.color = "var(--text-secondary)";
    const res  = await fetch("/api/sync/registrieren", {
        method: "POST", headers: {"Content-Type":"application/json"},
        body: JSON.stringify({name, email, passwort: pw})
    });
    const data = await res.json();
    if (data.success) {
        hint.textContent = "✓ Konto erstellt! Bitte jetzt anmelden.";
        hint.style.color = "var(--green)";
        syncTab("login", document.querySelectorAll(".sync-tab")[0]);
        document.getElementById("sync-login-email").value = email;
    } else {
        hint.textContent = data.message || "Fehler."; hint.style.color = "var(--red)";
    }
}

async function syncAbmelden() {
    if (!confirm("Wirklich abmelden? Die lokalen Daten bleiben erhalten.")) return;
    await fetch("/api/sync/logout", {method:"POST"});
    showToast("Abgemeldet.");
    ladeSyncInfo();
}

async function syncJetzt() {
    const res  = await fetch("/api/sync/pull");
    const data = await res.json();
    if (data.success) {
        showToast("Synchronisierung abgeschlossen.");
        ladeSyncInfo();
    } else {
        showToast(data.message || "Fehler bei der Synchronisierung.", "error");
    }
}

async function syncDatenHochladen() {
    if (!confirm("Alle lokalen Daten in die Cloud hochladen? Vorhandene Cloud-Daten werden ersetzt.")) return;
    const btn = document.getElementById("sync-upload-btn");
    btn.disabled = true; btn.textContent = "Wird hochgeladen…";
    const res  = await fetch("/api/sync/upload", {method:"POST"});
    const data = await res.json();
    btn.disabled = false; btn.textContent = "Lokale Daten hochladen";
    if (data.success) {
        showToast(`${data.hochgeladen || 0} Datensätze erfolgreich hochgeladen.`);
        ladeSyncInfo();
    } else {
        showToast(data.message || "Fehler beim Hochladen.", "error");
    }
}


// ── Sync laden
ladeSyncInfo();

</script>
{% endblock %}