{% extends "base.html" %}

{% block title %}部署管理{% endblock %}
{% block page_title %}部署管理{% endblock %}

{% block styles %}
<link href="{{ url_for('static', filename='css/pages/deployment/index.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="deploy-grid">
        <!-- 左侧：部署列表 -->
        <div class="deploy-col">
            <div class="panel-card">
                <div class="panel-header">
                    <h5><i class="fas fa-server me-2 text-primary"></i>部署列表</h5>
                    <div class="stats-mini">
                        <span class="stat-item running">
                            <i class="fas fa-circle"></i>
                            {{ deployments|selectattr('status', 'equalto', 'running')|list|length }} 运行
                        </span>
                        <span class="stat-item stopped">
                            <i class="fas fa-circle"></i>
                            {{ deployments|selectattr('status', 'equalto', 'stopped')|list|length }} 停止
                        </span>
                        <span class="stat-item total">
                            共 {{ deployments|length }} 个
                        </span>
                    </div>
                </div>
                <div class="panel-body">
                    {% if deployments and deployments|length > 0 %}
                        {% for deployment in deployments %}
                        <div class="deploy-item">
                            <span class="status-dot {{ deployment.status }}"></span>
                            <div class="deploy-info">
                                <div class="deploy-name">
                                    {% if deployment.challenge and deployment.challenge.name %}
                                        {{ deployment.challenge.name }}
                                    {% elif deployment.display_name %}
                                        {{ deployment.display_name }}
                                    {% else %}
                                        未命名题目
                                    {% endif %}
                                </div>
                                <div class="deploy-meta">
                                    <span class="me-2"><i class="fas fa-clock me-1"></i>{{ deployment.created_at|beijing_time('%m-%d %H:%M') }}</span>
                                    {% if deployment.access_urls and deployment.access_urls|length > 0 %}
                                        <a href="{{ deployment.access_urls[0] }}" target="_blank" class="text-primary">
                                            <i class="fas fa-external-link-alt me-1"></i>访问
                                        </a>
                                    {% endif %}
                                </div>
                            </div>
                            <div class="deploy-actions">
                                <a href="{{ url_for('deployment.view_deployment', deployment_uuid=deployment.deployment_uuid) }}"
                                   class="btn btn-outline-primary btn-sm" title="详情">
                                    <i class="fas fa-eye"></i>
                                </a>
                                {% if deployment.status == 'running' %}
                                    <button class="btn btn-outline-warning btn-sm stop-btn"
                                            data-id="{{ deployment.deployment_uuid }}" title="停止">
                                        <i class="fas fa-stop"></i>
                                    </button>
                                {% elif deployment.status == 'stopped' %}
                                    <button class="btn btn-outline-success btn-sm start-btn"
                                            data-id="{{ deployment.deployment_uuid }}" title="启动">
                                        <i class="fas fa-play"></i>
                                    </button>
                                {% endif %}
                                {% if deployment.status != 'deleted' %}
                                    <button class="btn btn-outline-danger btn-sm delete-btn"
                                            data-id="{{ deployment.deployment_uuid }}" title="删除">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                {% endif %}
                            </div>
                        </div>
                        {% endfor %}
                    {% else %}
                        <div class="empty-panel">
                            <i class="fas fa-inbox d-block"></i>
                            <p class="mb-0">暂无部署记录</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 中间：题目列表 -->
        <div class="deploy-col">
            <div class="panel-card">
                <div class="panel-header">
                    <h5><i class="fas fa-flag me-2 text-success"></i>选择题目</h5>
                    <span class="text-muted" style="font-size: 0.7rem;">{{ challenges|length }} 个</span>
                </div>
                <div class="panel-body">
                    {% if challenges and challenges|length > 0 %}
                        <!-- 搜索框 -->
                        <div class="search-box">
                            <input type="text" class="form-control form-control-sm" id="searchChallenge" 
                                   placeholder="搜索题目..." style="font-size: 0.8rem;">
                        </div>
                        <!-- 题目列表 -->
                        <div id="challengeList">
                            {% for challenge in challenges %}
                            <div class="challenge-item" data-id="{{ challenge.id }}" 
                                 data-name="{{ challenge.name|lower }}"
                                 data-difficulty="{{ challenge.difficulty_level or '' }}"
                                 data-created="{{ challenge.created_at }}"
                                 onclick="selectChallenge({{ challenge.id }}, '{{ challenge.name|e }}', '{{ challenge.difficulty_level or '' }}', '{{ challenge.created_at }}')">
                                <div class="challenge-name">
                                    <i class="fas fa-flag text-primary me-1"></i>{{ challenge.name }}
                                    {% if challenge.deployment_stats.running > 0 %}
                                        <span class="badge bg-success ms-1" style="font-size: 0.6rem;">{{ challenge.deployment_stats.running }} 运行</span>
                                    {% endif %}
                                </div>
                                <div class="challenge-meta mt-1">
                                    {% if challenge.difficulty_level %}
                                        <span class="badge bg-info me-1" style="font-size: 0.6rem;">{{ challenge.difficulty_level }}</span>
                                    {% endif %}
                                    <span>{{ challenge.created_at }}</span>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                    {% else %}
                        <div class="empty-panel">
                            <i class="fas fa-file-code d-block"></i>
                            <p class="mb-2">还没有生成题目</p>
                            <a href="{{ url_for('wizard.select_category') }}" class="btn btn-primary btn-sm">
                                <i class="fas fa-plus me-1"></i>生成题目
                            </a>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- 右侧：部署配置 -->
        <div class="deploy-col deploy-config-col">
            <div class="panel-card">
                <div class="panel-header">
                    <h5><i class="fas fa-cog me-2 text-warning"></i>部署配置</h5>
                </div>
                <div class="panel-body">
                    <!-- 未选择题目时的占位 -->
                    <div class="config-placeholder" id="configPlaceholder">
                        <i class="fas fa-hand-pointer"></i>
                        <p>请从左侧选择一个题目</p>
                    </div>
                    
                    <!-- 部署配置表单 -->
                    <div class="deploy-config-form" id="deployConfigForm">
                        <div class="selected-challenge-info">
                            <div class="name"><i class="fas fa-flag me-1 text-primary"></i><span id="selectedChallengeName">-</span></div>
                            <div class="meta" id="selectedChallengeMeta">-</div>
                        </div>
                        
                        <form id="deployForm">
                            <input type="hidden" name="challenge_id" id="selectedChallengeId">
                            <div class="mb-3">
                                <label class="form-label" style="font-size: 0.8rem;">部署时长</label>
                                <select class="form-select form-select-sm" name="timeout_days" id="deployTimeout">
                                    <option value="1">1天</option>
                                    <option value="2">2天</option>
                                    <option value="3">3天</option>
                                    <option value="7">7天</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label" style="font-size: 0.8rem;">端口 (可选)</label>
                                <input type="number" class="form-control form-control-sm" name="port" id="deployPort"
                                       placeholder="留空自动分配" min="42500" max="42600">
                                <small class="text-muted" style="font-size: 0.7rem;">范围: 42500-42600</small>
                            </div>
                            <button type="submit" class="btn btn-deploy w-100" id="deployBtn">
                                <i class="fas fa-rocket me-2"></i>开始部署
                            </button>
                        </form>
                    </div>
                    
                    <!-- 部署进度 -->
                    <div class="deployment-progress" id="deploymentProgress">
                        <h6 class="mb-2" style="font-size: 0.85rem;"><i class="fas fa-spinner fa-spin me-1"></i>部署中...</h6>
                        <div class="progress mb-2" style="height: 6px;">
                            <div class="progress-bar bg-primary progress-bar-striped progress-bar-animated"
                                 id="deployProgress" style="width: 0%"></div>
                        </div>
                        <pre class="deployment-logs" id="dockerLogs"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 确认操作模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="confirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmModalLabel">确认操作</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <div class="modal-icon mb-3">
                        <i class="fas fa-exclamation-triangle text-warning" style="font-size: 3rem;"></i>
                    </div>
                    <p id="confirmMessage" class="mb-0">确定要执行此操作吗？</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger" id="confirmAction">确认</button>
            </div>
        </div>
    </div>
</div>


{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='js/pages/deployment/deployment.js') }}"></script>
<script src="{{ url_for('static', filename='js/pages/deployment/index-inline.js') }}"></script>
{% endblock %}