{% extends "base.html" %}

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

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

    <!-- История выполнения -->
    <div class="card">
        <div class="toolbar">
            <h2>⚡ История выполнения</h2>
            <button class="btn btn-success" onclick="openCommandModal()">
                <span>▶</span> Выполнить команду
            </button>
        </div>
        <div id="commands-list">
            <div class="loading">Загрузка...</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 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;">
                        <span>💾</span> Сохранить команду
                    </button>
                    <button type="submit" class="btn btn-primary">Выполнить</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 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>
{% 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 = '<div class="empty-state"><div class="empty-state-icon">⚡</div><p style="font-size: 18px; font-weight: 600; margin-bottom: 10px;">Нет выполненных команд</p><p>Выполните команду на хостах для просмотра истории</p></div>';
                return;
            }
            
            list.innerHTML = data.commands.map(cmd => {
                const statusClass = `status-${cmd.status}`;
                const commandPreview = cmd.command.length > 100 
                    ? cmd.command.substring(0, 100) + '...' 
                    : cmd.command;
                return `
                    <div class="list-item">
                        <div class="list-item-info">
                            <div class="list-item-name">
                                <span style="font-weight: 600;">${cmd.inventory_name}</span>
                                ${cmd.hosts ? ` <span style="color: #718096;">→ ${cmd.hosts}</span>` : ''}
                                <span class="status-badge ${statusClass}">${cmd.status}</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">
                            <button class="btn btn-primary btn-sm" onclick="viewCommandLog('${cmd.id}')">
                                <span>📄</span> Лог
                            </button>
                        </div>
                    </div>
                `;
            }).join('');
        } catch (error) {
            document.getElementById('commands-list').innerHTML = `<div class="empty-state">Ошибка: ${error.message}</div>`;
        }
    }

    function escapeHtml(text) {
        const div = document.createElement('div');
        div.textContent = text;
        return div.innerHTML;
    }

    // Открытие модального окна для выполнения команды
    async function openCommandModal(savedCommandName = null) {
        // Загружаем список инвентори
        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('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();
        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;
        
        if (!command.trim()) {
            alert('Введите команду для выполнения');
            return;
        }
        
        try {
            const commandData = {
                inventory_name: inventory,
                command: command,
                hosts: hosts,
                module: module,
                become: become,
                become_user: becomeUser
            };
            
            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') {
                // Можно обновить статус в UI
            }
        };
        
        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;
    }

    // Работа с сохраненными командами
    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 = '<div class="empty-state"><div class="empty-state-icon">💾</div><p style="font-size: 18px; font-weight: 600; margin-bottom: 10px;">Нет сохраненных команд</p><p>Создайте команду для быстрого повторного выполнения</p></div>';
                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;">📋 ${cmd.inventory_name}</span>
                                ${cmd.hosts ? ` <span style="color: #64748b;">→ ${cmd.hosts}</span>` : ''}
                                <span style="color: #64748b; margin-left: 10px;">🔧 ${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">
                            <button class="btn btn-success btn-sm" onclick="executeSavedCommand('${cmd.name}')" title="Выполнить">
                                <span>▶</span> Выполнить
                            </button>
                            <button class="btn btn-info btn-sm" onclick="loadSavedCommandToForm('${cmd.name}')" title="Загрузить в форму">
                                <span>📥</span> Загрузить
                            </button>
                            <button class="btn btn-primary btn-sm" onclick="editSavedCommand('${cmd.name}')" title="Редактировать">
                                <span>✏️</span> Редактировать
                            </button>
                            <button class="btn btn-danger btn-sm" onclick="deleteSavedCommand('${cmd.name}')" title="Удалить">
                                <span>🗑️</span> Удалить
                            </button>
                        </div>
                    </div>
                `;
            }).join('');
        } catch (error) {
            document.getElementById('saved-commands-list').innerHTML = `<div class="empty-state">Ошибка: ${error.message}</div>`;
        }
    }

    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-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;
        
        try {
            if (currentSavedCommandName) {
                await apiCall('PUT', `/api/commands/saved/${currentSavedCommandName}`, {
                    description,
                    inventory_name: inventory,
                    command,
                    hosts,
                    module,
                    become,
                    become_user: becomeUser
                });
            } else {
                await apiCall('POST', '/api/commands/saved', {
                    name,
                    description,
                    inventory_name: inventory,
                    command,
                    hosts,
                    module,
                    become,
                    become_user: becomeUser
                });
            }
            closeSavedCommandModal();
            loadSavedCommands();
        } catch (error) {
            alert('Ошибка: ' + error.message);
        }
    });

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

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

    async function executeSavedCommand(name) {
        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() {
        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;
        
        if (!command.trim()) {
            alert('Введите команду для сохранения');
            return;
        }
        
        if (!inventory) {
            alert('Выберите инвентори');
            return;
        }
        
        const name = prompt('Введите название для сохранения команды:');
        if (!name) {
            return;
        }
        
        try {
            await apiCall('POST', '/api/commands/saved', {
                name,
                description: '',
                inventory_name: inventory,
                command,
                hosts,
                module,
                become,
                become_user: becomeUser
            });
            alert('Команда сохранена!');
            loadSavedCommands();
        } catch (error) {
            alert('Ошибка: ' + error.message);
        }
    }

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

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