{% extends "base.html" %}

{% block title %}Инструкция - AWM{% endblock %}

{% block content %}
<style>
    .instructions-hero {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 40px;
        border-radius: 12px;
        margin-bottom: 30px;
        text-align: center;
    }
    
    .instructions-hero h1 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 10px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    .instructions-hero p {
        font-size: 1.1rem;
        opacity: 0.95;
        max-width: 600px;
        margin: 0 auto;
    }
    
    .instruction-section {
        background: white;
        border-radius: 12px;
        padding: 30px;
        margin-bottom: 25px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        border-left: 4px solid;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .instruction-section:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    
    .instruction-section.section-1 { border-left-color: #3b82f6; }
    .instruction-section.section-2 { border-left-color: #10b981; }
    .instruction-section.section-3 { border-left-color: #f59e0b; }
    .instruction-section.section-4 { border-left-color: #8b5cf6; }
    .instruction-section.section-5 { border-left-color: #ef4444; }
    .instruction-section.section-6 { border-left-color: #06b6d4; }
    .instruction-section.section-7 { border-left-color: #ec4899; }
    .instruction-section.section-8 { border-left-color: #14b8a6; }
    .instruction-section.section-9 { border-left-color: #6366f1; }
    
    .section-header {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .section-icon {
        font-size: 2rem;
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.05));
        border-radius: 12px;
        flex-shrink: 0;
    }
    
    .section-title {
        font-size: 1.5rem;
        font-weight: 600;
        color: #1e293b;
        margin: 0;
    }
    
    .instruction-section p {
        color: #475569;
        line-height: 1.8;
        margin-bottom: 15px;
        font-size: 1rem;
    }
    
    .instruction-section ul,
    .instruction-section ol {
        color: #475569;
        line-height: 1.8;
        padding-left: 25px;
        margin-bottom: 15px;
    }
    
    .instruction-section li {
        margin-bottom: 10px;
        padding-left: 5px;
    }
    
    .instruction-section li strong {
        color: #1e293b;
        font-weight: 600;
    }
    
    .code-block {
        background: #1e293b;
        color: #e2e8f0;
        padding: 20px;
        border-radius: 8px;
        overflow-x: auto;
        margin: 15px 0;
        font-family: 'Courier New', monospace;
        font-size: 0.9rem;
        line-height: 1.6;
        border: 1px solid #334155;
    }
    
    .code-block code {
        color: #e2e8f0;
    }
    
    .status-badge-example {
        display: inline-block;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 0.85rem;
        font-weight: 600;
        margin: 0 5px;
    }
    
    .status-success { background: #d1fae5; color: #065f46; }
    .status-failed { background: #fee2e2; color: #991b1b; }
    .status-running { background: #fed7aa; color: #92400e; }
    .status-pending { background: #e2e8f0; color: #475569; }
    
    .feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin: 20px 0;
    }
    
    .feature-item {
        background: #f8fafc;
        padding: 15px;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        text-align: center;
    }
    
    .feature-item strong {
        display: block;
        color: #1e293b;
        margin-bottom: 5px;
        font-size: 0.95rem;
    }
    
    .tip-box {
        background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
        border-left: 4px solid #f59e0b;
        padding: 20px;
        border-radius: 8px;
        margin: 20px 0;
    }
    
    .tip-box strong {
        color: #92400e;
        display: block;
        margin-bottom: 10px;
        font-size: 1.1rem;
    }
    
    .tip-box ul {
        margin: 0;
        color: #78350f;
    }
    
    .warning-box {
        background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
        border-left: 4px solid #ef4444;
        padding: 20px;
        border-radius: 8px;
        margin: 20px 0;
    }
    
    .warning-box strong {
        color: #991b1b;
        display: block;
        margin-bottom: 10px;
        font-size: 1.1rem;
    }
    
    .warning-box ul {
        margin: 0;
        color: #7f1d1d;
    }
    
    .steps-list {
        counter-reset: step-counter;
        list-style: none;
        padding-left: 0;
    }
    
    .steps-list li {
        counter-increment: step-counter;
        position: relative;
        padding-left: 50px;
        margin-bottom: 20px;
        padding-top: 5px;
    }
    
    .steps-list li::before {
        content: counter(step-counter);
        position: absolute;
        left: 0;
        top: 0;
        width: 35px;
        height: 35px;
        background: linear-gradient(135deg, #3b82f6, #2563eb);
        color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 1rem;
    }
</style>

<div class="card" style="padding: 0; overflow: hidden;">
    <div class="toolbar" style="background: white; border-bottom: 1px solid #e2e8f0;">
        <h2 style="margin: 0;">📖 Инструкция по использованию</h2>
        <a href="/" class="btn btn-secondary">
            <span>←</span> Назад
        </a>
    </div>
    
    <div style="padding: 30px;">
        <div class="instructions-hero">
            <h1>🚀 Добро пожаловать в AWM</h1>
            <p>Централизованная система управления инфраструктурой через Ansible. Изучите возможности платформы и начните автоматизировать свои задачи.</p>
        </div>
        
        <div class="instruction-section section-1">
            <div class="section-header">
                <div class="section-icon">📝</div>
                <h3 class="section-title">1. Плейбуки</h3>
            </div>
            <p>Плейбуки - это YAML файлы, описывающие задачи для автоматизации инфраструктуры. Они содержат набор задач, которые Ansible выполняет на удаленных хостах.</p>
            <ul>
                <li><strong>Создание плейбука:</strong> Нажмите "Создать вручную" для создания с нуля или используйте "Конструктор" для создания плейбука из готового шаблона</li>
                <li><strong>Редактирование:</strong> Нажмите кнопку "Редактировать" рядом с плейбуком для внесения изменений</li>
                <li><strong>Удаление:</strong> Нажмите кнопку "Удалить" (будет запрошено подтверждение для безопасности)</li>
            </ul>
        </div>
        
        <div class="instruction-section section-2">
            <div class="section-header">
                <div class="section-icon">📋</div>
                <h3 class="section-title">2. Инвентори</h3>
            </div>
            <p>Инвентори - это файлы, содержащие список хостов для управления. Они определяют, на каких серверах будут выполняться ваши плейбуки.</p>
            <ul>
                <li><strong>Формат INI:</strong> Традиционный формат Ansible, простой и понятный</li>
                <li><strong>Формат YAML:</strong> Более структурированный формат с поддержкой вложенных групп</li>
                <li><strong>Создание:</strong> Используйте "Создать вручную" для полного контроля или "Конструктор" для быстрого создания</li>
            </ul>
            <p><strong>Пример INI инвентори:</strong></p>
            <div class="code-block">
<code>[webservers]
web1.example.com ansible_host=192.168.1.10
web2.example.com ansible_host=192.168.1.11

[webservers:vars]
ansible_user=admin
ansible_ssh_private_key_file=~/.ssh/id_rsa</code>
            </div>
        </div>
        
        <div class="instruction-section section-3">
            <div class="section-header">
                <div class="section-icon">▶️</div>
                <h3 class="section-title">3. Запуск плейбуков</h3>
            </div>
            <p>Для запуска плейбука выполните следующие шаги:</p>
            <ol class="steps-list">
                <li>Нажмите "Запустить плейбук" на вкладке "Запуски"</li>
                <li>Выберите плейбук из выпадающего списка</li>
                <li>Выберите инвентори (опционально) - если не выбран, будет использован localhost</li>
                <li>Настройте дополнительные параметры:
                    <div class="feature-grid" style="margin-top: 15px;">
                        <div class="feature-item">
                            <strong>Check Mode</strong>
                            <span style="font-size: 0.85rem; color: #64748b;">Режим проверки (dry-run)</span>
                        </div>
                        <div class="feature-item">
                            <strong>Diff Mode</strong>
                            <span style="font-size: 0.85rem; color: #64748b;">Показывает различия</span>
                        </div>
                        <div class="feature-item">
                            <strong>Tags</strong>
                            <span style="font-size: 0.85rem; color: #64748b;">Запуск только задач с тегами</span>
                        </div>
                        <div class="feature-item">
                            <strong>Skip Tags</strong>
                            <span style="font-size: 0.85rem; color: #64748b;">Пропуск задач с тегами</span>
                        </div>
                        <div class="feature-item">
                            <strong>Limit</strong>
                            <span style="font-size: 0.85rem; color: #64748b;">Ограничение на хосты</span>
                        </div>
                    </div>
                </li>
                <li>Нажмите "Запустить" и следите за выполнением в реальном времени</li>
            </ol>
        </div>
        
        <div class="instruction-section section-4">
            <div class="section-header">
                <div class="section-icon">📄</div>
                <h3 class="section-title">4. Просмотр логов</h3>
            </div>
            <p>После запуска плейбука вы можете отслеживать его выполнение:</p>
            <ul>
                <li>Нажмите кнопку "Лог" рядом с запуском для просмотра полного вывода выполнения</li>
                <li>Логи обновляются в реальном времени через WebSocket соединение</li>
                <li>Статус запуска отображается цветным бейджем для быстрой визуальной оценки:
                    <div style="margin-top: 15px; display: flex; flex-wrap: wrap; gap: 10px;">
                        <span class="status-badge-example status-success">✓ Успешно</span>
                        <span class="status-badge-example status-failed">✗ Ошибка</span>
                        <span class="status-badge-example status-running">⟳ Выполняется</span>
                        <span class="status-badge-example status-pending">⏳ Ожидание</span>
                    </div>
                </li>
            </ul>
        </div>
        
        <div class="instruction-section section-5">
            <div class="section-header">
                <div class="section-icon">🔄</div>
                <h3 class="section-title">5. Повтор запуска</h3>
            </div>
            <p>Для повторного запуска плейбука с теми же параметрами:</p>
            <ol class="steps-list">
                <li>Найдите завершенный запуск (успешный или с ошибкой) в списке</li>
                <li>Нажмите кнопку "Повторить" рядом с запуском</li>
                <li>Будет создан новый запуск с теми же параметрами и сразу начнется выполнение</li>
            </ol>
            <div class="tip-box">
                <strong>💡 Совет</strong>
                <p style="margin: 0; color: #78350f;">Используйте функцию повтора для быстрого перезапуска после исправления ошибок или для повторного применения конфигурации.</p>
            </div>
        </div>
        
        <div class="instruction-section section-6">
            <div class="section-header">
                <div class="section-icon">🔧</div>
                <h3 class="section-title">6. Конструктор плейбуков</h3>
            </div>
            <p>Конструктор позволяет создавать плейбуки из готовых шаблонов без необходимости писать YAML вручную:</p>
            <ol class="steps-list">
                <li>Выберите категорию шаблона (базовые операции, контейнеризация, Kubernetes, CI/CD и др.)</li>
                <li>Заполните необходимые параметры через удобный интерфейс</li>
                <li>Просмотрите сгенерированный YAML код перед сохранением</li>
                <li>Сохраните плейбук с уникальным именем</li>
            </ol>
        </div>
        
        <div class="instruction-section section-7">
            <div class="section-header">
                <div class="section-icon">📊</div>
                <h3 class="section-title">7. Статистика</h3>
            </div>
            <p>На главной странице в шапке отображается краткая статистика:</p>
            <div class="feature-grid">
                <div class="feature-item">
                    <strong>📝 Плейбуки</strong>
                    <span style="font-size: 0.85rem; color: #64748b;">Общее количество</span>
                </div>
                <div class="feature-item">
                    <strong>📋 Инвентори</strong>
                    <span style="font-size: 0.85rem; color: #64748b;">Доступные инвентори</span>
                </div>
                <div class="feature-item">
                    <strong>▶️ Запуски</strong>
                    <span style="font-size: 0.85rem; color: #64748b;">Всего выполнено</span>
                </div>
            </div>
            <p style="margin-top: 20px;">Подробную статистику с графиками, метриками успешности и анализом использования можно посмотреть на странице <strong>"Статистика"</strong>.</p>
        </div>
        
        <div class="instruction-section section-8">
            <div class="section-header">
                <div class="section-icon">💡</div>
                <h3 class="section-title">8. Советы и лучшие практики</h3>
            </div>
            <div class="tip-box">
                <strong>💡 Рекомендации</strong>
                <ul>
                    <li>Используйте описательные имена для плейбуков и инвентори (например: "deploy-web-app" вместо "playbook1")</li>
                    <li>Добавляйте описания для лучшей организации и понимания назначения</li>
                    <li>Перед выполнением на продакшене всегда используйте Check Mode для проверки изменений</li>
                    <li>Регулярно проверяйте логи для выявления проблем и оптимизации</li>
                    <li>Используйте теги для организации задач в плейбуках и выборочного выполнения</li>
                    <li>Храните инвентори в актуальном состоянии и регулярно обновляйте информацию о хостах</li>
                </ul>
            </div>
        </div>
        
        <div class="instruction-section section-9">
            <div class="section-header">
                <div class="section-icon">🆘</div>
                <h3 class="section-title">9. Поддержка и решение проблем</h3>
            </div>
            <p>При возникновении проблем выполните следующие проверки:</p>
            <div class="warning-box">
                <strong>⚠️ Чек-лист устранения неполадок</strong>
                <ul>
                    <li>Проверьте логи выполнения - они содержат детальную информацию об ошибках</li>
                    <li>Убедитесь, что Ansible установлен и доступен в системе (команда <code>ansible --version</code>)</li>
                    <li>Проверьте правильность формата YAML в плейбуках (используйте валидатор YAML)</li>
                    <li>Убедитесь, что инвентори содержит корректные данные о хостах и доступности</li>
                    <li>Проверьте SSH подключение к хостам из инвентори</li>
                    <li>Убедитесь, что на целевых хостах установлен Python (требование Ansible)</li>
                </ul>
            </div>
        </div>
        
        <div style="text-align: center; margin-top: 40px; padding: 30px; background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-radius: 12px;">
            <h3 style="color: #1e293b; margin-bottom: 15px;">🎉 Готовы начать?</h3>
            <p style="color: #475569; margin-bottom: 20px;">Теперь вы знаете все основные возможности платформы. Начните с создания первого плейбука или выполнения команды на ваших хостах!</p>
            <a href="/" class="btn btn-primary" style="margin-right: 10px;">
                <span>📝</span> К плейбукам
            </a>
            <a href="/commands" class="btn btn-success">
                <span>⚡</span> Выполнить команду
            </a>
        </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();
    }

    // Обновление статистики в header
    async function updateStats() {
        try {
            const statPlaybooks = document.getElementById('stat-playbooks');
            const statInventories = document.getElementById('stat-inventories');
            const statRuns = document.getElementById('stat-runs');
            
            if (!statPlaybooks || !statInventories || !statRuns) {
                console.warn('Stats elements not found, skipping update');
                return;
            }
            
            const [playbooksData, inventoriesData, runsData] = await Promise.all([
                apiCall('GET', '/api/playbooks'),
                apiCall('GET', '/api/inventories'),
                apiCall('GET', '/api/runs')
            ]);
            
            statPlaybooks.textContent = playbooksData.playbooks?.length || 0;
            statInventories.textContent = inventoriesData.inventories?.length || 0;
            statRuns.textContent = runsData.runs?.length || 0;
        } catch (error) {
            console.error('Error updating stats:', error);
            // Устанавливаем значения по умолчанию при ошибке
            const statPlaybooks = document.getElementById('stat-playbooks');
            const statInventories = document.getElementById('stat-inventories');
            const statRuns = document.getElementById('stat-runs');
            
            if (statPlaybooks) statPlaybooks.textContent = '-';
            if (statInventories) statInventories.textContent = '-';
            if (statRuns) statRuns.textContent = '-';
        }
    }

    // Обновляем статистику при загрузке страницы
    updateStats();
</script>
{% endblock %}