{% extends "base.html" %}
{% set page_title = ('VM' if type == 'qemu' else 'LXC') + ' ' + vmid|string %}
{% block content %}

<style>
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}
</style>

<div id="loading" style="text-align: center; padding: 3rem; color: var(--text-muted);">
    <i class="fa-solid fa-spinner fa-spin"></i> {{ t('loading_instance') }}
</div>

<div id="instance-content" style="display: none;">
    <!-- Заголовок -->
    <div class="card" style="margin-bottom: 1.5rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
            <div style="display: flex; align-items: center; gap: 1rem;">
                <a href="/virtual-machines" class="btn" style="background: var(--bg-tertiary); color: var(--text-primary); padding: 0.5rem 1rem;">
                    ← {{ t('back') }}
                </a>
                <div style="display: flex; align-items: center; gap: 0.75rem;">
                    <span id="instance-icon" style="font-size: 2.5rem; color: var(--text-primary);"><i class="fa-solid fa-computer"></i></span>
                    <div>
                        <h2 id="instance-name" style="margin: 0; color: var(--text-primary);">{{ t('loading') }}</h2>
                        <div style="display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem;">
                            <span id="instance-type-badge" style="padding: 0.25rem 0.75rem; border-radius: 6px; background: var(--primary); color: var(--text-on-primary); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px;">QEMU</span>
                        </div>
                        <div style="color: var(--text-muted); font-size: 0.85rem; margin-top: 0.35rem;">ID: {{ vmid }} | Node: {{ node }} | {{ server.name }}</div>
                    </div>
                </div>
            </div>
            <div id="instance-status" style="display: flex; align-items: center; gap: 0.5rem; font-size: 1.125rem; font-weight: 600;">
                <span class="status-dot" style="width: 12px; height: 12px; border-radius: 50%; background: var(--text-muted);"></span>
                <span class="status-text">--</span>
            </div>
        </div>
    </div>

    <!-- Кнопки управления -->
    <div class="card" style="margin-bottom: 1.5rem;">
        <h3 style="margin: 0 0 1rem 0; color: var(--text-primary);">
            <i class="fas fa-gamepad"></i> {{ t('control') }}
        </h3>
        <div style="display: flex; gap: 0.75rem; flex-wrap: wrap;">
            <button id="btn-start" onclick="controlInstance('start')" class="btn btn-success" style="display: none;" data-permission="vms.start">
                <i class="fa-solid fa-play"></i> {{ t('start') }}
            </button>
            <button id="btn-stop" onclick="controlInstance('stop')" class="btn btn-danger" style="display: none;" data-permission="vms.stop">
                <i class="fa-solid fa-stop"></i> {{ t('stop') }}
            </button>
            <button id="btn-kill" onclick="controlInstance('kill')" class="btn btn-danger" style="display: none;" data-permission="vms.stop">
                <i class="fa-solid fa-skull"></i> {{ t('kill') }}
            </button>
            <button id="btn-restart" onclick="controlInstance('restart')" class="btn btn-warning" style="display: none;" data-permission="vms.restart">
                <i class="fa-solid fa-rotate"></i> {{ t('restart') }}
            </button>
            {% if type == 'qemu' %}
            <!-- QEMU: VNC Console (noVNC) -->
            <button type="button" onclick="openVNC()" class="btn btn-primary" title="{{ t('vnc_console') or 'VNC Console' }}" data-permission="vms.console">
                <i class="fa-solid fa-desktop"></i> {{ t('vnc_console') or 'VNC Console' }}
            </button>
            {% else %}
            <!-- LXC: Terminal (xterm.js) -->
            <button type="button" onclick="openTerminal()" class="btn btn-primary" title="{{ t('terminal_console') or 'Terminal (xterm.js)' }}" data-permission="vms.console">
                <i class="fa-solid fa-terminal"></i> {{ t('terminal') or 'Terminal' }}
            </button>
            {% endif %}
            <button type="button" onclick="showEditModal()" class="btn btn-secondary" data-permission="vms.edit">
                <i class="fa-solid fa-gear"></i> {{ t('settings') }}
            </button>
            <button onclick="showReinstallModal()" class="btn btn-warning" data-permission="vms.reinstall">
                <i class="fa-solid fa-compact-disc"></i> {{ t('reinstall') }}
            </button>
            <!-- HA Button -->
            <button id="btn-ha" onclick="toggleHA()" class="btn" style="background: var(--purple); color: var(--text-on-primary); display: none;" title="{{ t('high_availability') or 'High Availability' }}" data-permission="vms.ha">
                <span id="btn-ha-icon"><i class="fa-solid fa-shield"></i></span> <span id="btn-ha-text">HA</span>
            </button>
            <button onclick="deleteInstance()" class="btn btn-danger" data-permission="vms.delete">
                <i class="fa-solid fa-trash"></i> {{ t('delete') }}
            </button>
        </div>
    </div>

    <!-- IP Адреса -->
    <div id="network-interfaces-card" class="card" style="margin-bottom: 1.5rem; display: none;">
        <h3 style="margin: 0 0 1rem 0; color: var(--text-primary);"><i class="fa-solid fa-globe"></i> {{ t('network_interfaces') }}</h3>
        <div id="network-interfaces-list" style="display: grid; gap: 0.75rem;">
            <!-- Интерфейсы будут загружены динамически -->
        </div>
        <div id="network-interfaces-empty" style="color: var(--text-muted); padding: 1rem; text-align: center; display: none;">
            <i class="fa-solid fa-circle-info"></i> {{ t('ip_unavailable_guest_agent') }}
        </div>
    </div>

    <!-- Выполнение команд (только для VM с guest agent) -->
    <div id="command-execution-card" class="card" style="margin-bottom: 1.5rem; display: none;">
        <h3 style="margin: 0 0 1rem 0; color: var(--text-primary);">
            <i class="fas fa-terminal"></i> {{ t('command_execution') }}
        </h3>
        
        <!-- Быстрые команды -->
        <div style="margin-bottom: 1rem;">
            <label style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary); font-size: 0.875rem;">
                {{ t('quick_commands') }}:
            </label>
            <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
                <button class="btn btn-secondary" onclick="executeQuickCommand('df -h')" style="font-size: 0.875rem;">
                    <i class="fa-solid fa-floppy-disk"></i> {{ t('disks') }}
                </button>
                <button class="btn btn-secondary" onclick="executeQuickCommand('free -h')" style="font-size: 0.875rem;">
                    <i class="fas fa-memory"></i> {{ t('memory') }}
                </button>
                <button class="btn btn-secondary" onclick="executeQuickCommand('uptime')" style="font-size: 0.875rem;">
                    <i class="fa-solid fa-clock"></i> Uptime
                </button>
                <button class="btn btn-secondary" onclick="executeQuickCommand('ps -ef | head -n 20')" style="font-size: 0.875rem;">
                    <i class="fa-solid fa-chart-simple"></i> {{ t('processes') }}
                </button>
                <button class="btn btn-secondary" onclick="executeQuickCommand('command -v systemctl >/dev/null 2>&1 &amp;&amp; systemctl status || service --status-all 2>/dev/null || rc-status 2>/dev/null || echo &quot;Service management not available&quot;')" style="font-size: 0.875rem;">
                    <i class="fa-solid fa-wrench"></i> {{ t('services') }}
                </button>
            </div>
        </div>

        <!-- Произвольная команда -->
        <div style="margin-bottom: 1rem;">
            <label for="custom-command" style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary); font-size: 0.875rem;">
                {{ t('custom_command') }}:
            </label>
            <div style="display: flex; gap: 0.5rem;">
                <input 
                    type="text" 
                    id="custom-command" 
                    placeholder="Например: ls -la /var/log"
                    onkeypress="if(event.key === 'Enter') executeCustomCommand()"
                    style="flex: 1; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem; background: var(--bg-secondary); color: var(--text-primary);"
                />
                <button class="btn btn-primary" onclick="executeCustomCommand()">
                    <i class="fa-solid fa-play"></i> {{ t('run') }}
                </button>
            </div>
        </div>

        <!-- Bash скрипт -->
        <div style="margin-bottom: 1rem;">
            <label for="bash-script" style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary); font-size: 0.875rem;">
                {{ t('bash_script') }}:
            </label>
            <textarea 
                id="bash-script" 
                rows="6"
                placeholder="#!/bin/bash&#10;echo 'Hello from VM'&#10;# Ваш скрипт здесь..."
                style="width: 100%; padding: 0.5rem; border: 1px solid var(--border); border-radius: 0.375rem; background: var(--bg-secondary); color: var(--text-primary); font-family: 'Courier New', monospace; font-size: 0.875rem;"
            ></textarea>
            <button class="btn btn-primary" onclick="executeBashScript()" style="margin-top: 0.5rem;">
                <i class="fa-solid fa-rocket"></i> {{ t('run_script') }}
            </button>
        </div>

        <!-- Результат выполнения -->
        <div id="command-output" style="display: none; margin-top: 1rem;">
            <label style="display: block; margin-bottom: 0.5rem; color: var(--text-secondary); font-size: 0.875rem;">
                {{ t('result') }}:
            </label>
            <pre id="command-output-content" style="background: var(--bg-surface-hover); color: var(--text-primary); padding: 1rem; border-radius: 0.375rem; overflow-x: auto; font-size: 0.875rem; max-height: 400px; overflow-y: auto; border: 1px solid var(--border-default);"></pre>
        </div>
    </div>

    <!-- Метрики в реальном времени -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
        <div class="card" style="text-align: center;">
            <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;"><i class="fa-solid fa-computer"></i> {{ t('cpu') }}</div>
            <div id="metric-cpu" style="font-size: 2rem; font-weight: bold; color: var(--accent);">--%</div>
            <div id="metric-cpu-detail" style="font-size: 0.75rem; color: var(--text-muted);">-- {{ t('cores') }}</div>
            <div class="progress-bar" style="margin-top: 0.5rem;">
                <div id="metric-cpu-bar" class="progress-fill" style="width: 0%;"></div>
            </div>
        </div>
        <div class="card" style="text-align: center;">
            <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;"><i class="fa-solid fa-memory"></i> {{ t('memory') }}</div>
            <div id="metric-memory" style="font-size: 2rem; font-weight: bold; color: var(--accent);">--%</div>
            <div id="metric-memory-detail" style="font-size: 0.75rem; color: var(--text-muted);">-- / --</div>
            <div class="progress-bar" style="margin-top: 0.5rem;">
                <div id="metric-memory-bar" class="progress-fill" style="width: 0%;"></div>
            </div>
        </div>
        <div class="card" id="disk-metric-card" style="text-align: center;">
            <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;"><i class="fa-solid fa-floppy-disk"></i> {{ t('disk') }}</div>
            <div id="metric-disk" style="font-size: 2rem; font-weight: bold; color: var(--accent);">--%</div>
            <div id="metric-disk-detail" style="font-size: 0.75rem; color: var(--text-muted);">-- / --</div>
            <div class="progress-bar" style="margin-top: 0.5rem;">
                <div id="metric-disk-bar" class="progress-fill" style="width: 0%;"></div>
            </div>
        </div>
        <div class="card" style="text-align: center;">
            <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;"><i class="fa-solid fa-clock"></i> {{ t('uptime') }}</div>
            <div id="metric-uptime" style="font-size: 1.5rem; font-weight: bold; color: var(--text-primary);">--</div>
        </div>
    </div>

    <!-- Сетевой трафик -->
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
        <div class="card" style="text-align: center;">
            <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;"><i class="fa-solid fa-download"></i> {{ t('network_in') }}</div>
            <div id="metric-netin" style="font-size: 1.5rem; font-weight: bold; color: var(--success);">--</div>
        </div>
        <div class="card" style="text-align: center;">
            <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;"><i class="fa-solid fa-upload"></i> {{ t('network_out') }}</div>
            <div id="metric-netout" style="font-size: 1.5rem; font-weight: bold; color: var(--danger);">--</div>
        </div>
        <div class="card" style="text-align: center;">
            <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;"><i class="fa-solid fa-hard-drive"></i> {{ t('disk_read') }}</div>
            <div id="metric-diskread" style="font-size: 1.5rem; font-weight: bold; color: var(--info);">--</div>
        </div>
        <div class="card" style="text-align: center;">
            <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;"><i class="fa-solid fa-file-lines"></i> {{ t('disk_write') }}</div>
            <div id="metric-diskwrite" style="font-size: 1.5rem; font-weight: bold; color: var(--warning);">--</div>
        </div>
    </div>

    <!-- Графики -->
    <div class="card" style="margin-bottom: 1.5rem;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h3 style="margin: 0; color: var(--text-primary);"><i class="fa-solid fa-chart-line"></i> {{ t('monitoring_charts') }}</h3>
            <div style="display: flex; gap: 0.5rem;">
                <button onclick="changeTimeframe('hour')" class="btn" id="btn-hour" style="padding: 0.5rem 1rem; font-size: 0.875rem; background: var(--bg-tertiary); color: var(--text-primary); border: 2px solid var(--text-primary);">{{ t('hour') }}</button>
                <button onclick="changeTimeframe('day')" class="btn" id="btn-day" style="padding: 0.5rem 1rem; font-size: 0.875rem; background: var(--bg-tertiary); color: var(--text-primary); border: 2px solid transparent;">{{ t('day') }}</button>
                <button onclick="changeTimeframe('week')" class="btn" id="btn-week" style="padding: 0.5rem 1rem; font-size: 0.875rem; background: var(--bg-tertiary); color: var(--text-primary); border: 2px solid transparent;">{{ t('week') }}</button>
                <button onclick="changeTimeframe('month')" class="btn" id="btn-month" style="padding: 0.5rem 1rem; font-size: 0.875rem; background: var(--bg-tertiary); color: var(--text-primary); border: 2px solid transparent;">{{ t('month') }}</button>
            </div>
        </div>
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 1rem;">
            <div style="background: var(--bg-tertiary); padding: 1rem; border-radius: 8px;">
                <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">{{ t('cpu') }} %</div>
                <canvas id="chart-cpu" style="max-height: 200px;"></canvas>
            </div>
            <div style="background: var(--bg-tertiary); padding: 1rem; border-radius: 8px;">
                <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">{{ t('memory') }} ({{ t('gb') }})</div>
                <canvas id="chart-memory" style="max-height: 200px;"></canvas>
            </div>
            <div style="background: var(--bg-tertiary); padding: 1rem; border-radius: 8px;">
                <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">{{ t('network') }} (MB/s)</div>
                <canvas id="chart-network" style="max-height: 200px;"></canvas>
            </div>
            <div style="background: var(--bg-tertiary); padding: 1rem; border-radius: 8px;">
                <div style="font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.5rem;">{{ t('disk') }} I/O (MB/s)</div>
                <canvas id="chart-disk" style="max-height: 200px;"></canvas>
            </div>
        </div>
    </div>

    <!-- Конфигурация -->
    <div class="card">
        <h3 style="margin: 0 0 1rem 0; color: var(--text-primary);"><i class="fa-solid fa-list"></i> {{ t('configuration') }}</h3>
        <div id="config-content" style="background: var(--bg-tertiary); padding: 1rem; border-radius: 8px; max-height: 400px; overflow-y: auto;">
            <pre id="config-json" style="font-size: 0.8rem; color: var(--text-muted); margin: 0; white-space: pre-wrap;">{{ t('loading') }}</pre>
        </div>
    </div>
</div>

<!-- Modal VNC -->
<div id="vncModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); z-index: 2000; align-items: center; justify-content: center; padding: 1rem;">
    <div class="card" style="max-width: 1400px; width: 95%; max-height: 95vh; display: flex; flex-direction: column;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
            <h3 id="vncTitle" style="margin: 0;"><i class="fa-solid fa-desktop"></i> {{ t('vnc_console') }}</h3>
            <button onclick="closeVNCModal()" style="background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; padding: 0.5rem;">&times;</button>
        </div>
        <div id="vncContent" style="flex: 1; min-height: 600px; background: #000; border-radius: 4px; overflow: hidden;"></div>
    </div>
</div>

<!-- Modal xterm.js Terminal -->
<div id="terminalModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.95); z-index: 2000; align-items: center; justify-content: center; padding: 1rem;">
    <div class="card" style="max-width: 1200px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color);">
            <h3 id="terminalTitle" style="margin: 0;"><i class="fa-solid fa-terminal"></i> {{ t('terminal_console') or 'Terminal' }}</h3>
            <div style="display: flex; gap: 0.5rem; align-items: center;">
                <span id="terminalStatus" style="font-size: 0.75rem; color: var(--text-muted);"></span>
                <button onclick="closeTerminalModal()" style="background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer; padding: 0.5rem;">&times;</button>
            </div>
        </div>
        <div id="terminalContent" style="flex: 1; min-height: 500px; background: #000; border-radius: 4px; overflow: hidden;"></div>
    </div>
</div>

<!-- Modal редактирования -->
<div id="editModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; align-items: center; justify-content: center; padding: 1rem;">
    <div class="card" style="max-width: 800px; width: 95%; max-height: 95vh; overflow-y: auto;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
            <h3 style="margin: 0;"><i class="fa-solid fa-gear"></i> {{ t('settings') }}</h3>
            <button onclick="closeEditModal()" style="background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer;">&times;</button>
        </div>
        <div id="editContent">{{ t('loading') }}</div>
    </div>
</div>

<!-- Modal переустановки -->
<div id="reinstallModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2000; align-items: center; justify-content: center; padding: 1rem;">
    <div class="card" style="max-width: 600px; width: 95%; max-height: 95vh; overflow-y: auto;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color);">
            <h3 style="margin: 0;"><i class="fa-solid fa-compact-disc"></i> {{ t('reinstall') }}</h3>
            <button onclick="closeReinstallModal()" style="background: none; border: none; color: var(--text-muted); font-size: 1.5rem; cursor: pointer;">&times;</button>
        </div>
        <div id="reinstallContent">{{ t('loading') }}</div>
    </div>
</div>

<!-- Modal подтверждения -->
<div id="confirmModal" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 2100; align-items: center; justify-content: center; padding: 1rem;">
    <div class="card" style="max-width: 450px; width: 95%;">
        <div style="text-align: center; padding: 1rem;">
            <div id="confirmIcon" style="font-size: 3rem; margin-bottom: 1rem;"><i class="fa-solid fa-triangle-exclamation"></i></div>
            <h3 id="confirmTitle" style="margin: 0 0 1rem 0; color: var(--text-primary);">{{ t('confirm') }}</h3>
            <p id="confirmMessage" style="color: var(--text-secondary); margin-bottom: 1.5rem;"></p>
            <div style="display: flex; gap: 1rem; justify-content: center;">
                <button onclick="closeConfirmModal()" class="btn" style="background: var(--bg-tertiary); color: var(--text-primary); min-width: 100px;">{{ t('cancel') }}</button>
                <button id="confirmBtn" onclick="executeConfirmedAction()" class="btn" style="min-width: 100px;">{{ t('yes') }}</button>
            </div>
        </div>
    </div>
</div>

<script>
const serverId = {{ server.id }};
const vmid = {{ vmid }};
const instanceType = '{{ type }}';
const apiType = instanceType === 'qemu' ? 'vm' : 'container';
let instanceNode = '{{ node }}';
let instanceName = '';
let instanceStatus = '';
let instanceConfig = null;
let vncConnection = null;
let pendingAction = null;
let currentTimeframe = 'hour';

// Charts
let cpuChart = null;
let memoryChart = null;
let networkChart = null;
let diskChart = null;

function formatBytes(bytes) {
    if (!bytes || bytes === 0) return '0 B';
    const k = 1024;
    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
    const i = Math.floor(Math.log(bytes) / Math.log(k));
    return (bytes / Math.pow(k, i)).toFixed(2) + ' ' + sizes[i];
}

function formatUptime(seconds) {
    if (!seconds) return '--';
    const days = Math.floor(seconds / 86400);
    const hours = Math.floor((seconds % 86400) / 3600);
    const mins = Math.floor((seconds % 3600) / 60);
    if (days > 0) return `${days}d ${hours}h ${mins}m`;
    if (hours > 0) return `${hours}h ${mins}m`;
    return `${mins}m`;
}

async function loadInstanceData() {
    try {
        // Если нода указана в URL, используем её напрямую
        // Это нужно для кластерных окружений где /resources может не вернуть все ноды
        if (instanceNode) {
            // Напрямую загружаем статус инстанса по известной ноде
            const statusEndpoint = instanceType === 'qemu' 
                ? `/proxmox/api/${serverId}/vm/${vmid}/status?node=${instanceNode}`
                : `/proxmox/api/${serverId}/container/${vmid}/status?node=${instanceNode}`;
            
            const statusRes = await fetchWithAuth(statusEndpoint);
            
            if (statusRes && statusRes.ok) {
                const statusData = await statusRes.json();
                instanceName = statusData.name || `${instanceType === 'qemu' ? 'VM' : 'LXC'}-${vmid}`;
                instanceStatus = statusData.status || 'unknown';
                
                // Update UI
                document.getElementById('instance-name').textContent = instanceName;
                document.getElementById('instance-icon').innerHTML = instanceType === 'qemu' ? '<i class="fa-solid fa-computer"></i>' : '<i class="fa-solid fa-cube"></i>';
                
                const typeBadge = document.getElementById('instance-type-badge');
                typeBadge.textContent = instanceType === 'qemu' ? 'QEMU' : 'LXC';
                typeBadge.style.background = instanceType === 'qemu' ? 'var(--info)' : 'var(--purple)';
                
                updateStatus(instanceStatus);
                updateButtons(instanceStatus);
                
                // Загружаем конфигурацию и графики
                await Promise.all([
                    loadConfig(),
                    loadRRDData()
                ]);
                
                document.getElementById('loading').style.display = 'none';
                document.getElementById('instance-content').style.display = 'block';
                return;
            }
            // Если запрос статуса не удался, пробуем через /resources
        }
        
        // Fallback: Get resources list to find node and status
        const resourcesRes = await fetchWithAuth(`/proxmox/api/${serverId}/resources`);
        
        if (!resourcesRes || !resourcesRes.ok) {
            const errorText = resourcesRes ? await resourcesRes.text() : 'No response';
            throw new Error(t('failed_to_load_resources') + ': ' + errorText);
        }
        
        const resources = await resourcesRes.json();
        
        const allResources = [...(resources.vms || []), ...(resources.containers || [])];
        
        const instance = allResources.find(r => r.vmid === vmid);
        
        if (!instance) {
            throw new Error(t('instance_not_found') + ': VMID ' + vmid);
        }
        
        instanceNode = instance.node;
        instanceName = instance.name || `VM-${vmid}`;
        instanceStatus = instance.status;
        
        // Update UI
        document.getElementById('instance-name').textContent = instanceName;
        document.getElementById('instance-icon').innerHTML = instanceType === 'qemu' ? '<i class="fa-solid fa-computer"></i>' : '<i class="fa-solid fa-cube"></i>';
        
        const typeBadge = document.getElementById('instance-type-badge');
        typeBadge.textContent = instanceType === 'qemu' ? 'QEMU' : 'LXC';
        typeBadge.style.background = instanceType === 'qemu' ? 'var(--info)' : 'var(--purple)';
        
        updateStatus(instanceStatus);
        updateButtons(instanceStatus);
        
        // Загружаем статус и конфигурацию
        await Promise.all([
            loadStatus(),
            loadConfig(),
            loadRRDData()
        ]);
        
        document.getElementById('loading').style.display = 'none';
        document.getElementById('instance-content').style.display = 'block';
        
    } catch (error) {
        console.error('Error loading instance:', error);
        document.getElementById('loading').innerHTML = `
            <div style="color: var(--danger);">
                <div style="font-size: 2rem; margin-bottom: 1rem;"><i class="fa-solid fa-circle-xmark"></i></div>
                <p>${error.message}</p>
                <a href="/virtual-machines" class="btn" style="margin-top: 1rem;">← ${t('back_to_vms')}</a>
            </div>
        `;
    }
}

function updateStatus(status) {
    const statusEl = document.getElementById('instance-status');
    const dot = statusEl.querySelector('.status-dot');
    const text = statusEl.querySelector('.status-text');
    
    if (status === 'running') {
        dot.style.background = 'var(--success)';
        text.textContent = 'Running';
        text.style.color = 'var(--success)';
    } else {
        dot.style.background = 'var(--danger)';
        text.textContent = 'Stopped';
        text.style.color = 'var(--danger)';
    }
}

function updateButtons(status) {
    // Check permissions before showing buttons
    const canStart = window.hasPermission('vms.start');
    const canStop = window.hasPermission('vms.stop');
    const canRestart = window.hasPermission('vms.restart');
    
    document.getElementById('btn-start').style.display = (status !== 'running' && canStart) ? 'inline-flex' : 'none';
    document.getElementById('btn-stop').style.display = (status === 'running' && canStop) ? 'inline-flex' : 'none';
    document.getElementById('btn-kill').style.display = (status === 'running' && canStop) ? 'inline-flex' : 'none';
    document.getElementById('btn-restart').style.display = (status === 'running' && canRestart) ? 'inline-flex' : 'none';
}

async function loadStatus() {
    try {
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/${apiType}/${vmid}/status?node=${instanceNode}`);
        if (!response.ok) return;
        
        const status = await response.json();
        if (!status) return;
        
        // CPU
        const cpuPercent = ((status.cpu || 0) * 100).toFixed(1);
        document.getElementById('metric-cpu').textContent = `${cpuPercent}%`;
        const cpuBar = document.getElementById('metric-cpu-bar');
        cpuBar.style.width = `${cpuPercent}%`;
        cpuBar.className = `progress-fill ${cpuPercent > 80 ? 'danger' : cpuPercent > 60 ? 'warning' : ''}`;
        
        // Memory
        const memUsed = status.mem || 0;
        const memMax = status.maxmem || 1;
        const memPercent = ((memUsed / memMax) * 100).toFixed(1);
        document.getElementById('metric-memory').textContent = `${memPercent}%`;
        document.getElementById('metric-memory-detail').textContent = `${formatBytes(memUsed)} / ${formatBytes(memMax)}`;
        const memBar = document.getElementById('metric-memory-bar');
        memBar.style.width = `${memPercent}%`;
        memBar.className = `progress-fill ${memPercent > 80 ? 'danger' : memPercent > 60 ? 'warning' : ''}`;
        
        // Disk - для QEMU виртуальных машин Proxmox не возвращает disk usage
        // Показываем только если данные есть (для LXC контейнеров)
        const diskUsed = status.disk || 0;
        const diskMax = status.maxdisk || 0;
        const diskCard = document.getElementById('disk-metric-card');
        
        if (diskMax > 0 && diskUsed > 0) {
            const diskPercent = ((diskUsed / diskMax) * 100).toFixed(1);
            document.getElementById('metric-disk').textContent = `${diskPercent}%`;
            document.getElementById('metric-disk-detail').textContent = `${formatBytes(diskUsed)} / ${formatBytes(diskMax)}`;
            const diskBar = document.getElementById('metric-disk-bar');
            diskBar.style.width = `${diskPercent}%`;
            diskBar.className = `progress-fill ${diskPercent > 80 ? 'danger' : diskPercent > 60 ? 'warning' : ''}`;
            if (diskCard) diskCard.style.display = '';
        } else if (diskMax > 0) {
            // Есть maxdisk но нет disk - показываем размер диска
            document.getElementById('metric-disk').textContent = formatBytes(diskMax);
            document.getElementById('metric-disk-detail').textContent = t('disk_size');
            document.getElementById('metric-disk-bar').style.display = 'none';
            if (diskCard) diskCard.style.display = '';
        } else {
            // Нет данных о диске - скрываем карточку
            if (diskCard) diskCard.style.display = 'none';
        }
        
        // Uptime
        document.getElementById('metric-uptime').textContent = formatUptime(status.uptime);
        
        // Network
        document.getElementById('metric-netin').textContent = formatBytes(status.netin || 0);
        document.getElementById('metric-netout').textContent = formatBytes(status.netout || 0);
        
        // Disk I/O
        document.getElementById('metric-diskread').textContent = formatBytes(status.diskread || 0);
        document.getElementById('metric-diskwrite').textContent = formatBytes(status.diskwrite || 0);
        
        // Обновляем статус
        instanceStatus = status.status;
        updateStatus(status.status);
        updateButtons(status.status);
        
    } catch (error) {
        console.error('Error loading status:', error);
    }
}

async function loadConfig() {
    try {
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/${apiType}/${vmid}/config?node=${instanceNode}`);
        if (!response.ok) return;
        
        instanceConfig = await response.json();
        if (!instanceConfig) return;
        
        document.getElementById('config-json').textContent = JSON.stringify(instanceConfig, null, 2);
        
        // Обновляем информацию о ядрах CPU
        const cores = instanceConfig.cores || 1;
        const cpuDetail = document.getElementById('metric-cpu-detail');
        if (cpuDetail) {
            cpuDetail.textContent = `${cores} ${cores === 1 ? 'core' : 'cores'}`;
        }
    } catch (error) {
        console.error('Error loading config:', error);
    }
    
    // Загружаем информацию о сетевых интерфейсах асинхронно (не блокирует загрузку страницы)
    loadNetworkInterfaces().catch(err => console.error('Failed to load network interfaces:', err));
}

async function loadNetworkInterfaces() {
    try {
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/${apiType}/${vmid}/interfaces?node=${instanceNode}`);
        if (!response.ok) return;
        
        const data = await response.json();
        const interfaces = data.interfaces || [];
        
        if (interfaces.length > 0) {
            displayNetworkInterfaces(interfaces);
            // Если интерфейсы доступны и это VM (qemu), значит guest agent работает
            if (instanceType === 'qemu') {
                document.getElementById('command-execution-card').style.display = 'block';
            }
        } else {
            document.getElementById('network-interfaces-empty').style.display = 'block';
            document.getElementById('network-interfaces-card').style.display = 'block';
        }
    } catch (error) {
        console.error('Error loading network interfaces:', error);
    }
}

function displayNetworkInterfaces(interfaces) {
    const container = document.getElementById('network-interfaces-list');
    container.innerHTML = '';
    
    interfaces.forEach(iface => {
        const ifaceDiv = document.createElement('div');
        ifaceDiv.style.cssText = 'background: var(--bg-tertiary); padding: 1rem; border-radius: 8px; border-left: 3px solid var(--accent);';
        
        let html = `
            <div style="display: flex; justify-content: space-between; align-items: start; flex-wrap: wrap; gap: 0.5rem;">
                <div>
                    <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 0.5rem;">
                        <i class="fa-solid fa-plug"></i> ${iface.name}
                    </div>
        `;
        
        if (iface.hardware_address) {
            html += `
                    <div style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 0.5rem;">
                        MAC: <code style="background: var(--bg-secondary); padding: 0.15rem 0.4rem; border-radius: 4px;">${iface.hardware_address}</code>
                    </div>
            `;
        }
        
        if (iface.ips && iface.ips.length > 0) {
            html += '<div style="display: flex; flex-direction: column; gap: 0.35rem;">';
            iface.ips.forEach(ip => {
                const icon = ip.type === 'ipv4' 
                    ? '<i class="fa-solid fa-globe" style="color: var(--success);"></i>' 
                    : '<i class="fa-solid fa-earth-americas" style="color: var(--info);"></i>';
                const badge = ip.type === 'ipv4' ? 
                    '<span class="badge badge-success">IPv4</span>' :
                    '<span class="badge badge-info">IPv6</span>';
                html += `
                    <div style="display: flex; align-items: center; gap: 0.5rem;">
                        ${icon} ${badge}
                        <code style="background: var(--bg-surface-hover); padding: 0.25rem 0.6rem; border-radius: 4px; color: var(--text-primary); font-weight: 500;">${ip.address}/${ip.prefix}</code>
                    </div>
                `;
            });
            html += '</div>';
        }
        
        html += `
                </div>
            </div>
        `;
        
        ifaceDiv.innerHTML = html;
        container.appendChild(ifaceDiv);
    });
    
    document.getElementById('network-interfaces-card').style.display = 'block';
    document.getElementById('network-interfaces-empty').style.display = 'none';
}

// ==================== Выполнение команд ====================

async function executeQuickCommand(command) {
    await executeCommand(command);
}

async function executeCustomCommand() {
    const commandInput = document.getElementById('custom-command');
    const command = commandInput.value.trim();
    
    if (!command) {
        showNotification(t('enter_command'), 'error');
        return;
    }
    
    await executeCommand(command);
}

async function executeBashScript() {
    const scriptTextarea = document.getElementById('bash-script');
    const script = scriptTextarea.value.trim();
    
    if (!script) {
        showNotification(t('enter_script'), 'error');
        return;
    }
    
    const outputDiv = document.getElementById('command-output');
    const outputContent = document.getElementById('command-output-content');
    
    outputDiv.style.display = 'block';
    outputContent.innerHTML = `<i class="fa-solid fa-spinner fa-spin"></i> ${t('executing_script')}\n`;
    
    try {
        const timeout = 60; // 60 секунд для скрипта
        
        // Создаём FormData для отправки скрипта
        const formData = new URLSearchParams();
        formData.append('script', script);
        formData.append('interpreter', '/bin/bash');
        
        const response = await fetchWithAuth(
            `/proxmox/api/${serverId}/vm/${vmid}/execute-script?node=${instanceNode}&timeout=${timeout}`,
            {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: formData.toString()
            }
        );
        
        if (!response.ok) {
            const error = await response.json().catch(() => ({ detail: 'Unknown error' }));
            outputContent.innerHTML = `<i class="fa-solid fa-circle-xmark"></i> ${t('error')}: ${escapeHtml(JSON.stringify(error.detail || error))}`;
            showNotification(t('script_execution_error'), 'error');
            return;
        }
        
        const result = await response.json();
        displayCommandOutput(result);
        
    } catch (error) {
        outputContent.innerHTML = `<i class="fa-solid fa-circle-xmark"></i> ${t('error')}: ${escapeHtml(error.message)}`;
        showNotification(t('script_execution_error'), 'error');
    }
}

// Helper function to escape HTML
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

async function executeCommand(command) {
    const outputDiv = document.getElementById('command-output');
    const outputContent = document.getElementById('command-output-content');
    
    outputDiv.style.display = 'block';
    outputContent.innerHTML = `$ ${command}\n<i class="fa-solid fa-spinner fa-spin"></i> ${t('executing_command')}\n`;
    
    try {
        const timeout = 30;
        const response = await fetchWithAuth(
            `/proxmox/api/${serverId}/vm/${vmid}/execute?node=${instanceNode}&command=${encodeURIComponent(command)}&timeout=${timeout}`,
            {
                method: 'POST'
            }
        );
        
        if (!response.ok) {
            const error = await response.text();
            outputContent.innerHTML = `$ ${command}\n<i class="fa-solid fa-circle-xmark"></i> ${t('error')}: ${error}`;
            showNotification(t('command_execution_error'), 'error');
            return;
        }
        
        const result = await response.json();
        displayCommandOutput(result, command);
        
    } catch (error) {
        outputContent.innerHTML = `$ ${command}\n<i class="fa-solid fa-circle-xmark"></i> ${t('error')}: ${error.message}`;
        showNotification(t('command_execution_error'), 'error');
    }
}

function displayCommandOutput(result, command = null) {
    const outputContent = document.getElementById('command-output-content');
    
    let output = '';
    if (command) {
        output += `$ ${command}\n\n`;
    }
    
    if (result.success) {
        if (result.stdout) {
            output += result.stdout;
        }
        if (result.stderr) {
            output += '\n--- STDERR ---\n' + result.stderr;
        }
        output += `\n\n<i class="fa-solid fa-circle-check"></i> Exit code: ${result.exit_code}`;
        
        showNotification(t('command_executed_successfully'), 'success');
    } else {
        output += `<i class="fa-solid fa-circle-xmark"></i> ${t('error')}: ${result.error || t('unknown_error')}\n`;
        if (result.stdout) {
            output += '\n--- STDOUT ---\n' + result.stdout;
        }
        if (result.stderr) {
            output += '\n--- STDERR ---\n' + result.stderr;
        }
        if (result.exit_code !== undefined && result.exit_code !== -1) {
            output += `\n\nExit code: ${result.exit_code}`;
        }
        
        showNotification(t('execution_error'), 'error');
    }
    
    outputContent.textContent = output;
}

async function loadRRDData(timeframe = 'hour') {
    try {
        let rrdData = null;
        // WS request-response
        if (typeof sendWsRequest === 'function') {
            try {
                const resp = await sendWsRequest('get_rrd', {
                    server_id: serverId, vmid, inst_type: instanceType,
                    node: instanceNode, timeframe
                });
                if (resp && resp.data) rrdData = resp.data;
            } catch { rrdData = null; }
        }
        const data = Array.isArray(rrdData) ? rrdData : (rrdData.data || []);
        if (data.length > 0) drawCharts(data, timeframe);
    } catch (error) {
        console.error('Error loading RRD data:', error);
    }
}

function changeTimeframe(timeframe) {
    currentTimeframe = timeframe;
    
    // Обновляем кнопки
    ['hour', 'day', 'week', 'month'].forEach(tf => {
        const btn = document.getElementById(`btn-${tf}`);
        if (btn) {
            if (tf === timeframe) {
                btn.style.border = '2px solid var(--text-primary)';
            } else {
                btn.style.border = '2px solid transparent';
            }
        }
    });
    
    // Загружаем новые данные
    loadRRDData(timeframe);
}

function drawCharts(data, timeframe = 'hour') {
    const chartConfig = {
        responsive: true,
        maintainAspectRatio: true,
        plugins: {
            legend: { display: false },
            tooltip: { enabled: true, mode: 'index', intersect: false }
        },
        scales: {
            x: {
                type: 'category',
                grid: { color: 'rgba(255,255,255,0.1)' },
                ticks: { color: '#b0b0b0', maxTicksLimit: 8 }
            },
            y: {
                beginAtZero: true,
                grid: { color: 'rgba(255,255,255,0.1)' },
                ticks: { color: '#b0b0b0' }
            }
        }
    };
    
    const formatTime = (timestamp) => {
        const date = new Date(timestamp * 1000);
        if (timeframe === 'hour') {
            return date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
        } else if (timeframe === 'day') {
            return date.toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' });
        } else if (timeframe === 'week' || timeframe === 'month') {
            return date.toLocaleDateString('ru-RU', { day: '2-digit', month: '2-digit' });
        }
        return date.toLocaleString('ru-RU', { day: '2-digit', month: '2-digit', hour: '2-digit' });
    };
    
    const labels = data.map(d => formatTime(d.time));
    
    // Получаем количество ядер из конфигурации
    const cores = instanceConfig?.cores || 1;
    
    // CPU Chart - одна линия общей загрузки CPU
    const cpuCtx = document.getElementById('chart-cpu');
    if (cpuCtx) {
        if (cpuChart) cpuChart.destroy();
        
        cpuChart = new Chart(cpuCtx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [{
                    label: `CPU % (${cores} ${cores === 1 ? t('core') : t('cores')})`,
                    data: data.map(d => ((d.cpu || 0) * 100).toFixed(2)),
                    borderColor: '#8b5cf6',
                    backgroundColor: 'rgba(139, 92, 246, 0.1)',
                    borderWidth: 2,
                    tension: 0.4,
                    fill: true,
                    pointRadius: 0
                }]
            },
            options: {
                ...chartConfig,
                plugins: {
                    ...chartConfig.plugins,
                    legend: { 
                        display: false
                    },
                    tooltip: {
                        enabled: true,
                        mode: 'index',
                        intersect: false,
                        callbacks: {
                            label: function(context) {
                                return 'CPU: ' + context.parsed.y + '%';
                            }
                        }
                    }
                },
                scales: {
                    ...chartConfig.scales,
                    y: {
                        ...chartConfig.scales.y,
                        max: 100,
                        ticks: {
                            ...chartConfig.scales.y.ticks,
                            callback: function(value) {
                                return value + '%';
                            }
                        }
                    }
                }
            }
        });
    }
    
    // Memory Chart (в гигабайтах)
    const memCtx = document.getElementById('chart-memory');
    if (memCtx) {
        if (memoryChart) memoryChart.destroy();
        
        // Получаем максимальную память для отображения на графике
        const maxMemGB = data.length > 0 ? ((data[0].maxmem || 1) / (1024**3)).toFixed(2) : 0;
        
        memoryChart = new Chart(memCtx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: t('used'),
                        data: data.map(d => {
                            const used = d.mem || d.memused || 0;
                            return (used / (1024**3)).toFixed(2);
                        }),
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59, 130, 246, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        fill: true,
                        pointRadius: 0
                    },
                    {
                        label: t('allocated'),
                        data: data.map(d => {
                            const max = d.maxmem || d.memtotal || 1;
                            return (max / (1024**3)).toFixed(2);
                        }),
                        borderColor: '#94a3b8',
                        backgroundColor: 'rgba(148, 163, 184, 0.05)',
                        borderWidth: 1,
                        borderDash: [5, 5],
                        tension: 0.4,
                        fill: false,
                        pointRadius: 0
                    }
                ]
            },
            options: {
                ...chartConfig,
                plugins: {
                    ...chartConfig.plugins,
                    legend: { 
                        display: true, 
                        position: 'top', 
                        labels: { color: '#b0b0b0', usePointStyle: true, font: { size: 11 } } 
                    },
                    tooltip: {
                        enabled: true,
                        mode: 'index',
                        intersect: false,
                        callbacks: {
                            label: function(context) {
                                return context.dataset.label + ': ' + context.parsed.y + ' GB';
                            }
                        }
                    }
                },
                scales: {
                    ...chartConfig.scales,
                    y: {
                        ...chartConfig.scales.y,
                        ticks: {
                            color: '#b0b0b0',
                            callback: function(value) {
                                return value + ' GB';
                            }
                        }
                    }
                }
            }
        });
    }
    
    // Network Chart
    const netCtx = document.getElementById('chart-network');
    if (netCtx) {
        if (networkChart) networkChart.destroy();
        networkChart = new Chart(netCtx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'In',
                        data: data.map(d => ((d.netin || 0) / (1024*1024)).toFixed(2)),
                        borderColor: '#4ade80',
                        backgroundColor: 'rgba(74, 222, 128, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        pointRadius: 0
                    },
                    {
                        label: 'Out',
                        data: data.map(d => ((d.netout || 0) / (1024*1024)).toFixed(2)),
                        borderColor: '#f87171',
                        backgroundColor: 'rgba(248, 113, 113, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        pointRadius: 0
                    }
                ]
            },
            options: {
                ...chartConfig,
                plugins: {
                    ...chartConfig.plugins,
                    legend: { display: true, position: 'top', labels: { color: '#b0b0b0', usePointStyle: true } }
                }
            }
        });
    }
    
    // Disk I/O Chart
    const diskCtx = document.getElementById('chart-disk');
    if (diskCtx) {
        if (diskChart) diskChart.destroy();
        diskChart = new Chart(diskCtx, {
            type: 'line',
            data: {
                labels: labels,
                datasets: [
                    {
                        label: 'Read',
                        data: data.map(d => ((d.diskread || 0) / (1024*1024)).toFixed(2)),
                        borderColor: '#60a5fa',
                        backgroundColor: 'rgba(96, 165, 250, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        pointRadius: 0
                    },
                    {
                        label: 'Write',
                        data: data.map(d => ((d.diskwrite || 0) / (1024*1024)).toFixed(2)),
                        borderColor: '#fbbf24',
                        backgroundColor: 'rgba(251, 191, 36, 0.1)',
                        borderWidth: 2,
                        tension: 0.4,
                        pointRadius: 0
                    }
                ]
            },
            options: {
                ...chartConfig,
                plugins: {
                    ...chartConfig.plugins,
                    legend: { display: true, position: 'top', labels: { color: '#b0b0b0', usePointStyle: true } }
                }
            }
        });
    }
}

// Модальное окно подтверждения
function showConfirmModal(icon, title, message, btnColor, action) {
    pendingAction = action;
    document.getElementById('confirmIcon').innerHTML = icon;
    document.getElementById('confirmTitle').textContent = title;
    document.getElementById('confirmMessage').innerHTML = message;
    document.getElementById('confirmBtn').style.background = btnColor;
    document.getElementById('confirmModal').style.display = 'flex';
}

function closeConfirmModal() {
    document.getElementById('confirmModal').style.display = 'none';
}

async function executeConfirmedAction() {
    if (pendingAction && typeof pendingAction === 'function') {
        const actionToExecute = pendingAction;
        pendingAction = null;
        closeConfirmModal();
        await actionToExecute();
    }
}

async function controlInstance(action) {
    const actionConfig = {
        start: { icon: '<i class="fa-solid fa-play"></i>', title: t('action_start'), color: 'var(--success)' },
        stop: { icon: '<i class="fa-solid fa-stop"></i>', title: t('action_stop'), color: 'var(--danger)' },
        kill: { icon: '<i class="fa-solid fa-skull"></i>', title: t('action_kill'), color: '#7f1d1d' },
        restart: { icon: '<i class="fa-solid fa-rotate"></i>', title: t('action_restart'), color: 'var(--warning)' }
    };
    
    const config = actionConfig[action];
    const warningText = action === 'kill' ? '\n\n' + t('kill_warning') : '';
    
    showConfirmModal(
        config.icon,
        config.title,
        `${t('confirm_action')} "${instanceName}"?${warningText}`,
        config.color,
        async () => {
            try {
                // Для kill используем stop с force=1
                const url = action === 'kill' 
                    ? `/proxmox/api/${serverId}/${apiType}/${vmid}/stop?node=${instanceNode}&force=1`
                    : `/proxmox/api/${serverId}/${apiType}/${vmid}/${action}?node=${instanceNode}`;
                
                const response = await fetchWithAuth(url, {
                    method: 'POST'
                });
                
                if (response.ok) {
                    showNotification(`<i class="fa-solid fa-circle-check"></i> ${t('command_sent')}: ${config.title}`, 'success');
                    setTimeout(loadStatus, 3000);
                } else {
                    const error = await response.json();
                    showNotification(`<i class="fa-solid fa-circle-xmark"></i> ${t('error')}: ${error.detail}`, 'error');
                }
            } catch (error) {
                showNotification('<i class="fa-solid fa-circle-xmark"></i> ' + t('connection_error'), 'error');
            }
        }
    );
}

async function deleteInstance() {
    // First confirmation
    const confirmed = await showDeleteConfirm(
        `${t('delete_instance_confirm').replace('{name}', instanceName).replace('{id}', vmid)}`,
        t('delete_instance')
    );
    
    if (!confirmed) return;
    
    // Second confirmation - enter ID
    const confirmId = await showPrompt(
        t('enter_id_to_confirm').replace('{id}', vmid),
        t('confirm_deletion'),
        { 
            type: 'danger',
            icon: '<i class="fa-solid fa-triangle-exclamation"></i>',
            placeholder: vmid.toString(),
            confirmText: t('delete') || 'Удалить',
            confirmClass: 'danger'
        }
    );
    
    if (confirmId === null) return;
    
    if (confirmId !== String(vmid)) {
        showNotification('<i class="fa-solid fa-circle-xmark"></i> ' + t('id_mismatch'), 'error');
        return;
    }
    
    try {
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/${apiType}/${vmid}?node=${instanceNode}&force=true`, {
            method: 'DELETE'
        });
        
        if (response.ok) {
            showNotification('<i class="fa-solid fa-circle-check"></i> ' + t('instance_deleted'), 'success');
            setTimeout(() => {
                window.location.href = `/proxmox/server/${serverId}`;
            }, 1500);
        } else {
            const error = await response.json();
            showNotification(`<i class="fa-solid fa-circle-xmark"></i> ${t('error')}: ${error.detail}`, 'error');
        }
    } catch (error) {
        showNotification('<i class="fa-solid fa-circle-xmark"></i> ' + t('connection_error'), 'error');
    }
}

// Toast уведомления
function showNotification(message, type = 'info') {
    const colors = {
        success: 'var(--success)',
        error: 'var(--danger)',
        warning: 'var(--warning)',
        info: 'var(--primary)'
    };
    
    const toast = document.createElement('div');
    toast.style.cssText = `
        position: fixed;
        bottom: 2rem;
        right: 2rem;
        background: ${colors[type]};
        color: var(--text-on-primary);
        padding: 1rem 1.5rem;
        border-radius: 8px;
        font-weight: 500;
        z-index: 3000;
        animation: slideIn 0.3s ease;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    `;
    toast.innerHTML = message;
    
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.style.animation = 'slideOut 0.3s ease';
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}

// VNC
async function openVNC() {
    const modal = document.getElementById('vncModal');
    const vncContent = document.getElementById('vncContent');
    
    modal.style.display = 'flex';
    document.getElementById('vncTitle').innerHTML = `<i class="fa-solid fa-desktop"></i> VNC Console: ${instanceName}`;
    vncContent.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> ${t('connecting')}</div>`;
    
    try {
        // Wait for RFB to be loaded
        const RFBClass = await window.waitForRFB();
        if (!RFBClass) {
            throw new Error(t('novnc_not_loaded'));
        }
        
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/${apiType}/${vmid}/vnc?node=${instanceNode}`);
        
        if (!response) {
            throw new Error('Not authenticated - redirecting to login');
        }
        
        if (!response.ok) {
            const errorData = await response.json().catch(() => ({}));
            throw new Error(errorData.detail || `HTTP ${response.status}`);
        }
        
        const vncData = await response.json();
        
        // Очистить контейнер
        vncContent.innerHTML = '';
        
        // Создать URL для websocket подключения через наш прокси (передаём напрямую в noVNC)
        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const wsHost = window.location.host;
        // Backend expects vm/container, not qemu/lxc
        const resourceType = vncData.type === 'qemu' ? 'vm' : 'container';
        
        const wsUrl = `${protocol}//${wsHost}/proxmox/ws/vnc/${serverId}/${vncData.node}/${resourceType}/${vmid}?port=${vncData.port}&vncticket=${encodeURIComponent(vncData.ticket)}&auth_ticket=${encodeURIComponent(vncData.auth_ticket)}`;
        
        const vncPassword = vncData.password || '';
        
        // noVNC управляет WebSocket самостоятельно через URL
        vncConnection = new RFBClass(vncContent, wsUrl, {
            credentials: { password: vncPassword }
        });
        
        vncConnection.scaleViewport = true;
        vncConnection.resizeSession = true;
        
        vncConnection.addEventListener('connect', () => {
            setTimeout(() => {
                if (vncConnection && vncConnection._display) {
                    vncConnection._display.autoscale(vncContent.clientWidth, vncContent.clientHeight);
                }
            }, 500);
        });
        
        vncConnection.addEventListener('credentialsrequired', (e) => {
            vncConnection.sendCredentials({ password: vncPassword });
        });
        
        vncConnection.addEventListener('disconnect', (e) => {
            if (e.detail.clean) {
                vncContent.innerHTML = `<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary);">${t('connection_closed')}</div>`;
            } else {
                vncContent.innerHTML = `
                    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--text-secondary); padding: 2rem;">
                        <div style="font-size: 2rem; margin-bottom: 1rem;"><i class="fa-solid fa-triangle-exclamation"></i></div>
                        <div style="margin-bottom: 1rem; font-size: 1.125rem;">${t('connection_interrupted')}</div>
                        <div style="background: var(--bg-tertiary); padding: 1.5rem; border-radius: 8px; max-width: 500px; text-align: left; margin-bottom: 1rem;">
                            <p style="color: var(--text-muted); font-size: 0.875rem; margin-bottom: 0.5rem;">
                                <strong>${t('possible_reasons')}:</strong>
                            </p>
                            <ul style="color: var(--text-muted); font-size: 0.8rem; margin-left: 1rem;">
                                <li>${t('vnc_requires_password')}</li>
                                <li>${t('vnc_add_password')}</li>
                                <li>${t('vnc_vm_may_be_off')}</li>
                            </ul>
                        </div>
                        <div style="display: flex; gap: 1rem;">
                            <button onclick="openVNC()" class="btn btn-primary"><i class="fa-solid fa-rotate"></i> ${t('reconnect')}</button>
                            <a href="https://${vncData.host}:8006" target="_blank" class="btn btn-secondary"><i class="fa-solid fa-globe"></i> ${t('open_proxmox')}</a>
                        </div>
                    </div>
                `;
            }
        });
        
        vncConnection.addEventListener('securityfailure', (e) => {
            vncContent.innerHTML = `
                <div style="padding: 2rem; text-align: center;">
                    <div style="font-size: 2rem; margin-bottom: 1rem;"><i class="fa-solid fa-lock"></i></div>
                    <div class="text-danger">${t('vnc_security_error')}</div>
                    <p style="color: var(--text-muted); font-size: 0.875rem; margin-top: 0.5rem;">${e.detail.reason || t('unknown_error')}</p>
                </div>
            `;
        });
        
    } catch (error) {
        vncContent.innerHTML = `<div style="padding: 2rem; text-align: center; color: var(--text-secondary);"><i class="fa-solid fa-circle-xmark"></i> ${error.message}</div>`;
    }
}

function closeVNCModal() {
    if (vncConnection) {
        vncConnection.disconnect();
        vncConnection = null;
    }
    document.getElementById('vncModal').style.display = 'none';
}

// === TERMINAL (xterm.js) FUNCTIONS ===
let terminalInstance = null;
let terminalWebSocket = null;
let fitAddon = null;

async function openTerminal() {
    const modal = document.getElementById('terminalModal');
    document.getElementById('terminalTitle').innerHTML = `<i class="fa-solid fa-terminal"></i> Terminal: ${instanceName || 'Instance'} (${vmid})`;
    document.getElementById('terminalStatus').textContent = t('connecting') + '...';
    document.getElementById('terminalContent').innerHTML = '';
    
    modal.style.display = 'flex';
    
    // Small delay to ensure modal is visible
    setTimeout(() => {
        connectTerminal();
    }, 100);
}

async function connectTerminal() {
    const terminalContent = document.getElementById('terminalContent');
    const statusEl = document.getElementById('terminalStatus');
    
    try {
        // Initialize xterm.js
        terminalInstance = new Terminal({
            cursorBlink: true,
            fontSize: 14,
            fontFamily: '"JetBrains Mono", "Fira Code", "Consolas", monospace',
            theme: {
                background: '#1a1a1a',
                foreground: '#e0e0e0',
                cursor: '#00ff00',
                cursorAccent: '#1a1a1a',
                selection: 'rgba(255, 255, 255, 0.3)',
                black: '#000000',
                red: '#ff5555',
                green: '#50fa7b',
                yellow: '#f1fa8c',
                blue: '#6272a4',
                magenta: '#ff79c6',
                cyan: '#8be9fd',
                white: '#f8f8f2',
                brightBlack: '#6272a4',
                brightRed: '#ff6e6e',
                brightGreen: '#69ff94',
                brightYellow: '#ffffa5',
                brightBlue: '#d6acff',
                brightMagenta: '#ff92df',
                brightCyan: '#a4ffff',
                brightWhite: '#ffffff'
            },
            allowTransparency: false,
            scrollback: 10000,
            tabStopWidth: 4
        });
        
        // Add fit addon
        fitAddon = new FitAddon.FitAddon();
        terminalInstance.loadAddon(fitAddon);
        
        // Add web links addon
        const webLinksAddon = new WebLinksAddon.WebLinksAddon();
        terminalInstance.loadAddon(webLinksAddon);
        
        // Open terminal in container
        terminalInstance.open(terminalContent);
        fitAddon.fit();
        
        // Connect WebSocket для терминала
        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const wsHost = window.location.host;
        
        const wsUrl = `${protocol}//${wsHost}/proxmox/ws/terminal/${serverId}/${instanceNode}/${vmid}`;
        
        terminalWebSocket = new WebSocket(wsUrl);
        terminalWebSocket.binaryType = 'arraybuffer';
        
        // TextEncoder для правильного подсчёта байтов UTF-8
        const textEncoder = new TextEncoder();
        
        terminalWebSocket.onopen = () => {
            statusEl.textContent = t('connected') || 'Connected';
            statusEl.style.color = 'var(--success)';
            terminalInstance.focus();
            
            // Send initial resize — fallback to 80x24 if proposeDimensions returns null
            // (happens when xterm.css not loaded yet)
            const sendResize = () => {
                const dims = fitAddon.proposeDimensions();
                const cols = dims ? dims.cols : 80;
                const rows = dims ? dims.rows : 24;
                terminalWebSocket.send(`1:${cols}:${rows}:`);
            };
            // Send immediately and re-send after layout settles
            sendResize();
            setTimeout(sendResize, 200);
        };
        
        terminalWebSocket.onmessage = (event) => {
            if (event.data instanceof ArrayBuffer) {
                const data = new Uint8Array(event.data);
                terminalInstance.write(data);
            } else {
                terminalInstance.write(event.data);
            }
        };
        
        terminalWebSocket.onclose = (event) => {
            statusEl.textContent = t('disconnected') || 'Disconnected';
            statusEl.style.color = 'var(--danger)';
            
            if (!event.wasClean) {
                terminalInstance.write('\r\n\x1b[31m*** Connection closed ***\x1b[0m\r\n');
            }
        };
        
        terminalWebSocket.onerror = (error) => {
            console.error('Terminal WebSocket error:', error);
            statusEl.textContent = t('error') || 'Error';
            statusEl.style.color = 'var(--danger)';
        };
        
        // Send input to WebSocket
        terminalInstance.onData(data => {
            if (terminalWebSocket && terminalWebSocket.readyState === WebSocket.OPEN) {
                // Proxmox terminal protocol: 0:BYTELENGTH:MSG
                const byteLength = textEncoder.encode(data).length;
                const msg = `0:${byteLength}:${data}`;
                terminalWebSocket.send(msg);
            }
        });
        
        // Handle resize
        const handleResize = () => {
            if (fitAddon && terminalInstance && terminalWebSocket && terminalWebSocket.readyState === WebSocket.OPEN) {
                fitAddon.fit();
                const dims = fitAddon.proposeDimensions();
                if (dims) {
                    const resizeMsg = `1:${dims.cols}:${dims.rows}:`;
                    terminalWebSocket.send(resizeMsg);
                }
            }
        };
        window.addEventListener('resize', handleResize);
        
        // Keep-alive ping
        window.terminalPingInterval = setInterval(() => {
            if (terminalWebSocket && terminalWebSocket.readyState === WebSocket.OPEN) {
                terminalWebSocket.send('2');
            }
        }, 120000);
        
    } catch (error) {
        console.error('Terminal error:', error);
        statusEl.textContent = t('error') || 'Error';
        statusEl.style.color = 'var(--danger)';
        
        terminalContent.innerHTML = `
            <div style="padding: 2rem; text-align: center;">
                <div style="background: var(--bg-tertiary); padding: 2rem; border-radius: 8px;">
                    <div style="font-size: 2rem; margin-bottom: 1rem;"><i class="fa-solid fa-triangle-exclamation"></i></div>
                    <h3 style="color: var(--text-primary); margin-bottom: 1rem;">${t('terminal_connection_error') || 'Terminal Connection Error'}</h3>
                    <p style="color: var(--text-secondary); margin-bottom: 1rem;">${error.message}</p>
                    <button onclick="closeTerminalModal()" class="btn">${t('close') || 'Close'}</button>
                </div>
            </div>
        `;
    }
}

function closeTerminalModal() {
    // Clear keep-alive ping interval
    if (window.terminalPingInterval) {
        clearInterval(window.terminalPingInterval);
        window.terminalPingInterval = null;
    }
    
    // Close WebSocket connection
    if (terminalWebSocket) {
        terminalWebSocket.close();
        terminalWebSocket = null;
    }
    
    // Dispose terminal instance
    if (terminalInstance) {
        terminalInstance.dispose();
        terminalInstance = null;
    }
    
    fitAddon = null;
    document.getElementById('terminalModal').style.display = 'none';
}

// Edit Modal
async function showEditModal() {
    document.getElementById('editModal').style.display = 'flex';
    const content = document.getElementById('editContent');
    content.innerHTML = '<div style="text-align: center; padding: 2rem; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> Загрузка...</div>';
    
    if (!instanceConfig) await loadConfig();
    
    renderEditForm();
}

function renderEditForm() {
    const config = instanceConfig || {};
    const content = document.getElementById('editContent');
    
    const cores = config.cores || 1;
    const sockets = config.sockets || 1;
    const memory = config.memory || 512;
    const name = config.name || '';
    const onboot = config.onboot || 0;
    
    // Найти диски (исключаем ide0/ide2 - cloud-init диски)
    const disks = [];
    const diskKeys = instanceType === 'qemu' 
        ? ['scsi0', 'scsi1', 'scsi2', 'virtio0', 'virtio1', 'virtio2', 'sata0', 'sata1']
        : ['rootfs', 'mp0', 'mp1', 'mp2'];
    
    diskKeys.forEach(key => {
        if (config[key]) {
            // Пропускаем cloud-init диски
            if (config[key].includes('cloudinit') || config[key].includes('cloud-init')) return;
            
            let currentSize = 'N/A';
            const sizeMatch = config[key].match(/size=(\d+)([GMTK]?)/i);
            if (sizeMatch) currentSize = sizeMatch[1] + (sizeMatch[2] || 'G');
            disks.push({ key, info: config[key], currentSize });
        }
    });
    
    let html = `
        <form onsubmit="saveConfig(event)">
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem;">
                <div>
                    <label style="display: block; color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.25rem;">${t('name')}</label>
                    <input type="text" id="edit-name" value="${name}" style="width: 100%; padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary);">
                </div>
                <div>
                    <label style="display: block; color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.25rem;">${t('cpu_cores')}</label>
                    <input type="number" id="edit-cores" value="${cores}" min="1" max="128" style="width: 100%; padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary);">
                </div>
                <div>
                    <label style="display: block; color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 0.25rem;">${t('memory_mb')}</label>
                    <input type="number" id="edit-memory" value="${memory}" min="128" step="128" style="width: 100%; padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary);">
                </div>
                <div style="display: flex; align-items: center;">
                    <label style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); font-size: 0.875rem; cursor: pointer;">
                        <input type="checkbox" id="edit-onboot" ${onboot ? 'checked' : ''}>
                        ${t('autostart_on_boot')}
                    </label>
                </div>
            </div>
            
            <div style="display: flex; gap: 1rem; justify-content: flex-end;">
                <button type="button" onclick="closeEditModal()" class="btn btn-secondary">${t('cancel')}</button>
                <button type="submit" class="btn btn-success"><i class="fa-solid fa-floppy-disk"></i> ${t('save')}</button>
            </div>
        </form>
    `;
    
    // Диски
    if (disks.length > 0) {
        html += `
            <div style="margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-default);">
                <h4 style="color: var(--text-secondary); margin-bottom: 1rem;"><i class="fa-solid fa-floppy-disk"></i> ${t('disks')}</h4>
                ${disks.map(disk => `
                    <div style="display: flex; align-items: center; gap: 1rem; padding: 0.75rem; background: var(--bg-surface-hover); border-radius: 6px; margin-bottom: 0.5rem;">
                        <div style="flex: 1;">
                            <strong style="color: var(--text-primary);">${disk.key}</strong>
                            <span style="color: var(--text-muted); font-size: 0.75rem; margin-left: 0.5rem;">${t('current_size')}: ${disk.currentSize}</span>
                        </div>
                        <input type="number" id="resize-${disk.key}" placeholder="+10" min="1" style="width: 80px; padding: 0.375rem; border-radius: 4px; border: 1px solid var(--border-default); background: var(--bg-input); color: var(--text-primary); text-align: center;">
                        <span style="color: var(--text-muted);">GB</span>
                        <button type="button" onclick="resizeDisk('${disk.key}')" class="btn btn-sm btn-warning">📐 ${t('increase')}</button>
                    </div>
                `).join('')}
                <p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 0.5rem;"><i class="fa-solid fa-triangle-exclamation"></i> ${t('disk_shrink_not_supported')}</p>
            </div>
        `;
    }
    
    content.innerHTML = html;
}

async function saveConfig(event) {
    event.preventDefault();
    
    const config = {
        name: document.getElementById('edit-name').value,
        cores: parseInt(document.getElementById('edit-cores').value),
        memory: parseInt(document.getElementById('edit-memory').value),
        onboot: document.getElementById('edit-onboot').checked ? 1 : 0
    };
    
    try {
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/${apiType}/${vmid}/config?node=${instanceNode}`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(config)
        });
        
        if (response.ok) {
            showNotification('<i class="fa-solid fa-circle-check"></i> ' + t('config_saved'), 'success');
            closeEditModal();
            loadConfig();
        } else {
            const error = await response.json();
            showNotification(`<i class="fa-solid fa-circle-xmark"></i> ${t('error')}: ${error.detail}`, 'error');
        }
    } catch (error) {
        showNotification('<i class="fa-solid fa-circle-xmark"></i> ' + t('connection_error'), 'error');
    }
}

async function resizeDisk(diskKey) {
    const input = document.getElementById(`resize-${diskKey}`);
    const addSize = parseInt(input.value);
    
    if (!addSize || addSize <= 0) {
        showNotification('<i class="fa-solid fa-circle-xmark"></i> ' + t('enter_positive_number_gb'), 'error');
        return;
    }
    
    const confirmed = await showConfirm(
        t('resize_disk_confirm').replace('{disk}', diskKey).replace('{size}', addSize),
        t('resize_disk') || 'Resize Disk',
        { type: 'warning', confirmText: t('resize') || 'Resize' }
    );
    
    if (!confirmed) return;
    
    try {
        const url = `/proxmox/api/${serverId}/${apiType}/${vmid}/disk/resize?node=${instanceNode}`;
        
        const response = await fetchWithAuth(url, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ disk: diskKey, size: `+${addSize}G` })
        });
        
        if (response.ok) {
            showNotification('<i class="fa-solid fa-circle-check"></i> ' + t('disk_resized'), 'success');
            loadConfig();
            renderEditForm();
        } else {
            const error = await response.json();
            showNotification(`<i class="fa-solid fa-circle-xmark"></i> ${t('error')}: ${error.detail}`, 'error');
        }
    } catch (error) {
        console.error('Resize disk error:', error);
        showNotification('<i class="fa-solid fa-circle-xmark"></i> ' + t('connection_error'), 'error');
    }
}

function closeEditModal() {
    document.getElementById('editModal').style.display = 'none';
}

// Reinstall Modal
async function showReinstallModal() {
    document.getElementById('reinstallModal').style.display = 'flex';
    const content = document.getElementById('reinstallContent');
    content.innerHTML = `<div style="text-align: center; padding: 2rem; color: var(--text-muted);"><i class="fa-solid fa-spinner fa-spin"></i> ${t('loading')}</div>`;
    
    try {
        const [groupsRes, templatesRes] = await Promise.all([
            fetchWithAuth('/templates/api/groups'),
            fetchWithAuth(`/templates/api/templates?server_id=${serverId}&active_only=true`)
        ]);
        
        const groups = groupsRes.ok ? await groupsRes.json() : [];
        const templates = templatesRes.ok ? await templatesRes.json() : [];
        
        if (templates.length === 0) {
            content.innerHTML = `
                <div style="text-align: center; padding: 2rem;">
                    <div style="font-size: 2rem; margin-bottom: 1rem;"><i class="fa-solid fa-cube"></i></div>
                    <p style="color: var(--text-secondary);">${t('no_templates_for_server')}</p>
                    <a href="/templates" class="btn" style="margin-top: 1rem;">${t('add_templates')}</a>
                </div>
            `;
            return;
        }
        
        // Группируем
        const grouped = {};
        templates.forEach(tpl => {
            const gid = tpl.group_id || 'other';
            if (!grouped[gid]) grouped[gid] = [];
            grouped[gid].push(tpl);
        });
        
        let options = `<option value="">${t('select_template')}</option>`;
        groups.forEach(g => {
            if (grouped[g.id]) {
                options += `<optgroup label="${g.icon || ''} ${g.name}">`;
                grouped[g.id].forEach(tpl => {
                    options += `<option value="${tpl.id}" data-vmid="${tpl.vmid}" data-node="${tpl.node}">${tpl.name}</option>`;
                });
                options += '</optgroup>';
            }
        });
        
        content.innerHTML = `
            <div style="margin-bottom: 1rem; padding: 1rem; background: var(--warning-light); border-radius: 8px; border-left: 4px solid var(--warning);">
                <p style="color: var(--warning); margin: 0;"><i class="fa-solid fa-triangle-exclamation"></i> ${t('reinstall_warning')}</p>
            </div>
            
            <form onsubmit="executeReinstall(event)">
                <div style="margin-bottom: 1rem;">
                    <label style="display: block; color: var(--text-secondary); margin-bottom: 0.5rem;">${t('os_template')}:</label>
                    <select id="reinstall-template" required style="width: 100%; padding: 0.75rem; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-tertiary); color: var(--text-primary);">
                        ${options}
                    </select>
                </div>
                
                <div style="margin-bottom: 1rem; padding: 1rem; background: var(--bg-tertiary); border-radius: 8px;">
                    <h4 style="margin: 0 0 0.75rem 0; color: var(--text-primary); font-size: 0.9rem;"><i class="fa-solid fa-lock"></i> ${t('cloud_init_settings')}</h4>
                    
                    <div style="margin-bottom: 0.75rem;">
                        <label style="display: block; color: var(--text-secondary); margin-bottom: 0.25rem; font-size: 0.875rem;">${t('username')}:</label>
                        <input type="text" id="reinstall-user" placeholder="root" style="width: 100%; padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary);">
                    </div>
                    
                    <div style="margin-bottom: 0.75rem;">
                        <label style="display: block; color: var(--text-secondary); margin-bottom: 0.25rem; font-size: 0.875rem;">${t('password')}:</label>
                        <input type="password" id="reinstall-password" placeholder="${t('leave_empty_for_ssh')}" style="width: 100%; padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary);">
                    </div>
                    
                    <div style="margin-bottom: 0;">
                        <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.25rem;">
                            <label style="color: var(--text-secondary); font-size: 0.875rem;">${t('ssh_public_key')}:</label>
                            <button type="button" onclick="loadProfileSshKey()" style="background: none; border: 1px solid var(--border-color); border-radius: 4px; padding: 0.2rem 0.6rem; color: var(--text-secondary); font-size: 0.75rem; cursor: pointer; white-space: nowrap;"><i class="fa-solid fa-key"></i> ${t('use_profile_ssh_key')}</button>
                        </div>
                        <textarea id="reinstall-sshkey" placeholder="ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQ..." rows="3" style="width: 100%; padding: 0.5rem; border-radius: 4px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); font-family: monospace; font-size: 0.75rem; resize: vertical;"></textarea>
                        <small style="color: var(--text-muted); font-size: 0.75rem;">${t('multiple_keys_hint')}</small>
                    </div>
                </div>
                
                <div style="margin-bottom: 1.5rem;">
                    <label style="display: flex; align-items: center; gap: 0.5rem; color: var(--text-secondary); cursor: pointer;">
                        <input type="checkbox" id="reinstall-confirm" required>
                        ${t('confirm_data_loss')}
                    </label>
                </div>
                
                <div style="display: flex; gap: 1rem; justify-content: flex-end;">
                    <button type="button" onclick="closeReinstallModal()" class="btn" style="background: var(--bg-tertiary); color: var(--text-primary);">${t('cancel')}</button>
                    <button type="submit" class="btn btn-warning"><i class="fa-solid fa-compact-disc"></i> ${t('do_reinstall')}</button>
                </div>
            </form>
        `;
    } catch (error) {
        content.innerHTML = `<div style="text-align: center; padding: 2rem; color: var(--danger);"><i class="fa-solid fa-circle-xmark"></i> ${error.message}</div>`;
    }
}

async function loadProfileSshKey() {
    try {
        const res = await fetchWithAuth('/settings/api/profile');
        if (!res.ok) throw new Error('profile_load_error');
        const profile = await res.json();
        const key = profile.ssh_public_key;
        if (!key) {
            showNotification('<i class="fa-solid fa-circle-xmark"></i> ' + (t('no_profile_ssh_key') || 'No SSH key in profile'), 'warning');
            return;
        }
        const textarea = document.getElementById('reinstall-sshkey');
        if (textarea) {
            textarea.value = key;
            showNotification('<i class="fa-solid fa-key"></i> ' + (t('use_profile_ssh_key') || 'Key loaded from profile'), 'success');
        }
    } catch (e) {
        showNotification('<i class="fa-solid fa-circle-xmark"></i> ' + e.message, 'error');
    }
}

async function executeReinstall(event) {
    event.preventDefault();
    
    const select = document.getElementById('reinstall-template');
    const templateId = select.value;
    
    if (!templateId) {
        showNotification('<i class="fa-solid fa-circle-xmark"></i> ' + t('select_template'), 'error');
        return;
    }
    
    // Получаем cloud-init параметры
    const cloudInitUser = document.getElementById('reinstall-user').value.trim();
    const cloudInitPassword = document.getElementById('reinstall-password').value;
    const sshKeys = document.getElementById('reinstall-sshkey').value.trim();
    
    const confirmed = await showDialog({
        type: 'warning',
        icon: '<i class="fa-solid fa-triangle-exclamation"></i>',
        title: t('reinstall') || 'Reinstall',
        message: t('reinstall_confirm').replace('{name}', instanceName),
        confirm: true,
        confirmText: t('do_reinstall') || 'Reinstall',
        cancelText: t('cancel') || 'Cancel',
        confirmClass: 'danger'
    });
    
    if (!confirmed) return;
    
    await doReinstallInstance(templateId, cloudInitUser, cloudInitPassword, sshKeys);
}

async function doReinstallInstance(templateId, cloudInitUser, cloudInitPassword, sshKeys) {
    try {
        // Загружаем сохраненную конфигурацию из базы данных
        showNotification('<i class="fa-solid fa-spinner fa-spin"></i> ' + t('loading_saved_config'), 'warning');
        const savedConfigRes = await fetchWithAuth(`/proxmox/api/${serverId}/vm/${vmid}/saved-config`);
        let savedCores = 1, savedMemory = 512, diskSizeGB = 32, savedIpAddress = null, savedGateway = null;
        
        if (savedConfigRes.ok) {
            const savedData = await savedConfigRes.json();
            if (savedData.found) {
                savedCores = savedData.config.cores || 1;
                savedMemory = savedData.config.memory || 512;
                diskSizeGB = savedData.config.disk_size || 32;
                savedIpAddress = savedData.config.ip_address;
                savedGateway = savedData.config.gateway;
            }
        }
        
        // Если в базе нет данных, берем текущую конфигурацию
        if (!savedConfigRes.ok || savedCores === 1) {
            const savedConfig = { ...instanceConfig };
            savedCores = savedConfig.cores || 1;
            savedMemory = savedConfig.memory || 512;
            const savedDisk = savedConfig.bootdisk ? (savedConfig[savedConfig.bootdisk]?.size || '32G') : '32G';
            diskSizeGB = parseInt(savedDisk.replace(/[^0-9]/g, '')) || 32;
        }
        
        showNotification('<i class="fa-solid fa-spinner fa-spin"></i> ' + t('stopping_instance'), 'warning');
        
        // Остановить если запущен
        if (instanceStatus === 'running') {
            const stopRes = await fetchWithAuth(`/proxmox/api/${serverId}/${apiType}/${vmid}/stop?node=${instanceNode}`, { method: 'POST' });
            if (!stopRes.ok) {
                const error = await stopRes.json();
                throw new Error(`${t('stop_error')}: ${error.detail || stopRes.statusText}`);
            }
            await new Promise(r => setTimeout(r, 5000));
        }
        
        showNotification(`<i class="fa-solid fa-spinner fa-spin"></i> ${t('deleting_old_instance')}`, 'warning');
        
        // Удалить (не force, чтобы сохранилось в базу)
        const deleteRes = await fetchWithAuth(`/proxmox/api/${serverId}/${apiType}/${vmid}?node=${instanceNode}`, { method: 'DELETE' });
        if (!deleteRes.ok) {
            const error = await deleteRes.json();
            throw new Error(`${t('delete_error')}: ${error.detail || deleteRes.statusText}`);
        }
        await new Promise(r => setTimeout(r, 5000));
        
        showNotification(`<i class="fa-solid fa-spinner fa-spin"></i> ${t('deploying_from_template')}`, 'warning');
        
        // Формируем тело запроса с сохраненной конфигурацией и cloud-init параметрами
        const deployData = {
            template_id: parseInt(templateId),
            name: instanceName,
            vmid: vmid,  // Используем тот же VMID для переустановки
            cores: savedCores,
            memory: savedMemory,
            disk: diskSizeGB,
            start_after_create: true
        };
        
        // Добавляем IP адрес если был сохранен
        if (savedIpAddress) {
            deployData.ip_address = savedIpAddress;
            if (savedGateway) {
                deployData.gateway = savedGateway;
            }
        }
        
        // Добавляем cloud-init параметры (приоритет у введенных вручную)
        if (cloudInitUser) {
            deployData.cloud_init_user = cloudInitUser;
        }
        if (cloudInitPassword) {
            deployData.cloud_init_password = cloudInitPassword;
        }
        if (sshKeys) {
            deployData.ssh_keys = sshKeys;
        }
        
        // Развернуть новую с сохраненной конфигурацией
        const response = await fetchWithAuth('/templates/api/deploy', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(deployData)
        });
        
        if (response.ok) {
            const result = await response.json();
            showNotification(`<i class="fa-solid fa-circle-check"></i> ${t('reinstall_completed_vmid').replace('{vmid}', result.vmid)}`, 'success');
            closeReinstallModal();
            // Перезагружаем страницу через 2 секунды (VMID остался тот же)
            setTimeout(() => {
                window.location.reload();
            }, 2000);
        } else {
            const error = await response.json();
            const errorMsg = typeof error.detail === 'string' 
                ? error.detail 
                : JSON.stringify(error.detail || error);
            throw new Error(errorMsg);
        }
    } catch (error) {
        console.error('Reinstall error:', error);
        showNotification(`<i class="fa-solid fa-circle-xmark"></i> ${t('error')}: ${error.message}`, 'error');
    }
}

function closeReinstallModal() {
    document.getElementById('reinstallModal').style.display = 'none';
}

// ==================== High Availability (HA) Functions ====================

let isCluster = false;
let inHA = false;

async function loadHAStatus() {
    const haBtn = document.getElementById('btn-ha');
    const haType = instanceType === 'qemu' ? 'vm' : 'ct';
    
    // Check permission first
    if (!window.hasPermission('vms.ha')) {
        haBtn.style.display = 'none';
        return;
    }
    
    try {
        const response = await fetchWithAuth(`/proxmox/api/${serverId}/ha/${haType}/${vmid}`);
        
        if (!response.ok) {
            // Скрываем кнопку при ошибке
            haBtn.style.display = 'none';
            return;
        }
        
        const data = await response.json();
        isCluster = data.is_cluster;
        
        if (!isCluster) {
            // Автономный сервер - показываем disabled кнопку
            haBtn.style.display = 'inline-flex';
            haBtn.disabled = true;
            haBtn.style.opacity = '0.5';
            haBtn.style.cursor = 'not-allowed';
            haBtn.title = '{{ t("ha_cluster_only") or "HA доступен только для кластеров" }}';
            document.getElementById('btn-ha-text').textContent = 'HA (N/A)';
            return;
        }
        
        // Кластер - активная кнопка
        haBtn.style.display = 'inline-flex';
        haBtn.disabled = false;
        haBtn.style.opacity = '1';
        haBtn.style.cursor = 'pointer';
        
        inHA = data.in_ha;
        updateHAButton(inHA);
        
    } catch (error) {
        console.error('Error loading HA status:', error);
        haBtn.style.display = 'none';
    }
}

function updateHAButton(inHA) {
    const haBtn = document.getElementById('btn-ha');
    const icon = document.getElementById('btn-ha-icon');
    const text = document.getElementById('btn-ha-text');
    
    if (inHA) {
        haBtn.style.background = 'var(--success)';
        icon.innerHTML = '<i class="fa-solid fa-shield-halved"></i>';
        text.textContent = 'HA';
        haBtn.title = '{{ t("remove_from_ha") or "Удалить из HA" }}';
    } else {
        haBtn.style.background = 'var(--purple)';
        icon.innerHTML = '<i class="fa-solid fa-shield"></i>';
        text.textContent = 'HA (N/A)';
        haBtn.title = '{{ t("add_to_ha") or "Добавить в HA" }}';
    }
}

async function toggleHA() {
    if (!isCluster) {
        showNotification('<i class="fa-solid fa-triangle-exclamation"></i> {{ t("ha_cluster_only") or "HA доступен только для кластеров" }}', 'warning');
        return;
    }
    
    const haType = instanceType === 'qemu' ? 'vm' : 'ct';
    const typeName = instanceType === 'qemu' ? 'VM' : 'LXC';
    
    if (inHA) {
        // Удаляем из HA
        const confirmed = await showConfirm(
            '{{ t("remove_from_ha") or "Удалить из HA" }}',
            `{{ t("confirm_remove_from_ha") or "Вы уверены, что хотите удалить" }} ${typeName} ${vmid} {{ t("from_ha") or "из HA" }}?`,
            { type: 'warning', confirmText: '{{ t("remove") or "Удалить" }}' }
        );
        
        if (!confirmed) return;
        
        try {
            const response = await fetchWithAuth(`/proxmox/api/${serverId}/ha/${haType}/${vmid}/remove`, {
                method: 'DELETE'
            });
            
            if (response.ok) {
                inHA = false;
                updateHAButton(false);
                showNotification(`<i class="fa-solid fa-circle-check"></i> ${typeName} ${vmid} {{ t("removed_from_ha") or "удалён из HA" }}`, 'success');
            } else {
                const error = await response.json();
                showNotification(`<i class="fa-solid fa-circle-xmark"></i> ${error.detail || '{{ t("error") }}'}`, 'error');
            }
        } catch (error) {
            console.error('Error removing from HA:', error);
            showNotification('<i class="fa-solid fa-circle-xmark"></i> {{ t("error") }}', 'error');
        }
    } else {
        // Добавляем в HA
        const confirmed = await showConfirm(
            '{{ t("add_to_ha") or "Добавить в HA" }}',
            `{{ t("confirm_add_to_ha_message") or "Добавить" }} ${typeName} ${vmid} {{ t("to_ha_question") or "в High Availability" }}?`,
            { type: 'info', confirmText: '{{ t("add") or "Добавить" }}' }
        );
        
        if (!confirmed) return;
        
        try {
            const response = await fetchWithAuth(`/proxmox/api/${serverId}/ha/${haType}/${vmid}/add?state=started`, {
                method: 'POST'
            });
            
            if (response.ok) {
                inHA = true;
                updateHAButton(true);
                showNotification(`<i class="fa-solid fa-circle-check"></i> ${typeName} ${vmid} {{ t("added_to_ha") or "добавлен в HA" }}`, 'success');
            } else {
                const error = await response.json();
                showNotification(`<i class="fa-solid fa-circle-xmark"></i> ${error.detail || '{{ t("error") }}'}`, 'error');
            }
        } catch (error) {
            console.error('Error adding to HA:', error);
            showNotification('<i class="fa-solid fa-circle-xmark"></i> {{ t("error") }}', 'error');
        }
    }
}

// Инициализация
window.addEventListener('DOMContentLoaded', () => {
    // Wait for permissions to be loaded from base.html
    if (window.userPermissions && Object.keys(window.userPermissions).length > 0) {
        // Permissions already loaded
        initPage();
    } else {
        // Wait for permissions loaded event
        window.addEventListener('permissionsLoaded', () => {
            initPage();
        }, { once: true });
        
        // Fallback timeout in case permissions event doesn't fire
        setTimeout(() => {
            if (!window.pageInitialized) {
                initPage();
            }
        }, 1000);
    }
});

function initPage() {
    if (window.pageInitialized) return;
    window.pageInitialized = true;
    
    // Apply permissions to UI elements
    if (typeof applyPermissions === 'function') {
        applyPermissions();
    }
    
    loadInstanceData();
    loadHAStatus();

    // Auto-refresh RRD charts every 30 s via WS (Proxmox RRD updates ~60 s)
    setInterval(() => {
        const content = document.getElementById('instance-content');
        if (content && content.style.display !== 'none') {
            loadRRDData(currentTimeframe);
        }
    }, 30000);

    // Subscribe to WS push for live metrics; fall back to polling without WS.
    const _instCh = `instance_metrics:${serverId}_${vmid}_${instanceType}_${instanceNode}`;

    if (typeof registerWsHandler === 'function') {
        registerWsHandler('metrics_update', (msg) => {
            if (msg.channel !== _instCh) return;
            const status = msg.data;
            if (!status) return;
            const el = document.getElementById('instance-content');
            if (!el || el.style.display === 'none') return;

            const cpuPercent = ((status.cpu || 0) * 100).toFixed(1);
            const cpuEl = document.getElementById('metric-cpu');
            const cpuBar = document.getElementById('metric-cpu-bar');
            if (cpuEl) cpuEl.textContent = `${cpuPercent}%`;
            if (cpuBar) {
                cpuBar.style.width = `${cpuPercent}%`;
                cpuBar.className = `progress-fill ${cpuPercent > 80 ? 'danger' : cpuPercent > 60 ? 'warning' : ''}`;
            }

            const memUsed = status.mem || 0;
            const memMax = status.maxmem || 1;
            const memPercent = ((memUsed / memMax) * 100).toFixed(1);
            const memEl = document.getElementById('metric-memory');
            const memDetail = document.getElementById('metric-memory-detail');
            const memBar = document.getElementById('metric-memory-bar');
            if (memEl) memEl.textContent = `${memPercent}%`;
            if (memDetail) memDetail.textContent = `${formatBytes(memUsed)} / ${formatBytes(memMax)}`;
            if (memBar) {
                memBar.style.width = `${memPercent}%`;
                memBar.className = `progress-fill ${memPercent > 80 ? 'danger' : memPercent > 60 ? 'warning' : ''}`;
            }

            const diskUsed = status.disk || 0;
            const diskMax = status.maxdisk || 0;
            const diskCard = document.getElementById('disk-metric-card');
            if (diskMax > 0 && diskUsed > 0) {
                const diskPercent = ((diskUsed / diskMax) * 100).toFixed(1);
                const diskEl = document.getElementById('metric-disk');
                const diskDetail = document.getElementById('metric-disk-detail');
                const diskBar = document.getElementById('metric-disk-bar');
                if (diskEl) diskEl.textContent = `${diskPercent}%`;
                if (diskDetail) diskDetail.textContent = `${formatBytes(diskUsed)} / ${formatBytes(diskMax)}`;
                if (diskBar) {
                    diskBar.style.width = `${diskPercent}%`;
                    diskBar.className = `progress-fill ${diskPercent > 80 ? 'danger' : diskPercent > 60 ? 'warning' : ''}`;
                    diskBar.style.display = '';
                }
                if (diskCard) diskCard.style.display = '';
            } else if (diskCard && diskMax <= 0) {
                diskCard.style.display = 'none';
            }

            const uptEl = document.getElementById('metric-uptime');
            if (uptEl) uptEl.textContent = formatUptime(status.uptime);

            const netinEl = document.getElementById('metric-netin');
            const netoutEl = document.getElementById('metric-netout');
            if (netinEl) netinEl.textContent = formatBytes(status.netin || 0);
            if (netoutEl) netoutEl.textContent = formatBytes(status.netout || 0);

            const drEl = document.getElementById('metric-diskread');
            const dwEl = document.getElementById('metric-diskwrite');
            if (drEl) drEl.textContent = formatBytes(status.diskread || 0);
            if (dwEl) dwEl.textContent = formatBytes(status.diskwrite || 0);

            instanceStatus = status.status;
            updateStatus(status.status);
            updateButtons(status.status);
        });
    }

    // Subscribe to WS push — queued and sent when WS opens/reconnects
    if (typeof subscribeWsChannel === 'function') {
        subscribeWsChannel(_instCh);
    }

    window.addEventListener('beforeunload', () => {
        if (typeof unsubscribeWsChannel === 'function') unsubscribeWsChannel(_instCh);
    });
    
    // Check if we should auto-open VNC console
    const urlParams = new URLSearchParams(window.location.search);
    if (urlParams.get('autoVnc') === '1') {
        // Wait for instance data to load, then open VNC
        setTimeout(() => {
            if (typeof openVNC === 'function') {
                openVNC();
            }
        }, 500);
    }
}
</script>

{% endblock %}