{% extends "base.html" %}
{% block title %}文件管理{% endblock %}
{% block breadcrumb_title %}文件管理{% endblock %}

{% block head_extra %}
<style>
    .file-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:16px; }
    .file-path { display:flex; flex:1; min-width:280px; border-radius:8px; box-shadow:0 1px 3px rgba(15,23,42,.08); }
    .file-path input { flex:1; min-width:0; padding:9px 12px; border:1px solid #cbd5e1; border-right:0; border-radius:8px 0 0 8px; background:#f8fafc; color:#0f172a; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
    .file-path input:focus { position:relative; z-index:1; outline:none; border-color:#dc3023; background:#fff; box-shadow:0 0 0 3px rgba(220,48,35,.10); }
    .file-path button { border-radius:0 8px 8px 0; border-color:#f0b5b0; background:#fff5f4; color:#a8241b; box-shadow:none; }
    .file-path button:hover:not(:disabled) { border-color:#dc3023; background:#ffebe9; color:#8f1f17; transform:none; box-shadow:none; }
    .file-button-icon { width:15px; height:15px; flex:none; }
    .file-scope { display:flex; align-items:center; gap:8px; color:#6b7280; font-size:13px; margin-top:5px; }
    .file-scope-badge { padding:2px 8px; border-radius:999px; background:#f3f4f6; color:#374151; font-weight:600; }
    .file-toggle[aria-pressed="true"] { border-color:#dc3023; color:#b42318; background:#fff7f6; }
    .file-table-wrap { overflow-x:auto; }
    .file-table { width:100%; border-collapse:collapse; }
    .file-table th { padding:11px 14px; text-align:left; color:#6b7280; font-size:12px; font-weight:600; border-bottom:1px solid #e5e7eb; }
    .file-table td { padding:12px 14px; border-bottom:1px solid #f0f1f3; vertical-align:middle; }
    .file-table tbody tr:hover { background:#fafafa; }
    .file-name { display:flex; align-items:center; gap:10px; min-width:240px; }
    .file-name button { border:0; background:none; padding:0; color:#111827; cursor:pointer; text-align:left; word-break:break-all; }
    .file-name button:hover { color:#dc3023; text-decoration:underline; }
    .file-icon { width:20px; height:20px; flex:none; color:#6b7280; }
    .file-icon.folder { color:#d97706; }
    .file-meta { color:#6b7280; white-space:nowrap; font-size:13px; }
    .file-actions { display:flex; gap:6px; justify-content:flex-end; white-space:nowrap; }
    .file-action { border:1px solid #dbe3ee; border-radius:6px; background:#f8fafc; padding:5px 10px; color:#334155; cursor:pointer; font-size:12px; font-weight:600; transition:all .15s; }
    .file-action:hover { border-color:#93c5fd; background:#eff6ff; color:#1d4ed8; box-shadow:0 2px 5px rgba(37,99,235,.10); }
    .file-action.danger { border-color:#fecaca; background:#fff7f7; color:#b91c1c; }
    .file-action.danger:hover { border-color:#f87171; background:#fef2f2; color:#991b1b; box-shadow:0 2px 5px rgba(185,28,28,.10); }
    .file-empty { text-align:center; padding:64px 20px; color:#9ca3af; }
    .file-loading { opacity:.55; pointer-events:none; }
    .file-warning { display:none; margin-bottom:16px; padding:10px 12px; border:1px solid #fde68a; border-radius:6px; background:#fffbeb; color:#92400e; font-size:13px; }
    .file-pagination { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding-top:16px; }
    .file-pagination-meta { color:#6b7280; font-size:13px; }
    .file-pagination-actions { display:flex; align-items:center; gap:8px; }
    .file-pagination select { width:auto; min-width:92px; padding:7px 28px 7px 9px; }
    .file-dialog-content { max-width:560px; }
    .file-dialog-content.is-editor { width:min(1100px, 94vw); max-width:none; }
    .file-dialog-body { padding:20px; }
    .file-dialog-message { color:#4b5563; font-size:14px; line-height:1.6; white-space:pre-wrap; }
    .file-dialog-message:empty { display:none; }
    .file-dialog-field { margin-top:16px; }
    .file-dialog-field label { display:block; margin-bottom:7px; color:#374151; font-size:13px; font-weight:600; }
    .file-editor-shell { position:relative; width:100%; height:clamp(280px, calc(100vh - 390px), 520px); overflow:hidden; border:1px solid #cbd5e1; border-radius:7px; background:#fff; }
    .file-editor-shell:focus-within { border-color:#dc3023; box-shadow:0 0 0 3px rgba(220,48,35,.10); }
    .file-line-numbers { position:absolute; top:0; bottom:0; left:0; width:64px; overflow:hidden; border-right:1px solid #e2e8f0; background:#f8fafc; color:#94a3b8; text-align:right; user-select:none; }
    .file-line-numbers pre { margin:0; padding-right:11px; font:13px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
    .file-editor { position:absolute; top:0; right:0; bottom:0; left:64px; width:calc(100% - 64px); height:100%; min-width:0; min-height:0; resize:none; padding:12px; border:0; border-radius:0; outline:none; box-sizing:border-box; font:13px/20px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size:4; white-space:pre; overflow:auto; }
    .file-dialog-error { display:none; margin-top:12px; color:#b91c1c; font-size:13px; }
    .file-dialog-content .btn-danger { background:#b91c1c; border-color:#b91c1c; color:#fff; }
    .file-dialog-content .btn-danger:hover { background:#991b1b; border-color:#991b1b; }
    #uploadInput { display:none; }
    @media (max-width:760px) {
        .file-toolbar { align-items:stretch; }
        .file-path { min-width:100%; }
        .file-table th:nth-child(2), .file-table td:nth-child(2),
        .file-table th:nth-child(3), .file-table td:nth-child(3) { display:none; }
        .file-pagination { align-items:flex-start; }
        .file-pagination-actions { width:100%; justify-content:flex-end; }
    }
</style>
{% endblock %}

{% block content %}
<div class="flex justify-between items-center" style="margin-bottom:20px">
    <div>
        <h2 style="font-size:28px;font-weight:700">文件管理</h2>
        <div class="file-scope"><span id="scopeBadge" class="file-scope-badge">加载中</span><span id="scopeDescription"></span></div>
    </div>
</div>
<div id="rootWarning" class="file-warning">当前服务进程不是 root，管理员仍可浏览系统根目录，但实际访问能力受服务进程的系统权限限制。</div>

<div class="card">
    <div class="file-toolbar">
        <button id="upButton" class="btn btn-secondary" type="button" onclick="goUp()" disabled>上一级</button>
        <button class="btn btn-secondary" type="button" onclick="goHome()" title="返回当前身份的家目录">
            <svg class="file-button-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 11l9-8 9 8M5 10v10h14V10M9 20v-6h6v6"/></svg>
            家目录
        </button>
        <div class="file-path">
            <input id="pathInput" type="text" value="/" aria-label="当前路径" onkeydown="if(event.key==='Enter') loadFiles(this.value, 0)" />
            <button class="btn btn-secondary" type="button" onclick="loadFiles(document.getElementById('pathInput').value, 0)">
                <svg class="file-button-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14m-5-5l5 5-5 5"/></svg>
                转到
            </button>
        </div>
        <button id="hiddenToggle" class="btn btn-secondary file-toggle" type="button" aria-pressed="false" onclick="toggleHidden()">显示隐藏项目</button>
        <button class="btn btn-secondary" type="button" onclick="createDirectory()">新建目录</button>
        <button class="btn btn-primary" type="button" onclick="document.getElementById('uploadInput').click()">上传文件</button>
        <input id="uploadInput" type="file" multiple onchange="uploadFiles(this.files)" />
    </div>
    <div id="fileTableWrap" class="file-table-wrap">
        <table class="file-table">
            <thead><tr><th>名称</th><th>大小</th><th>修改时间</th><th style="text-align:right">操作</th></tr></thead>
            <tbody id="fileTableBody"></tbody>
        </table>
        <div id="emptyState" class="file-empty" style="display:none">此目录为空</div>
    </div>
    <div class="file-pagination" aria-label="目录分页">
        <div id="pageMeta" class="file-pagination-meta">第 1 页</div>
        <div class="file-pagination-actions">
            <label for="pageLimit" class="file-pagination-meta">每页</label>
            <select id="pageLimit" onchange="changePageLimit(this.value)">
                <option value="50">50 项</option><option value="100" selected>100 项</option><option value="200">200 项</option>
            </select>
            <button id="previousPage" class="btn btn-secondary" type="button" onclick="previousPage()" disabled>上一页</button>
            <button id="nextPage" class="btn btn-secondary" type="button" onclick="nextPage()" disabled>下一页</button>
        </div>
    </div>
</div>
{% endblock %}

{% block modals %}
<div id="fileDialog" class="modal" style="display:none" role="dialog" aria-modal="true" aria-labelledby="fileDialogTitle" onclick="handleDialogBackdrop(event)">
    <div id="fileDialogContent" class="modal-content file-dialog-content">
        <div class="modal-header"><h3 id="fileDialogTitle">文件操作</h3><button class="modal-close" type="button" aria-label="关闭" onclick="closeFileDialog()">&times;</button></div>
        <form id="fileDialogForm" onsubmit="submitFileDialog(event)">
            <div class="file-dialog-body">
                <div id="fileDialogMessage" class="file-dialog-message"></div>
                <div id="fileNameField" class="file-dialog-field" style="display:none">
                    <label id="fileNameLabel" for="fileNameInput">名称</label><input id="fileNameInput" type="text" maxlength="255" autocomplete="off" />
                </div>
                <div id="fileEditorField" class="file-dialog-field" style="display:none">
                    <label id="fileEditorLabel" for="fileEditor">文件内容</label>
                    <div class="file-editor-shell">
                        <div id="fileLineNumbers" class="file-line-numbers" aria-hidden="true"><pre>1</pre></div>
                        <textarea id="fileEditor" class="file-editor" spellcheck="false" wrap="off" oninput="scheduleLineNumbers()" onscroll="updateLineNumbers()"></textarea>
                    </div>
                </div>
                <div id="fileDialogError" class="file-dialog-error" role="alert"></div>
            </div>
            <div class="modal-footer"><button class="btn btn-secondary" type="button" onclick="closeFileDialog()">取消</button><button id="fileDialogSubmit" class="btn btn-primary" type="submit">确定</button></div>
        </form>
    </div>
</div>

<div id="unsavedDialog" class="modal" style="display:none;z-index:1010" role="alertdialog" aria-modal="true" aria-labelledby="unsavedDialogTitle">
    <div class="modal-content file-dialog-content">
        <div class="modal-header"><h3 id="unsavedDialogTitle">文件尚未保存</h3><button class="modal-close" type="button" aria-label="继续编辑" onclick="hideUnsavedDialog()">&times;</button></div>
        <div class="file-dialog-body"><p class="file-dialog-message">检测到文件内容已发生变化。是否先保存本次修改？</p></div>
        <div class="modal-footer">
            <button class="btn btn-secondary" type="button" onclick="hideUnsavedDialog()">继续编辑</button>
            <button class="btn btn-secondary" type="button" onclick="discardEditorChanges()">不保存</button>
            <button class="btn btn-primary" type="button" onclick="saveBeforeClosing()">保存</button>
        </div>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<script>
    let currentPath = "/";
    let parentPath = null;
    let homePath = "/";
    let showHidden = false;
    let pageCursor = 0;
    let pageLimit = 100;
    let nextPageCursor = null;
    let dialogSubmitHandler = null;
    let dialogGeneration = 0;
    let dialogMode = "action";
    let dialogLoading = false;
    let dialogSaving = false;
    let editorOriginalContent = "";
    let lineNumberFrame = null;
    let editorLineCount = 1;

    function fileIcon(directory, symlink) {
        if (directory) return `<svg class="file-icon folder" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7a2 2 0 012-2h5l2 2h7a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V7z"/></svg>`;
        return `<svg class="file-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 3h7l5 5v13H7zM14 3v6h5"/>${symlink ? '<path stroke-linecap="round" stroke-width="2" d="M3 15h8m0 0l-3-3m3 3l-3 3"/>' : ''}</svg>`;
    }

    function formatSize(value) {
        if (value === null || value === undefined) return "—";
        const units = ["B", "KB", "MB", "GB", "TB"];
        let size = Number(value), unit = 0;
        while (size >= 1024 && unit < units.length - 1) { size /= 1024; unit += 1; }
        return `${unit === 0 ? size : size.toFixed(size < 10 ? 1 : 0)} ${units[unit]}`;
    }

    function renderEntries(entries) {
        const body = document.getElementById("fileTableBody");
        body.replaceChildren();
        document.getElementById("emptyState").style.display = entries.length ? "none" : "block";
        for (const entry of entries) {
            const row = document.createElement("tr");
            const nameCell = document.createElement("td");
            const nameWrap = document.createElement("div");
            nameWrap.className = "file-name";
            nameWrap.innerHTML = fileIcon(entry.is_directory, entry.is_symlink);
            const nameButton = document.createElement("button");
            nameButton.type = "button";
            nameButton.textContent = entry.name + (entry.is_symlink ? " ↗" : "");
            nameButton.title = entry.path;
            nameButton.onclick = () => entry.is_directory ? loadFiles(entry.path, 0) : openEditor(entry);
            nameWrap.appendChild(nameButton);
            nameCell.appendChild(nameWrap);
            const sizeCell = document.createElement("td");
            sizeCell.className = "file-meta";
            sizeCell.textContent = entry.is_directory ? "—" : formatSize(entry.size);
            const timeCell = document.createElement("td");
            timeCell.className = "file-meta";
            timeCell.textContent = new Date(entry.modified_at).toLocaleString("zh-CN", {hour12:false});
            const actionCell = document.createElement("td");
            const actions = document.createElement("div");
            actions.className = "file-actions";
            if (!entry.is_directory) {
                actions.appendChild(actionButton("编辑", () => openEditor(entry)));
                actions.appendChild(actionButton("下载", () => download(entry.path)));
            }
            actions.appendChild(actionButton("重命名", () => renameEntry(entry)));
            actions.appendChild(actionButton("删除", () => deleteEntry(entry), true));
            actionCell.appendChild(actions);
            row.append(nameCell, sizeCell, timeCell, actionCell);
            body.appendChild(row);
        }
    }

    function actionButton(label, handler, danger=false) {
        const button = document.createElement("button");
        button.type = "button";
        button.className = `file-action${danger ? " danger" : ""}`;
        button.textContent = label;
        button.onclick = handler;
        return button;
    }

    async function api(url, options={}) {
        const response = await fetch(url, options);
        let data = {};
        try { data = await response.json(); } catch (_) {}
        if (!response.ok) throw new Error(data.detail || `请求失败 (${response.status})`);
        return data;
    }

    async function loadFiles(path=currentPath, cursor=0) {
        const wrap = document.getElementById("fileTableWrap");
        wrap.classList.add("file-loading");
        try {
            const params = new URLSearchParams({path:path || "/", show_hidden:String(showHidden), cursor:String(cursor), limit:String(pageLimit)});
            const data = await api(`/api/files?${params}`);
            currentPath = data.path;
            parentPath = data.parent;
            homePath = data.home_path || "/";
            pageCursor = data.cursor;
            nextPageCursor = data.next_cursor;
            document.getElementById("pathInput").value = currentPath;
            document.getElementById("upButton").disabled = !parentPath;
            document.getElementById("previousPage").disabled = pageCursor === 0;
            document.getElementById("nextPage").disabled = !data.has_more;
            const pageNumber = Math.floor(pageCursor / pageLimit) + 1;
            document.getElementById("pageMeta").textContent = `第 ${pageNumber} 页 · 本页 ${(data.entries || []).length} 项${data.has_more ? " · 还有更多" : ""}`;
            const rootScope = data.scope === "root";
            document.getElementById("scopeBadge").textContent = rootScope ? "ROOT" : "HOME";
            document.getElementById("scopeDescription").textContent = rootScope ? "管理员可访问系统全部路径" : "仅可访问您自己的 Home 目录";
            document.getElementById("rootWarning").style.display = rootScope && !data.root_access ? "block" : "none";
            document.getElementById("uploadInput").title = `单个文件最大 ${data.upload_max_mb} MB`;
            renderEntries(data.entries || []);
        } catch (error) {
            showToast(error.message, "error");
            document.getElementById("pathInput").value = currentPath;
        } finally { wrap.classList.remove("file-loading"); }
    }

    function goUp() { if (parentPath) loadFiles(parentPath, 0); }
    function goHome() { loadFiles(homePath, 0); }
    function download(path) { window.location.href = `/api/files/download?path=${encodeURIComponent(path)}`; }
    function nextPage() { if (nextPageCursor !== null) loadFiles(currentPath, nextPageCursor); }
    function previousPage() { loadFiles(currentPath, Math.max(0, pageCursor - pageLimit)); }
    function changePageLimit(value) { pageLimit = Number(value) || 100; loadFiles(currentPath, 0); }
    function toggleHidden() {
        showHidden = !showHidden;
        const button = document.getElementById("hiddenToggle");
        button.setAttribute("aria-pressed", String(showHidden));
        button.textContent = showHidden ? "隐藏隐藏项目" : "显示隐藏项目";
        loadFiles(currentPath, 0);
    }

    function openFileDialog(options) {
        const generation = ++dialogGeneration;
        const dialog = document.getElementById("fileDialog");
        const content = document.getElementById("fileDialogContent");
        const input = document.getElementById("fileNameInput");
        const editor = document.getElementById("fileEditor");
        const submit = document.getElementById("fileDialogSubmit");
        document.getElementById("fileDialogTitle").textContent = options.title || "文件操作";
        document.getElementById("fileDialogMessage").textContent = options.message || "";
        document.getElementById("fileDialogError").style.display = "none";
        document.getElementById("fileNameField").style.display = options.input ? "block" : "none";
        document.getElementById("fileEditorField").style.display = options.editor ? "block" : "none";
        content.classList.toggle("is-editor", Boolean(options.editor));
        input.value = options.value || "";
        editor.value = options.editorValue || "";
        editor.disabled = Boolean(options.loading);
        dialogMode = options.editor ? "editor" : "action";
        dialogLoading = Boolean(options.loading);
        dialogSaving = false;
        editorOriginalContent = options.editorValue || "";
        document.getElementById("fileNameLabel").textContent = options.label || "名称";
        submit.textContent = options.confirmText || "确定";
        submit.classList.toggle("btn-danger", Boolean(options.danger));
        submit.classList.toggle("btn-primary", !options.danger);
        submit.disabled = Boolean(options.loading);
        dialogSubmitHandler = options.onSubmit || null;
        dialog.style.display = "flex";
        setTimeout(() => {
            if (options.input) { input.focus(); input.select(); }
            if (options.editor) {
                scheduleLineNumbers();
                if (!options.loading) editor.focus();
            }
        }, 0);
        return generation;
    }

    function closeFileDialog() {
        if (dialogSaving) return;
        const editor = document.getElementById("fileEditor");
        if (dialogMode === "editor" && !dialogLoading && editor.value !== editorOriginalContent) {
            document.getElementById("unsavedDialog").style.display = "flex";
            return;
        }
        forceCloseFileDialog();
    }

    function forceCloseFileDialog() {
        dialogGeneration += 1;
        document.getElementById("fileDialog").style.display = "none";
        document.getElementById("unsavedDialog").style.display = "none";
        dialogSubmitHandler = null;
        dialogMode = "action";
        dialogLoading = false;
        dialogSaving = false;
        editorOriginalContent = "";
    }

    function hideUnsavedDialog() { document.getElementById("unsavedDialog").style.display = "none"; }
    function discardEditorChanges() { forceCloseFileDialog(); }
    function saveBeforeClosing() {
        hideUnsavedDialog();
        document.getElementById("fileDialogForm").requestSubmit();
    }
    function handleDialogBackdrop(event) { if (event.target === document.getElementById("fileDialog")) closeFileDialog(); }

    async function submitFileDialog(event) {
        event.preventDefault();
        if (!dialogSubmitHandler) return;
        const submit = document.getElementById("fileDialogSubmit");
        const errorBox = document.getElementById("fileDialogError");
        dialogSaving = true;
        submit.disabled = true;
        errorBox.style.display = "none";
        try {
            await dialogSubmitHandler({name:document.getElementById("fileNameInput").value, content:document.getElementById("fileEditor").value});
            forceCloseFileDialog();
        } catch (error) {
            errorBox.textContent = error.message || "操作失败";
            errorBox.style.display = "block";
        } finally {
            dialogSaving = false;
            submit.disabled = false;
        }
    }

    function createDirectory() {
        openFileDialog({title:"新建目录", input:true, label:"目录名称", confirmText:"创建", onSubmit:async ({name}) => {
            if (!name.trim()) throw new Error("目录名称不能为空");
            const data = await api("/api/files/directory", {method:"POST", headers:{"Content-Type":"application/json"}, body:JSON.stringify({path:currentPath, name})});
            showToast(data.message, "success");
            await loadFiles(currentPath, pageCursor);
        }});
    }

    async function uploadFiles(files) {
        const input = document.getElementById("uploadInput");
        for (const file of Array.from(files || [])) {
            const form = new FormData();
            form.append("upload", file, file.name);
            try {
                await api(`/api/files/upload?path=${encodeURIComponent(currentPath)}`, {method:"POST", body:form});
                showToast(`${file.name} 上传成功`, "success");
            } catch (error) { showToast(`${file.name}: ${error.message}`, "error"); }
        }
        input.value = "";
        await loadFiles(currentPath, pageCursor);
    }

    function renameEntry(entry) {
        openFileDialog({title:"重命名", message:`当前名称：${entry.name}`, input:true, label:"新名称", value:entry.name, confirmText:"保存", onSubmit:async ({name}) => {
            if (!name.trim()) throw new Error("名称不能为空");
            if (name === entry.name) return;
            const data = await api("/api/files/rename", {method:"PUT", headers:{"Content-Type":"application/json"}, body:JSON.stringify({path:entry.path, new_name:name})});
            showToast(data.message, "success");
            await loadFiles(currentPath, pageCursor);
        }});
    }

    function deleteEntry(entry) {
        const kind = entry.is_directory ? "目录及其中的所有内容" : "文件";
        openFileDialog({title:"确认删除", message:`即将删除${kind}“${entry.name}”。此操作不可恢复。`, confirmText:"删除", danger:true, onSubmit:async () => {
            const data = await api(`/api/files?path=${encodeURIComponent(entry.path)}`, {method:"DELETE"});
            showToast(data.message, "success");
            await loadFiles(currentPath, pageCursor);
        }});
    }

    async function openEditor(entry) {
        const generation = openFileDialog({title:`编辑 ${entry.name}`, message:"正在读取文件…", editor:true, editorValue:"", confirmText:"保存", loading:true});
        try {
            const data = await api(`/api/files/content?path=${encodeURIComponent(entry.path)}`);
            if (generation !== dialogGeneration) return;
            document.getElementById("fileDialogMessage").textContent = `UTF-8 文本 · ${formatSize(data.size)} · 最大可编辑 ${formatSize(data.max_bytes)}`;
            const editor = document.getElementById("fileEditor");
            const submit = document.getElementById("fileDialogSubmit");
            editor.value = data.content;
            editor.disabled = false;
            editor.setSelectionRange(0, 0);
            editor.scrollTop = 0;
            editor.scrollLeft = 0;
            editorOriginalContent = data.content;
            dialogLoading = false;
            submit.disabled = false;
            dialogSubmitHandler = async ({content}) => {
                const result = await api("/api/files/content", {method:"PUT", headers:{"Content-Type":"application/json"}, body:JSON.stringify({path:entry.path, content})});
                showToast(result.message, "success");
                await loadFiles(currentPath, pageCursor);
            };
            scheduleLineNumbers();
            editor.focus();
        } catch (error) {
            if (generation !== dialogGeneration) return;
            forceCloseFileDialog();
            showToast(error.message, "error");
        }
    }

    function countEditorLines(value) {
        let count = 1;
        for (let index = 0; index < value.length; index += 1) {
            if (value.charCodeAt(index) === 10) count += 1;
        }
        return count;
    }

    function scheduleLineNumbers() {
        if (lineNumberFrame !== null) cancelAnimationFrame(lineNumberFrame);
        lineNumberFrame = requestAnimationFrame(() => {
            lineNumberFrame = null;
            const editor = document.getElementById("fileEditor");
            editorLineCount = countEditorLines(editor.value);
            updateLineNumbers();
        });
    }

    function updateLineNumbers() {
        const editor = document.getElementById("fileEditor");
        const gutter = document.getElementById("fileLineNumbers");
        const lineHeight = 20;
        const firstLine = Math.floor(editor.scrollTop / lineHeight);
        const visibleLines = Math.ceil(editor.clientHeight / lineHeight) + 1;
        const lastLine = Math.min(editorLineCount, firstLine + visibleLines);
        const numbers = [];
        for (let line = firstLine + 1; line <= lastLine; line += 1) numbers.push(String(line));
        const pre = gutter.querySelector("pre");
        pre.textContent = numbers.join("\n");
        pre.style.paddingTop = `${12 - (editor.scrollTop % lineHeight)}px`;
    }

    document.addEventListener("keydown", (event) => {
        if (event.key === "Escape" && document.getElementById("unsavedDialog").style.display !== "none") {
            hideUnsavedDialog();
        } else if (event.key === "Escape" && document.getElementById("fileDialog").style.display !== "none") {
            closeFileDialog();
        }
    });
    document.addEventListener("DOMContentLoaded", () => {
        const editor = document.getElementById("fileEditor");
        editor.addEventListener("keydown", (event) => {
            if (event.key !== "Tab") return;
            event.preventDefault();
            editor.setRangeText("\t", editor.selectionStart, editor.selectionEnd, "end");
            scheduleLineNumbers();
        });
        if (window.ResizeObserver) new ResizeObserver(updateLineNumbers).observe(editor);
        loadFiles("/", 0);
    });
</script>
{% endblock %}