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

{% block title %}{{ 'admin.categories_management'|trans }}{% endblock %}

{% block body %}
    <div class="container-fluid">
        <div class="row mb-4">
            <div class="col-12">
                <div class="admin-card p-4">
                    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center">
                        <div class="mb-3 mb-md-0">
                            <h2 class="gradient-text fw-bold mb-2">
                                <i class="bi bi-folder-fill me-3"></i>
                                {{ 'admin.categories_management'|trans }}
                            </h2>
                            <p class="text-muted mb-0">{{ 'admin.categories_description'|trans }}</p>
                        </div>
                        <a href="{{ path('admin_categories_new') }}" class="btn btn-success btn-lg">
                            <i class="bi bi-plus-circle me-2"></i>
                            {{ 'admin.create_category'|trans }}
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mb-4">
            <div class="col-12">
                <div class="admin-card p-3">
                    <form id="searchForm" class="row g-3" method="get" action="{{ path('admin_categories') }}">
                        <div class="col-12 col-md-8">
                            <div class="input-group">
                                <span class="input-group-text"><i class="bi bi-search"></i></span>
                                <input type="text" id="searchInput" name="search" class="form-control"
                                       placeholder="{{ 'admin.search_placeholder'|trans }}" value="{{ search }}">
                            </div>
                        </div>
                        <div class="col-12 col-md-4">
                            <button type="submit" class="btn btn-primary w-100">
                                <i class="bi bi-search me-2"></i>
                                {{ 'admin.search_button'|trans }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="row g-3">
            <div class="col-12">
                <div class="admin-card p-4">
                    <p class="text-muted small mb-3">{{ 'admin.category.drag_hint'|trans }}</p>
                    <ul class="category-tree list-unstyled" id="categoryTree" role="tree">
                        <li class="category-drop-target category-root-drop mb-3 p-3 rounded border border-dashed border-secondary-subtle bg-body-secondary bg-opacity-25"
                            role="treeitem"
                            data-parent-id="0"
                            aria-label="{{ 'admin.category.drop_root'|trans }}">
                            <i class="bi bi-house-door me-2"></i>
                            <strong>{{ 'admin.category.drop_root'|trans }}</strong>
                            <span class="text-muted d-none d-md-inline ms-2">— {{ 'admin.category.drop_here'|trans }}</span>
                        </li>
                        {% macro render_category(category, isRoot) %}
                            {% set hasContent = category.children|length > 0 or category.pages|length > 0 %}
                            <li class="category-item category-drop-target"
                                role="treeitem"
                                data-category-id="{{ category.id }}"
                                data-parent-id="{{ category.id }}"
                                data-move-token="{{ csrf_token('category_move_' ~ category.id) }}"
                                aria-expanded="{{ (hasContent and isRoot) ? 'true' : 'false' }}">
                                <div class="tree-node-row">
                                    <span class="tree-drag-handle" draggable="true" title="{{ 'admin.category.drag_to_move'|trans }}">
                                        <i class="bi bi-grip-vertical"></i>
                                    </span>
                                    {% if hasContent %}
                                        <span class="tree-chevron" aria-expanded="{{ isRoot ? 'true' : 'false' }}" data-toggle="children">
                                            <i class="bi bi-chevron-down"></i>
                                        </span>
                                    {% else %}
                                        <span class="tree-chevron" style="visibility: hidden;" aria-hidden="true"><i class="bi bi-chevron-down"></i></span>
                                    {% endif %}
                                    <span class="tree-icon {{ (hasContent and isRoot) ? 'folder-open' : '' }}">
                                        <i class="bi {{ hasContent ? 'bi-folder2' : 'bi-folder' }}"></i>
                                    </span>
                                    <div class="tree-node-content">
                                        <div class="tree-title">{{ category.title }}</div>
                                        <div class="tree-meta">
                                            <small class="text-muted d-none d-md-inline">{{ category.createdAt|date('d.m.Y H:i') }}</small>
                                            {% if category.active %}
                                                <span class="badge bg-success ms-1">{{ 'admin.active'|trans }}</span>
                                            {% else %}
                                                <span class="badge bg-secondary ms-1">{{ 'admin.inactive'|trans }}</span>
                                            {% endif %}
                                            {% if category.pages|length > 0 %}
                                                <span class="badge bg-info ms-1">{{ category.pages|length }} {{ 'admin.category.pages_count'|trans }}</span>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="tree-actions">
                                        <a href="{{ path('admin_categories_edit', {id: category.id}) }}" class="btn btn-primary btn-sm" title="{{ 'admin.edit'|trans }}"><i class="bi bi-pencil"></i></a>
                                        <a href="{{ category.active ? get_category_url(category) : get_category_preview_url(category) }}" target="_blank" class="btn btn-outline-warning btn-sm" title="{{ 'admin.preview'|trans }}"><i class="bi bi-box-arrow-up-right"></i></a>
                                        <a href="{{ path('admin_categories_duplicate', {id: category.id}) }}" class="btn btn-outline-secondary btn-sm" title="{{ 'admin.duplicate'|trans }}"><i class="bi bi-copy"></i></a>
                                        <form method="post" action="{{ path('admin_categories_delete', {id: category.id}) }}" class="d-inline" id="deleteForm{{ category.id }}">
                                            <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ category.id) }}">
                                            <button type="button" class="btn btn-outline-danger btn-sm" title="{{ 'admin.delete'|trans }}" onclick="handleDeleteCategory('{{ category.id }}', '{{ category.title|e('js') }}')"><i class="bi bi-trash"></i></button>
                                        </form>
                                    </div>
                                </div>
                                {% if hasContent %}
                                    <ul class="collapse {{ isRoot ? 'show' : '' }} category-children list-unstyled ms-4 mt-1" id="children-{{ category.id }}" role="group">
                                        {% for page in category.pages %}
                                            <li class="page-item page-draggable"
                                                role="treeitem"
                                                draggable="true"
                                                data-page-id="{{ page.id }}"
                                                data-set-category-token="{{ csrf_token('page_set_category_' ~ page.id) }}"
                                                title="{{ 'admin.category.drag_page_to_category'|trans }}">
                                                <div class="tree-node-row">
                                                    <span class="tree-drag-handle" style="visibility: hidden;"><i class="bi bi-grip-vertical"></i></span>
                                                    <span class="tree-chevron" style="visibility: hidden;"><i class="bi bi-chevron-down"></i></span>
                                                    <span class="tree-icon"><i class="bi bi-file-earmark-text"></i></span>
                                                    <div class="tree-node-content">
                                                        <div class="tree-title">{{ page.title }}</div>
                                                        <div class="tree-meta">
                                                            {% if page.active %}
                                                                <span class="badge bg-success">{{ 'admin.active'|trans }}</span>
                                                            {% else %}
                                                                <span class="badge bg-secondary">{{ 'admin.inactive'|trans }}</span>
                                                            {% endif %}
                                                        </div>
                                                    </div>
                                                    <div class="tree-actions">
                                                        <a href="{{ path('admin_edit_page', {id: page.id}) }}" class="btn btn-primary btn-sm" title="{{ 'admin.edit'|trans }}"><i class="bi bi-pencil"></i></a>
                                                        <a href="{{ page.active ? get_page_url(page) : get_page_preview_url(page) }}" target="_blank" class="btn btn-outline-warning btn-sm" title="{{ 'admin.preview'|trans }}"><i class="bi bi-box-arrow-up-right"></i></a>
                                                    </div>
                                                </div>
                                            </li>
                                        {% endfor %}
                                        {% for child in category.children %}
                                            {{ _self.render_category(child, false) }}
                                        {% endfor %}
                                    </ul>
                                {% endif %}
                            </li>
                        {% endmacro %}
                        {% import _self as macros %}
                        {% for category in categories %}
                            {{ macros.render_category(category, true) }}
                        {% else %}
                            <li>
                                <div class="empty-state admin-card">
                                    <div class="empty-state-icon"><i class="bi bi-folder"></i></div>
                                    <h4 class="text-muted mb-3">{{ 'admin.no_categories_found'|trans }}</h4>
                                    <p class="text-muted mb-4">{{ 'admin.create_first_category'|trans }}</p>
                                    <a href="{{ path('admin_categories_new') }}" class="btn btn-primary btn-lg">
                                        <i class="bi bi-plus-circle me-2"></i>
                                        {{ 'admin.create_first_category_button'|trans }}
                                    </a>
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
    document.addEventListener('DOMContentLoaded', function() {
        var moveCategoryUrlPattern = '{{ path('admin_category_move', { id: 'CAT_ID' }) }}';
        var setPageCategoryUrlPattern = '{{ path('admin_page_set_category', { id: 'PAGE_ID' }) }}';
        var storageKey = 'terraflow_category_tree_expanded';

        function getStoredExpanded() {
            try {
                var s = localStorage.getItem(storageKey);
                return s ? JSON.parse(s) : {};
            } catch (e) { return {}; }
        }
        function setStoredExpanded(id, expanded) {
            var o = getStoredExpanded();
            o[id] = expanded;
            try { localStorage.setItem(storageKey, JSON.stringify(o)); } catch (e) {}
        }

        document.querySelectorAll('.tree-chevron[data-toggle="children"]').forEach(function(chevron) {
            var li = chevron.closest('.category-item');
            var ul = li ? li.querySelector('.category-children') : null;
            if (!ul) return;
            var categoryId = li.getAttribute('data-category-id');
            var stored = getStoredExpanded();
            var isRoot = li.parentElement && li.parentElement.id === 'categoryTree';
            var initialState = stored[categoryId] !== undefined ? stored[categoryId] : isRoot;
            if (!initialState) {
                ul.classList.remove('show');
                chevron.setAttribute('aria-expanded', 'false');
                var icon = li.querySelector('.tree-icon i');
                if (icon) { icon.classList.remove('bi-folder2'); icon.classList.add('bi-folder'); }
            } else {
                ul.classList.add('show');
                chevron.setAttribute('aria-expanded', 'true');
                var icon = li.querySelector('.tree-icon i');
                if (icon) { icon.classList.add('bi-folder2'); icon.classList.remove('bi-folder'); }
            }
            chevron.addEventListener('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                var expanded = ul.classList.toggle('show');
                chevron.setAttribute('aria-expanded', expanded ? 'true' : 'false');
                var icon = li.querySelector('.tree-icon i');
                if (icon) {
                    if (expanded) { icon.classList.add('bi-folder2'); icon.classList.remove('bi-folder'); }
                    else { icon.classList.remove('bi-folder2'); icon.classList.add('bi-folder'); }
                }
                setStoredExpanded(categoryId, expanded);
            });
        });

        function getCategoryIdsInSubtree(li) {
            var ids = [];
            var id = li.getAttribute('data-category-id');
            if (id) ids.push(id);
            (li.querySelectorAll('.category-item') || []).forEach(function(el) {
                var cid = el.getAttribute('data-category-id');
                if (cid) ids.push(cid);
            });
            return ids;
        }

        /** Drag-Zustand: getData() ist in dragover in vielen Browsern leer — daher hier merken */
        var dragState = null;

        document.querySelectorAll('.category-item .tree-drag-handle').forEach(function(handle) {
            var li = handle.closest('.category-item');
            if (!li) return;
            handle.addEventListener('dragstart', function(e) {
                var cid = li.getAttribute('data-category-id');
                e.dataTransfer.setData('text/plain', cid);
                e.dataTransfer.setData('application/x-terraflow-type', 'category');
                e.dataTransfer.effectAllowed = 'move';
                li.classList.add('dragging');
                dragState = { type: 'category', categoryId: cid, dragLi: li };
            });
            handle.addEventListener('dragend', function() {
                li.classList.remove('dragging');
                dragState = null;
            });
        });

        document.querySelectorAll('.page-draggable').forEach(function(el) {
            el.addEventListener('dragstart', function(e) {
                var pid = el.getAttribute('data-page-id');
                e.dataTransfer.setData('text/plain', pid);
                e.dataTransfer.setData('application/x-terraflow-type', 'page');
                e.dataTransfer.effectAllowed = 'move';
                el.classList.add('dragging');
                dragState = { type: 'page', pageId: pid, pageEl: el };
            });
            el.addEventListener('dragend', function() {
                el.classList.remove('dragging');
                dragState = null;
            });
        });

        document.querySelectorAll('.category-drop-target').forEach(function(target) {
            var parentId = target.getAttribute('data-parent-id');
            target.addEventListener('dragover', function(e) {
                e.preventDefault();
                e.dataTransfer.dropEffect = 'move';
                target.classList.remove('drag-over');
                var type = dragState ? dragState.type : e.dataTransfer.getData('application/x-terraflow-type');
                if (type === 'category') {
                    var dragLi = dragState && dragState.dragLi ? dragState.dragLi : document.querySelector('.category-item.dragging');
                    if (!dragLi) return;
                    var idsInDrag = getCategoryIdsInSubtree(dragLi);
                    var pidStr = parentId === null ? '' : String(parentId);
                    if (pidStr === '0' || idsInDrag.indexOf(pidStr) === -1) {
                        target.classList.add('drag-over');
                    }
                } else if (type === 'page') {
                    target.classList.add('drag-over');
                }
            });
            target.addEventListener('dragleave', function(ev) {
                if (target.contains(ev.relatedTarget)) return;
                target.classList.remove('drag-over');
            });
            target.addEventListener('drop', function(e) {
                e.preventDefault();
                target.classList.remove('drag-over');
                var type = e.dataTransfer.getData('application/x-terraflow-type');
                if (type === 'category') {
                    var categoryId = e.dataTransfer.getData('text/plain');
                    var dragLi = document.querySelector('.category-item[data-category-id="' + categoryId + '"]');
                    if (!dragLi) return;
                    var token = dragLi.getAttribute('data-move-token');
                    var form = new FormData();
                    form.append('_token', token);
                    form.append('parent_id', parentId === '0' ? '0' : parentId);
                    fetch(moveCategoryUrlPattern.replace('CAT_ID', categoryId), { method: 'POST', body: form, headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(function(r) { return r.json().then(function(d) { return { ok: r.ok, data: d }; }); })
                        .then(function(result) {
                            if (result.ok && result.data.success) window.location.reload();
                            else showTreeMessage(result.data && result.data.error ? result.data.error : '{{ 'admin.category.move_failed'|trans }}', true);
                        })
                        .catch(function() { showTreeMessage('{{ 'admin.category.move_failed'|trans }}', true); });
                } else if (type === 'page') {
                    var pageId = e.dataTransfer.getData('text/plain');
                    var pageEl = document.querySelector('.page-draggable[data-page-id="' + pageId + '"]');
                    if (!pageEl) return;
                    var form = new FormData();
                    form.append('_token', pageEl.getAttribute('data-set-category-token'));
                    form.append('category_id', parentId === '0' ? '0' : parentId);
                    fetch(setPageCategoryUrlPattern.replace('PAGE_ID', pageId), { method: 'POST', body: form, headers: { 'X-Requested-With': 'XMLHttpRequest' } })
                        .then(function(r) { return r.json().then(function(d) { return { ok: r.ok, data: d }; }); })
                        .then(function(result) {
                            if (result.ok && result.data.success) window.location.reload();
                            else showTreeMessage(result.data && result.data.error ? result.data.error : '{{ 'admin.category.page_move_failed'|trans }}', true);
                        })
                        .catch(function() { showTreeMessage('{{ 'admin.category.page_move_failed'|trans }}', true); });
                }
            });
        });

        function showTreeMessage(msg, isError) {
            if (typeof window.adminNotifications !== 'undefined' && window.adminNotifications[isError ? 'error' : 'success']) {
                window.adminNotifications[isError ? 'error' : 'success'](msg);
            } else {
                alert(msg);
            }
        }
    });

    async function handleDeleteCategory(categoryId, categoryTitle) {
        var confirmed = false;
        if (typeof showDeleteConfirm === 'function') {
            confirmed = await showDeleteConfirm('{{ 'admin.category.delete_confirm_prefix'|trans }} "' + categoryTitle + '"', { warning: '{{ 'admin.category.delete_warning'|trans }}' });
        } else {
            confirmed = confirm('{{ 'admin.category.delete_confirm_prefix'|trans }} "' + categoryTitle + '" {{ 'admin.category.delete_warning'|trans }}');
        }
        if (confirmed) document.getElementById('deleteForm' + categoryId).requestSubmit();
    }
    </script>
{% endblock %}