{% extends '@administration/base.html.twig' %}
{% import '@CustomThemePlugin/admin/_theme_tree.html.twig' as theme_tree %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        /* Modern Theme Explorer Styles */
        .theme-explorer {
            display: flex;
            gap: 24px;
            padding: 24px;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        }
        
        /* File Browser */
        .file-browser {
            width: min(380px, 100%);
            min-width: 280px;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        
        .file-browser:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transform: translateY(-2px);
        }
        
        .file-browser-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            font-weight: 600;
            font-size: 16px;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .file-browser-header i {
            font-size: 18px;
        }
        
        .file-tree {
            padding: 16px;
            overflow-y: auto;
            max-height: min(70vh, 720px);
        }

        .theme-tree-legend {
            font-size: 12px;
            color: #64748b;
            margin-bottom: 12px;
            line-height: 1.4;
        }

        .theme-tree-details > summary {
            list-style: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            color: #475569;
        }

        .theme-tree-details > summary::-webkit-details-marker {
            display: none;
        }

        .theme-tree-folder:hover {
            background: rgba(241, 245, 249, 0.9);
        }

        .theme-tree-nested {
            padding-left: 10px;
            margin-left: 6px;
            border-left: 1px solid rgba(148, 163, 184, 0.35);
        }

        .theme-tree-file-item {
            padding: 8px 12px;
            margin: 2px 0;
            font-size: 13px;
        }

        .theme-tree-file-item .theme-tree-file-label {
            min-width: 0;
        }

        .file-item--override .file-item-icon {
            color: #2563eb;
        }

        .file-item--override.active .file-item-icon {
            color: #fff;
        }

        .theme-tree-orphans-caption {
            font-size: 11px;
            font-weight: 600;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.03em;
            margin: 12px 0 6px;
        }
        
        .file-item {
            padding: 12px 16px;
            cursor: pointer;
            border-radius: 12px;
            margin: 4px 0;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.2s ease;
            border: 1px solid transparent;
            font-weight: 500;
        }
        
        .file-item:hover {
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
            border-color: #cbd5e1;
            transform: translateX(4px);
        }
        
        .file-item.active {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            transform: translateX(4px);
        }
        
        .file-item i {
            font-size: 16px;
            opacity: 0.8;
        }
        
        .file-item.active i {
            opacity: 1;
        }
        
        /* New File Item */
        .new-file-item {
            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
            border: 1px solid #f59e0b !important;
            color: #92400e !important;
            font-weight: 600 !important;
        }
        
        .new-file-item:hover {
            background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%) !important;
            border-color: #d97706 !important;
            transform: translateX(4px) !important;
        }
        
        .new-file-item i {
            color: #d97706 !important;
            opacity: 1 !important;
        }
        
        /* Modal z-index fix */
        #newFileModal {
            z-index: 9999 !important;
        }
        
        .modal-backdrop {
            z-index: 9998 !important;
        }
        
        /* File Groups */
        .file-group {
            margin-bottom: 20px;
        }
        
        .file-group-header {
            padding: 8px 12px;
            font-weight: 600;
            font-size: 13px;
            color: #64748b;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            border-radius: 8px;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            border: 1px solid rgba(226, 232, 240, 0.6);
        }
        
        .file-group-header i {
            font-size: 14px;
            opacity: 0.7;
        }
        
        .file-group .file-item {
            margin-left: 16px;
            margin-bottom: 4px;
            padding: 10px 14px;
            border-radius: 8px;
            font-size: 14px;
        }
        
        .file-group .file-item:hover {
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
            border-color: #cbd5e1;
            transform: translateX(2px);
        }
        
        .file-group .file-item.active {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            transform: translateX(2px);
        }
        
        /* Editor Panel */
        .editor-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: rgba(255, 255, 255, 0.95);
            border: 1px solid rgba(226, 232, 240, 0.8);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        
        .editor-panel:hover {
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
            transform: translateY(-2px);
        }
        
        .editor-header {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            padding: 20px;
            border-bottom: 1px solid rgba(226, 232, 240, 0.8);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .editor-title {
            font-weight: 700;
            font-size: 18px;
            color: #1e293b;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .editor-actions {
            display: flex;
            gap: 12px;
        }
        
        .btn {
            padding: 12px 20px;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
            color: white;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
        }
        
        .btn-success {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
            color: white;
        }
        
        .btn-success:hover {
            background: linear-gradient(135deg, #059669 0%, #047857 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
        }
        
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
        }
        
        .editor-content {
            flex: 1;
            position: relative;
        }
        
        /* Info Panel */
        .info-panel {
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            padding: 24px;
            border-radius: 16px;
            margin-bottom: 24px;
            border: 1px solid rgba(226, 232, 240, 0.8);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }
        
        .info-panel h4 {
            margin-top: 0;
            color: #1e293b;
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 16px;
        }
        
        .status-indicator {
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            margin-right: 8px;
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8);
        }
        
        .status-writable {
            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
        }
        
        .status-not-writable {
            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
        }
        
        .file-path {
            font-family: 'JetBrains Mono', 'Fira Code', monospace;
            background: rgba(255, 255, 255, 0.8);
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 13px;
            border: 1px solid rgba(226, 232, 240, 0.8);
        }
        
        /* Empty State */
        .empty-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100%;
            color: #64748b;
            text-align: center;
            padding: 48px;
        }
        
        .empty-state i {
            font-size: 64px;
            margin-bottom: 24px;
            opacity: 0.6;
            color: #94a3b8;
        }
        
        .empty-state h4 {
            font-weight: 700;
            margin-bottom: 12px;
            color: #475569;
        }
        
        /* Split Editor */
        #split-editor {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        
        .split-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: #ffffff;
        }
        
        .split-header {
            padding: 16px 20px;
            font-size: 14px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
            border-bottom: 1px solid rgba(226, 232, 240, 0.8);
        }
        
        .split-panel:first-child .split-header {
            background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
            color: #475569;
        }
        
        .split-panel:last-child .split-header {
            background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
            color: #1e40af;
        }
        
        .split-content {
            flex: 1;
            position: relative;
        }
        
        /* Scrollbar Styling */
        .file-tree::-webkit-scrollbar,
        .editor::-webkit-scrollbar {
            width: 8px;
        }
        
        .file-tree::-webkit-scrollbar-track,
        .editor::-webkit-scrollbar-track {
            background: rgba(241, 245, 249, 0.5);
            border-radius: 4px;
        }
        
        .file-tree::-webkit-scrollbar-thumb,
        .editor::-webkit-scrollbar-thumb {
            background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
            border-radius: 4px;
        }
        
        .file-tree::-webkit-scrollbar-thumb:hover,
        .editor::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
        }
        
        /* Animations */
        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .theme-explorer {
            animation: fadeIn 0.5s ease;
        }
        
        /* Responsive Design */
        @media (max-width: 1200px) {
            .theme-explorer {
                flex-direction: column;
                height: auto;
            }
            
            .file-browser {
                width: 100%;
                margin-bottom: 24px;
            }
            
            .file-tree {
                max-height: 300px;
            }
        }
        
        @media (max-width: 768px) {
            .theme-explorer {
                padding: 16px;
                gap: 16px;
            }
            
            .editor-header {
                flex-direction: column;
                gap: 16px;
                align-items: flex-start;
            }
            
            .editor-actions {
                width: 100%;
                justify-content: space-between;
            }
            
            .btn {
                padding: 10px 16px;
                font-size: 13px;
            }
        }
    </style>
{% endblock %}

{% block body %}
    <meta name="csrf-token" content="{{ csrf_token('delete_file') }}">
    
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <h1 class="mb-4">
                    <i class="bi bi-palette"></i>
                    {{ 'custom_theme_plugin.title'|trans }}
                </h1>
                
                <div class="info-panel">
                    <h4><i class="bi bi-info-circle"></i> {{ 'custom_theme_plugin.info.title'|trans }}</h4>
                    <p>
                        {{ 'custom_theme_plugin.info.description'|trans|raw }}
                    </p>
                    <p>
                        <strong>{{ 'custom_theme_plugin.info.status.title'|trans|raw }}</strong>
                        <span class="status-indicator {% if writable %}status-writable{% else %}status-not-writable{% endif %}"></span>
                        {% if writable %}
                            {{ 'custom_theme_plugin.info.status.success'|trans }}
                        {% else %}
                            {{ 'custom_theme_plugin.info.status.error'|trans|raw }}
                        {% endif %}
                    </p>
                    <p>
                        <strong>{{ 'custom_theme_plugin.info.status.path'|trans }}</strong> <span class="file-path">{{ customThemePath }}</span>
                    </p>
                </div>
                
                <div class="theme-explorer">
                    <!-- File Browser -->
                    <div class="file-browser">
                        <div class="file-browser-header">
                            <i class="bi bi-folder-fill"></i> {{ 'custom_theme_plugin.file_explorer.title'|trans }}
                        </div>
                        <div class="file-tree">
                            <div class="file-item new-file-item" data-file="" onclick="showNewFileModal()">
                                <i class="bi bi-plus-circle-fill"></i>
                                {{ 'custom_theme_plugin.file_explorer.new_file'|trans }}
                            </div>
                            <p class="theme-tree-legend mb-0">
                                <i class="bi bi-diagram-3 me-1"></i>
                                {{ 'custom_theme_plugin.file_explorer.legend_override'|trans }}
                            </p>
                            <hr class="my-3" style="border-color: rgba(226, 232, 240, 0.8);">
                            <div id="theme-tree-root">
                                {{ theme_tree.render_nodes(templateTree) }}
                            </div>
                            <div id="theme-tree-orphans-wrap" class="d-none">
                                <p class="theme-tree-orphans-caption">{{ 'custom_theme_plugin.file_explorer.tree_only_in_override'|trans }}</p>
                                <ul id="theme-tree-orphans" class="theme-tree-list list-unstyled mb-0 ps-0"></ul>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Editor Panel -->
                    <div class="editor-panel">
                        <div class="editor-header">
                            <h5 id="editor-title" class="mb-0">{{ 'custom_theme_plugin.editor.title'|trans }}</h5>
                            <div class="editor-actions">
                                <button id="delete-btn" class="btn btn-danger btn-sm" onclick="deleteCurrentFile()" disabled>
                                    <i class="bi bi-trash"></i>
                                    {{ 'admin.delete'|trans }}
                                </button>
                                <button id="save-btn" class="btn btn-success btn-sm" onclick="saveFile()" disabled>
                                    <i class="bi bi-check-circle"></i>
                                    {{ 'admin.save'|trans }}
                                </button>
                            </div>
                        </div>
                        <div class="editor-content">
                            <div class="empty-state" id="empty-state">
                                <i class="bi bi-file-earmark-text"></i>
                                <h4>{{ 'custom_theme_plugin.editor.no_file_chosen.title'|trans }}</h4>
                                <p>{{ 'custom_theme_plugin.editor.no_file_chosen.text'|trans }}</p>
                            </div>
                            
                            <!-- Split Editor Container -->
                            <div id="split-editor" style="display: none; height: 100%;">
                                <!-- Original File Viewer (Top) -->
                                <div class="split-panel" style="height: 50%; border-bottom: 1px solid #dee2e6;">
                                    <div class="split-header" style="background: #f8f9fa; padding: 8px 12px; border-bottom: 1px solid #dee2e6; font-size: 12px; color: #6c757d;">
                                        <i class="bi bi-eye"></i> {{ 'custom_theme_plugin.editor.original_terraflow_cms'|trans }}
                                    </div>
                                    <div class="split-content" style="height: calc(100% - 40px);">
                                        <textarea id="original-editor" class="original-textarea" style="display: none;" readonly></textarea>
                                    </div>
                                </div>
                                
                                <!-- Custom File Editor (Bottom) -->
                                <div class="split-panel" style="height: 50%;">
                                    <div class="split-header" style="background: #e3f2fd; padding: 8px 12px; border-bottom: 1px solid #dee2e6; font-size: 12px; color: #1976d2;">
                                        <i class="bi bi-pencil"></i> {{ 'custom_theme_plugin.editor.custom_template'|trans }}
                                    </div>
                                    <div class="split-content" style="height: calc(100% - 40px);">
                                        <textarea id="code-editor" class="custom-textarea" style="display: none;"></textarea>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- New File Modal -->
    <div class="modal fade mt-5" id="newFileModal" tabindex="-1" aria-labelledby="newFileModalLabel" aria-hidden="true" style="z-index: 9999;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="newFileModalLabel">
                        <i class="bi bi-file-earmark-plus me-2"></i>
                        {{ 'custom_theme_plugin.modal.new_file.title'|trans }}
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="newFileForm">
                        <div class="mb-3">
                            <label for="newFileName" class="form-label">{{ 'custom_theme_plugin.modal.new_file.filename_label'|trans }}</label>
                            <input type="text" class="form-control" id="newFileName"
                                   placeholder="{{ 'custom_theme_plugin.modal.new_file.filename_placeholder'|trans }}" required>
                            <div class="form-text">
                                {{ 'custom_theme_plugin.modal.new_file.filename_help'|trans }}
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="newFilePath" class="form-label">{{ 'custom_theme_plugin.modal.new_file.path_label'|trans }}</label>
                            <input type="text" class="form-control" id="newFilePath" autocomplete="off"
                                   placeholder="{{ 'custom_theme_plugin.modal.new_file.path_placeholder'|trans }}">
                            <div class="form-text">
                                {{ 'custom_theme_plugin.modal.new_file.path_help'|trans }}
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'custom_theme_plugin.modal.new_file.cancel'|trans }}</button>
                    <button type="button" class="btn btn-primary" onclick="createNewFile()">
                        <i class="bi bi-plus-circle me-2"></i>
                        {{ 'custom_theme_plugin.modal.new_file.create'|trans }}
                    </button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascriptBottom %}
    {{ parent() }}
    <script src="/js/admin/code-editor.js"></script>
    <script>
        let currentFile = '';
        let codeEditor = null;
        const customOverridePaths = new Set({{ customFiles|json_encode|raw }});
        const defaultThemePaths = new Set({{ defaultThemePaths|json_encode|raw }});

        const i18n = {
            editorTitleDefault: {{ 'custom_theme_plugin.editor.title'|trans|json_encode|raw }},
            saveSuccess: {{ 'custom_theme_plugin.editor.save_success'|trans|json_encode|raw }},
            deleteSuccess: {{ 'custom_theme_plugin.editor.delete_success'|trans|json_encode|raw }},
            deleteConfirm: {{ 'custom_theme_plugin.editor.delete_confirm'|trans|json_encode|raw }},
            alertFilename: {{ 'custom_theme_plugin.modal.new_file.alert_filename'|trans|json_encode|raw }},
            alertFilenameNoSlashes: {{ 'custom_theme_plugin.modal.new_file.alert_filename_no_slashes'|trans|json_encode|raw }},
            alertInvalidPath: {{ 'custom_theme_plugin.modal.new_file.alert_invalid_path'|trans|json_encode|raw }},
            notificationCreated: {{ 'custom_theme_plugin.modal.new_file.notification_created'|trans|json_encode|raw }},
            errLoadCustom: {{ 'custom_theme_plugin.error.load_custom'|trans|json_encode|raw }},
            errLoadFiles: {{ 'custom_theme_plugin.error.load_files'|trans|json_encode|raw }},
            errSave: {{ 'custom_theme_plugin.error.save'|trans|json_encode|raw }},
            errNoFilename: {{ 'custom_theme_plugin.error.no_filename'|trans|json_encode|raw }},
            noFileSelected: {{ 'custom_theme_plugin.editor.no_file_selected_notification'|trans|json_encode|raw }},
            deleteError: {{ 'custom_theme_plugin.editor.delete_error'|trans|json_encode|raw }},
            unknownError: {{ 'custom_theme_plugin.editor.unknown_error'|trans|json_encode|raw }}
        };

        function themeTreeBasename(p) {
            const parts = p.split('/');
            return parts[parts.length - 1] || p;
        }

        function setFileRowOverrideVisual(path, hasOverride) {
            document.querySelectorAll('.theme-tree-file-item[data-file]').forEach(row => {
                if (row.getAttribute('data-file') !== path) {
                    return;
                }
                const icon = row.querySelector('.file-item-icon');
                row.classList.toggle('file-item--override', hasOverride);
                row.setAttribute('data-has-override', hasOverride ? '1' : '0');
                if (icon) {
                    icon.classList.remove('bi-file-earmark-text', 'bi-pencil-square');
                    icon.classList.add(hasOverride ? 'bi-pencil-square' : 'bi-file-earmark-text');
                }
            });
        }

        function ensureOrphanTreeRow(path) {
            if (defaultThemePaths.has(path)) {
                return;
            }
            let found = false;
            document.querySelectorAll('.theme-tree-file-item[data-file]').forEach(n => {
                if (n.getAttribute('data-file') === path) {
                    found = true;
                }
            });
            if (found) {
                return;
            }
            const wrap = document.getElementById('theme-tree-orphans-wrap');
            const ul = document.getElementById('theme-tree-orphans');
            wrap.classList.remove('d-none');
            const li = document.createElement('li');
            li.className = 'mb-1';
            const div = document.createElement('div');
            div.className = 'file-item theme-tree-file-item file-item--override';
            div.setAttribute('data-file', path);
            div.setAttribute('data-has-override', '1');
            div.addEventListener('click', () => selectFileFromEl(div));
            const icon = document.createElement('i');
            icon.className = 'bi bi-pencil-square file-item-icon';
            const span = document.createElement('span');
            span.className = 'theme-tree-file-label text-truncate';
            span.textContent = themeTreeBasename(path);
            div.appendChild(icon);
            div.appendChild(span);
            li.appendChild(div);
            ul.appendChild(li);
        }

        function removeOrphanTreeRowIfNeeded(path) {
            if (defaultThemePaths.has(path)) {
                return;
            }
            document.querySelectorAll('#theme-tree-orphans .theme-tree-file-item[data-file]').forEach(row => {
                if (row.getAttribute('data-file') === path) {
                    row.closest('li')?.remove();
                }
            });
            const ul = document.getElementById('theme-tree-orphans');
            if (ul && ul.children.length === 0) {
                document.getElementById('theme-tree-orphans-wrap').classList.add('d-none');
            }
        }

        function selectFileFromEl(el) {
            const name = el.getAttribute('data-file');
            if (name) {
                selectFile(name);
            }
        }

        function pluginNotify(message, type) {
            if (type === 'danger' && typeof window.showError === 'function') {
                window.showError(message);
                return;
            }
            if (type === 'success' && typeof window.showSuccess === 'function') {
                window.showSuccess(message);
                return;
            }
            if (type === 'warning' && typeof window.showWarning === 'function') {
                window.showWarning(message);
                return;
            }
            if (typeof window.showInfo === 'function') {
                window.showInfo(message);
            }
        }
        
        function selectFile(filename) {
            currentFile = filename;
            document.getElementById('editor-title').textContent = filename;
            document.getElementById('save-btn').disabled = false;
            document.getElementById('delete-btn').disabled = !customOverridePaths.has(filename);

            document.querySelectorAll('.file-item').forEach(item => {
                item.classList.remove('active');
            });

            document.querySelectorAll('.theme-tree-file-item[data-file]').forEach(item => {
                if (item.getAttribute('data-file') === filename) {
                    item.classList.add('active');
                }
            });

            loadFile(filename);
        }
        
        function loadFile(filename) {
            // Lade zuerst die Original-Datei aus @/default
            fetch(`/admin/custom-theme/load-original?file=${encodeURIComponent(filename)}`)
                .then(response => response.json())
                .then(originalData => {
                    let originalContent = '';
                    if (!originalData.error) {
                        originalContent = originalData.content || '';
                    }
                    
                    // Dann lade die Custom-Datei
                    return fetch(`/admin/custom-theme/load?file=${encodeURIComponent(filename)}`)
                        .then(response => response.json())
                        .then(customData => {
                            let customContent = '';
                            if (customData.error && customData.error === 'Invalid file path') {
                                // Datei existiert nicht: leeren Editor anzeigen
                                customContent = '';
                            } else if (customData.error) {
                                pluginNotify(i18n.errLoadCustom + ': ' + customData.error, 'danger');
                                return;
                            } else {
                                customContent = customData.content || '';
                            }
                            
                            showSplitEditor(originalContent, customContent);
                        });
                })
                .catch(error => {
                    pluginNotify(i18n.errLoadFiles + ': ' + error, 'danger');
                });
        }
        
        function saveFile() {
            if (!currentFile) {
                pluginNotify(i18n.errNoFilename, 'warning');
                return;
            }
            
            const content = codeEditor ? codeEditor.textarea.value : document.getElementById('code-editor').value;
            
            const formData = new FormData();
            formData.append('file', currentFile);
            formData.append('content', content);
            
            fetch('/admin/custom-theme/save', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    pluginNotify(i18n.errSave + ': ' + data.error, 'danger');
                } else {
                    customOverridePaths.add(currentFile);
                    ensureOrphanTreeRow(currentFile);
                    setFileRowOverrideVisual(currentFile, true);
                    document.getElementById('delete-btn').disabled = false;
                    pluginNotify(i18n.saveSuccess, 'success');
                }
            })
            .catch(error => {
                pluginNotify(i18n.errSave + ': ' + error, 'danger');
            });
        }
        
        function showNewFileModal() {
            // Modal öffnen
            const modal = new bootstrap.Modal(document.getElementById('newFileModal'));
            modal.show();
            
            // Form zurücksetzen
            document.getElementById('newFileForm').reset();
            document.getElementById('newFileName').focus();
        }
        
        function createNewFile() {
            const filename = document.getElementById('newFileName').value.trim();
            let pathPrefix = document.getElementById('newFilePath').value.trim().replace(/\\/g, '/').replace(/^\/+|\/+$/g, '');

            if (!filename) {
                pluginNotify(i18n.alertFilename, 'warning');
                return;
            }

            if (filename.includes('/') || filename.includes('\\')) {
                pluginNotify(i18n.alertFilenameNoSlashes, 'warning');
                return;
            }

            if (pathPrefix !== '' && pathPrefix.split('/').some(seg => seg === '..' || seg === '.' || seg === '')) {
                pluginNotify(i18n.alertInvalidPath, 'warning');
                return;
            }

            let fullPath = pathPrefix ? pathPrefix + '/' + filename : filename;
            
            // .html.twig Endung hinzufügen falls nicht vorhanden
            if (!fullPath.endsWith('.html.twig')) {
                fullPath += '.html.twig';
            }
            
            // Modal schließen
            const modal = bootstrap.Modal.getInstance(document.getElementById('newFileModal'));
            modal.hide();
            
            // Datei auswählen und Editor öffnen
            currentFile = fullPath;
            document.getElementById('editor-title').textContent = fullPath;
            document.getElementById('save-btn').disabled = false;
            document.getElementById('delete-btn').disabled = true; // Neue Dateien können nicht gelöscht werden
            showEmptyEditor();
            
            // Erfolgsmeldung
            pluginNotify(i18n.notificationCreated + ': ' + fullPath, 'success');
        }
        
        function deleteCurrentFile() {
            if (!currentFile) {
                pluginNotify(i18n.noFileSelected, 'warning');
                return;
            }
            const deletedPath = currentFile;
            if (!confirm(i18n.deleteConfirm.replace('%filename%', deletedPath))) {
                return;
            }

            const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';

            fetch('{{ path('custom_theme_plugin_delete') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: '_token=' + encodeURIComponent(token) + '&file=' + encodeURIComponent(deletedPath)
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    pluginNotify(i18n.deleteSuccess + ': ' + deletedPath, 'success');

                    customOverridePaths.delete(deletedPath);
                    removeOrphanTreeRowIfNeeded(deletedPath);
                    if (defaultThemePaths.has(deletedPath)) {
                        setFileRowOverrideVisual(deletedPath, false);
                    }

                    currentFile = '';
                    document.getElementById('editor-title').textContent = i18n.editorTitleDefault;
                    document.getElementById('save-btn').disabled = true;
                    document.getElementById('delete-btn').disabled = true;
                    showEmptyEditor();
                } else {
                    pluginNotify(i18n.deleteError + ': ' + (data.error || i18n.unknownError), 'danger');
                }
            })
            .catch(error => {
                pluginNotify(i18n.deleteError + ': ' + error.message, 'danger');
            });
        }
        
        function showSplitEditor(originalContent, customContent) {
            document.getElementById('empty-state').style.display = 'none';
            document.getElementById('split-editor').style.display = 'block';
            
            // Original Editor (readonly)
            const originalTextarea = document.getElementById('original-editor');
            originalTextarea.style.display = 'block';
            originalTextarea.value = originalContent;
            
            if (window.originalCodeEditor) {
                window.originalCodeEditor.wrapper.remove();
            }
            // Manuell Code-Editor für Original initialisieren
            originalTextarea.classList.add('editor');
            window.originalCodeEditor = new CodeEditor(originalTextarea);
            // Setze den Inhalt nach der Initialisierung
            window.originalCodeEditor.editor.innerText = originalContent;
            window.originalCodeEditor.editor.contentEditable = false; // Make readonly
            
            // Custom Editor (editable)
            const customTextarea = document.getElementById('code-editor');
            customTextarea.style.display = 'block';
            customTextarea.value = customContent;
            
            if (codeEditor) {
                codeEditor.wrapper.remove();
            }
            // Manuell Code-Editor für Custom initialisieren
            customTextarea.classList.add('editor');
            codeEditor = new CodeEditor(customTextarea);
            // Setze den Inhalt nach der Initialisierung
            codeEditor.editor.innerText = customContent;
        }
        
        function showEmptyEditor() {
            document.getElementById('empty-state').style.display = 'none';
            document.getElementById('split-editor').style.display = 'block';
            
            // Original Editor (empty)
            const originalTextarea = document.getElementById('original-editor');
            originalTextarea.style.display = 'block';
            originalTextarea.value = '';
            
            if (window.originalCodeEditor) {
                window.originalCodeEditor.wrapper.remove();
            }
            // Manuell Code-Editor für Original initialisieren
            originalTextarea.classList.add('editor');
            window.originalCodeEditor = new CodeEditor(originalTextarea);
            window.originalCodeEditor.editor.contentEditable = false;
            
            // Custom Editor (empty)
            const customTextarea = document.getElementById('code-editor');
            customTextarea.style.display = 'block';
            customTextarea.value = '';
            
            if (codeEditor) {
                codeEditor.wrapper.remove();
            }
            // Manuell Code-Editor für Custom initialisieren
            customTextarea.classList.add('editor');
            codeEditor = new CodeEditor(customTextarea);
        }
        
        // Keyboard shortcuts
        document.addEventListener('keydown', function(e) {
            if (e.ctrlKey && e.key === 's') {
                e.preventDefault();
                saveFile();
            }
        });
    </script>
{% endblock %}