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

{% block content %}
<div class="page-header">
    <div class="page-header-left">
        <h1 class="page-title">Projekte</h1>
        <p class="page-subtitle">Verwalte deine Projekte und Aufgaben.</p>
    </div>
    <div class="page-header-actions">
        <button class="btn btn-primary" onclick="öffneProjektModal()">
            <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>
            Neues Projekt
        </button>
    </div>
</div>

<div id="projekte-liste" class="projekte-grid"></div>

<!-- Projekt-Modal -->
<div id="projekt-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box">
        <h3 id="projekt-modal-titel">Neues Projekt</h3>
        <input type="hidden" id="edit-projekt-id">
        <div class="form-group">
            <label>Projektname</label>
            <input type="text" id="edit-projekt-name" placeholder="z.B. Website Redesign">
        </div>
        <div class="form-group">
            <label>Farbe</label>
            <div class="farb-auswahl">
                <button class="farb-btn" data-farbe="#4A90D9" style="background:#4A90D9" onclick="wähleFarbe(this)"></button>
                <button class="farb-btn" data-farbe="#34C759" style="background:#34C759" onclick="wähleFarbe(this)"></button>
                <button class="farb-btn" data-farbe="#FF9500" style="background:#FF9500" onclick="wähleFarbe(this)"></button>
                <button class="farb-btn" data-farbe="#FF3B30" style="background:#FF3B30" onclick="wähleFarbe(this)"></button>
                <button class="farb-btn" data-farbe="#AF52DE" style="background:#AF52DE" onclick="wähleFarbe(this)"></button>
                <button class="farb-btn" data-farbe="#5AC8FA" style="background:#5AC8FA" onclick="wähleFarbe(this)"></button>
                <button class="farb-btn" data-farbe="#FF2D55" style="background:#FF2D55" onclick="wähleFarbe(this)"></button>
                <button class="farb-btn" data-farbe="#636366" style="background:#636366" onclick="wähleFarbe(this)"></button>
            </div>
            <input type="hidden" id="edit-projekt-farbe" value="#4A90D9">
        </div>
        <div class="modal-actions">
            <button class="btn btn-primary" onclick="speichereProjekt()">Speichern</button>
            <button class="btn btn-ghost" onclick="schliesseModal('projekt-modal')">Abbrechen</button>
        </div>
    </div>
</div>

<!-- Aufgabe-Modal -->
<div id="aufgabe-modal" class="modal-overlay" style="display:none;">
    <div class="modal-box">
        <h3 id="aufgabe-modal-titel">Neue Aufgabe</h3>
        <input type="hidden" id="edit-aufgabe-id">
        <input type="hidden" id="edit-aufgabe-projekt-id">
        <div class="form-group">
            <label>Aufgabenname</label>
            <input type="text" id="edit-aufgabe-name" placeholder="z.B. Design überarbeiten">
        </div>
        <div class="modal-actions">
            <button class="btn btn-primary" onclick="speichereAufgabe()">Speichern</button>
            <button class="btn btn-ghost" onclick="schliesseModal('aufgabe-modal')">Abbrechen</button>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
document.addEventListener("DOMContentLoaded", ladeProjekte);

async function ladeProjekte() {
    const res = await fetch("/api/projekte");
    const projekte = await res.json();
    const container = document.getElementById("projekte-liste");

    if (projekte.length === 0) {
        container.innerHTML = '<div class="empty-state">Noch keine Projekte vorhanden. Erstelle dein erstes Projekt!</div>';
        return;
    }

    container.innerHTML = projekte.map(p => `
        <div class="projekt-karte" style="border-left: 4px solid ${p.farbe}">
            <div class="projekt-kopf">
                <div class="projekt-farb-dot" style="background:${p.farbe}"></div>
                <h3 class="projekt-name">${p.name}</h3>
                <div class="projekt-actions">
                    <button class="icon-btn" title="Bearbeiten" onclick="öffneProjektBearbeiten(${p.id}, '${escJs(p.name)}', '${p.farbe}')">✏️</button>
                    <button class="icon-btn" title="Löschen" onclick="löscheProjekt(${p.id}, '${escJs(p.name)}')">🗑️</button>
                </div>
            </div>
            <div class="aufgaben-liste" id="aufgaben-${p.id}">
                ${p.aufgaben.length === 0
                    ? '<span class="aufgabe-leer">Keine Aufgaben</span>'
                    : p.aufgaben.map(a => `
                        <div class="aufgabe-item">
                            <span class="aufgabe-name">${a.name}</span>
                            <div class="aufgabe-actions">
                                <button class="icon-btn-sm" onclick="öffneAufgabeBearbeiten(${a.id}, ${p.id}, '${escJs(a.name)}')">✏️</button>
                                <button class="icon-btn-sm" onclick="löscheAufgabe(${a.id})">🗑️</button>
                            </div>
                        </div>
                    `).join("")
                }
            </div>
            <button class="btn-neue-aufgabe" onclick="öffneAufgabeModal(${p.id})">
                <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>
                Aufgabe hinzufügen
            </button>
        </div>
    `).join("");
}

// ── Projekt Modal ──────────────────────────────────────────────────────────
function öffneProjektModal() {
    document.getElementById("projekt-modal-titel").textContent = "Neues Projekt";
    document.getElementById("edit-projekt-id").value = "";
    document.getElementById("edit-projekt-name").value = "";
    document.getElementById("edit-projekt-farbe").value = "#4A90D9";
    document.querySelectorAll(".farb-btn").forEach(b => b.classList.remove("selected"));
    document.querySelector('[data-farbe="#4A90D9"]')?.classList.add("selected");
    document.getElementById("projekt-modal").style.display = "flex";
    setTimeout(() => document.getElementById("edit-projekt-name").focus(), 50);
}

function öffneProjektBearbeiten(id, name, farbe) {
    document.getElementById("projekt-modal-titel").textContent = "Projekt bearbeiten";
    document.getElementById("edit-projekt-id").value = id;
    document.getElementById("edit-projekt-name").value = name;
    document.getElementById("edit-projekt-farbe").value = farbe;
    document.querySelectorAll(".farb-btn").forEach(b => {
        b.classList.toggle("selected", b.dataset.farbe === farbe);
    });
    document.getElementById("projekt-modal").style.display = "flex";
}

function wähleFarbe(btn) {
    document.querySelectorAll(".farb-btn").forEach(b => b.classList.remove("selected"));
    btn.classList.add("selected");
    document.getElementById("edit-projekt-farbe").value = btn.dataset.farbe;
}

async function speichereProjekt() {
    const id = document.getElementById("edit-projekt-id").value;
    const name = document.getElementById("edit-projekt-name").value.trim();
    const farbe = document.getElementById("edit-projekt-farbe").value;
    if (!name) { showToast("Bitte einen Namen eingeben.", "error"); return; }

    if (id) {
        await fetch(`/api/projekte/${id}`, {
            method: "PUT", headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ name, farbe })
        });
    } else {
        const res = await fetch("/api/projekte", {
            method: "POST", headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ name, farbe })
        });
        const data = await res.json();
        if (data.fehler) { showToast(data.fehler, "error"); return; }
    }
    schliesseModal("projekt-modal");
    ladeProjekte();
}

async function löscheProjekt(id, name) {
    zeigeBestaetigung(`Projekt „${name}" wirklich löschen? Alle Aufgaben werden entfernt.`, async function() {
        await fetch(`/api/projekte/${id}`, { method: "DELETE" });
        ladeProjekte();
    });
}

// ── Aufgabe Modal ──────────────────────────────────────────────────────────
function öffneAufgabeModal(projektId) {
    document.getElementById("aufgabe-modal-titel").textContent = "Neue Aufgabe";
    document.getElementById("edit-aufgabe-id").value = "";
    document.getElementById("edit-aufgabe-projekt-id").value = projektId;
    document.getElementById("edit-aufgabe-name").value = "";
    document.getElementById("aufgabe-modal").style.display = "flex";
    setTimeout(() => document.getElementById("edit-aufgabe-name").focus(), 50);
}

function öffneAufgabeBearbeiten(id, projektId, name) {
    document.getElementById("aufgabe-modal-titel").textContent = "Aufgabe bearbeiten";
    document.getElementById("edit-aufgabe-id").value = id;
    document.getElementById("edit-aufgabe-projekt-id").value = projektId;
    document.getElementById("edit-aufgabe-name").value = name;
    document.getElementById("aufgabe-modal").style.display = "flex";
}

async function speichereAufgabe() {
    const id = document.getElementById("edit-aufgabe-id").value;
    const projektId = document.getElementById("edit-aufgabe-projekt-id").value;
    const name = document.getElementById("edit-aufgabe-name").value.trim();
    if (!name) { showToast("Bitte einen Namen eingeben.", "error"); return; }

    if (id) {
        await fetch(`/api/aufgaben/${id}`, {
            method: "PUT", headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ name })
        });
    } else {
        await fetch(`/api/projekte/${projektId}/aufgaben`, {
            method: "POST", headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ name })
        });
    }
    schliesseModal("aufgabe-modal");
    ladeProjekte();
}

async function löscheAufgabe(id) {
    zeigeBestaetigung("Aufgabe wirklich löschen?", async function() {
        await fetch(`/api/aufgaben/${id}`, { method: "DELETE" });
        ladeProjekte();
    });
}

function escJs(str) {
    return str.replace(/'/g, "\\'").replace(/"/g, '\\"');
}
</script>
{% endblock %}