{% extends 'base.html.twig' %}

{% block title %}To-Do Liste - SwimMonitor{% endblock %}

{% block breadcrumb %}To-Do Liste{% endblock %}

{% block content %}
<div class="card shadow-sm">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="fas fa-list-check me-2"></i>Aufgaben</span>
        <span class="badge bg-primary">{{ openCount }} offen</span>
    </div>
    <div class="card-body">
        <form id="todoAddForm" class="mb-4">
            <div class="mb-2">
                <div class="input-group">
                    <input type="text" class="form-control form-control-lg" id="todoTitle" name="title"
                           placeholder="Neue Aufgabe eingeben…" maxlength="500" required>
                    <button type="submit" class="btn btn-primary btn-lg">
                        <i class="fas fa-plus me-1"></i>Hinzufügen
                    </button>
                </div>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-2" id="todoAddTagRow">
                <span class="text-muted small me-1">Tags:</span>
                {% for tag in tags %}
                <label class="mb-0 d-inline-flex align-items-center gap-1 rounded px-2 py-1 small" style="background: {{ tag.colorHex }}20; border: 1px solid {{ tag.colorHex }};">
                    <input type="checkbox" name="tag_ids[]" value="{{ tag.id }}" class="form-check-input">
                    <span style="color: {{ tag.colorHex }};">{{ tag.name }}</span>
                </label>
                {% endfor %}
            </div>
        </form>

        <ul class="list-group list-group-flush" id="todoList">
            {% for todo in todos %}
            <li class="list-group-item d-flex align-items-center gap-3 py-3 todo-item" data-id="{{ todo.id }}" data-tag-ids="{{ todo.tags|map(t => t.id)|join(',') }}">
                <input type="checkbox" class="form-check-input flex-shrink-0 todo-toggle" style="width: 1.25rem; height: 1.25rem;"
                       {% if todo.done %}checked{% endif %} title="Erledigt umschalten">
                <span class="flex-grow-1 todo-title {% if todo.done %}text-decoration-line-through text-muted{% endif %}">{{ todo.title }}</span>
                <span class="todo-badges d-flex flex-wrap gap-1 flex-shrink-0">
                    {% for tag in todo.tags %}
                    <span class="badge border-0 px-2 py-1" style="background-color: {{ tag.colorHex }}; color: #fff;">{{ tag.name }}</span>
                    {% endfor %}
                </span>
                <small class="text-muted flex-shrink-0">{{ todo.createdAt|date('d.m.Y H:i') }}</small>
                <button type="button" class="btn btn-sm btn-outline-secondary todo-edit-tags" title="Tags bearbeiten"><i class="fas fa-tags"></i></button>
                <button type="button" class="btn btn-sm btn-outline-danger todo-delete" title="Löschen">
                    <i class="fas fa-trash-alt"></i>
                </button>
            </li>
            {% else %}
            <li class="list-group-item text-center text-muted py-5">
                <i class="fas fa-check-circle fa-3x mb-2 opacity-50"></i>
                <p class="mb-0">Noch keine Aufgaben. Fügen Sie oben eine neue hinzu.</p>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>

<div class="card shadow-sm mt-4">
    <div class="card-header d-flex align-items-center">
        <a class="text-decoration-none text-dark d-flex align-items-center w-100" data-bs-toggle="collapse" href="#tagsManage" aria-expanded="false">
            <i class="fas fa-tags me-2"></i>Tags verwalten
            <i class="fas fa-chevron-down ms-auto small"></i>
        </a>
    </div>
    <div class="collapse" id="tagsManage">
        <div class="card-body">
            <form id="tagAddForm" class="d-flex flex-wrap align-items-end gap-2 mb-3">
                <div>
                    <label class="form-label small mb-0">Neuer Tag</label>
                    <input type="text" class="form-control form-control-sm" id="tagName" name="name" placeholder="Name" maxlength="80" style="width: 120px;">
                </div>
                <div>
                    <label class="form-label small mb-0">Farbe</label>
                    <input type="color" class="form-control form-control-color d-block" id="tagColor" name="colorHex" value="#3498db" style="width: 2.5rem; height: 2rem;">
                </div>
                <button type="submit" class="btn btn-sm btn-primary">Hinzufügen</button>
            </form>
            <div class="d-flex flex-wrap gap-2" id="tagList">
                {% for tag in tags %}
                <div class="tag-item d-flex align-items-center gap-2 rounded px-2 py-1 border" data-id="{{ tag.id }}">
                    <span class="badge border-0" style="background-color: {{ tag.colorHex }}; color: #fff;">{{ tag.name }}</span>
                    <input type="text" class="form-control form-control-sm tag-edit-name" value="{{ tag.name }}" style="width: 80px; display: none;">
                    <input type="color" class="form-control form-control-color tag-edit-color" value="{{ tag.colorHex }}" style="width: 1.8rem; height: 1.5rem; display: none;">
                    <button type="button" class="btn btn-sm btn-outline-primary tag-edit-btn" title="Bearbeiten"><i class="fas fa-pen"></i></button>
                    <button type="button" class="btn btn-sm btn-outline-danger tag-delete-btn" title="Löschen"><i class="fas fa-trash-alt"></i></button>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<script>
(function() {
    const listEl = document.getElementById('todoList');
    const addForm = document.getElementById('todoAddForm');
    const titleInput = document.getElementById('todoTitle');
    const baseUrl = '{{ path('admin_todo_index') }}';
    const tagsData = {{ tags|map(t => { id: t.id, name: t.name, colorHex: t.colorHex })|json_encode|raw }};

    function renderBadges(tags) {
        if (!tags || tags.length === 0) return '';
        return tags.map(t => '<span class="badge border-0 px-2 py-1" style="background-color:' + t.colorHex + ';color:#fff">' + escapeHtml(t.name) + '</span>').join('');
    }

    addForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const title = titleInput.value.trim();
        if (!title) return;
        const formData = new FormData(addForm);
        fetch(baseUrl + '/add', {
            method: 'POST',
            body: formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.json())
        .then(data => {
            if (!data.success) { alert(data.message || 'Fehler'); return; }
            const emptyMsg = listEl.querySelector('.text-muted.py-5');
            if (emptyMsg) emptyMsg.remove();
            const tags = data.tags || [];
            const li = document.createElement('li');
            li.className = 'list-group-item d-flex align-items-center gap-3 py-3 todo-item';
            li.dataset.id = data.id;
            li.dataset.tagIds = tags.map(t => t.id).join(',');
            li.innerHTML = '<input type="checkbox" class="form-check-input flex-shrink-0 todo-toggle" style="width:1.25rem;height:1.25rem" title="Erledigt umschalten">' +
                '<span class="flex-grow-1 todo-title">' + escapeHtml(data.title) + '</span>' +
                '<span class="todo-badges d-flex flex-wrap gap-1 flex-shrink-0">' + renderBadges(tags) + '</span>' +
                '<small class="text-muted flex-shrink-0">' + data.createdAt + '</small>' +
                '<button type="button" class="btn btn-sm btn-outline-secondary todo-edit-tags" title="Tags bearbeiten"><i class="fas fa-tags"></i></button>' +
                '<button type="button" class="btn btn-sm btn-outline-danger todo-delete" title="Löschen"><i class="fas fa-trash-alt"></i></button>';
            listEl.appendChild(li);
            titleInput.value = '';
            addForm.querySelectorAll('input[name="tag_ids[]"]').forEach(cb => cb.checked = false);
            bindRow(li);
            updateOpenBadge(-1);
        })
        .catch(() => alert('Fehler beim Speichern.'));
    });

    function escapeHtml(s) {
        const div = document.createElement('div');
        div.textContent = s;
        return div.innerHTML;
    }

    function updateOpenBadge(delta) {
        const badge = document.querySelector('.card-header .badge');
        if (!badge) return;
        const n = parseInt(badge.textContent, 10) + delta;
        badge.textContent = n + ' offen';
    }

    function bindRow(li) {
        const id = li.dataset.id;
        li.querySelector('.todo-toggle').addEventListener('change', function() {
            fetch(baseUrl + '/' + id + '/toggle', { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(r => r.json())
                .then(data => {
                    if (data.success) {
                        li.querySelector('.todo-title').classList.toggle('text-decoration-line-through', data.done);
                        li.querySelector('.todo-title').classList.toggle('text-muted', data.done);
                        if (data.tags !== undefined) {
                            li.querySelector('.todo-badges').innerHTML = renderBadges(data.tags);
                        }
                        updateOpenBadge(data.done ? -1 : 1);
                    }
                });
        });
        li.querySelector('.todo-edit-tags').addEventListener('click', function() {
            const badges = li.querySelector('.todo-badges');
            const currentIds = (li.dataset.tagIds || '').split(',').map(s => parseInt(s.trim(), 10)).filter(Boolean);
            const existingEdit = document.getElementById('todoEditTagsPopup');
            if (existingEdit) existingEdit.remove();
            const pop = document.createElement('div');
            pop.id = 'todoEditTagsPopup';
            pop.className = 'border rounded p-2 bg-light shadow-sm mt-1';
            pop.innerHTML = '<div class="small mb-2">Tags auswählen:</div><div class="d-flex flex-wrap gap-2 mb-2" id="todoEditTagCheckboxes"></div><button type="button" class="btn btn-sm btn-primary todo-edit-tags-save">Speichern</button>';
            tagsData.forEach(t => {
                const label = document.createElement('label');
                label.className = 'd-inline-flex align-items-center gap-1 rounded px-2 py-1 small mb-0';
                label.style.cssText = 'background:' + t.colorHex + '25;border:1px solid ' + t.colorHex;
                const checked = currentIds.indexOf(t.id) >= 0;
                label.innerHTML = '<input type="checkbox" class="form-check-input todo-edit-cb" value="' + t.id + '" ' + (checked ? 'checked' : '') + '><span style="color:' + t.colorHex + '">' + escapeHtml(t.name) + '</span>';
                pop.querySelector('#todoEditTagCheckboxes').appendChild(label);
            });
            li.querySelector('.todo-title').after(pop);
            pop.querySelector('.todo-edit-tags-save').addEventListener('click', function() {
                const ids = Array.from(pop.querySelectorAll('.todo-edit-cb:checked')).map(cb => parseInt(cb.value, 10));
                const fd = new FormData();
                ids.forEach(i => fd.append('tag_ids[]', i));
                fetch(baseUrl + '/' + id + '/tags', { method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                    .then(r => r.json())
                    .then(data => {
                        if (data.success && data.tags) {
                            badges.innerHTML = renderBadges(data.tags);
                            li.dataset.tagIds = data.tags.map(t => t.id).join(',');
                        }
                        pop.remove();
                    });
            });
        });
        li.querySelector('.todo-delete').addEventListener('click', function() {
            if (!confirm('Aufgabe wirklich löschen?')) return;
            fetch(baseUrl + '/' + id + '/delete', { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(r => r.json())
                .then(data => {
                    if (data.success) {
                        const wasDone = li.querySelector('.todo-toggle').checked;
                        li.remove();
                        if (!wasDone) updateOpenBadge(-1);
                        if (listEl.querySelectorAll('.todo-item').length === 0) {
                            const empty = document.createElement('li');
                            empty.className = 'list-group-item text-center text-muted py-5';
                            empty.innerHTML = '<i class="fas fa-check-circle fa-3x mb-2 opacity-50"></i><p class="mb-0">Noch keine Aufgaben. Fügen Sie oben eine neue hinzu.</p>';
                            listEl.appendChild(empty);
                        }
                    }
                });
        });
    }

    listEl.querySelectorAll('.todo-item').forEach(bindRow);

    // --- Tag-Verwaltung ---
    const tagAddForm = document.getElementById('tagAddForm');
    const tagList = document.getElementById('tagList');
    tagAddForm.addEventListener('submit', function(e) {
        e.preventDefault();
        const name = document.getElementById('tagName').value.trim();
        const colorHex = document.getElementById('tagColor').value;
        if (!name) return;
        const fd = new FormData();
        fd.append('name', name);
        fd.append('colorHex', colorHex);
        fetch(baseUrl + '/tags/add', { method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' } })
            .then(r => r.json())
            .then(data => {
                if (!data.success) { alert(data.message || 'Fehler'); return; }
                tagsData.push({ id: data.id, name: data.name, colorHex: data.colorHex });
                const div = document.createElement('div');
                div.className = 'tag-item d-flex align-items-center gap-2 rounded px-2 py-1 border';
                div.dataset.id = data.id;
                div.innerHTML = '<span class="badge border-0" style="background-color:' + data.colorHex + ';color:#fff">' + escapeHtml(data.name) + '</span>' +
                    '<input type="text" class="form-control form-control-sm tag-edit-name" value="' + escapeHtml(data.name) + '" style="width:80px;display:none">' +
                    '<input type="color" class="form-control form-control-color tag-edit-color" value="' + data.colorHex + '" style="width:1.8rem;height:1.5rem;display:none">' +
                    '<button type="button" class="btn btn-sm btn-outline-primary tag-edit-btn" title="Bearbeiten"><i class="fas fa-pen"></i></button>' +
                    '<button type="button" class="btn btn-sm btn-outline-danger tag-delete-btn" title="Löschen"><i class="fas fa-trash-alt"></i></button>';
                tagList.appendChild(div);
                document.getElementById('tagName').value = '';
                document.getElementById('tagColor').value = '#3498db';
                bindTagItem(div);
                const addTagRow = document.getElementById('todoAddTagRow');
                const label = document.createElement('label');
                label.className = 'mb-0 d-inline-flex align-items-center gap-1 rounded px-2 py-1 small';
                label.style.cssText = 'background:' + data.colorHex + '20;border:1px solid ' + data.colorHex;
                label.innerHTML = '<input type="checkbox" name="tag_ids[]" value="' + data.id + '" class="form-check-input"><span style="color:' + data.colorHex + '">' + escapeHtml(data.name) + '</span>';
                addTagRow.appendChild(label);
            });
    });

    function bindTagItem(div) {
        const id = div.dataset.id;
        const badge = div.querySelector('.badge');
        const nameInp = div.querySelector('.tag-edit-name');
        const colorInp = div.querySelector('.tag-edit-color');
        div.querySelector('.tag-edit-btn').addEventListener('click', function() {
            const isEditing = nameInp.style.display !== 'none';
            if (isEditing) {
                const name = nameInp.value.trim();
                const colorHex = colorInp.value;
                if (name) {
                    const fd = new FormData();
                    fd.append('name', name);
                    fd.append('colorHex', colorHex);
                    fetch(baseUrl + '/tags/' + id + '/edit', { method: 'POST', body: fd, headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(r => r.json())
                        .then(data => {
                            if (data.success) {
                                badge.textContent = data.name;
                                badge.style.backgroundColor = data.colorHex;
                                const t = tagsData.find(x => x.id == id);
                                if (t) { t.name = data.name; t.colorHex = data.colorHex; }
                            }
                        });
                }
                nameInp.style.display = 'none';
                colorInp.style.display = 'none';
            } else {
                nameInp.style.display = 'inline-block';
                colorInp.style.display = 'inline-block';
                nameInp.focus();
            }
        });
        div.querySelector('.tag-delete-btn').addEventListener('click', function() {
            if (!confirm('Tag wirklich löschen? Er wird von allen Aufgaben entfernt.')) return;
            fetch(baseUrl + '/tags/' + id + '/delete', { method: 'POST', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                .then(r => r.json())
                .then(data => {
                    if (data.success) {
                        div.remove();
                        const idx = tagsData.findIndex(x => x.id == id);
                        if (idx >= 0) tagsData.splice(idx, 1);
                        document.querySelector('#todoAddTagRow input[value="' + id + '"]')?.closest('label')?.remove();
                    }
                });
        });
    }
    tagList.querySelectorAll('.tag-item').forEach(bindTagItem);
})();
</script>
{% endblock %}