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

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

{% block body %}
<div class="modules-page container-fluid px-3 px-lg-4 py-4 pb-5">
    {# Kopfbereich #}
    <div class="modules-hero rounded-4 p-4 p-lg-5 mb-4 position-relative overflow-hidden">
        <div class="modules-hero__glow" aria-hidden="true"></div>
        <div class="row align-items-center g-4 position-relative">
            <div class="col-lg-7">
                <div class="d-flex align-items-start gap-3">
                    <div class="modules-hero__icon rounded-3 d-flex align-items-center justify-content-center flex-shrink-0">
                        <i class="bi bi-grid-1x2-fill"></i>
                    </div>
                    <div>
                        <h1 class="h2 fw-bold mb-2 gradient-text">{{ 'admin.modules'|trans }}</h1>
                        <p class="text-muted mb-0 modules-hero__lead">{{ 'admin.modules_overview_hint'|trans }}</p>
                    </div>
                </div>
            </div>
            <div class="col-lg-5">
                <label for="modulesSearch" class="visually-hidden">{{ 'admin.modules_search_placeholder'|trans }}</label>
                <div class="modules-search-wrap position-relative">
                    <i class="bi bi-search modules-search-wrap__icon" aria-hidden="true"></i>
                    <input type="search"
                           id="modulesSearch"
                           class="form-control form-control-lg modules-search-input rounded-pill ps-5 pe-4"
                           placeholder="{{ 'admin.modules_search_placeholder'|trans }}"
                           autocomplete="off"
                           spellcheck="false">
                </div>
            </div>
        </div>
    </div>

    <p id="modulesNoMatch" class="alert alert-light border text-center d-none mb-4" role="status">
        <i class="bi bi-funnel me-2 text-muted"></i>{{ 'admin.modules_no_match'|trans }}
    </p>

    {% set groupIcons = {
        'content': 'bi-chat-dots',
        'seo': 'bi-search-heart',
        'operations': 'bi-gear-wide-connected',
        'system': 'bi-cpu'
    } %}

    <div id="modulesGroupsRoot">
        {% for groupKey in moduleGroupOrder %}
            {% if modulesGrouped[groupKey] is defined and modulesGrouped[groupKey]|length > 0 %}
                <section class="module-group mb-4" data-module-group="{{ groupKey }}">
                    <div class="d-flex align-items-center gap-2 mb-3 px-1">
                        <span class="module-group__badge rounded-3 d-inline-flex align-items-center justify-content-center module-group__badge--{{ groupKey }}">
                            <i class="bi {{ groupIcons[groupKey]|default('bi-puzzle') }}"></i>
                        </span>
                        <h2 class="h5 fw-bold mb-0 text-body">
                            {{ ('admin.modules_group_' ~ groupKey)|trans }}
                        </h2>
                        <span class="badge rounded-pill bg-body-secondary text-body-secondary fw-normal ms-1">
                            {{ modulesGrouped[groupKey]|length }}
                        </span>
                    </div>

                    <div class="module-group__grid">
                        {% for module in modulesGrouped[groupKey] %}
                            {% set title = module.name|trans %}
                            {% set desc = module.description|trans %}
                            <a href="{{ module.link }}"
                               class="module-tile text-decoration-none rounded-4 border module-tile--{{ groupKey }}"
                               data-module-search="{{ (title ~ ' ' ~ desc)|lower|e('html_attr') }}">
                                <div class="module-tile__inner d-flex align-items-stretch gap-3 p-3 p-md-4">
                                    <div class="module-tile__icon rounded-3 d-flex align-items-center justify-content-center flex-shrink-0">
                                        <i class="bi {{ module.icon }}"></i>
                                    </div>
                                    <div class="module-tile__body flex-grow-1 min-w-0">
                                        <div class="d-flex align-items-start justify-content-between gap-2">
                                            <div>
                                                <h3 class="h6 fw-semibold mb-1 text-body module-tile__title">{{ title }}</h3>
                                                <p class="small text-muted mb-0 module-tile__desc">{{ desc }}</p>
                                            </div>
                                            <span class="module-tile__chevron flex-shrink-0 rounded-circle d-inline-flex align-items-center justify-content-center">
                                                <i class="bi bi-arrow-right-short"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        {% endfor %}
                    </div>
                </section>
            {% endif %}
        {% endfor %}

        {% if modulesGrouped is empty %}
            <div class="admin-card p-5 text-center rounded-4">
                <div class="text-muted mb-3"><i class="bi bi-puzzle display-4"></i></div>
                <p class="mb-0 text-muted">{{ 'admin.no_modules_found'|trans }}</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .modules-page {
            max-width: 1200px;
            margin-inline: auto;
        }
        .modules-hero {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(139, 92, 246, 0.06) 50%, rgba(16, 185, 129, 0.05) 100%);
            border: 1px solid rgba(0, 0, 0, 0.06);
        }
        [data-bs-theme="dark"] .modules-hero {
            background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(139, 92, 246, 0.1) 100%);
            border-color: rgba(255, 255, 255, 0.08);
        }
        .modules-hero__glow {
            position: absolute;
            width: 320px;
            height: 320px;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.15) 0%, transparent 70%);
            top: -120px;
            right: -80px;
            pointer-events: none;
        }
        .modules-hero__icon {
            width: 3.25rem;
            height: 3.25rem;
            background: linear-gradient(135deg, #3b82f6, #8b5cf6);
            color: #fff;
            font-size: 1.5rem;
            box-shadow: 0 8px 24px rgba(59, 130, 246, 0.35);
        }
        .modules-hero__lead {
            max-width: 36rem;
            line-height: 1.55;
        }
        .modules-search-wrap__icon {
            position: absolute;
            left: 1.25rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--bs-secondary-color);
            font-size: 1.1rem;
            z-index: 2;
            pointer-events: none;
        }
        .modules-search-input {
            border: 1px solid rgba(0, 0, 0, 0.08);
            background: rgba(255, 255, 255, 0.85);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        }
        [data-bs-theme="dark"] .modules-search-input {
            background: rgba(30, 30, 40, 0.6);
            border-color: rgba(255, 255, 255, 0.1);
        }
        .module-group__badge {
            width: 2.25rem;
            height: 2.25rem;
            font-size: 1rem;
        }
        .module-group__badge--content { background: rgba(99, 102, 241, 0.15); color: #6366f1; }
        .module-group__badge--seo { background: rgba(16, 185, 129, 0.15); color: #10b981; }
        .module-group__badge--operations { background: rgba(245, 158, 11, 0.18); color: #d97706; }
        .module-group__badge--system { background: rgba(100, 116, 139, 0.2); color: #64748b; }
        [data-bs-theme="dark"] .module-group__badge--content { background: rgba(129, 140, 248, 0.2); color: #a5b4fc; }
        [data-bs-theme="dark"] .module-group__badge--seo { background: rgba(52, 211, 153, 0.2); color: #6ee7b7; }
        [data-bs-theme="dark"] .module-group__badge--operations { background: rgba(251, 191, 36, 0.15); color: #fcd34d; }
        [data-bs-theme="dark"] .module-group__badge--system { background: rgba(148, 163, 184, 0.2); color: #cbd5e1; }

        .module-group__grid {
            display: grid;
            gap: 0.75rem;
        }
        @media (min-width: 768px) {
            .module-group__grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
        }
        .module-tile {
            display: block;
            background: var(--bs-body-bg);
            border-color: rgba(0, 0, 0, 0.07) !important;
            transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
            color: inherit;
        }
        [data-bs-theme="dark"] .module-tile {
            border-color: rgba(255, 255, 255, 0.08) !important;
        }
        .module-tile:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
            border-color: rgba(59, 130, 246, 0.25) !important;
        }
        [data-bs-theme="dark"] .module-tile:hover {
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
            border-color: rgba(96, 165, 250, 0.35) !important;
        }
        .module-tile:focus-visible {
            outline: 2px solid var(--bs-primary);
            outline-offset: 2px;
        }
        .module-tile__icon {
            width: 3rem;
            height: 3rem;
            font-size: 1.35rem;
        }
        .module-tile--content .module-tile__icon { background: rgba(99, 102, 241, 0.12); color: #6366f1; }
        .module-tile--seo .module-tile__icon { background: rgba(16, 185, 129, 0.12); color: #059669; }
        .module-tile--operations .module-tile__icon { background: rgba(245, 158, 11, 0.14); color: #d97706; }
        .module-tile--system .module-tile__icon { background: rgba(100, 116, 139, 0.15); color: #475569; }
        [data-bs-theme="dark"] .module-tile--content .module-tile__icon { background: rgba(129, 140, 248, 0.18); color: #a5b4fc; }
        [data-bs-theme="dark"] .module-tile--seo .module-tile__icon { background: rgba(52, 211, 153, 0.15); color: #34d399; }
        [data-bs-theme="dark"] .module-tile--operations .module-tile__icon { background: rgba(251, 191, 36, 0.12); color: #fcd34d; }
        [data-bs-theme="dark"] .module-tile--system .module-tile__icon { background: rgba(148, 163, 184, 0.18); color: #94a3b8; }

        .module-tile__chevron {
            width: 2rem;
            height: 2rem;
            background: rgba(0, 0, 0, 0.04);
            font-size: 1.25rem;
            color: var(--bs-secondary-color);
        }
        .module-tile:hover .module-tile__chevron {
            background: rgba(59, 130, 246, 0.12);
            color: #3b82f6;
        }
        .module-tile.module-tile--hidden {
            display: none !important;
        }
        .module-group.module-group--hidden {
            display: none !important;
        }
    </style>
{% endblock %}

{% block javascriptBottom %}
    <script>
        (function () {
            var input = document.getElementById('modulesSearch');
            var noMatch = document.getElementById('modulesNoMatch');
            var root = document.getElementById('modulesGroupsRoot');
            if (!input || !root) return;

            function applyFilter() {
                var q = (input.value || '').trim().toLowerCase();
                var tiles = root.querySelectorAll('.module-tile');
                var anyVisible = false;

                tiles.forEach(function (tile) {
                    var hay = (tile.getAttribute('data-module-search') || '').toLowerCase();
                    var show = !q || hay.indexOf(q) !== -1;
                    tile.classList.toggle('module-tile--hidden', !show);
                    if (show) anyVisible = true;
                });

                root.querySelectorAll('.module-group').forEach(function (section) {
                    var visibleInSection = section.querySelectorAll('.module-tile:not(.module-tile--hidden)').length;
                    section.classList.toggle('module-group--hidden', q.length > 0 && visibleInSection === 0);
                });

                if (noMatch) {
                    noMatch.classList.toggle('d-none', !q || anyVisible);
                }
            }

            input.addEventListener('input', applyFilter);
            input.addEventListener('search', applyFilter);
        })();
    </script>
{% endblock %}