{% extends "base.html" %}
{% from 'partials/frontend_vendor.html' import vendor_monaco_loader %}

{% block title %}Код-редактор - AWM{% endblock %}

{% block extra_head %}
<style>
    .editor-shell {
        border: 1px solid var(--border, #d7dee8);
        border-radius: 14px;
        background: radial-gradient(circle at top right, color-mix(in srgb, var(--primary, #2563eb) 22%, transparent), transparent 38%), var(--surface, #fff);
        box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14);
        overflow: hidden;
    }
    .editor-toolbar {
        position: sticky;
        top: 8px;
        z-index: 15;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding: 12px;
        border-bottom: 1px solid var(--border, #d7dee8);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        background: color-mix(in srgb, var(--surface, #fff) 88%, var(--bg-secondary, #0f172a) 12%);
    }
    html[data-perf="lite"] .editor-toolbar {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
    .toolbar-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
    }
    .toolbar-row.top {
        gap: 10px;
    }
    .toolbar-row.actions {
        gap: 8px;
        padding-top: 2px;
    }
    .action-cluster {
        display: inline-flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
        padding: 6px 8px;
        border: 1px solid var(--border, #d7dee8);
        border-radius: 10px;
        background: color-mix(in srgb, var(--surface, #fff) 94%, #eef2ff 6%);
    }
    .action-cluster__title {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--gray-500, #64748b);
        padding: 0 4px;
        margin-right: 2px;
        white-space: nowrap;
    }
    .editor-tool-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 34px;
        height: auto;
        padding: 6px 10px;
        border-radius: 8px;
        white-space: nowrap;
        font-size: 12px;
        font-weight: 500;
        line-height: 1.2;
        cursor: pointer;
    }
    label.editor-tool-btn {
        margin: 0;
    }
    .editor-tool-btn__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        opacity: 0.88;
    }
    .editor-tool-btn__icon svg {
        width: 16px;
        height: 16px;
        stroke: currentColor;
        fill: none;
        stroke-width: 1.75;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
    .editor-tool-btn__label {
        max-width: 11rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .editor-field-label {
        font-size: 11px;
        font-weight: 600;
        color: var(--gray-600, #64748b);
        white-space: nowrap;
        margin: 0;
    }
    .editor-autosave {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 34px;
        padding: 0 8px;
        font-size: 12px;
        font-weight: 500;
        color: var(--gray-700, #334155);
        cursor: pointer;
        user-select: none;
    }
    .editor-autosave input {
        margin: 0;
    }
    .editor-zoom-chip {
        min-width: 3rem;
        justify-content: center;
        font-variant-numeric: tabular-nums;
        font-weight: 600;
    }
    .toolbar-group {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 6px 8px;
        border: 1px solid var(--border, #d7dee8);
        border-radius: 10px;
        background: color-mix(in srgb, var(--surface, #fff) 90%, #eef2ff 10%);
    }
    .toolbar-chip {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 34px;
        padding: 0 10px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 500;
        color: var(--gray-600, #4b5563);
        background: color-mix(in srgb, var(--surface, #fff) 88%, #e5e7eb 12%);
        white-space: nowrap;
    }
    .toolbar-grow {
        flex: 1;
        min-width: 120px;
    }
    .toolbar-select {
        height: 34px;
        border-radius: 8px;
        border: 1px solid var(--border, #d7dee8);
        padding: 0 8px;
        background: var(--surface, #fff);
        color: inherit;
        min-width: 160px;
    }
    .toolbar-select.scope {
        min-width: 180px;
    }
    .toolbar-select.file {
        min-width: 260px;
    }
    .toolbar-select.lang {
        min-width: 150px;
    }
    .tool-btn {
        min-height: 34px;
        height: auto;
        padding: 6px 10px;
        border-radius: 8px;
        white-space: nowrap;
        font-size: 12px;
        line-height: 1.2;
    }
    .tool-btn-danger {
        background: #fee2e2;
        color: #991b1b;
        border-color: #fecaca;
    }
    .tool-btn-danger:hover {
        background: #fecaca;
    }
    .tool-btn-muted {
        opacity: 0.92;
    }
    .tool-btn-muted:hover {
        opacity: 1;
    }
    .tool-btn.primary-action {
        font-weight: 600;
    }
    .editor-workspace {
        padding: 10px;
    }
    .editor-layout {
        display: grid;
        grid-template-columns: 280px 1fr;
        gap: 10px;
    }
    .editor-layout.tree-collapsed {
        grid-template-columns: 1fr;
    }
    .workspace-tree-panel {
        border: 1px solid var(--border, #d7dee8);
        border-radius: 12px;
        background: var(--surface, #fff);
        min-height: 560px;
        max-height: min(78vh, 820px);
        overflow: auto;
        padding: 8px;
    }
    .workspace-tree-header {
        display: flex;
        gap: 6px;
        margin-bottom: 8px;
        position: sticky;
        top: 0;
        background: var(--surface, #fff);
        padding-bottom: 6px;
        z-index: 2;
    }
    .editor-layout.tree-collapsed .workspace-tree-panel {
        display: none;
    }
    .workspace-tree-item {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 7px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
        user-select: none;
    }
    .workspace-tree-item:hover { background: color-mix(in srgb, var(--primary, #2563eb) 12%, var(--surface, #fff)); }
    .workspace-tree-item.active { background: color-mix(in srgb, var(--primary, #2563eb) 22%, var(--surface, #fff)); color: var(--gray-900, #1e3a8a); }
    .workspace-tree-item.target-dir {
        outline: 1px dashed color-mix(in srgb, var(--primary, #2563eb) 70%, #fff);
        background: color-mix(in srgb, var(--primary, #2563eb) 16%, var(--surface, #fff));
    }
    .workspace-tree-item.drag-over {
        background: color-mix(in srgb, var(--primary, #2563eb) 30%, var(--surface, #fff));
    }
    .editor-tabs {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin-bottom: 8px;
    }
    .editor-tab {
        border: 1px solid var(--border, #d7dee8);
        border-radius: 8px;
        height: 30px;
        padding: 0 8px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: color-mix(in srgb, var(--surface, #fff) 82%, var(--bg-secondary, #f8fafc) 18%);
        cursor: pointer;
        font-size: 12px;
    }
    .editor-tab.active {
        background: color-mix(in srgb, var(--primary, #2563eb) 22%, var(--surface, #fff));
        border-color: color-mix(in srgb, var(--primary, #2563eb) 45%, var(--border, #93c5fd));
    }
    .editor-tab-close { opacity: 0.7; }
    .editor-tab-close:hover { opacity: 1; }
    .editor-status {
        font-size: 11px;
        color: var(--gray-600, #4b5563);
        padding: 7px 10px;
        border-radius: 8px;
        background: var(--surface-muted, #f3f6fa);
        border: 1px solid var(--border, #d7dee8);
        word-break: break-word;
        min-height: 32px;
        display: inline-flex;
        align-items: center;
        max-width: 420px;
    }
    #code-editor-host {
        height: calc(100vh - 260px);
        min-height: 560px;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid var(--border, #d7dee8);
    }
    #code-editor-fallback {
        display: none;
        width: 100%;
        height: calc(100vh - 260px);
        min-height: 560px;
        border: 1px solid var(--border, #d7dee8);
        border-radius: 12px;
        padding: 12px;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
        font-size: 13px;
        line-height: 1.45;
        resize: vertical;
        background: var(--input-bg, #0b1220);
        color: var(--gray-800, #e5e7eb);
    }
    .editor-meta {
        font-size: 12px;
        color: var(--gray-600, #4b5563);
        margin-top: 8px;
    }
    body.editor-focus header,
    body.editor-focus #sidebar-nav {
        display: none !important;
    }
    body.editor-focus .content-area {
        margin-left: 0 !important;
        width: 100% !important;
    }
    body.editor-focus .content-area .container {
        max-width: 100%;
        width: 100%;
        margin: 0;
        padding: 8px;
    }
    body.editor-focus .section-header {
        display: none;
    }
    body.editor-focus #code-editor-host,
    body.editor-focus #code-editor-fallback {
        height: calc(100vh - 92px);
        min-height: calc(100vh - 92px);
    }
    body.editor-standalone .section-header p {
        display: none;
    }
    @media (max-width: 1060px) {
        .editor-toolbar {
            top: 2px;
        }
        .toolbar-select.scope,
        .toolbar-select.file,
        .toolbar-select.lang,
        .toolbar-select {
            min-width: 0;
            flex: 1 1 220px;
        }
        .toolbar-group {
            width: 100%;
            justify-content: flex-start;
        }
        .action-cluster {
            width: 100%;
            flex-wrap: wrap;
        }
        .toolbar-chip {
            justify-content: flex-start;
        }
        #code-editor-host,
        #code-editor-fallback {
            height: calc(100vh - 300px);
        }
        .editor-layout {
            grid-template-columns: 1fr;
        }
        .workspace-tree-panel {
            min-height: 220px;
        }
    }
</style>
<script>window.AWM_VENDOR_MONACO_VS = '/static/vendor/monaco-editor/0.52.2/min/vs';</script>
{{ vendor_monaco_loader() }}
{% endblock %}

{% block content %}
<div class="section-header">
    <h2>Код-редактор</h2>
    <p>Загрузите файл, редактируйте в полноэкранном режиме и скачайте обновленную версию.</p>
</div>

<div class="editor-shell" id="editor-shell">
    <div class="editor-toolbar">
        <div class="toolbar-row top">
            <div class="toolbar-group">
                <label class="editor-field-label" for="workspace-scope-select">Пространство</label>
                <select id="workspace-scope-select" class="toolbar-select scope" title="Выберите личное пространство или группу">
                    <option value="private">Моё пространство</option>
                </select>
                <label class="editor-field-label" for="workspace-file-select">Файл</label>
                <select id="workspace-file-select" class="toolbar-select file" title="Выберите файл из пространства для редактирования">
                    <option value="">Файл не выбран</option>
                </select>
            </div>
            <div class="toolbar-group">
                <label class="editor-field-label" for="editor-language-select">Язык</label>
                <select id="editor-language-select" class="toolbar-select lang" title="Подсветка синтаксиса для текущего файла">
                    <option value="plaintext">plaintext</option>
                </select>
            </div>
            <div class="toolbar-group">
                <label class="editor-field-label" for="editor-theme-select">Тема</label>
                <select id="editor-theme-select" class="toolbar-select lang" title="Цветовая схема редактора Monaco">
                    <option value="night-owl">Night Owl</option>
                </select>
            </div>
            <div class="toolbar-grow"></div>
            <div class="toolbar-chip" id="workspace-current-dir-chip" title="Текущая папка в дереве проекта">/</div>
            <div class="editor-status" id="editor-status" title="Состояние редактора и последнее действие">Файл не загружен</div>
        </div>
        <div class="toolbar-row actions">
            <div class="action-cluster">
                <span class="action-cluster__title">Загрузка</span>
                <label class="btn btn-secondary tool-btn editor-tool-btn" for="editor-file-input" title="Открыть файл с компьютера для редактирования (без сохранения в пространство)">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 20h16"/><path d="M12 4v12"/><path d="m7 11 5 5 5-5"/></svg></span>
                    <span class="editor-tool-btn__label">С ПК</span>
                </label>
                <input id="editor-file-input" type="file" style="display:none;">
                <label class="btn btn-secondary tool-btn editor-tool-btn" for="workspace-upload-file-input" title="Загрузить файл с компьютера в текущее пространство">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg></span>
                    <span class="editor-tool-btn__label">В пространство</span>
                </label>
                <input id="workspace-upload-file-input" type="file" style="display:none;">
                <label class="btn btn-secondary tool-btn editor-tool-btn" for="workspace-upload-project-input" title="Распаковать ZIP-архив проекта в пространство">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 7h16v13H4z"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M12 11v6"/><path d="M9 14h6"/></svg></span>
                    <span class="editor-tool-btn__label">ZIP-проект</span>
                </label>
                <input id="workspace-upload-project-input" type="file" accept=".zip,application/zip" style="display:none;">
            </div>
            <div class="action-cluster">
                <span class="action-cluster__title">Скачать</span>
                <button id="editor-download-btn" class="btn btn-secondary tool-btn editor-tool-btn" disabled title="Скачать текущий файл на компьютер">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 3v12"/><path d="m7 10 5 5 5-5"/><path d="M5 21h14"/></svg></span>
                    <span class="editor-tool-btn__label">Файл</span>
                </button>
                <button id="workspace-download-project-btn" class="btn btn-secondary tool-btn editor-tool-btn" title="Скачать всё пространство как ZIP-архив">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 7h16v13H4z"/><path d="M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M12 11v6"/><path d="m9 14 3 3 3-3"/></svg></span>
                    <span class="editor-tool-btn__label">Проект ZIP</span>
                </button>
            </div>
            <div class="action-cluster">
                <span class="action-cluster__title">Сохранение</span>
                <button id="workspace-save-btn" class="btn btn-primary tool-btn editor-tool-btn primary-action" title="Сохранить текущий файл в пространство">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 21h14a1 1 0 0 0 1-1V8l-4-4H5a1 1 0 0 0-1 1v15a1 1 0 0 0 1 1z"/><path d="M9 21v-6h6v6"/><path d="M9 3v4h6V3"/></svg></span>
                    <span class="editor-tool-btn__label">Сохранить</span>
                </button>
                <label class="editor-autosave" title="Автоматически сохранять изменения через несколько секунд после правки">
                    <input id="workspace-autosave-toggle" type="checkbox">
                    <span>Автосохранение</span>
                </label>
            </div>
            <div class="action-cluster">
                <span class="action-cluster__title">Структура</span>
                <button id="workspace-new-btn" class="btn btn-secondary tool-btn editor-tool-btn tool-btn-muted" title="Создать новый файл в текущей папке">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><path d="M12 18v-6"/><path d="M9 15h6"/></svg></span>
                    <span class="editor-tool-btn__label">Новый файл</span>
                </button>
                <button id="workspace-new-dir-btn" class="btn btn-secondary tool-btn editor-tool-btn tool-btn-muted" title="Создать папку в текущей директории">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 20h16a1 1 0 0 0 1-1V9a1 1 0 0 0-1-1h-6l-2-2H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1z"/><path d="M12 11v6"/><path d="M9 14h6"/></svg></span>
                    <span class="editor-tool-btn__label">Новая папка</span>
                </button>
                <button id="workspace-rename-btn" class="btn btn-secondary tool-btn editor-tool-btn tool-btn-muted" title="Переименовать или переместить файл/папку">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg></span>
                    <span class="editor-tool-btn__label">Переименовать</span>
                </button>
                <button id="workspace-delete-btn" class="btn tool-btn editor-tool-btn tool-btn-danger" disabled title="Удалить выбранный файл или папку из пространства">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg></span>
                    <span class="editor-tool-btn__label">Удалить</span>
                </button>
                <button id="editor-clear-btn" class="btn tool-btn editor-tool-btn tool-btn-danger" title="Очистить текст в редакторе (файл на сервере не удаляется)">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M3 6h18"/><path d="M8 6V4h8v2"/><path d="M6 6l1 14h10l1-14"/><path d="M10 11v6"/><path d="M14 11v6"/></svg></span>
                    <span class="editor-tool-btn__label">Очистить</span>
                </button>
            </div>
            <div class="action-cluster">
                <span class="action-cluster__title">Вид</span>
                <label class="editor-autosave" title="Показать или скрыть дерево файлов слева от редактора">
                    <input id="editor-tree-visible-toggle" type="checkbox" checked>
                    <span>Дерево проекта</span>
                </label>
                <button id="editor-focus-toggle-btn" class="btn btn-secondary tool-btn editor-tool-btn tool-btn-muted" title="Скрыть меню AWM и оставить только редактор">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M4 7h16"/><path d="M7 7V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2"/><path d="M9 12h6"/><path d="M12 9v6"/></svg></span>
                    <span class="editor-tool-btn__label">Без интерфейса</span>
                </button>
                <button id="editor-zoom-out-btn" class="btn btn-secondary tool-btn editor-tool-btn tool-btn-muted" title="Уменьшить шрифт редактора">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/><path d="M8 11h6"/></svg></span>
                    <span class="editor-tool-btn__label">Меньше</span>
                </button>
                <span id="editor-zoom-label" class="toolbar-chip editor-zoom-chip" title="Текущий масштаб шрифта">100%</span>
                <button id="editor-zoom-in-btn" class="btn btn-secondary tool-btn editor-tool-btn tool-btn-muted" title="Увеличить шрифт редактора">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/><path d="M11 8v6"/><path d="M8 11h6"/></svg></span>
                    <span class="editor-tool-btn__label">Больше</span>
                </button>
                <button id="editor-zoom-reset-btn" class="btn btn-secondary tool-btn editor-tool-btn tool-btn-muted" title="Вернуть масштаб шрифта к 100%">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M3 12a9 9 0 1 0 3-6.7"/><path d="M3 4v5h5"/></svg></span>
                    <span class="editor-tool-btn__label">Сброс</span>
                </button>
                <button id="editor-fullscreen-btn" class="btn btn-secondary tool-btn editor-tool-btn tool-btn-muted" title="Развернуть область редактора на весь экран браузера">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M16 3h3a2 2 0 0 1 2 2v3"/><path d="M8 21H5a2 2 0 0 1-2-2v-3"/><path d="M16 21h3a2 2 0 0 0 2-2v-3"/></svg></span>
                    <span class="editor-tool-btn__label">На весь экран</span>
                </button>
                <button id="editor-window-btn" class="btn btn-secondary tool-btn editor-tool-btn tool-btn-muted" title="Открыть редактор в отдельном окне браузера">
                    <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 9h18"/><path d="M8 5V3"/><path d="M16 5V3"/></svg></span>
                    <span class="editor-tool-btn__label">Отдельное окно</span>
                </button>
            </div>
        </div>
    </div>
    <div class="editor-workspace">
        <div class="editor-layout">
            <div class="workspace-tree-panel">
                <div class="workspace-tree-header">
                    <button id="workspace-tree-refresh-btn" class="btn btn-secondary btn-sm editor-tool-btn" type="button" title="Обновить дерево файлов пространства">
                        <span class="editor-tool-btn__icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M21 12a9 9 0 1 1-2.6-6.3"/><path d="M21 3v6h-6"/></svg></span>
                        <span class="editor-tool-btn__label">Обновить</span>
                    </button>
                    <div class="toolbar-chip" style="flex:1;" title="Файлы и папки текущего пространства">Дерево проекта</div>
                </div>
                <div id="workspace-tree"></div>
            </div>
            <div>
                <div class="editor-tabs" id="editor-open-tabs"></div>
                <div id="code-editor-host"></div>
                <textarea id="code-editor-fallback" spellcheck="false" placeholder="Текст редактора..."></textarea>
                <div class="editor-meta" id="editor-meta">Имя: — | Язык: plaintext | Размер: 0 B</div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    const editorState = {
        fileName: '',
        language: 'plaintext',
        themeId: 'night-owl',
        useFallback: false,
        isFocusMode: false,
        workspaceFileId: null,
        currentFileId: null,
        workspaceScope: 'private',
        zoomPercent: 100,
        autosaveEnabled: false,
        workspaceItems: [],
        openTabs: [],
        dirtyFileIds: new Set(),
        suppressDirtyMark: false,
        selectedDirectoryPath: '',
        draggingEntryId: null,
    };
    let monacoEditor = null;
    let languageOptions = [];
    let detachedEditorWindow = null;
    let detachedEditorWindowWatchTimer = null;
    const EDITOR_ZOOM_KEY = 'awm_code_editor_zoom_percent';
    const EDITOR_THEME_KEY = 'awm_code_editor_theme_id';
    const EDITOR_AUTOSAVE_KEY = 'awm_code_editor_autosave';
    const EDITOR_TREE_COLLAPSED_KEY = 'awm_code_editor_tree_collapsed';
    const MIN_EDITOR_ZOOM = 70;
    const MAX_EDITOR_ZOOM = 220;
    const BASE_MONACO_FONT_SIZE = 14;
    const BASE_FALLBACK_FONT_SIZE = 13;
    const EDITOR_THEMES = [
        {
            id: 'night-owl',
            label: 'Night Owl',
            monaco: 'awm-night-owl',
            fallbackBg: '#011627',
            fallbackColor: '#d6deeb',
            fallbackBorder: '#1e3a5f',
        },
        {
            id: 'dracula',
            label: 'Dracula',
            monaco: 'awm-dracula',
            fallbackBg: '#282a36',
            fallbackColor: '#f8f8f2',
            fallbackBorder: '#44475a',
        },
        {
            id: 'solarized-dark',
            label: 'Solarized Dark',
            monaco: 'awm-solarized-dark',
            fallbackBg: '#002b36',
            fallbackColor: '#93a1a1',
            fallbackBorder: '#073642',
        },
        {
            id: 'github-light',
            label: 'GitHub Light',
            monaco: 'awm-github-light',
            fallbackBg: '#ffffff',
            fallbackColor: '#24292f',
            fallbackBorder: '#d0d7de',
        },
        {
            id: 'hc-black',
            label: 'High Contrast',
            monaco: 'hc-black',
            fallbackBg: '#000000',
            fallbackColor: '#ffffff',
            fallbackBorder: '#ffffff',
        },
    ];

    const MONACO_LANGUAGES = [
        'plaintext', 'abap', 'apex', 'azcli', 'bat', 'bicep', 'c', 'clojure', 'coffeescript',
        'cpp', 'csharp', 'css', 'dart', 'dockerfile', 'fsharp', 'go', 'graphql', 'handlebars',
        'hcl', 'html', 'ini', 'java', 'javascript', 'json', 'julia', 'kotlin', 'less', 'lua',
        'markdown', 'msdax', 'mysql', 'objective-c', 'pascal', 'perl', 'php', 'pgsql', 'plaintext',
        'postiats', 'powerquery', 'powershell', 'proto', 'pug', 'python', 'r', 'razor', 'redis',
        'redshift', 'ruby', 'rust', 'scala', 'scheme', 'scss', 'shell', 'sol', 'sql', 'swift',
        'tcl', 'typescript', 'vb', 'xml', 'yaml'
    ];

    function detectLanguageByFileName(fileName) {
        const normalized = String(fileName || '').toLowerCase();
        if (normalized.endsWith('.tf') || normalized.endsWith('.tfvars') || normalized.endsWith('.tfvars.json')) return 'hcl';
        if (normalized.endsWith('dockerfile')) return 'dockerfile';
        const ext = normalized.split('.').pop() || '';
        const extMap = {
            py: 'python',
            js: 'javascript',
            ts: 'typescript',
            jsx: 'javascript',
            tsx: 'typescript',
            json: 'json',
            yml: 'yaml',
            yaml: 'yaml',
            sh: 'shell',
            bash: 'shell',
            ini: 'ini',
            cfg: 'ini',
            conf: 'ini',
            md: 'markdown',
            html: 'html',
            css: 'css',
            xml: 'xml',
            sql: 'sql',
            go: 'go',
            rs: 'rust',
            java: 'java',
            kt: 'kotlin',
            kts: 'kotlin',
            c: 'c',
            h: 'c',
            cpp: 'cpp',
            hpp: 'cpp',
            cs: 'csharp',
            php: 'php',
            rb: 'ruby',
            swift: 'swift',
            scala: 'scala',
            vue: 'html',
            svelte: 'html',
            ps1: 'powershell',
            psm1: 'powershell',
            toml: 'ini',
            env: 'shell',
            txt: 'plaintext',
        };
        return extMap[ext] || 'plaintext';
    }

    function humanSize(bytes) {
        const value = Number(bytes || 0);
        if (value < 1024) return `${value} B`;
        if (value < 1024 * 1024) return `${(value / 1024).toFixed(1)} KB`;
        return `${(value / (1024 * 1024)).toFixed(2)} MB`;
    }

    function setStatus(text) {
        const status = document.getElementById('editor-status');
        if (status) status.textContent = text;
    }

    function getThemeConfig(themeId) {
        const found = EDITOR_THEMES.find((item) => item.id === themeId);
        return found || EDITOR_THEMES[0];
    }

    function defineMonacoThemes() {
        if (!window.monaco || !window.monaco.editor) return;
        window.monaco.editor.defineTheme('awm-night-owl', {
            base: 'vs-dark',
            inherit: true,
            rules: [
                { token: 'comment', foreground: '637777' },
                { token: 'string', foreground: 'ecc48d' },
                { token: 'keyword', foreground: 'c792ea' },
                { token: 'number', foreground: 'f78c6c' },
                { token: 'type.identifier', foreground: '82aaff' },
            ],
            colors: {
                'editor.background': '#011627',
                'editor.foreground': '#d6deeb',
                'editorLineNumber.foreground': '#4b6479',
                'editorLineNumber.activeForeground': '#c8d3f5',
                'editorCursor.foreground': '#80a4c2',
                'editor.selectionBackground': '#1d3b53',
            },
        });
        window.monaco.editor.defineTheme('awm-dracula', {
            base: 'vs-dark',
            inherit: true,
            rules: [
                { token: 'comment', foreground: '6272a4' },
                { token: 'string', foreground: 'f1fa8c' },
                { token: 'keyword', foreground: 'ff79c6' },
                { token: 'number', foreground: 'bd93f9' },
                { token: 'type.identifier', foreground: '8be9fd' },
            ],
            colors: {
                'editor.background': '#282a36',
                'editor.foreground': '#f8f8f2',
                'editorLineNumber.foreground': '#6272a4',
                'editorLineNumber.activeForeground': '#f8f8f2',
                'editorCursor.foreground': '#f8f8f2',
                'editor.selectionBackground': '#44475a',
            },
        });
        window.monaco.editor.defineTheme('awm-solarized-dark', {
            base: 'vs-dark',
            inherit: true,
            rules: [
                { token: 'comment', foreground: '586e75' },
                { token: 'string', foreground: '2aa198' },
                { token: 'keyword', foreground: '859900' },
                { token: 'number', foreground: 'd33682' },
                { token: 'type.identifier', foreground: '268bd2' },
            ],
            colors: {
                'editor.background': '#002b36',
                'editor.foreground': '#93a1a1',
                'editorLineNumber.foreground': '#586e75',
                'editorLineNumber.activeForeground': '#eee8d5',
                'editorCursor.foreground': '#93a1a1',
                'editor.selectionBackground': '#073642',
            },
        });
        window.monaco.editor.defineTheme('awm-github-light', {
            base: 'vs',
            inherit: true,
            rules: [
                { token: 'comment', foreground: '6e7781' },
                { token: 'string', foreground: '0a3069' },
                { token: 'keyword', foreground: 'cf222e' },
                { token: 'number', foreground: '953800' },
                { token: 'type.identifier', foreground: '0550ae' },
            ],
            colors: {
                'editor.background': '#ffffff',
                'editor.foreground': '#24292f',
                'editorLineNumber.foreground': '#8c959f',
                'editorLineNumber.activeForeground': '#24292f',
                'editorCursor.foreground': '#24292f',
                'editor.selectionBackground': '#b6d7ff',
            },
        });
    }

    function populateThemeSelect() {
        const select = document.getElementById('editor-theme-select');
        if (!select) return;
        select.innerHTML = EDITOR_THEMES
            .map((item) => `<option value="${escapeHtml(item.id)}">${escapeHtml(item.label)}</option>`)
            .join('');
        select.value = editorState.themeId;
    }

    function applyEditorTheme(themeId, persist = true) {
        const theme = getThemeConfig(themeId);
        editorState.themeId = theme.id;
        const select = document.getElementById('editor-theme-select');
        if (select) select.value = theme.id;
        if (!editorState.useFallback && window.monaco && window.monaco.editor) {
            window.monaco.editor.setTheme(theme.monaco);
        }
        const fallback = document.getElementById('code-editor-fallback');
        if (fallback) {
            fallback.style.background = theme.fallbackBg;
            fallback.style.color = theme.fallbackColor;
            fallback.style.borderColor = theme.fallbackBorder;
        }
        if (persist) {
            try { localStorage.setItem(EDITOR_THEME_KEY, theme.id); } catch (e) {}
        }
    }

    function normalizeZoomPercent(value) {
        const n = Number(value);
        if (!Number.isFinite(n)) return 100;
        return Math.max(MIN_EDITOR_ZOOM, Math.min(MAX_EDITOR_ZOOM, Math.round(n)));
    }

    function updateZoomLabel() {
        const label = document.getElementById('editor-zoom-label');
        if (label) label.textContent = `${editorState.zoomPercent}%`;
    }

    function persistZoomPercent() {
        try {
            localStorage.setItem(EDITOR_ZOOM_KEY, String(editorState.zoomPercent));
        } catch (e) {}
    }

    function applyEditorZoom(zoomPercent, persist = true) {
        editorState.zoomPercent = normalizeZoomPercent(zoomPercent);
        const factor = editorState.zoomPercent / 100;
        if (!editorState.useFallback && monacoEditor) {
            monacoEditor.updateOptions({
                fontSize: Math.max(10, Math.round(BASE_MONACO_FONT_SIZE * factor)),
            });
            monacoEditor.layout();
        }
        const fallback = document.getElementById('code-editor-fallback');
        if (fallback) {
            fallback.style.fontSize = `${Math.max(10, Math.round(BASE_FALLBACK_FONT_SIZE * factor))}px`;
        }
        updateZoomLabel();
        if (persist) persistZoomPercent();
    }

    function adjustEditorZoom(step) {
        applyEditorZoom(editorState.zoomPercent + step, true);
    }

    function stopDetachedWindowWatcher() {
        if (detachedEditorWindowWatchTimer) {
            window.clearInterval(detachedEditorWindowWatchTimer);
            detachedEditorWindowWatchTimer = null;
        }
    }

    function startDetachedWindowWatcher() {
        stopDetachedWindowWatcher();
        if (!detachedEditorWindow) return;
        detachedEditorWindowWatchTimer = window.setInterval(() => {
            if (!detachedEditorWindow || detachedEditorWindow.closed) {
                detachedEditorWindow = null;
                stopDetachedWindowWatcher();
                setStatus('Окно редактора закрыто. Возврат в основное окно.');
                try { window.focus(); } catch (e) {}
            }
        }, 700);
    }

    async function apiCall(method, url, body = null) {
        const response = await fetch(url, {
            method,
            headers: body ? { 'Content-Type': 'application/json' } : undefined,
            body: body ? JSON.stringify(body) : undefined,
        });
        const text = await response.text();
        let data = {};
        try {
            data = text ? JSON.parse(text) : {};
        } catch (e) {
            data = { detail: text };
        }
        if (!response.ok) {
            throw new Error(data?.detail || `HTTP ${response.status}`);
        }
        return data;
    }

    function updateMeta(contentLength = 0) {
        const meta = document.getElementById('editor-meta');
        if (!meta) return;
        meta.innerHTML = `Имя: ${escapeHtml(editorState.fileName || '—')} | Язык: ${escapeHtml(editorState.language)} | Размер: ${escapeHtml(humanSize(contentLength))}`;
    }

    function getCurrentEditorValue() {
        if (editorState.useFallback) {
            const fallback = document.getElementById('code-editor-fallback');
            return fallback ? fallback.value : '';
        }
        return monacoEditor ? monacoEditor.getValue() : '';
    }

    function setCurrentEditorValue(value) {
        editorState.suppressDirtyMark = true;
        if (editorState.useFallback) {
            const fallback = document.getElementById('code-editor-fallback');
            if (fallback) fallback.value = value;
            editorState.suppressDirtyMark = false;
            return;
        }
        if (monacoEditor) monacoEditor.setValue(value);
        editorState.suppressDirtyMark = false;
    }

    function setEditorLanguage(language) {
        editorState.language = language || 'plaintext';
        const select = document.getElementById('editor-language-select');
        if (select) select.value = editorState.language;
        if (!editorState.useFallback && monacoEditor && window.monaco) {
            window.monaco.editor.setModelLanguage(monacoEditor.getModel(), editorState.language);
        }
    }

    function currentSelectedGroupId() {
        const scopeSelect = document.getElementById('workspace-scope-select');
        const value = String(scopeSelect?.value || 'private');
        if (value === 'private') return null;
        if (value.startsWith('group:')) {
            const gid = Number(value.split(':')[1] || 0);
            return Number.isFinite(gid) && gid > 0 ? gid : null;
        }
        return null;
    }

    function currentScopeQuery() {
        const gid = currentSelectedGroupId();
        return gid ? `?group_id=${gid}` : '';
    }

    function applyWorkspaceSelectionState() {
        const delBtn = document.getElementById('workspace-delete-btn');
        if (delBtn) delBtn.disabled = !editorState.workspaceFileId;
    }

    function getDirPathOfPath(path) {
        const raw = String(path || '').replace(/\\/g, '/').trim();
        if (!raw || !raw.includes('/')) return '';
        const parts = raw.split('/').filter(Boolean);
        if (parts.length <= 1) return '';
        return parts.slice(0, -1).join('/');
    }

    function setEditorToolBtnLabel(btnId, label, title) {
        const btn = document.getElementById(btnId);
        if (!btn) return;
        const labelEl = btn.querySelector('.editor-tool-btn__label');
        if (labelEl) labelEl.textContent = label;
        else btn.textContent = label;
        if (title) btn.title = title;
    }

    function joinPath(parent, name) {
        const p = String(parent || '').trim();
        const n = String(name || '').trim();
        if (!p) return n;
        return `${p}/${n}`;
    }

    function updateCurrentDirChip() {
        const chip = document.getElementById('workspace-current-dir-chip');
        if (!chip) return;
        const dir = editorState.selectedDirectoryPath || '/';
        chip.textContent = dir;
        chip.title = `Текущая папка: ${dir}`;
    }

    function setTreeCollapsed(collapsed, persist = true) {
        const layout = document.querySelector('.editor-layout');
        const treeToggle = document.getElementById('editor-tree-visible-toggle');
        if (!layout) return;
        layout.classList.toggle('tree-collapsed', !!collapsed);
        if (treeToggle) treeToggle.checked = !collapsed;
        if (persist) {
            try { localStorage.setItem(EDITOR_TREE_COLLAPSED_KEY, collapsed ? '1' : '0'); } catch (e) {}
        }
    }

    function scheduleAutosave() {
        if (!editorState.autosaveEnabled || !editorState.workspaceFileId) return;
        if (window.__awmAutosaveTimer) window.clearTimeout(window.__awmAutosaveTimer);
        window.__awmAutosaveTimer = window.setTimeout(() => {
            saveWorkspaceFile(true);
        }, 700);
    }

    function markCurrentDirty() {
        if (!editorState.workspaceFileId) return;
        editorState.dirtyFileIds.add(editorState.workspaceFileId);
        renderOpenTabs();
        scheduleAutosave();
    }

    function renderOpenTabs() {
        const holder = document.getElementById('editor-open-tabs');
        if (!holder) return;
        holder.innerHTML = editorState.openTabs.map((tab) => {
            const isActive = tab.id === editorState.currentFileId;
            const isDirty = editorState.dirtyFileIds.has(tab.id);
            return `<div class="editor-tab ${isActive ? 'active' : ''}" data-tab-id="${tab.id}">
                <span>${escapeHtml(tab.name)}${isDirty ? ' *' : ''}</span>
                <span class="editor-tab-close" data-tab-close="${tab.id}">✕</span>
            </div>`;
        }).join('');
        holder.querySelectorAll('[data-tab-id]').forEach((el) => {
            el.addEventListener('click', async (ev) => {
                const closeId = ev.target?.getAttribute('data-tab-close');
                if (closeId) {
                    const idNum = Number(closeId);
                    editorState.openTabs = editorState.openTabs.filter((t) => t.id !== idNum);
                    if (editorState.currentFileId === idNum) {
                        const next = editorState.openTabs[editorState.openTabs.length - 1];
                        if (next) await openWorkspaceFile(next.id);
                    }
                    renderOpenTabs();
                    return;
                }
                const idNum = Number(el.getAttribute('data-tab-id'));
                if (idNum) await openWorkspaceFile(idNum);
            });
        });
    }

    function buildTree(items) {
        const root = { dirs: new Map(), files: [] };
        const ensureDir = (node, name) => {
            if (!node.dirs.has(name)) node.dirs.set(name, { dirs: new Map(), files: [], name });
            return node.dirs.get(name);
        };
        items.forEach((item) => {
            const path = String(item.path || item.name || '').split('/').filter(Boolean);
            let node = root;
            for (let i = 0; i < path.length; i += 1) {
                const part = path[i];
                const isLeaf = i === path.length - 1;
                if (isLeaf && !item.is_directory) {
                    node.files.push({ ...item, baseName: part });
                } else {
                    node = ensureDir(node, part);
                }
            }
        });
        return root;
    }

    function renderWorkspaceTree() {
        const holder = document.getElementById('workspace-tree');
        if (!holder) return;
        const tree = buildTree(editorState.workspaceItems || []);
        const isRootSelected = !String(editorState.selectedDirectoryPath || '').trim();
        const renderNode = (node, prefix = '', depth = 0) => {
            const dirNodes = Array.from(node.dirs.entries()).sort((a, b) => a[0].localeCompare(b[0]));
            let html = '';
            dirNodes.forEach(([name, child]) => {
                const dirPath = prefix ? `${prefix}/${name}` : name;
                const dirRef = (editorState.workspaceItems || []).find((it) => it.is_directory && (it.path || it.name) === dirPath);
                const isActiveDir = dirRef && Number(dirRef.id) === Number(editorState.currentFileId);
                const isTargetDir = String(editorState.selectedDirectoryPath || '') === dirPath;
                html += `<div class="workspace-tree-item ${isActiveDir ? 'active' : ''} ${isTargetDir ? 'target-dir' : ''}" style="padding-left:${8 + depth * 14}px;" data-dir-path="${escapeHtml(dirPath)}" data-entry-id="${dirRef ? dirRef.id : ''}" draggable="${dirRef ? 'true' : 'false'}">📁 ${escapeHtml(name)}</div>`;
                html += renderNode(child, dirPath, depth + 1);
            });
            node.files.sort((a, b) => String(a.baseName).localeCompare(String(b.baseName))).forEach((f) => {
                const isActive = Number(f.id) === Number(editorState.currentFileId);
                html += `<div class="workspace-tree-item ${isActive ? 'active' : ''}" style="padding-left:${8 + depth * 14}px;" data-file-id="${f.id}" data-entry-id="${f.id}" draggable="true">📄 ${escapeHtml(f.baseName || f.name)}</div>`;
            });
            return html;
        };
        holder.innerHTML = `<div class="workspace-tree-item ${isRootSelected ? 'active target-dir' : ''}" data-dir-path="" data-entry-id="__root__">📁 /</div>` + renderNode(tree);
        holder.querySelectorAll('[data-file-id]').forEach((el) => {
            el.addEventListener('click', async () => {
                const fileId = Number(el.getAttribute('data-file-id') || 0);
                if (fileId) await openWorkspaceFile(fileId);
            });
        });
        holder.querySelectorAll('[data-dir-path]').forEach((el) => {
            el.addEventListener('click', () => {
                const path = el.getAttribute('data-dir-path') || '';
                const dir = (editorState.workspaceItems || []).find((it) => it.is_directory && (it.path || it.name) === path);
                editorState.workspaceFileId = dir ? Number(dir.id) : null;
                editorState.currentFileId = dir ? Number(dir.id) : null;
                editorState.selectedDirectoryPath = path;
                applyWorkspaceSelectionState();
                updateCurrentDirChip();
                renderWorkspaceTree();
                setStatus(`Выбрана папка: ${path}`);
            });
            el.addEventListener('dragover', (ev) => {
                ev.preventDefault();
                el.classList.add('drag-over');
            });
            el.addEventListener('dragleave', () => {
                el.classList.remove('drag-over');
            });
            el.addEventListener('drop', async (ev) => {
                ev.preventDefault();
                el.classList.remove('drag-over');
                const targetDir = el.getAttribute('data-dir-path') || '';
                const draggedId = Number(ev.dataTransfer?.getData('text/plain') || 0);
                if (draggedId && targetDir) {
                    await moveWorkspaceEntry(draggedId, targetDir);
                }
            });
        });
        const rootEl = holder.querySelector('[data-entry-id="__root__"]');
        if (rootEl) {
            rootEl.addEventListener('click', () => {
                editorState.selectedDirectoryPath = '';
                editorState.workspaceFileId = null;
                editorState.currentFileId = null;
                applyWorkspaceSelectionState();
                updateCurrentDirChip();
                renderWorkspaceTree();
                setStatus('Выбран корень проекта: /');
            });
            rootEl.addEventListener('dragover', (ev) => {
                ev.preventDefault();
                rootEl.classList.add('drag-over');
            });
            rootEl.addEventListener('dragleave', () => {
                rootEl.classList.remove('drag-over');
            });
            rootEl.addEventListener('drop', async (ev) => {
                ev.preventDefault();
                rootEl.classList.remove('drag-over');
                const draggedId = Number(ev.dataTransfer?.getData('text/plain') || 0);
                if (draggedId) {
                    await moveWorkspaceEntry(draggedId, '');
                }
            });
        }
        holder.querySelectorAll('[data-entry-id]').forEach((el) => {
            el.addEventListener('dragstart', (ev) => {
                const entryId = String(el.getAttribute('data-entry-id') || '').trim();
                if (!entryId || entryId === '__root__') return;
                editorState.draggingEntryId = Number(entryId);
                ev.dataTransfer?.setData('text/plain', entryId);
                ev.dataTransfer.effectAllowed = 'move';
            });
        });
    }

    async function loadWorkspaceScopes() {
        const scopeSelect = document.getElementById('workspace-scope-select');
        if (!scopeSelect) return;
        try {
            const groups = await apiCall('GET', '/api/groups');
            const items = Array.isArray(groups) ? groups : [];
            const groupOptions = items.map((g) => `<option value="group:${g.id}">${escapeHtml(g.icon || '👥')} ${escapeHtml(g.name)}</option>`).join('');
            scopeSelect.innerHTML = `<option value="private">Моё пространство</option>${groupOptions}`;
            scopeSelect.value = editorState.workspaceScope || 'private';
        } catch (e) {
            scopeSelect.innerHTML = '<option value="private">Моё пространство</option>';
            scopeSelect.value = 'private';
        }
    }

    async function loadWorkspaceFiles(selectFileId = null) {
        const fileSelect = document.getElementById('workspace-file-select');
        if (!fileSelect) return;
        const query = currentScopeQuery();
        try {
            const data = await apiCall('GET', `/api/code-workspace${query}`);
            const items = Array.isArray(data.items) ? data.items : [];
            editorState.workspaceItems = items;
            fileSelect.innerHTML = '<option value="">Файл не выбран</option>' + items
                .filter((item) => !item.is_directory)
                .map((item) => `<option value="${item.id}">${escapeHtml(item.path || item.name)}${item.group_id ? ' (group)' : ''}</option>`)
                .join('');
            if (selectFileId) {
                fileSelect.value = String(selectFileId);
            }
            renderWorkspaceTree();
        } catch (e) {
            fileSelect.innerHTML = '<option value="">Ошибка загрузки файлов</option>';
            setStatus(`Ошибка пространства: ${e.message}`);
        }
    }

    async function openWorkspaceFile(fileId) {
        if (!fileId) return;
        try {
            const item = await apiCall('GET', `/api/code-workspace/${fileId}`);
            if (item.is_directory) {
                setStatus('Это папка. Выберите файл для редактирования.');
                return;
            }
            editorState.workspaceFileId = Number(item.id);
            editorState.currentFileId = Number(item.id);
            editorState.fileName = item.name || 'file.txt';
            editorState.selectedDirectoryPath = getDirPathOfPath(item.path || item.name || '');
            setEditorLanguage(item.language || detectLanguageByFileName(editorState.fileName));
            setCurrentEditorValue(item.content || '');
            updateMeta(getCurrentEditorValue().length);
            if (!editorState.openTabs.some((tab) => tab.id === editorState.currentFileId)) {
                editorState.openTabs.push({ id: editorState.currentFileId, name: editorState.fileName });
            }
            renderOpenTabs();
            renderWorkspaceTree();
            updateCurrentDirChip();
            setStatus(`Открыт файл пространства: ${editorState.fileName}`);
            const downloadBtn = document.getElementById('editor-download-btn');
            if (downloadBtn) downloadBtn.disabled = false;
            applyWorkspaceSelectionState();
        } catch (e) {
            setStatus(`Ошибка открытия файла: ${e.message}`);
        }
    }

    async function createNewWorkspaceFile(initialContent = '') {
        const suggestedName = await awmPrompt('Имя нового файла', 'new-file.txt');
        if (!suggestedName) return;
        const name = suggestedName.trim();
        if (!name) return;
        const path = joinPath(editorState.selectedDirectoryPath, name);
        try {
            const language = detectLanguageByFileName(path);
            const payload = {
                path,
                content: String(initialContent ?? ''),
                language,
                group_id: currentSelectedGroupId(),
            };
            const created = await apiCall('POST', '/api/code-workspace', payload);
            editorState.workspaceFileId = Number(created.id);
            editorState.currentFileId = Number(created.id);
            editorState.fileName = path;
            await loadWorkspaceFiles(editorState.workspaceFileId);
            await openWorkspaceFile(editorState.workspaceFileId);
            applyWorkspaceSelectionState();
            setStatus(`Файл создан в пространстве: ${path}`);
        } catch (e) {
            setStatus(`Ошибка создания файла: ${e.message}`);
        }
    }

    async function renameWorkspaceEntry() {
        if (!editorState.workspaceFileId) {
            setStatus('Сначала выберите файл или папку');
            return;
        }
        const current = editorState.workspaceItems.find((it) => Number(it.id) === Number(editorState.workspaceFileId));
        if (!current) return;
        const currentPath = current.path || current.name || '';
        const currentDir = current.is_directory ? getDirPathOfPath(currentPath) : getDirPathOfPath(currentPath);
        const currentBase = String(currentPath).split('/').filter(Boolean).pop() || currentPath;
        const nextName = await awmPrompt('Новое имя', currentBase);
        if (!nextName || !nextName.trim()) return;
        const nextPath = joinPath(currentDir, nextName.trim());
        try {
            await apiCall('PUT', `/api/code-workspace/${editorState.workspaceFileId}`, {
                path: nextPath.trim(),
                language: current.is_directory ? 'plaintext' : (editorState.language || 'plaintext'),
                group_id: currentSelectedGroupId(),
            });
            editorState.fileName = nextPath.trim();
            await loadWorkspaceFiles(editorState.workspaceFileId);
            setStatus(`Переименовано: ${nextPath.trim()}`);
        } catch (e) {
            setStatus(`Ошибка переименования: ${e.message}`);
        }
    }

    async function downloadWorkspaceProject() {
        try {
            const response = await fetch(`/api/code-workspace/ops/project/download${currentScopeQuery()}`);
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            const blob = await response.blob();
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'awm-workspace.zip';
            document.body.appendChild(a);
            a.click();
            a.remove();
            URL.revokeObjectURL(url);
            setStatus('Архив проекта скачан');
        } catch (e) {
            setStatus(`Ошибка скачивания проекта: ${e.message}`);
        }
    }

    async function uploadWorkspaceProject(file) {
        if (!file) return;
        try {
            const form = new FormData();
            form.append('archive_file', file);
            const res = await fetch(`/api/code-workspace/ops/project/upload${currentScopeQuery()}`, {
                method: 'POST',
                body: form,
            });
            const data = await res.json();
            if (!res.ok) {
                throw new Error(data?.detail || `HTTP ${res.status}`);
            }
            await loadWorkspaceFiles(editorState.workspaceFileId);
            setStatus(`Проект импортирован: создано ${data.created || 0}, обновлено ${data.updated || 0}`);
        } catch (e) {
            setStatus(`Ошибка импорта проекта: ${e.message}`);
        }
    }

    async function uploadWorkspaceSingleFile(file) {
        if (!file) return;
        try {
            const form = new FormData();
            form.append('file', file);
            const targetName = await awmPrompt('Имя файла', file.name || 'uploaded.txt');
            const params = new URLSearchParams();
            const gid = currentSelectedGroupId();
            if (gid) params.set('group_id', String(gid));
            if (targetName) params.set('target_path', joinPath(editorState.selectedDirectoryPath, targetName));
            const query = params.toString() ? `?${params.toString()}` : '';
            const res = await fetch(`/api/code-workspace/ops/upload-file${query}`, {
                method: 'POST',
                body: form,
            });
            const data = await res.json();
            if (!res.ok) throw new Error(data?.detail || `HTTP ${res.status}`);
            await loadWorkspaceFiles(Number(data.id || 0));
            if (data.id) await openWorkspaceFile(Number(data.id));
            setStatus('Файл импортирован в проект');
        } catch (e) {
            setStatus(`Ошибка импорта файла: ${e.message}`);
        }
    }

    async function createWorkspaceDirectory() {
        const suggested = await awmPrompt('Имя новой папки', 'new-folder');
        if (!suggested) return;
        const path = joinPath(editorState.selectedDirectoryPath, suggested.trim());
        if (!path.trim()) return;
        try {
            await apiCall('POST', '/api/code-workspace', {
                path,
                is_directory: true,
                group_id: currentSelectedGroupId(),
            });
            await loadWorkspaceFiles(editorState.workspaceFileId);
            setStatus(`Папка создана: ${path}`);
        } catch (e) {
            setStatus(`Ошибка создания папки: ${e.message}`);
        }
    }

    async function moveWorkspaceEntry(entryId, targetDirPath) {
        const item = (editorState.workspaceItems || []).find((it) => Number(it.id) === Number(entryId));
        if (!item) return;
        const currentPath = String(item.path || item.name || '');
        const baseName = currentPath.split('/').filter(Boolean).pop() || currentPath;
        const nextPath = joinPath(targetDirPath, baseName);
        if (!nextPath || nextPath === currentPath) return;
        if (item.is_directory && (targetDirPath === currentPath || targetDirPath.startsWith(`${currentPath}/`))) {
            setStatus('Нельзя переместить папку внутрь самой себя');
            return;
        }
        try {
            await apiCall('PUT', `/api/code-workspace/${entryId}`, {
                path: nextPath,
                group_id: currentSelectedGroupId(),
                language: item.is_directory ? 'plaintext' : (item.language || editorState.language || 'plaintext'),
            });
            if (Number(editorState.currentFileId) === Number(entryId)) {
                editorState.fileName = nextPath;
                editorState.selectedDirectoryPath = getDirPathOfPath(nextPath);
            }
            await loadWorkspaceFiles(editorState.currentFileId || entryId);
            updateCurrentDirChip();
            setStatus(`Перемещено: ${currentPath} → ${nextPath}`);
        } catch (e) {
            setStatus(`Ошибка перемещения: ${e.message}`);
        }
    }

    async function saveWorkspaceFile(silent = false) {
        const content = getCurrentEditorValue();
        if (!editorState.workspaceFileId) {
            await createNewWorkspaceFile(content);
            return;
        }
        try {
            await apiCall('PUT', `/api/code-workspace/${editorState.workspaceFileId}`, {
                path: editorState.fileName || 'file.txt',
                content,
                language: editorState.language || 'plaintext',
                group_id: currentSelectedGroupId(),
            });
            editorState.dirtyFileIds.delete(editorState.workspaceFileId);
            renderOpenTabs();
            if (!silent) setStatus(`Файл сохранен: ${editorState.fileName}`);
            await loadWorkspaceFiles(editorState.workspaceFileId);
        } catch (e) {
            setStatus(`Ошибка сохранения: ${e.message}`);
        }
    }

    async function deleteWorkspaceFile() {
        if (!editorState.workspaceFileId) return;
        if (!await awmConfirm('Удалить файл из общего пространства?')) return;
        try {
            const deletedId = editorState.workspaceFileId;
            await apiCall('DELETE', `/api/code-workspace/${deletedId}`);
            editorState.workspaceFileId = null;
            editorState.currentFileId = null;
            editorState.openTabs = editorState.openTabs.filter((tab) => tab.id !== deletedId);
            editorState.dirtyFileIds.delete(deletedId);
            await loadWorkspaceFiles(null);
            renderOpenTabs();
            renderWorkspaceTree();
            applyWorkspaceSelectionState();
            setStatus('Файл удален из пространства');
        } catch (e) {
            setStatus(`Ошибка удаления: ${e.message}`);
        }
    }

    function fallbackEditorMode(reasonText) {
        editorState.useFallback = true;
        const host = document.getElementById('code-editor-host');
        const fallback = document.getElementById('code-editor-fallback');
        if (host) host.style.display = 'none';
        if (fallback) fallback.style.display = 'block';
        applyEditorTheme(editorState.themeId, false);
        setStatus(`Упрощенный режим редактора (${reasonText})`);
    }

    function populateLanguageSelect() {
        const select = document.getElementById('editor-language-select');
        if (!select) return;
        const options = (languageOptions.length ? languageOptions : MONACO_LANGUAGES)
            .filter((x, idx, arr) => arr.indexOf(x) === idx)
            .sort();
        select.innerHTML = options.map((lang) => `<option value="${escapeHtml(lang)}">${escapeHtml(lang)}</option>`).join('');
        select.value = editorState.language;
    }

    function setFocusMode(enabled) {
        editorState.isFocusMode = !!enabled;
        document.body.classList.toggle('editor-focus', editorState.isFocusMode);
        setEditorToolBtnLabel(
            'editor-focus-toggle-btn',
            editorState.isFocusMode ? 'Показать меню' : 'Без интерфейса',
            editorState.isFocusMode
                ? 'Вернуть меню и панели AWM'
                : 'Скрыть меню AWM и оставить только редактор',
        );
        if (!editorState.useFallback && monacoEditor) {
            monacoEditor.layout();
            monacoEditor.focus();
        }
    }

    async function toggleEditorFullscreen() {
        const shell = document.getElementById('editor-shell');
        if (!shell) return;
        if (!document.fullscreenElement) {
            await shell.requestFullscreen();
            setEditorToolBtnLabel(
                'editor-fullscreen-btn',
                'Выйти',
                'Выйти из полноэкранного режима',
            );
            setFocusMode(true);
        } else {
            await document.exitFullscreen();
            setEditorToolBtnLabel(
                'editor-fullscreen-btn',
                'На весь экран',
                'Развернуть область редактора на весь экран браузера',
            );
        }
    }

    function openInSeparateWindow() {
        if (detachedEditorWindow && !detachedEditorWindow.closed) {
            try { detachedEditorWindow.focus(); } catch (e) {}
            setStatus('Редактор уже открыт в отдельном окне.');
            return;
        }
        const url = new URL(window.location.href);
        url.searchParams.set('standalone', '1');
        const popup = window.open(
            url.toString(),
            'awm_code_editor_window',
            'popup=yes,width=1400,height=920,resizable=yes,scrollbars=yes'
        );
        if (!popup) {
            setStatus('Не удалось открыть отдельное окно (проверьте блокировку popup).');
            return;
        }
        detachedEditorWindow = popup;
        setStatus('Редактор открыт в отдельном окне. Здесь отображается статус.');
        startDetachedWindowWatcher();
        try { popup.focus(); } catch (e) {}
    }

    function initMonacoEditor() {
        return new Promise((resolve) => {
            if (!window.require || !window.require.config) {
                fallbackEditorMode('Monaco не загрузился');
                resolve();
                return;
            }
            window.require.config({
                paths: { vs: window.AWM_VENDOR_MONACO_VS || '/static/vendor/monaco-editor/0.52.2/min/vs' },
            });
            window.require(['vs/editor/editor.main'], () => {
                const host = document.getElementById('code-editor-host');
                if (!host || !window.monaco) {
                    fallbackEditorMode('контейнер редактора недоступен');
                    resolve();
                    return;
                }
                monacoEditor = window.monaco.editor.create(host, {
                    value: '',
                    language: 'plaintext',
                    theme: 'vs-dark',
                    minimap: { enabled: true },
                    automaticLayout: true,
                    fontSize: 14,
                    tabSize: 2,
                    wordWrap: 'on',
                    smoothScrolling: true,
                    scrollBeyondLastLine: false,
                    bracketPairColorization: { enabled: true },
                    guides: { bracketPairs: true, indentation: true },
                });
                defineMonacoThemes();
                applyEditorTheme(editorState.themeId, false);
                languageOptions = window.monaco.languages.getLanguages().map((item) => item.id);
                populateLanguageSelect();
                monacoEditor.onDidChangeModelContent(() => {
                    updateMeta(getCurrentEditorValue().length);
                    if (editorState.suppressDirtyMark) return;
                    markCurrentDirty();
                });
                setStatus('Редактор готов');
                resolve();
            }, () => {
                fallbackEditorMode('ошибка загрузки Monaco');
                resolve();
            });
        });
    }

    async function openFileToEditor(file) {
        if (!file) return;
        try {
            const text = await file.text();
            editorState.fileName = file.name || 'file.txt';
            setEditorLanguage(detectLanguageByFileName(editorState.fileName));
            setCurrentEditorValue(text);
            updateMeta(text.length);
            setStatus(`Файл загружен: ${editorState.fileName}`);
            const downloadBtn = document.getElementById('editor-download-btn');
            if (downloadBtn) downloadBtn.disabled = false;
        } catch (e) {
            setStatus(`Ошибка чтения файла: ${e?.message || e}`);
        }
    }

    function downloadEditedFile() {
        const content = getCurrentEditorValue();
        const fileName = editorState.fileName || 'edited.txt';
        const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
        const url = URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = fileName;
        document.body.appendChild(a);
        a.click();
        a.remove();
        URL.revokeObjectURL(url);
        setStatus(`Файл подготовлен к скачиванию: ${fileName}`);
    }

    function clearEditor() {
        setCurrentEditorValue('');
        editorState.fileName = '';
        editorState.language = 'plaintext';
        editorState.workspaceFileId = null;
        editorState.currentFileId = null;
        editorState.openTabs = [];
        editorState.dirtyFileIds.clear();
        setEditorLanguage('plaintext');
        updateMeta(0);
        renderOpenTabs();
        renderWorkspaceTree();
        setStatus('Редактор очищен');
        const downloadBtn = document.getElementById('editor-download-btn');
        if (downloadBtn) downloadBtn.disabled = true;
        applyWorkspaceSelectionState();
    }

    document.addEventListener('DOMContentLoaded', async () => {
        const query = new URLSearchParams(window.location.search);
        const standaloneMode = query.get('standalone') === '1';
        const initialScope = query.get('scope') || '';
        const initialWorkspaceFileId = Number(query.get('workspace_file_id') || 0);
        if (standaloneMode) {
            document.body.classList.add('editor-standalone');
            setFocusMode(true);
        }
        if (initialScope === 'private' || initialScope.startsWith('group:')) {
            editorState.workspaceScope = initialScope;
        }
        populateLanguageSelect();
        await initMonacoEditor();
        const fileInput = document.getElementById('editor-file-input');
        const workspaceUploadFileInput = document.getElementById('workspace-upload-file-input');
        const workspaceUploadProjectInput = document.getElementById('workspace-upload-project-input');
        const downloadBtn = document.getElementById('editor-download-btn');
        const workspaceDownloadProjectBtn = document.getElementById('workspace-download-project-btn');
        const clearBtn = document.getElementById('editor-clear-btn');
        const languageSelect = document.getElementById('editor-language-select');
        const themeSelect = document.getElementById('editor-theme-select');
        const focusBtn = document.getElementById('editor-focus-toggle-btn');
        const fullscreenBtn = document.getElementById('editor-fullscreen-btn');
        const windowBtn = document.getElementById('editor-window-btn');
        const zoomInBtn = document.getElementById('editor-zoom-in-btn');
        const zoomOutBtn = document.getElementById('editor-zoom-out-btn');
        const zoomResetBtn = document.getElementById('editor-zoom-reset-btn');
        const zoomRaw = (() => {
            try { return localStorage.getItem(EDITOR_ZOOM_KEY); } catch (e) { return null; }
        })();
        const storedTheme = (() => {
            try { return localStorage.getItem(EDITOR_THEME_KEY); } catch (e) { return null; }
        })();
        if (storedTheme) editorState.themeId = storedTheme;
        editorState.zoomPercent = normalizeZoomPercent(zoomRaw || editorState.zoomPercent);
        populateThemeSelect();
        updateZoomLabel();
        const workspaceScopeSelect = document.getElementById('workspace-scope-select');
        const workspaceFileSelect = document.getElementById('workspace-file-select');
        const workspaceSaveBtn = document.getElementById('workspace-save-btn');
        const workspaceNewBtn = document.getElementById('workspace-new-btn');
        const workspaceNewDirBtn = document.getElementById('workspace-new-dir-btn');
        const workspaceRenameBtn = document.getElementById('workspace-rename-btn');
        const workspaceDeleteBtn = document.getElementById('workspace-delete-btn');
        const autosaveToggle = document.getElementById('workspace-autosave-toggle');
        const treeRefreshBtn = document.getElementById('workspace-tree-refresh-btn');
        const treeVisibleToggle = document.getElementById('editor-tree-visible-toggle');
        if (fileInput) {
            fileInput.addEventListener('change', async (event) => {
                const file = event.target?.files?.[0];
                await openFileToEditor(file);
                event.target.value = '';
            });
        }
        if (workspaceUploadFileInput) {
            workspaceUploadFileInput.addEventListener('change', async (event) => {
                const file = event.target?.files?.[0];
                await uploadWorkspaceSingleFile(file);
                event.target.value = '';
            });
        }
        if (workspaceUploadProjectInput) {
            workspaceUploadProjectInput.addEventListener('change', async (event) => {
                const file = event.target?.files?.[0];
                await uploadWorkspaceProject(file);
                event.target.value = '';
            });
        }
        if (downloadBtn) {
            downloadBtn.addEventListener('click', downloadEditedFile);
        }
        if (workspaceDownloadProjectBtn) {
            workspaceDownloadProjectBtn.addEventListener('click', downloadWorkspaceProject);
        }
        if (clearBtn) {
            clearBtn.addEventListener('click', clearEditor);
        }
        if (languageSelect) {
            languageSelect.addEventListener('change', (event) => {
                setEditorLanguage(event.target.value || 'plaintext');
                updateMeta(getCurrentEditorValue().length);
            });
        }
        if (themeSelect) {
            themeSelect.addEventListener('change', (event) => {
                applyEditorTheme(event.target.value || 'night-owl', true);
            });
        }
        if (focusBtn) {
            focusBtn.addEventListener('click', () => setFocusMode(!editorState.isFocusMode));
        }
        if (fullscreenBtn) {
            fullscreenBtn.addEventListener('click', async () => {
                try {
                    await toggleEditorFullscreen();
                } catch (e) {
                    setStatus(`Fullscreen недоступен: ${e?.message || e}`);
                }
            });
        }
        if (windowBtn) {
            windowBtn.addEventListener('click', openInSeparateWindow);
        }
        if (zoomInBtn) zoomInBtn.addEventListener('click', () => adjustEditorZoom(10));
        if (zoomOutBtn) zoomOutBtn.addEventListener('click', () => adjustEditorZoom(-10));
        if (zoomResetBtn) zoomResetBtn.addEventListener('click', () => applyEditorZoom(100, true));
        window.addEventListener('beforeunload', () => {
            stopDetachedWindowWatcher();
        });
        if (workspaceScopeSelect) {
            workspaceScopeSelect.addEventListener('change', async () => {
                editorState.workspaceScope = workspaceScopeSelect.value || 'private';
                editorState.workspaceFileId = null;
                editorState.selectedDirectoryPath = '';
                applyWorkspaceSelectionState();
                updateCurrentDirChip();
                await loadWorkspaceFiles(null);
            });
        }
        if (workspaceFileSelect) {
            workspaceFileSelect.addEventListener('change', async () => {
                const fileId = Number(workspaceFileSelect.value || 0);
                if (!fileId) {
                    editorState.workspaceFileId = null;
                    applyWorkspaceSelectionState();
                    return;
                }
                await openWorkspaceFile(fileId);
            });
        }
        if (workspaceSaveBtn) {
            workspaceSaveBtn.addEventListener('click', saveWorkspaceFile);
        }
        if (workspaceNewBtn) {
            // В обработчик не передаем event, иначе `initialContent` будет равен PointerEvent.
            workspaceNewBtn.addEventListener('click', () => createNewWorkspaceFile(''));
        }
        if (workspaceNewDirBtn) {
            workspaceNewDirBtn.addEventListener('click', createWorkspaceDirectory);
        }
        if (workspaceRenameBtn) {
            workspaceRenameBtn.addEventListener('click', renameWorkspaceEntry);
        }
        if (workspaceDeleteBtn) {
            workspaceDeleteBtn.addEventListener('click', deleteWorkspaceFile);
        }
        if (treeRefreshBtn) {
            treeRefreshBtn.addEventListener('click', async () => loadWorkspaceFiles(editorState.workspaceFileId));
        }
        if (treeVisibleToggle) {
            treeVisibleToggle.addEventListener('change', () => {
                setTreeCollapsed(!treeVisibleToggle.checked, true);
                if (!editorState.useFallback && monacoEditor) {
                    monacoEditor.layout();
                }
            });
        }
        if (autosaveToggle) {
            const raw = (() => { try { return localStorage.getItem(EDITOR_AUTOSAVE_KEY); } catch (e) { return null; } })();
            editorState.autosaveEnabled = raw === '1';
            autosaveToggle.checked = editorState.autosaveEnabled;
            autosaveToggle.addEventListener('change', () => {
                editorState.autosaveEnabled = !!autosaveToggle.checked;
                try { localStorage.setItem(EDITOR_AUTOSAVE_KEY, editorState.autosaveEnabled ? '1' : '0'); } catch (e) {}
                setStatus(editorState.autosaveEnabled ? 'Автосохранение включено' : 'Автосохранение выключено');
            });
        }
        const fallbackInput = document.getElementById('code-editor-fallback');
        if (fallbackInput) {
            fallbackInput.addEventListener('input', () => {
                updateMeta(getCurrentEditorValue().length);
                if (editorState.suppressDirtyMark) return;
                markCurrentDirty();
            });
        }
        document.addEventListener('fullscreenchange', () => {
            setEditorToolBtnLabel(
                'editor-fullscreen-btn',
                document.fullscreenElement ? 'Выйти' : 'На весь экран',
                document.fullscreenElement
                    ? 'Выйти из полноэкранного режима'
                    : 'Развернуть область редактора на весь экран браузера',
            );
            if (!document.fullscreenElement && !standaloneMode) {
                setFocusMode(false);
            }
        });
        await loadWorkspaceScopes();
        await loadWorkspaceFiles(initialWorkspaceFileId > 0 ? initialWorkspaceFileId : null);
        if (initialWorkspaceFileId > 0) {
            const fileSelect = document.getElementById('workspace-file-select');
            if (fileSelect) {
                fileSelect.value = String(initialWorkspaceFileId);
            }
            await openWorkspaceFile(initialWorkspaceFileId);
        }
        const treeCollapsedRaw = (() => { try { return localStorage.getItem(EDITOR_TREE_COLLAPSED_KEY); } catch (e) { return null; } })();
        setTreeCollapsed(treeCollapsedRaw === '1', false);
        applyWorkspaceSelectionState();
        updateCurrentDirChip();
        applyEditorTheme(editorState.themeId, false);
        applyEditorZoom(editorState.zoomPercent, false);
        updateMeta(0);
    });
</script>
{% endblock %}