@extends('layouts.layout-2')

@section('content')
    <h4 class="font-weight-bold py-3 mb-1">
        <i class="ion ion-md-map"></i> Seiten-Sitemap & Navigation
    </h4>

    <ul class="nav nav-tabs mb-3" id="tree-view-tabs">
        <li class="nav-item">
            <a class="nav-link active" href="#" data-view="sitemap">Seiten-Sitemap</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#" data-view="header">Header-Navigation</a>
        </li>
    </ul>

    <div class="alert alert-info" id="view-info-sitemap">
        <i class="fa fa-info-circle"></i> Vollständiger Seitenbaum vom Nested-Set (<code>lft</code>/<code>rgt</code>/<code>lvl</code>)
        — von der Startseite über Reisekategorien bis zu einzelnen Reisen.
        Fehlende Vorschaubilder werden markiert (<code>box_image_url</code>, <code>box_body</code>-JSON oder Reiseprogramm-Bild).
    </div>
    <div class="alert alert-info" id="view-info-header" style="display:none;">
        <i class="fa fa-info-circle"></i> Diese Ansicht zeigt nur die Header-Navigation wie im Frontend
        (<code>header.html.twig</code>) — nicht den vollständigen Seitenbaum.
    </div>

    <!-- Statistiken -->
    <div class="row mb-4">
        <div class="col-md-2">
            <div class="card">
                <div class="card-body text-center">
                    <div class="display-4 text-primary" id="stat-total">-</div>
                    <small class="text-muted">Gesamt Seiten</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <div class="card-body text-center">
                    <div class="display-4 text-success" id="stat-active">-</div>
                    <small class="text-muted">Aktive Seiten</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <div class="card-body text-center">
                    <div class="display-4 text-warning" id="stat-programs">-</div>
                    <small class="text-muted">Reiseprogramme</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <div class="card-body text-center">
                    <div class="display-4 text-info" id="stat-countries">-</div>
                    <small class="text-muted">Länderseiten</small>
                </div>
            </div>
        </div>
        <div class="col-md-2">
            <div class="card">
                <div class="card-body text-center">
                    <div class="display-4 text-danger" id="stat-missing-preview">-</div>
                    <small class="text-muted">Ohne Vorschaubild</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Toolbar -->
    <div class="card mb-3">
        <div class="card-body">
            <div class="row align-items-center">
                <div class="col-md-4">
                    <div class="input-group">
                        <input type="text" id="search-input" class="form-control"
                            placeholder="Suche nach Titel, Slug oder URL...">
                        <div class="input-group-append">
                            <button class="btn btn-primary" id="search-btn"><i class="fa fa-search"></i></button>
                        </div>
                    </div>
                </div>
                <div class="col-md-8 text-right">
                    <div class="btn-group" role="group">
                        <button class="btn btn-outline-secondary" id="filter-inactive-btn" data-filter="active_only">
                            <i class="fa fa-eye"></i> Inaktive einblenden
                        </button>
                    </div>
                    <div class="btn-group ml-2" role="group">
                        <button class="btn btn-warning" id="clear-cache-btn"><i class="fa fa-sync"></i> Cache
                            leeren</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigationsbaum -->
    <div class="card">
        <div class="card-header">
            <h5 class="mb-0">
                <i class="fa fa-sitemap"></i> Navigationsbaum
                <span class="badge badge-primary ml-2" id="node-count">0 Knoten</span>
            </h5>
        </div>
        <div class="card-body">
            <div id="loading" class="text-center py-5">
                <div class="spinner-border text-primary" role="status">
                    <span class="sr-only">Lade...</span>
                </div>
                <p class="mt-3">Lade Navigationsbaum...</p>
            </div>
            <div id="tree-container" style="display: none;">
                <div id="navigation-tree"></div>
            </div>
            <div id="no-results" style="display: none;" class="text-center py-5 text-muted">
                <i class="fa fa-search fa-3x mb-3"></i>
                <p>Keine Ergebnisse gefunden.</p>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modal-preview-edit" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Vorschaubild bearbeiten</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Schließen"><span aria-hidden="true">×</span></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-light border mb-3">
                        <p class="mb-2"><strong>Wie die Vorschaubilder zusammenspielen</strong></p>
                        <ul class="mb-0 pl-3">
                            <li class="mb-2">
                                <span class="badge badge-preview-box">box_image_url</span>
                                <strong>Seitenbild (grüner Rahmen):</strong>
                                Das Bild, das direkt an dieser Seite hinterlegt ist. Es wird in Kacheln und Übersichten bevorzugt angezeigt.
                            </li>
                            <li class="mb-2">
                                <span class="badge badge-preview-travel">travel_program_image</span>
                                <strong>Reiseprogramm-Bild (blauer Rahmen):</strong>
                                Bild aus der Reiseverwaltung auf
                                <a href="{{ config('app.url_v2') }}" target="_blank" rel="noopener noreferrer">{{ config('app.url_v2') }}</a>.
                                Dort ist pro Programm ein „Standardbild (Box und Suche)" hinterlegt. Fehlt dieses, wird automatisch das erste Programmbild verwendet.
                            </li>
                            <li>
                                Reine Kategorie- oder Infoseiten ohne verknüpftes Reiseprogramm haben <strong>kein</strong> Reiseprogramm-Bild — dort kann nur ein Seitenbild gesetzt werden.
                            </li>
                        </ul>
                    </div>

                    <div class="mb-3">
                        <strong id="preview-edit-page-title">—</strong>
                        <div class="text-muted small" id="preview-edit-page-url">—</div>
                    </div>

                    <div class="mb-3 preview-edit-current-images" id="preview-edit-current-images"></div>

                    <div class="card border-danger mb-3" id="preview-edit-delete-boxbody-section" style="display:none;">
                        <div class="card-body">
                            <h6 class="card-title text-danger mb-2">Legacy-Bild entfernen (box_body)</h6>
                            <p class="small text-muted mb-3">
                                Entfernt das ältere, direkt in <code>box_body</code> gespeicherte Bild. Danach gilt automatisch
                                das normale Seitenbild (<code>box_image_url</code>) oder — falls nicht vorhanden — das Reiseprogramm-Bild.
                            </p>
                            <button type="button" class="btn btn-outline-danger btn-sm" id="preview-edit-delete-boxbody-btn">
                                <i class="fa fa-trash-alt"></i> box_body-Bild entfernen
                            </button>
                        </div>
                    </div>

                    <div class="card border-danger mb-3" id="preview-edit-delete-section" style="display:none;">
                        <div class="card-body">
                            <h6 class="card-title text-danger mb-2">Verknüpftes Seitenbild entfernen</h6>
                            <p class="small text-muted mb-3">
                                Entfernt das grüne Seitenbild (<code>box_image_url</code>). Auf der Website wird danach automatisch
                                das blaue Reiseprogramm-Bild angezeigt — aber nur, wenn für diese Seite ein Reiseprogramm mit Bild existiert.
                            </p>
                            <button type="button" class="btn btn-outline-danger btn-sm" id="preview-edit-delete-btn">
                                <i class="fa fa-trash-alt"></i> Seitenbild entfernen
                            </button>
                        </div>
                    </div>

                    <div class="card border-success">
                        <div class="card-body">
                            <h6 class="card-title text-success mb-2">Neues Seitenbild setzen</h6>
                            <p class="small text-muted mb-3">
                                Wählen Sie ein Bild aus der Mediathek. Es wird als <code>box_image_url</code> an dieser Seite gespeichert
                                und ersetzt ein eventuell vorhandenes Seitenbild.
                            </p>
                            <div class="media" id="lfm-preview-edit">
                                <div class="preview-edit-picker-preview mr-3">
                                    <img src="" alt="" class="img_preview_edit d-none"
                                        style="width: 120px; height: 90px; object-fit: cover; border-radius: 4px;">
                                    <div class="preview-edit-empty text-muted small text-center">
                                        <i class="fa fa-image d-block mb-1" style="font-size: 24px; opacity: .4;"></i>
                                        Kein Bild<br>ausgewählt
                                    </div>
                                </div>
                                <div class="media-body">
                                    <input type="hidden" name="preview_image[url]" id="preview-image-url" value="">
                                    <input type="hidden" name="preview_image[thumb_url]" id="preview-image-thumb-url" value="">
                                    <p class="small text-muted mb-2" id="preview-edit-selected-url">Noch kein Bild ausgewählt.</p>
                                    <button type="button" class="btn btn-secondary btn-sm btn-lfm-open-modal"
                                        data-id="#lfm-preview-edit"
                                        data-obj="preview_image"
                                        data-set='["url", "thumb_url"]'
                                        data-img=".img_preview_edit">
                                        <i class="fa fa-image"></i> Bild aus Mediathek wählen
                                    </button>
                                    <button type="button" class="btn btn-success btn-sm ml-2" id="preview-edit-save-btn" disabled>
                                        <i class="fa fa-save"></i> Seitenbild speichern
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Schließen</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Styles -->
    <style>
        .tree-node {
            margin-left: 0;
            padding: 5px 0;
        }

        .tree-node-content {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border-radius: 4px;
            background-color: #fff;
            transition: background-color 0.2s;
            cursor: pointer;
        }

        .tree-node-content:hover {
            background-color: #f8f9fa;
        }

        .tree-toggle {
            width: 20px;
            min-width: 20px;
            height: 20px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            margin-right: 8px;
            color: #666;
            user-select: none;
        }

        .tree-toggle:hover {
            color: #000;
        }

        .tree-toggle.empty {
            visibility: hidden;
        }

        .tree-icon {
            width: 24px;
            min-width: 24px;
            margin-right: 8px;
            text-align: center;
        }

        .tree-thumb-wrap {
            margin-right: 8px;
            flex-shrink: 0;
        }

        .tree-thumb {
            width: 44px;
            height: 44px;
            border-radius: 4px;
            object-fit: cover;
            display: block;
            opacity: 0.88;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
            border: 2px solid transparent;
        }

        .tree-thumb-missing {
            opacity: 0.45;
            filter: grayscale(1);
            border-color: #dc3545;
        }

        .tree-thumb-box-image {
            border-color: #28a745;
        }

        .tree-thumb-travel-program {
            border-color: #007bff;
        }

        .badge-preview-box {
            background-color: #28a745;
            color: #fff;
        }

        .badge-preview-travel {
            background-color: #007bff;
            color: #fff;
        }

        .tree-thumbs {
            display: flex;
            gap: 4px;
            margin-right: 8px;
            flex-shrink: 0;
        }

        .tree-edit-preview {
            width: 28px;
            min-width: 28px;
            height: 28px;
            padding: 0;
            margin-right: 6px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .preview-edit-picker-preview {
            width: 120px;
            min-width: 120px;
            height: 90px;
            border: 1px dashed #ced4da;
            border-radius: 4px;
            background: #f8f9fa;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            position: relative;
        }

        .preview-edit-picker-preview .img_preview_edit {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .preview-edit-empty {
            line-height: 1.3;
            padding: 8px;
        }

        #modal-preview-edit .modal-body {
            overflow-x: hidden;
        }

        #modal-preview-edit .preview-edit-current-images {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            gap: 16px;
            max-width: 100%;
        }

        #modal-preview-edit .preview-edit-current-item {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: 140px;
            flex: 0 0 140px;
            max-width: 140px;
        }

        #modal-preview-edit .preview-edit-current-item .badge {
            display: block !important;
            width: 100%;
            margin: 0 0 6px 0;
            white-space: normal;
            line-height: 1.25;
            text-align: left;
            position: static;
        }

        #modal-preview-edit .preview-edit-current-thumb-wrap {
            width: 140px;
            height: 90px;
            max-width: 140px;
            max-height: 90px;
            border-radius: 4px;
            overflow: hidden;
            background: #f8f9fa;
            flex-shrink: 0;
        }

        #modal-preview-edit .preview-edit-current-thumb-wrap.preview-edit-border-box {
            border: 2px solid #28a745;
        }

        #modal-preview-edit .preview-edit-current-thumb-wrap.preview-edit-border-travel {
            border: 2px solid #007bff;
        }

        #modal-preview-edit .preview-edit-current-thumb-wrap img {
            width: 140px !important;
            height: 90px !important;
            max-width: 140px !important;
            max-height: 90px !important;
            object-fit: cover !important;
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
            border: 0 !important;
        }

        .tree-title {
            flex: 1;
            font-weight: 500;
        }

        .tree-badges {
            display: flex;
            gap: 5px;
            flex-wrap: wrap;
        }

        .tree-url {
            font-size: 12px;
            color: #212529;
            margin-left: 8px;
        }

        .tree-url a,
        .tree-url-link {
            color: #212529;
            text-decoration: none;
        }

        .tree-url a:hover,
        .tree-url-link:hover {
            color: #000;
            text-decoration: underline;
        }

        .tree-children {
            margin-left: 30px;
            border-left: 2px solid #e0e0e0;
            padding-left: 10px;
        }

        .tree-children.collapsed {
            display: none;
        }

        .tree-node.inactive .tree-node-content {
            opacity: 0.5;
        }

        .tree-node.filtered {
            display: none;
        }

        .tree-node.highlight .tree-node-content {
            background-color: #fff3cd;
            border-left: 3px solid #ffc107;
        }

        .badge-small {
            font-size: 10px;
            padding: 2px 6px;
        }

        /* Separator-Styles */
        .tree-separator {
            margin: 15px 0 10px 30px;
            padding: 8px 12px;
            background: linear-gradient(to right, #f8f9fa 0%, #e9ecef 100%);
            border-left: 4px solid #6c757d;
            border-radius: 4px;
            font-weight: bold;
            color: #495057;
        }

        .tree-separator i {
            margin-right: 8px;
            color: #6c757d;
        }

        /* Section-Separator (größere Trennung) */
        .tree-section-separator {
            margin: 30px 0 20px 0;
            padding: 12px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 6px;
            font-weight: bold;
            font-size: 18px;
            color: white;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .tree-section-separator i {
            margin-right: 10px;
        }

        /* Frontend-spezifische Styles */
        .tree-node.country-page>.tree-node-content {
            background-color: #f8f9fa;
            font-weight: 600;
            font-size: 16px;
            border-left: 4px solid #007bff;
            padding-left: 16px;
        }

        .tree-node.country-page>.tree-node-content:hover {
            background-color: #e9ecef;
        }

        .tree-node.info-page>.tree-node-content {
            background-color: #fff9e6;
        }

        .tree-node.sitemap-homepage>.tree-node-content {
            background-color: #fff;
            color: #212529;
            font-weight: bold;
            font-size: 16px;
            border-left: 4px solid #667eea;
            border-radius: 4px;
        }

        .tree-node.sitemap-homepage .tree-url,
        .tree-node.sitemap-homepage .tree-url a {
            color: #212529;
        }

        .tree-node.sitemap-country>.tree-node-content {
            font-weight: 600;
            border-left: 3px solid #007bff;
        }

        .tree-node.missing-preview>.tree-node-content {
            border-left: 3px solid #dc3545;
        }
    </style>

    <!-- Scripts -->
    <script>
        let navigationData = null;
        let currentFilter = 'active_only';
        let currentView = 'sitemap';
        let searchQuery = '';

        function showInactive() {
            return currentFilter === 'with_inactive';
        }

        function previewSourceThumbClass(source) {
            if (source === 'box_image_url' || source === 'box_body') {
                return 'tree-thumb-box-image';
            }
            if (source === 'travel_program_image' || source === 'travel_program_image_fallback') {
                return 'tree-thumb-travel-program';
            }
            return '';
        }

        function previewSourceBadgeClass(source) {
            if (source === 'box_image_url' || source === 'box_body') {
                return 'badge-preview-box';
            }
            if (source === 'travel_program_image' || source === 'travel_program_image_fallback') {
                return 'badge-preview-travel';
            }
            return 'badge-secondary';
        }

        function loadStats() {
            fetch('/navigation-api/stats')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        $('#stat-total').text(data.data.total_pages);
                        $('#stat-active').text(data.data.active_nodes);
                        $('#stat-programs').text(data.data.travel_programs);
                        $('#stat-countries').text(data.data.country_pages);
                        $('#stat-missing-preview').text(data.data.missing_preview_images);
                    }
                })
                .catch(error => console.error('Error loading stats:', error));
        }

        function loadNavigationTree(includeInactive = false) {
            $('#loading').show();
            $('#tree-container').hide();
            $('#no-results').hide();

            const url = `/navigation-api/data?mode=${currentView}&include_hidden=${includeInactive ? '1' : '0'}`;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        navigationData = data.data;
                        renderTree(navigationData);
                        updateNodeCount(data.meta.total_nodes, data.meta.missing_preview_images);
                        $('#loading').hide();
                        $('#tree-container').show();
                    }
                })
                .catch(error => {
                    console.error('Error loading tree:', error);
                    $('#loading').hide();
                    alert('Fehler beim Laden des Navigationsbaums');
                });
        }

        function renderTree(nodes) {
            const container = $('#navigation-tree');
            container.empty();

            if (nodes.length === 0) {
                $('#tree-container').hide();
                $('#no-results').show();
                return;
            }

            nodes.forEach(node => {
                if (currentView === 'header') {
                    if (node.is_section_separator || node.is_separator) {
                        container.append(renderNode(node, false));
                    } else {
                        const isCountryPage = node.section === 'Länder-Navigation';
                        container.append(renderNode(node, isCountryPage));
                    }
                } else {
                    container.append(renderNode(node, true));
                }
            });
        }

        function renderNode(node, expandChildren = true) {
            if (node.is_section_separator) {
                return $('<div>')
                    .addClass('tree-section-separator')
                    .html(`<i class="${node.icon}"></i>${node.title}`);
            }

            if (node.is_separator) {
                return $('<div>')
                    .addClass('tree-separator')
                    .html(`<i class="${node.icon}"></i>${node.title}`);
            }

            const hasChildren = node.has_children;
            const isActive = node.status === 1;
            const showInNavi = node.show_in_navi === 1;
            const isSitemap = currentView === 'sitemap';
            const isVirtual = node.is_virtual === true;
            const isCountryPage = isSitemap
                ? node.node_type === 'country_root'
                : node.section === 'Länder-Navigation';

            const nodeDiv = $('<div>')
                .addClass('tree-node')
                .addClass(isActive || isVirtual ? 'active' : 'inactive')
                .addClass(isCountryPage ? 'country-page sitemap-country' : '')
                .addClass(node.before_title === 'Infos' ? 'info-page' : '')
                .addClass(isVirtual ? 'sitemap-homepage' : '')
                .addClass(isSitemap && node.has_preview_image === false ? 'missing-preview' : '')
                .data('node', node);

            const contentDiv = $('<div>').addClass('tree-node-content');

            const showToggle = hasChildren && (isSitemap || isCountryPage);
            const toggle = $('<span>')
                .addClass('tree-toggle')
                .addClass(showToggle ? '' : 'empty')
                .html(showToggle ? '<i class="fa fa-chevron-down"></i>' : '')
                .on('click', function(e) {
                    e.stopPropagation();
                    toggleNode(nodeDiv);
                });

            const icon = $('<span>').addClass('tree-icon');
            if (isVirtual) {
                icon.html('<i class="fa fa-home"></i>');
            } else if (node.node_type === 'country_root' || node.is_country_page) {
                icon.html('<i class="fa fa-star text-warning"></i>');
            } else if (node.node_type === 'category') {
                icon.html('<i class="fa fa-folder text-warning"></i>');
            } else if (node.is_travel_program || node.node_type === 'travel_program') {
                icon.html('<i class="fa fa-plane text-primary"></i>');
            } else if (node.is_fewo_lodging || node.node_type === 'fewo_lodging') {
                icon.html('<i class="fa fa-home text-info"></i>');
            } else if (node.before_title === 'Infos') {
                icon.html('<i class="fa fa-info-circle text-muted"></i>');
            } else {
                icon.html('<i class="fa fa-file-alt text-muted"></i>');
            }

            const titleDiv = $('<div>').addClass('tree-title');
            const displayTitle = node.title_short || node.title;
            titleDiv.append($('<span>').text(displayTitle));

            if (node.frontend_url || node.url) {
                const linkUrl = node.frontend_url || node.url;
                const urlSpan = $('<span>').addClass('tree-url');
                urlSpan.append(
                    $('<a>')
                        .addClass('tree-url-link')
                        .attr('href', linkUrl)
                        .attr('target', '_blank')
                        .attr('rel', 'noopener noreferrer')
                        .text(linkUrl)
                );
                titleDiv.append(urlSpan);
            }

            const badges = $('<div>').addClass('tree-badges');

            if (isSitemap && node.node_type_label) {
                badges.append($('<span>').addClass('badge badge-secondary badge-small').text(node.node_type_label));
            }

            if (isSitemap && node.lvl !== undefined && node.lvl !== null && !isVirtual) {
                badges.append($('<span>').addClass('badge badge-light badge-small').text('lvl ' + node.lvl));
            }

            if (!isActive && !isVirtual) {
                badges.append($('<span>').addClass('badge badge-danger badge-small').text('Inaktiv'));
            }

            if (!showInNavi && !isVirtual) {
                badges.append($('<span>').addClass('badge badge-warning badge-small').text('Ausgeblendet'));
            }

            if (isSitemap && node.has_preview_image === false) {
                badges.append($('<span>').addClass('badge badge-danger badge-small').text('Kein Vorschaubild'));
            }

            if (isSitemap && node.has_preview_image === true && node.preview_image_source) {
                badges.append(
                    $('<span>')
                        .addClass('badge badge-small ' + previewSourceBadgeClass(node.preview_image_source))
                        .text(node.preview_image_source)
                );
            }

            if (isSitemap && node.travel_program_preview_url &&
                ['box_image_url', 'box_body'].includes(node.preview_image_source)) {
                badges.append(
                    $('<span>')
                        .addClass('badge badge-small badge-preview-travel')
                        .text('travel_program_image')
                );
            }

            if (!isSitemap && node.is_travel_program) {
                badges.append($('<span>').addClass('badge badge-primary badge-small').text('Reiseprogramm'));
            }

            if (!isSitemap && node.is_fewo_lodging) {
                badges.append($('<span>').addClass('badge badge-info badge-small').text('FeWo'));
            }

            if (!isSitemap && node.is_country_page) {
                badges.append($('<span>').addClass('badge badge-success badge-small').text('Land'));
            }

            if (node.before_title) {
                badges.append($('<span>').addClass('badge badge-secondary badge-small').text('Gruppe: ' + node.before_title));
            }

            const contentParts = [toggle];

            if (isSitemap && !isVirtual && node.id) {
                const editBtn = $('<button type="button" class="btn btn-outline-secondary btn-sm tree-edit-preview">')
                    .attr('title', 'Vorschaubild bearbeiten')
                    .html('<i class="fa fa-edit"></i>')
                    .on('click', function(e) {
                        e.stopPropagation();
                        openPreviewEditModal(node);
                    });
                contentParts.push(editBtn);
            }

            const thumbUrls = [];
            if (node.preview_image_url) {
                const primaryCls = node.has_preview_image === false
                    ? 'tree-thumb-missing'
                    : previewSourceThumbClass(node.preview_image_source);
                thumbUrls.push({
                    url: node.preview_image_url,
                    fallback: null,
                    cls: primaryCls,
                    title: node.preview_image_source || 'Vorschaubild',
                });
            }
            if (node.travel_program_preview_url &&
                ['box_image_url', 'box_body'].includes(node.preview_image_source)) {
                thumbUrls.push({
                    url: node.travel_program_preview_url,
                    fallback: node.travel_program_preview_url_full || null,
                    cls: 'tree-thumb-travel-program',
                    title: 'Reiseprogramm-Bild (v2)',
                });
            }

            if (thumbUrls.length > 0) {
                const thumbsWrap = $('<span>').addClass('tree-thumbs');
                thumbUrls.forEach(function(thumbData) {
                    const thumbWrap = $('<span>').addClass('tree-thumb-wrap').attr('title', thumbData.title);
                    const thumb = $('<img>')
                        .addClass('tree-thumb')
                        .addClass(thumbData.cls)
                        .attr('src', thumbData.url)
                        .attr('alt', '')
                        .attr('loading', 'lazy');
                    if (thumbData.fallback) {
                        thumb.attr('data-fallback-url', thumbData.fallback);
                    }
                    thumb.on('error', function() {
                        const fallbackUrl = $(this).attr('data-fallback-url');
                        if (fallbackUrl && !$(this).data('fallback-tried')) {
                            $(this).data('fallback-tried', true).attr('src', fallbackUrl);
                            return;
                        }
                        $(this).closest('.tree-thumb-wrap').remove();
                        if (thumbsWrap.find('.tree-thumb-wrap').length === 0) {
                            thumbsWrap.remove();
                        }
                    });
                    thumbWrap.append(thumb);
                    thumbsWrap.append(thumbWrap);
                });
                contentParts.push(thumbsWrap);
            }

            contentParts.push(icon, titleDiv, badges);
            contentDiv.append(contentParts);
            nodeDiv.append(contentDiv);

            if (hasChildren && node.children && node.children.length > 0) {
                const shouldRenderChildren = isSitemap || isCountryPage;
                if (shouldRenderChildren) {
                    const childrenDiv = $('<div>').addClass('tree-children');
                    if (!expandChildren) {
                        childrenDiv.addClass('collapsed');
                    }
                    node.children.forEach(child => {
                        childrenDiv.append(renderNode(child, expandChildren));
                    });
                    nodeDiv.append(childrenDiv);
                }
            }

            return nodeDiv;
        }

        // Toggle Node
        function toggleNode(nodeDiv) {
            const childrenDiv = nodeDiv.find('> .tree-children');
            const toggle = nodeDiv.find('> .tree-node-content > .tree-toggle i');

            if (childrenDiv.hasClass('collapsed')) {
                childrenDiv.removeClass('collapsed');
                toggle.removeClass('fa-chevron-right').addClass('fa-chevron-down');
            } else {
                childrenDiv.addClass('collapsed');
                toggle.removeClass('fa-chevron-down').addClass('fa-chevron-right');
            }
        }

        function performSearch(query) {
            searchQuery = query.toLowerCase();

            if (!query) {
                $('.tree-node').removeClass('highlight filtered');
                return;
            }

            $('.tree-node').each(function() {
                const node = $(this).data('node');
                const matches =
                    node.title.toLowerCase().includes(searchQuery) ||
                    (node.slug && node.slug.toLowerCase().includes(searchQuery)) ||
                    (node.url && node.url.toLowerCase().includes(searchQuery));

                if (matches) {
                    $(this).removeClass('filtered').addClass('highlight');
                    $(this).parents('.tree-children').removeClass('collapsed');
                    $(this).parents('.tree-node').find('> .tree-node-content > .tree-toggle i')
                        .removeClass('fa-chevron-right').addClass('fa-chevron-down');
                } else {
                    $(this).removeClass('highlight');
                }
            });
        }

        function updateNodeCount(count, missingPreview) {
            let label = `${count} Knoten`;
            if (currentView === 'sitemap' && missingPreview !== undefined) {
                label += ` · ${missingPreview} ohne Vorschaubild`;
            }
            $('#node-count').text(label);
        }

        let previewEditNode = null;

        function resetPreviewEditPicker() {
            $('#preview-image-url').val('');
            $('#preview-image-thumb-url').val('');
            $('#preview-edit-selected-url').text('Noch kein Bild ausgewählt.');
            $('#preview-edit-save-btn').prop('disabled', true);
            $('.img_preview_edit').attr('src', '').addClass('d-none');
            $('.preview-edit-empty').show();
        }

        function showPreviewEditPickerImage(url) {
            if (!url) {
                resetPreviewEditPicker();
                return;
            }

            $('.img_preview_edit').attr('src', url).removeClass('d-none');
            $('.preview-edit-empty').hide();
            $('#preview-edit-selected-url').text(url);
            $('#preview-edit-save-btn').prop('disabled', false);
        }

        function openPreviewEditModal(node) {
            previewEditNode = node;
            $('#preview-edit-page-title').text(node.title_short || node.title);
            $('#preview-edit-page-url').text(node.frontend_url || node.url || '');

            const $current = $('#preview-edit-current-images').empty();
            if (node.box_body_preview_url) {
                renderPreviewEditCurrentImage($current, 'Legacy-Bild (box_body)', node.box_body_preview_url, 'preview-edit-border-box', 'badge-preview-box');
            }
            renderPreviewEditCurrentImage($current, 'Seitenbild (box_image_url)', node.box_image_frontend_url, 'preview-edit-border-box', 'badge-preview-box');
            renderPreviewEditCurrentImage($current, 'Reiseprogramm-Bild', node.travel_program_preview_url || node.travel_program_preview_url_full, 'preview-edit-border-travel', 'badge-preview-travel');

            if (!$current.children().length) {
                $current.append('<div class="text-muted small w-100">Aktuell ist kein Vorschaubild hinterlegt.</div>');
            }

            $('#preview-edit-delete-boxbody-section').toggle(!!node.can_clear_box_body);
            $('#preview-edit-delete-section').toggle(!!node.can_clear_box_image);
            resetPreviewEditPicker();

            $('#modal-preview-edit').modal('show');
        }

        function renderPreviewEditCurrentImage($container, label, url, borderClass, badgeClass) {
            if (!url) {
                return;
            }

            const $item = $('<div class="preview-edit-current-item">');
            $item.append(
                $('<span>')
                    .addClass('badge badge-small ' + badgeClass)
                    .text(label)
            );

            const $wrap = $('<div class="preview-edit-current-thumb-wrap">').addClass(borderClass);
            $wrap.append(
                $('<img>')
                    .attr('src', url)
                    .attr('alt', label)
            );

            $item.append($wrap);
            $container.append($item);
        }

        function savePreviewBoxImage(action, boxImageUrl) {
            if (!previewEditNode || !previewEditNode.id) {
                return;
            }

            const token = $('meta[name="csrf-token"]').attr('content');
            const body = { action: action };
            if (boxImageUrl) {
                body.box_image_url = boxImageUrl;
            }

            fetch('/navigation-api/page/' + previewEditNode.id + '/box-image', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': token,
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(body),
            })
                .then(response => response.json().then(data => ({ ok: response.ok, data })))
                .then(({ ok, data }) => {
                    if (!ok || !data.success) {
                        throw new Error(data.error || 'Speichern fehlgeschlagen.');
                    }

                    $.growl({
                        title: 'Gespeichert',
                        message: data.message,
                        location: 'tr',
                    });

                    $('#modal-preview-edit').modal('hide');
                    loadStats();
                    loadNavigationTree(showInactive());
                })
                .catch(error => {
                    $.growl.error({
                        title: 'Fehler',
                        message: error.message,
                        location: 'tr',
                    });
                });
        }

        function clearCache() {
            if (!confirm('Möchten Sie wirklich den Navigation-Cache leeren?')) {
                return;
            }

            const token = $('meta[name="csrf-token"]').attr('content');

            fetch('/navigation-api/clear-cache', {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': token,
                        'Accept': 'application/json'
                    }
                })
                .then(() => {
                    alert('Cache erfolgreich gelöscht');
                    loadStats();
                    loadNavigationTree(showInactive());
                })
                .catch(error => {
                    console.error('Error clearing cache:', error);
                    alert('Fehler beim Löschen des Cache');
                });
        }

        function switchView(view) {
            currentView = view;
            $('#tree-view-tabs .nav-link').removeClass('active');
            $(`#tree-view-tabs .nav-link[data-view="${view}"]`).addClass('active');
            $('#view-info-sitemap').toggle(view === 'sitemap');
            $('#view-info-header').toggle(view === 'header');
            loadNavigationTree(showInactive());
        }

        $(document).ready(function() {
            if (typeof IqLFileManager !== 'undefined') {
                IqLFileManager.image_dialog_images_url = '/navigation-api/iq-assets/modal';
                IqLFileManager.init();
            }

            loadStats();
            loadNavigationTree(false);

            $('#preview-edit-delete-btn').on('click', function() {
                if (!previewEditNode || !previewEditNode.can_clear_box_image) {
                    return;
                }

                if (!confirm('Möchten Sie das verknüpfte Seitenbild (box_image_url) wirklich entfernen?')) {
                    return;
                }

                savePreviewBoxImage('clear');
            });

            $('#preview-edit-delete-boxbody-btn').on('click', function() {
                if (!previewEditNode || !previewEditNode.can_clear_box_body) {
                    return;
                }

                if (!confirm('Möchten Sie das Legacy-Bild (box_body) wirklich entfernen?')) {
                    return;
                }

                savePreviewBoxImage('clear_box_body');
            });

            $('#preview-edit-save-btn').on('click', function() {
                const url = $('#preview-image-url').val();
                if (!url) {
                    $.growl.error({
                        title: 'Hinweis',
                        message: 'Bitte wählen Sie zuerst ein Bild aus der Mediathek.',
                        location: 'tr',
                    });
                    return;
                }

                savePreviewBoxImage('set', url);
            });

            $('#preview-image-url').on('change', function() {
                const url = $(this).val();
                const thumbUrl = $('#preview-image-thumb-url').val();
                showPreviewEditPickerImage(thumbUrl || url);
            });

            $('#tree-view-tabs .nav-link').on('click', function(e) {
                e.preventDefault();
                switchView($(this).data('view'));
            });

            $('#clear-cache-btn').on('click', clearCache);

            $('#search-btn').on('click', function() {
                performSearch($('#search-input').val());
            });

            $('#search-input').on('keyup', function(e) {
                if (e.key === 'Enter') {
                    performSearch($(this).val());
                }
            });

            $('#filter-inactive-btn').on('click', function() {
                if (currentFilter === 'active_only') {
                    currentFilter = 'with_inactive';
                    $(this).html('<i class="fa fa-eye-slash"></i> Inaktive ausblenden')
                        .removeClass('btn-outline-secondary')
                        .addClass('btn-secondary');
                } else {
                    currentFilter = 'active_only';
                    $(this).html('<i class="fa fa-eye"></i> Inaktive einblenden')
                        .removeClass('btn-secondary')
                        .addClass('btn-outline-secondary');
                }
                loadNavigationTree(showInactive());
            });
        });
    </script>
@endsection