{% extends "base.html" %}
{% from 'partials/nav_icon.html' import nav_icon %}
{% from 'partials/ui_icon.html' import ui_icon %}

{% block title %}Команды - AWM{% endblock %}

{% block content %}
    <style>
        @media (max-width: 768px) {
            .toolbar > .btn {
                width: 100%;
                justify-content: center;
            }
        }
        @media (max-width: 560px) {
            #command-modal .modal-content,
            #saved-command-modal .modal-content,
            #command-log-modal .modal-content,
            #command-schedule-modal .modal-content {
                width: calc(100vw - 12px) !important;
                max-width: calc(100vw - 12px) !important;
                padding: 14px 10px !important;
            }
            #command-modal [style*="justify-content: flex-end"],
            #saved-command-modal [style*="justify-content: flex-end"],
            #command-schedule-modal [style*="justify-content: flex-end"] {
                flex-direction: column;
                align-items: stretch;
            }
            #command-modal [style*="justify-content: flex-end"] > .btn,
            #saved-command-modal [style*="justify-content: flex-end"] > .btn,
            #command-schedule-modal [style*="justify-content: flex-end"] > .btn {
                width: 100%;
                margin-right: 0 !important;
                justify-content: center;
            }
            #command-log-content {
                max-height: 54vh !important;
                padding: 12px !important;
                font-size: 11px !important;
            }
        }
    </style>
    <div class="ui-page-header" style="margin-bottom: 20px;">
        <div class="ui-page-header__main">
            <span class="ui-page-header__icon">{{ nav_icon('commands') }}</span>
            <div>
                <h2 class="ui-page-header__title">Команды</h2>
                <p class="ui-page-header__subtitle">Разовые команды Ansible по инвентарю: сохранённые шаблоны, немедленный и отложенный запуск, журнал выполнения.</p>
            </div>
        </div>
        <div class="ui-page-header__actions">
            <button class="btn btn-secondary" data-requires-ansible="true" onclick="openCommandScheduleModal()">{{ ui_icon('clock') }}Отложенный запуск</button>
            <button class="btn btn-primary" data-requires-ansible="true" onclick="openCommandModal()">{{ ui_icon('play') }}Выполнить команду</button>
        </div>
    </div>

    <!-- Сохраненные команды -->
    <div class="card" style="margin-bottom: 20px;">
        <div class="toolbar">
            <h2>Сохраненные команды</h2>
            <button class="btn btn-primary" onclick="openSavedCommandModal()">
                {{ ui_icon('plus') }}Создать команду
            </button>
        </div>
        <div id="saved-commands-list">
            <div class="loading">Загрузка...</div>
        </div>
    </div>

    <!-- История выполнения -->
    <div class="card">
        <div class="toolbar">
            <h2>История выполнения</h2>
        </div>
        <div id="commands-list">
            <div class="loading">Загрузка...</div>
        </div>
        <div style="margin-top:14px;">
            <h4 style="margin:8px 0;">Запланированные задачи команд</h4>
            <div id="command-schedules-list"><div class="loading">Загрузка...</div></div>
        </div>
    </div>

    <!-- Модальное окно для выполнения команды -->
    <div id="command-modal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <div class="modal-header">
                <h3>Выполнить команду на хостах</h3>
                <button class="close-btn" onclick="closeCommandModal()">&times;</button>
            </div>
            <form id="command-form">
                <div class="form-group">
                    <label>Инвентори <span style="color: red;">*</span></label>
                    <select id="command-inventory" required>
                        <option value="">Выберите инвентори...</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Хосты (опционально)</label>
                    <input type="text" id="command-hosts" placeholder="all, webservers, или конкретный хост">
                    <small style="color: #718096; display: block; margin-top: 5px;">
                        Оставьте пустым для выполнения на всех хостах. Можно указать группу или конкретный хост.
                    </small>
                </div>
                <div class="form-group">
                    <label>Тип модуля</label>
                    <select id="command-module">
                        <option value="shell">shell - для команд с перенаправлениями и пайпами</option>
                        <option value="command">command - для простых команд</option>
                        <option value="raw">raw - для выполнения без модулей Ansible</option>
                        <option value="script">script - для выполнения скрипта</option>
                    </select>
                    <small style="color: #718096; display: block; margin-top: 5px;">
                        shell: поддерживает |, &gt;, &lt; и другие операторы<br>
                        command: простая команда без shell-операторов<br>
                        raw: выполнение напрямую, минуя модули Ansible<br>
                        script: выполнение локального скрипта на удаленных хостах
                    </small>
                </div>
                <div class="form-group">
                    <label>Команда или скрипт <span style="color: red;">*</span></label>
                    <textarea id="command-text" rows="8" required placeholder="Введите команду или скрипт для выполнения...&#10;&#10;Примеры:&#10;uptime&#10;df -h&#10;ps aux | grep nginx&#10;systemctl status nginx"></textarea>
                </div>
                <div class="form-group">
                    <label style="display: flex; align-items: center; gap: 10px;">
                        <input type="checkbox" id="command-become">
                        Использовать sudo (become)
                    </label>
                </div>
                <div class="form-group" id="become-user-group" style="display: none;">
                    <label>Пользователь для sudo</label>
                    <input type="text" id="command-become-user" placeholder="root">
                </div>
                <div class="form-group">
                    <label style="display: flex; align-items: center; gap: 10px;">
                        <input type="checkbox" id="command-skip-ssh-check">
                        Отключить проверку SSH ключей хостов
                    </label>
                    <small style="color: #718096; display: block; margin-top: 5px;">
                        Добавляет ansible_ssh_common_args: '-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null'
                    </small>
                </div>
                <div style="display: flex; gap: 10px; justify-content: flex-end;">
                    <button type="button" class="btn btn-secondary" onclick="closeCommandModal()">Отмена</button>
                    <button type="button" class="btn btn-info" onclick="saveCommandFromForm()" style="margin-right: auto;">
                        {{ ui_icon('save') }}Сохранить команду
                    </button>
                    <button type="submit" class="btn btn-primary" data-requires-ansible="true">Выполнить</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Модальное окно для создания/редактирования сохраненной команды -->
    <div id="saved-command-modal" class="modal">
        <div class="modal-content" style="max-width: 800px;">
            <div class="modal-header">
                <h3 id="saved-command-modal-title">Создать сохраненную команду</h3>
                <button class="close-btn" onclick="closeSavedCommandModal()">&times;</button>
            </div>
            <form id="saved-command-form">
                <div class="form-group">
                    <label>Название <span style="color: red;">*</span></label>
                    <input type="text" id="saved-command-name" required placeholder="Например: Проверка статуса Nginx">
                </div>
                <div class="form-group">
                    <label>Описание</label>
                    <input type="text" id="saved-command-description" placeholder="Краткое описание команды">
                </div>
                <div class="form-group">
                    <label>Инвентори <span style="color: red;">*</span></label>
                    <select id="saved-command-inventory" required>
                        <option value="">Выберите инвентори...</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Хосты (опционально)</label>
                    <input type="text" id="saved-command-hosts" placeholder="all, webservers, или конкретный хост">
                </div>
                <div class="form-group">
                    <label>Тип модуля</label>
                    <select id="saved-command-module">
                        <option value="shell">shell - для команд с перенаправлениями и пайпами</option>
                        <option value="command">command - для простых команд</option>
                        <option value="raw">raw - для выполнения без модулей Ansible</option>
                        <option value="script">script - для выполнения скрипта</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Команда или скрипт <span style="color: red;">*</span></label>
                    <textarea id="saved-command-text" rows="8" required placeholder="Введите команду или скрипт..."></textarea>
                </div>
                <div class="form-group">
                    <label style="display: flex; align-items: center; gap: 10px;">
                        <input type="checkbox" id="saved-command-become">
                        Использовать sudo (become)
                    </label>
                </div>
                <div class="form-group" id="saved-become-user-group" style="display: none;">
                    <label>Пользователь для sudo</label>
                    <input type="text" id="saved-command-become-user" placeholder="root">
                </div>
                <div class="form-group">
                    <label style="display: flex; align-items: center; gap: 10px;">
                        <input type="checkbox" id="saved-command-skip-ssh-check">
                        Отключить проверку SSH ключей хостов
                    </label>
                    <small style="color: #718096;">ansible_ssh_common_args: '-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null'</small>
                </div>
                <div style="display: flex; gap: 10px; justify-content: flex-end;">
                    <button type="button" class="btn btn-secondary" onclick="closeSavedCommandModal()">Отмена</button>
                    <button type="submit" class="btn btn-primary">Сохранить</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Модальное окно для просмотра лога -->
    <div id="command-log-modal" class="modal">
        <div class="modal-content" style="max-width: 1000px;">
            <div class="modal-header">
                <h3>Лог выполнения команды</h3>
                <button class="close-btn" onclick="closeCommandLogModal()">&times;</button>
            </div>
            <div style="background: #1a202c; color: #e2e8f0; padding: 20px; border-radius: 5px; max-height: 600px; overflow-y: auto; font-family: 'Courier New', monospace; font-size: 12px; white-space: pre-wrap;" id="command-log-content">
                Загрузка...
            </div>
        </div>
    </div>

    <div id="command-schedule-modal" class="modal">
        <div class="modal-content" style="max-width: 760px;">
            <div class="modal-header">
                <h3>Планировщик команд</h3>
                <button class="close-btn" onclick="closeCommandScheduleModal()">&times;</button>
            </div>
            <form id="command-schedule-form">
                <div class="form-group">
                    <label>Название задачи</label>
                    <input type="text" id="cmd-schedule-name" required placeholder="Например: Проверка uptime каждые 30 минут">
                </div>
                <div class="form-group">
                    <label>Инвентори</label>
                    <select id="cmd-schedule-inventory" required></select>
                </div>
                <div class="form-group">
                    <label>Хосты (опционально)</label>
                    <input type="text" id="cmd-schedule-hosts" placeholder="all, webservers, host1">
                </div>
                <div class="form-group">
                    <label>Модуль</label>
                    <select id="cmd-schedule-module">
                        <option value="shell">shell</option>
                        <option value="command">command</option>
                        <option value="raw">raw</option>
                        <option value="script">script</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Команда</label>
                    <textarea id="cmd-schedule-command" rows="5" required></textarea>
                </div>
                <div class="form-row">
                    <div class="form-group"><label><input type="checkbox" id="cmd-schedule-become"> Использовать sudo</label></div>
                    <div class="form-group"><label><input type="checkbox" id="cmd-schedule-skip-ssh-check"> Отключить проверку SSH ключей</label></div>
                </div>
                <div class="form-group">
                    <label>Пользователь sudo</label>
                    <input type="text" id="cmd-schedule-become-user" placeholder="root">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Часовой пояс</label>
                        <select id="cmd-schedule-timezone" required></select>
                    </div>
                    <div class="form-group">
                        <label>Режим запуска</label>
                        <select id="cmd-schedule-mode">
                            <option value="once">Разово</option>
                            <option value="interval">Периодически</option>
                        </select>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group"><label>Дата</label><input type="date" id="cmd-schedule-date" required></div>
                    <div class="form-group"><label>Время</label><input type="time" id="cmd-schedule-time" required></div>
                </div>
                <div id="cmd-schedule-interval-box" class="form-row" style="display:none;">
                    <div class="form-group"><label>Период</label><input type="number" id="cmd-schedule-interval-value" min="1" value="1"></div>
                    <div class="form-group"><label>Единица</label><select id="cmd-schedule-interval-unit"><option value="minutes">минуты</option><option value="hours">часы</option><option value="days">дни</option></select></div>
                </div>
                <div style="display:flex; gap:10px; justify-content:flex-end;">
                    <button type="button" class="btn btn-secondary" onclick="closeCommandScheduleModal()">Отмена</button>
                    <button type="submit" class="btn btn-primary">Сохранить расписание</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block scripts %}
<script>
    // Функция для API вызовов
    async function apiCall(method, url, data = null) {
        const options = {
            method: method,
            headers: {
                'Content-Type': 'application/json'
            }
        };
        
        if (data) {
            options.body = JSON.stringify(data);
        }
        
        const response = await fetch(url, options);
        
        if (!response.ok) {
            const error = await response.json().catch(() => ({ detail: response.statusText }));
            throw new Error(error.detail || `HTTP ${response.status}`);
        }
        
        return await response.json();
    }

    let currentCommandId = null;
    let commandWebSocket = null;

    // Загрузка списка команд
    async function loadCommands() {
        try {
            const data = await apiCall('GET', '/api/commands');
            const list = document.getElementById('commands-list');
            
            if (data.commands.length === 0) {
                list.innerHTML = awmEmptyState('Выполненные команды отсутствуют', 'history', 'Здесь отображается журнал запусков команд на хостах.');
                return;
            }
            
            list.innerHTML = data.commands.map(cmd => {
                const rawStatus = String(cmd.status || 'pending');
                const statusKey = (rawStatus.includes('.') ? rawStatus.split('.').pop() : rawStatus).toLowerCase();
                const statusClass = `status-${statusKey}`;
                const statusLabel = ({
                    pending: 'Ожидание',
                    running: 'Выполняется',
                    cancelling: 'Отмена…',
                    success: 'Успешно',
                    failed: 'Ошибка',
                    cancelled: 'Отменено',
                })[statusKey] || statusKey;
                const commandPreview = cmd.command.length > 100 
                    ? cmd.command.substring(0, 100) + '...' 
                    : cmd.command;
                // Кнопки остановки: active-статусы, либо «ложный» терминальный без finished_at
                // (баг str(RunStatus.*), когда процесс ещё можно остановить).
                const canStop = ['pending', 'running', 'cancelling'].includes(statusKey)
                    || (!cmd.finished_at && statusKey !== 'failed' && statusKey !== 'cancelled');
                return `
                    <div class="list-item" data-command-id="${cmd.id}">
                        <div class="list-item-info">
                            <div class="list-item-name">
                                <span style="font-weight: 600;">${escapeHtml(cmd.inventory_name)}</span>
                                ${cmd.hosts ? ` <span style="color: #718096;">→ ${escapeHtml(cmd.hosts)}</span>` : ''}
                                <span class="status-badge ${statusClass}">${statusLabel}</span>
                            </div>
                            <div class="list-item-meta" style="margin-top: 5px;">
                                <code style="background: #f7fafc; padding: 2px 6px; border-radius: 3px; font-size: 12px;">${escapeHtml(commandPreview)}</code>
                            </div>
                            <div class="list-item-meta">
                                Создан: ${new Date(cmd.created_at).toLocaleString('ru')}
                                ${cmd.finished_at ? `| Завершен: ${new Date(cmd.finished_at).toLocaleString('ru')}` : ''}
                            </div>
                        </div>
                        <div class="list-item-actions" style="flex-wrap: wrap;">
                            <button class="btn btn-primary btn-sm" onclick="viewCommandLog('${cmd.id}')">
                                ${awmIcon('file-text')}Лог
                            </button>
                            ${canStop ? `
                            <button class="btn btn-danger btn-sm" onclick="cancelCommand('${cmd.id}')">
                                ${awmIcon('stop')}Остановить
                            </button>
                            <button class="btn btn-danger btn-sm" onclick="forceStopCommand('${cmd.id}')">
                                Остановить принудительно
                            </button>` : ''}
                        </div>
                    </div>
                `;
            }).join('');
        } catch (error) {
            document.getElementById('commands-list').innerHTML = awmEmptyState('Не удалось загрузить историю', 'alert', error.message, { danger: true });
        }
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text == null ? '' : String(text);
        return div.innerHTML.replace(/"/g, '&quot;').replace(/'/g, '&#39;');
    }

    // Открытие модального окна для выполнения команды
    async function openCommandModal(savedCommandName = null) {
        if (typeof requireAnsibleOrWarn === 'function' && !requireAnsibleOrWarn()) {
            return;
        }
        // Загружаем список инвентори
        const inventories = await apiCall('GET', '/api/inventories');
        const inventorySelect = document.getElementById('command-inventory');
        
        inventorySelect.innerHTML = '<option value="">Выберите инвентори...</option>' + 
            inventories.inventories.map(inv => 
                `<option value="${inv.name}">${inv.name} (${inv.type.toUpperCase()})</option>`
            ).join('');
        
        // Если указана сохраненная команда, загружаем её данные
        if (savedCommandName) {
            try {
                const cmd = await apiCall('GET', `/api/commands/saved/${savedCommandName}`);
                document.getElementById('command-inventory').value = cmd.inventory_name;
                document.getElementById('command-hosts').value = cmd.hosts || '';
                document.getElementById('command-module').value = cmd.module || 'shell';
                document.getElementById('command-text').value = cmd.command;
                document.getElementById('command-become').checked = Boolean(cmd.become);
                document.getElementById('command-become-user').value = cmd.become_user || '';
                document.getElementById('command-skip-ssh-check').checked = Boolean(cmd.skip_ssh_check);
                document.getElementById('become-user-group').style.display = cmd.become ? 'block' : 'none';
            } catch (error) {
                console.error('Ошибка загрузки сохраненной команды:', error);
            }
        }
        
        document.getElementById('command-modal').classList.add('active');
    }

    function closeCommandModal() {
        document.getElementById('command-modal').classList.remove('active');
        document.getElementById('command-form').reset();
        document.getElementById('become-user-group').style.display = 'none';
    }

    // Показ/скрытие поля become_user
    document.getElementById('command-become').addEventListener('change', function(e) {
        document.getElementById('become-user-group').style.display = e.target.checked ? 'block' : 'none';
    });

    // Обработка отправки формы
    document.getElementById('command-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        if (typeof requireAnsibleOrWarn === 'function' && !requireAnsibleOrWarn()) {
            return;
        }
        const inventory = document.getElementById('command-inventory').value;
        const hosts = document.getElementById('command-hosts').value.trim() || null;
        const command = document.getElementById('command-text').value;
        const module = document.getElementById('command-module').value;
        const become = document.getElementById('command-become').checked;
        const becomeUser = document.getElementById('command-become-user').value.trim() || null;
        const skipSshCheck = document.getElementById('command-skip-ssh-check').checked;
        
        if (!command.trim()) {
            alert('Введите команду для выполнения');
            return;
        }
        
        try {
            const commandData = {
                inventory_name: inventory,
                command: command,
                hosts: hosts,
                module: module,
                become: become,
                become_user: becomeUser,
                skip_ssh_check: skipSshCheck
            };
            
            const result = await apiCall('POST', '/api/commands', commandData);
            closeCommandModal();
            loadCommands();
            viewCommandLog(result.command_id);
        } catch (error) {
            alert('Ошибка: ' + error.message);
        }
    });

    // Просмотр лога команды
    function viewCommandLog(commandId) {
        currentCommandId = commandId;
        const modal = document.getElementById('command-log-modal');
        const logContent = document.getElementById('command-log-content');
        modal.classList.add('active');
        
        // Подключаемся к WebSocket
        const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const wsUrl = `${protocol}//${window.location.host}/api/commands/ws/${commandId}`;
        
        if (commandWebSocket) {
            commandWebSocket.close();
        }
        
        commandWebSocket = new WebSocket(wsUrl);
        logContent.textContent = '';
        
        commandWebSocket.onmessage = (event) => {
            const data = JSON.parse(event.data);
            if (data.type === 'log') {
                logContent.textContent += data.data;
                logContent.scrollTop = logContent.scrollHeight;
            } else if (data.type === 'status') {
                loadCommands();
            }
        };
        
        commandWebSocket.onerror = () => {
            logContent.textContent = 'Ошибка подключения. Загрузка лога...';
            // Пробуем загрузить лог через API
            apiCall('GET', `/api/commands/${commandId}`).then(cmd => {
                if (cmd.log) {
                    logContent.textContent = cmd.log;
                }
            });
        };
        
        // Также загружаем текущий лог через API
        apiCall('GET', `/api/commands/${commandId}`).then(cmd => {
            if (cmd.log) {
                logContent.textContent = cmd.log;
                logContent.scrollTop = logContent.scrollHeight;
            }
        });
    }

    function closeCommandLogModal() {
        document.getElementById('command-log-modal').classList.remove('active');
        if (commandWebSocket) {
            commandWebSocket.close();
            commandWebSocket = null;
        }
        currentCommandId = null;
    }

    async function cancelCommand(commandId) {
        if (!await awmConfirm('Остановить выполнение команды?')) return;
        try {
            await apiCall('POST', `/api/commands/${commandId}/cancel`);
            const badge = document.querySelector(`[data-command-id="${commandId}"] .status-badge`);
            if (badge) {
                badge.className = 'status-badge status-cancelling';
                badge.textContent = 'Отмена…';
            }
            await loadCommands();
        } catch (error) {
            alert('Ошибка остановки команды: ' + error.message);
        }
    }

    async function forceStopCommand(commandId) {
        if (!await awmConfirm('Принудительно остановить команду? Процесс будет завершён жёстко.')) return;
        try {
            await apiCall('POST', `/api/commands/${commandId}/force-stop`);
            await loadCommands();
        } catch (error) {
            alert('Ошибка принудительной остановки: ' + error.message);
        }
    }

    // Работа с сохраненными командами
    let currentSavedCommandName = null;

    async function loadSavedCommands() {
        try {
            const data = await apiCall('GET', '/api/commands/saved');
            const list = document.getElementById('saved-commands-list');
            
            if (data.commands.length === 0) {
                list.innerHTML = awmEmptyState('Сохранённые команды отсутствуют', 'terminal', 'Сохранённая команда запускается повторно в один щелчок.');
                return;
            }
            
            list.innerHTML = data.commands.map(cmd => {
                const commandPreview = cmd.command.length > 80 
                    ? cmd.command.substring(0, 80) + '...' 
                    : cmd.command;
                return `
                    <div class="list-item">
                        <div class="list-item-info">
                            <div class="list-item-name">
                                <span style="font-weight: 600;">${escapeHtml(cmd.name)}</span>
                                ${cmd.description ? ` <span style="color: #718096; font-size: 0.9em;">- ${escapeHtml(cmd.description)}</span>` : ''}
                            </div>
                            <div class="list-item-meta" style="margin-top: 5px;">
                                <span style="color: #64748b;">${escapeHtml(cmd.inventory_name)}</span>
                                ${cmd.hosts ? ` <span style="color: #64748b;">→ ${escapeHtml(cmd.hosts)}</span>` : ''}
                                <span style="color: #64748b; margin-left: 10px;">${escapeHtml(cmd.module)}</span>
                                ${cmd.become ? '<span style="color: #64748b; margin-left: 10px;">sudo</span>' : ''}
                            </div>
                            <div class="list-item-meta" style="margin-top: 5px;">
                                <code style="background: #f7fafc; padding: 2px 6px; border-radius: 3px; font-size: 12px;">${escapeHtml(commandPreview)}</code>
                            </div>
                            <div class="list-item-meta">
                                Выполнено: ${cmd.execution_count || 0} раз
                                ${cmd.last_executed_at ? `| Последний раз: ${new Date(cmd.last_executed_at).toLocaleString('ru')}` : ''}
                            </div>
                        </div>
                        <div class="list-item-actions ui-row-actions">
                            <button class="btn btn-success btn-sm" data-name="${escapeHtml(cmd.name)}" onclick="executeSavedCommand(this.dataset.name)" title="Выполнить">
                                ${awmIcon('play')}Выполнить
                            </button>
                            <button type="button" class="ui-icon-btn is-sm" data-name="${escapeHtml(cmd.name)}" onclick="loadSavedCommandToForm(this.dataset.name)" title="Загрузить в форму запуска" aria-label="Загрузить в форму запуска">${awmIcon('download')}</button>
                            <button type="button" class="ui-icon-btn is-sm" data-name="${escapeHtml(cmd.name)}" onclick="editSavedCommand(this.dataset.name)" title="Редактировать" aria-label="Редактировать">${awmIcon('edit')}</button>
                            <button type="button" class="ui-icon-btn is-sm ui-icon-btn-danger" data-name="${escapeHtml(cmd.name)}" onclick="deleteSavedCommand(this.dataset.name)" title="Удалить" aria-label="Удалить">${awmIcon('trash')}</button>
                        </div>
                    </div>
                `;
            }).join('');
        } catch (error) {
            document.getElementById('saved-commands-list').innerHTML = awmEmptyState('Не удалось загрузить сохранённые команды', 'alert', error.message, { danger: true });
        }
    }

    async function openSavedCommandModal(name = null) {
        currentSavedCommandName = name;
        const modal = document.getElementById('saved-command-modal');
        const title = document.getElementById('saved-command-modal-title');
        const form = document.getElementById('saved-command-form');
        const nameInput = document.getElementById('saved-command-name');
        
        // Загружаем список инвентори
        const inventories = await apiCall('GET', '/api/inventories');
        const inventorySelect = document.getElementById('saved-command-inventory');
        
        inventorySelect.innerHTML = '<option value="">Выберите инвентори...</option>' + 
            inventories.inventories.map(inv => 
                `<option value="${inv.name}">${inv.name} (${inv.type.toUpperCase()})</option>`
            ).join('');
        
        if (name) {
            title.textContent = 'Редактировать сохраненную команду';
            nameInput.disabled = true;
            nameInput.value = name;
            
            const cmd = await apiCall('GET', `/api/commands/saved/${name}`);
            document.getElementById('saved-command-description').value = cmd.description || '';
            document.getElementById('saved-command-inventory').value = cmd.inventory_name;
            document.getElementById('saved-command-hosts').value = cmd.hosts || '';
            document.getElementById('saved-command-module').value = cmd.module || 'shell';
            document.getElementById('saved-command-text').value = cmd.command;
            document.getElementById('saved-command-become').checked = Boolean(cmd.become);
            document.getElementById('saved-command-become-user').value = cmd.become_user || '';
            document.getElementById('saved-command-skip-ssh-check').checked = Boolean(cmd.skip_ssh_check);
            document.getElementById('saved-become-user-group').style.display = cmd.become ? 'block' : 'none';
        } else {
            title.textContent = 'Создать сохраненную команду';
            nameInput.disabled = false;
            form.reset();
            document.getElementById('saved-become-user-group').style.display = 'none';
        }
        
        modal.classList.add('active');
    }

    function closeSavedCommandModal() {
        document.getElementById('saved-command-modal').classList.remove('active');
        document.getElementById('saved-command-form').reset();
        currentSavedCommandName = null;
    }

    document.getElementById('saved-command-become').addEventListener('change', function(e) {
        document.getElementById('saved-become-user-group').style.display = e.target.checked ? 'block' : 'none';
    });

    document.getElementById('saved-command-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const name = document.getElementById('saved-command-name').value;
        const description = document.getElementById('saved-command-description').value;
        const inventory = document.getElementById('saved-command-inventory').value;
        const hosts = document.getElementById('saved-command-hosts').value.trim() || null;
        const command = document.getElementById('saved-command-text').value;
        const module = document.getElementById('saved-command-module').value;
        const become = document.getElementById('saved-command-become').checked;
        const becomeUser = document.getElementById('saved-command-become-user').value.trim() || null;
        const skipSshCheck = document.getElementById('saved-command-skip-ssh-check').checked;
        
        try {
            if (currentSavedCommandName) {
                await apiCall('PUT', `/api/commands/saved/${currentSavedCommandName}`, {
                    description,
                    inventory_name: inventory,
                    command,
                    hosts,
                    module,
                    become,
                    become_user: becomeUser,
                    skip_ssh_check: skipSshCheck
                });
            } else {
                await apiCall('POST', '/api/commands/saved', {
                    name,
                    description,
                    inventory_name: inventory,
                    command,
                    hosts,
                    module,
                    become,
                    become_user: becomeUser,
                    skip_ssh_check: skipSshCheck
                });
            }
            closeSavedCommandModal();
            loadSavedCommands();
        } catch (error) {
            alert('Ошибка: ' + error.message);
        }
    });

    async function editSavedCommand(name) {
        openSavedCommandModal(name);
    }

    async function deleteSavedCommand(name) {
        if (!await awmConfirm(`Удалить сохраненную команду "${name}"?`)) {
            return;
        }
        try {
            await apiCall('DELETE', `/api/commands/saved/${name}`);
            loadSavedCommands();
        } catch (error) {
            alert('Ошибка: ' + error.message);
        }
    }

    async function executeSavedCommand(name) {
        if (typeof requireAnsibleOrWarn === 'function' && !requireAnsibleOrWarn()) {
            return;
        }
        try {
            const result = await apiCall('POST', `/api/commands/saved/${name}/execute`);
            loadSavedCommands();
            loadCommands();
            setTimeout(() => {
                viewCommandLog(result.command_id);
            }, 500);
        } catch (error) {
            alert('Ошибка: ' + error.message);
        }
    }

    async function loadSavedCommandToForm(name) {
        closeSavedCommandModal();
        await openCommandModal(name);
    }

    async function saveCommandFromForm() {
        if (typeof requireAnsibleOrWarn === 'function' && !requireAnsibleOrWarn()) {
            return;
        }
        const inventory = document.getElementById('command-inventory').value;
        const hosts = document.getElementById('command-hosts').value.trim() || null;
        const command = document.getElementById('command-text').value;
        const module = document.getElementById('command-module').value;
        const become = document.getElementById('command-become').checked;
        const becomeUser = document.getElementById('command-become-user').value.trim() || null;
        const skipSshCheck = document.getElementById('command-skip-ssh-check').checked;
        
        if (!command.trim()) {
            alert('Введите команду для сохранения');
            return;
        }
        
        if (!inventory) {
            alert('Выберите инвентори');
            return;
        }
        
        const name = await awmPrompt('Введите название для сохранения команды:');
        if (!name) {
            return;
        }
        
        try {
            await apiCall('POST', '/api/commands/saved', {
                name,
                description: '',
                inventory_name: inventory,
                command,
                hosts,
                module,
                become,
                become_user: becomeUser,
                skip_ssh_check: skipSshCheck
            });
            alert('Команда сохранена!');
            loadSavedCommands();
        } catch (error) {
            alert('Ошибка: ' + error.message);
        }
    }

    async function loadCommandSchedules() {
        try {
            const data = await apiCall('GET', '/api/schedules?job_type=command');
            const list = document.getElementById('command-schedules-list');
            const items = data.items || [];
            if (!items.length) {
                list.innerHTML = awmEmptyState('Запланированные запуски отсутствуют', 'calendar');
                return;
            }
            list.innerHTML = items.map(item => `
                <div class="list-item">
                    <div class="list-item-info">
                        <div class="list-item-name">${escapeHtml(item.name)} <span class="status-badge ${item.is_active ? 'status-success' : 'status-cancelled'}">${item.is_active ? 'Активно' : 'Приостановлено'}</span></div>
                        <div class="list-item-meta">Следующий запуск: ${item.next_run_at ? new Date(item.next_run_at).toLocaleString('ru') : '—'} | Часовой пояс: ${escapeHtml(item.timezone)} | Режим: ${item.mode === 'interval' ? 'периодически' : 'разово'}</div>
                    </div>
                    <div class="list-item-actions">
                        <button class="btn btn-secondary btn-sm" onclick="toggleCommandSchedule(${item.id}, ${item.is_active ? 'false' : 'true'})">${item.is_active ? 'Пауза' : 'Старт'}</button>
                        <button class="btn btn-danger btn-sm" onclick="deleteCommandSchedule(${item.id})">Удалить</button>
                    </div>
                </div>
            `).join('');
        } catch (error) {
            document.getElementById('command-schedules-list').innerHTML = awmEmptyState('Не удалось загрузить расписание', 'alert', error.message, { danger: true });
        }
    }

    async function toggleCommandSchedule(id, isActive) {
        await apiCall('PATCH', `/api/schedules/${id}/toggle`, { is_active: isActive });
        await loadCommandSchedules();
    }

    async function deleteCommandSchedule(id) {
        if (!await awmConfirm('Удалить задачу расписания?')) return;
        await apiCall('DELETE', `/api/schedules/${id}`);
        await loadCommandSchedules();
    }

    async function openCommandScheduleModal() {
        if (typeof requireAnsibleOrWarn === 'function' && !requireAnsibleOrWarn()) return;
        const [inventories, meta] = await Promise.all([
            apiCall('GET', '/api/inventories'),
            apiCall('GET', '/api/schedules/meta')
        ]);
        document.getElementById('cmd-schedule-inventory').innerHTML = (inventories.inventories || []).map(inv => `<option value="${inv.name}">${inv.name} (${inv.type.toUpperCase()})</option>`).join('');
        const cmdTz = (Intl.DateTimeFormat().resolvedOptions().timeZone || meta.server_timezone || 'UTC');
        if (window.awmTimezones) {
            window.awmTimezones.fillSelect(document.getElementById('cmd-schedule-timezone'), {
                value: cmdTz,
                includeEmpty: false,
            });
        } else {
            document.getElementById('cmd-schedule-timezone').value = cmdTz;
        }
        const now = new Date();
        document.getElementById('cmd-schedule-date').value = now.toISOString().slice(0, 10);
        document.getElementById('cmd-schedule-time').value = `${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}`;
        document.getElementById('command-schedule-modal').classList.add('active');
    }

    function closeCommandScheduleModal() {
        document.getElementById('command-schedule-modal').classList.remove('active');
        document.getElementById('command-schedule-form').reset();
        document.getElementById('cmd-schedule-interval-box').style.display = 'none';
    }

    document.getElementById('cmd-schedule-mode').addEventListener('change', (e) => {
        document.getElementById('cmd-schedule-interval-box').style.display = e.target.value === 'interval' ? 'grid' : 'none';
    });

    document.getElementById('command-schedule-form').addEventListener('submit', async (e) => {
        e.preventDefault();
        const mode = document.getElementById('cmd-schedule-mode').value;
        const payload = {
            inventory_name: document.getElementById('cmd-schedule-inventory').value,
            command: document.getElementById('cmd-schedule-command').value,
            hosts: document.getElementById('cmd-schedule-hosts').value.trim() || null,
            module: document.getElementById('cmd-schedule-module').value,
            become: document.getElementById('cmd-schedule-become').checked,
            become_user: document.getElementById('cmd-schedule-become-user').value.trim() || null,
            skip_ssh_check: document.getElementById('cmd-schedule-skip-ssh-check').checked
        };
        const data = {
            name: document.getElementById('cmd-schedule-name').value,
            job_type: 'command',
            payload,
            timezone: document.getElementById('cmd-schedule-timezone').value,
            mode,
            start_at: `${document.getElementById('cmd-schedule-date').value}T${document.getElementById('cmd-schedule-time').value}`,
            interval_value: mode === 'interval' ? Number(document.getElementById('cmd-schedule-interval-value').value) : null,
            interval_unit: mode === 'interval' ? document.getElementById('cmd-schedule-interval-unit').value : null,
            is_active: true
        };
        await apiCall('POST', '/api/schedules', data);
        closeCommandScheduleModal();
        await loadCommandSchedules();
    });

    // Автообновление списка команд
    setInterval(loadCommands, 5000);
    setInterval(loadCommandSchedules, 30000);

    function applyCommandFromNotificationUrl() {
        const commandId = new URLSearchParams(window.location.search).get('command');
        if (!commandId) return;
        window.setTimeout(() => {
            if (typeof viewCommandLog === 'function') {
                viewCommandLog(commandId);
            }
        }, 350);
    }

    // Загружаем команды при загрузке страницы
    loadCommands();
    loadSavedCommands();
    loadCommandSchedules();
    applyCommandFromNotificationUrl();
</script>
{% endblock %}