{% extends "base.html" %}

{% block title %}{{ challenge_info.name }}{% endblock %}
{% block page_title %}题目详情{% endblock %}

{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/highlightjs/github-dark.min.css') }}" id="hljs-dark-theme">
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/highlightjs/github.min.css') }}" id="hljs-light-theme" disabled>
<link href="{{ url_for('static', filename='css/pages/ctf/challenge-detail.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='vendor/animate.css/animate.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/pages/generate/result/index.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/pages/generate/result/assistant.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='css/pages/admin/category_detail.css') }}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="result-container">
    <!-- CTF题目英雄头部卡片 -->
    <div class="challenge-hero-card">
        <div class="hero-background"></div>
        <div class="hero-content">
            <div class="row align-items-center">
                <div class="col-lg-8">
                    <div class="challenge-title-section">
                        <div class="challenge-status-badge">
                            <span class="badge badge-success"><i class="fas fa-check-circle"></i> 已生成</span>
                            {% if category_config %}
                            <span class="badge badge-info ms-2">
                                <i class="{{ category_config.icon | icon_class }}"></i> {{ category_config.name }}
                            </span>
                            {% endif %}
                        </div>
                        <h1 class="hero-title">{{ challenge_info.name }}</h1>
                        <p class="hero-description">{{ challenge_info.description }}</p>
                        <div class="challenge-metadata">
                            <div class="metadata-item">
                                <i class="fas fa-layer-group"></i>
                                <span>{{ challenge_info.difficulty or '未设置' }}</span>
                            </div>
                            {% if challenge_info.estimated_time %}
                            <div class="metadata-item">
                                <i class="fas fa-clock"></i>
                                <span>{{ challenge_info.estimated_time }}</span>
                            </div>
                            {% endif %}
                            <div class="metadata-item">
                                <i class="fas fa-calendar-alt"></i>
                                <span>{{ generation_time or '刚刚' }}</span>
                            </div>
                            {% if author_info %}
                            <div class="metadata-item">
                                <i class="fas fa-user"></i>
                                <span>{{ author_info.username }}</span>
                            </div>
                            {% endif %}
                            {% if category_config %}
                            <div class="metadata-item">
                                <i class="{{ category_config.icon | icon_class }}"></i>
                                <span>{{ category_config.name }}</span>
                            </div>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 现代化标签页导航 -->
    <div class="modern-tabs-container">
        <div class="modern-tabs">
            <div class="tab-slider"></div>
            <button class="modern-tab active" data-tab="code">
                <i class="fas fa-code"></i>
                <span>项目结构</span>
            </button>
            <button class="modern-tab" data-tab="assistant">
                <i class="fas fa-robot"></i>
                <span>AI助手</span>
            </button>
        </div>
    </div>

    <!-- 标签页内容 -->
    <div class="tab-content-container">
        <!-- 代码标签页（默认激活） -->
        <div class="tab-content active" id="code-content">
            <div class="code-browser-card">
                <div class="card-header">
                    <h3><i class="fas fa-folder-open"></i> 项目文件结构</h3>
                </div>
                <div class="card-body" style="padding: 0;">
                    <!-- Windows风格文件浏览器 -->
                    <div class="file-browser-container">
                        <div class="file-browser-layout">
                            <!-- 左侧文件夹树 -->
                            <div class="file-browser-sidebar">
                                <div class="sidebar-header">
                                    <i class="fas fa-folder-tree me-2"></i>
                                    <strong>文件夹</strong>
                                </div>
                                <div id="folder-tree" class="folder-tree">
                                    <div class="text-center py-4 text-muted">加载中...</div>
                                </div>
                            </div>

                            <!-- 右侧文件列表 -->
                            <div class="file-browser-main">
                                <!-- 工具栏 -->
                                <div class="file-browser-toolbar">
                                    <div class="d-flex align-items-center gap-2">
                                        <button class="btn btn-sm btn-outline-secondary" onclick="navigateUp()" id="btnUp" disabled title="向上">
                                            <i class="fas fa-arrow-up"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary" onclick="navigateBack()" id="btnBack" disabled title="后退">
                                            <i class="fas fa-arrow-left"></i>
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary" onclick="navigateForward()" id="btnForward" disabled title="前进">
                                            <i class="fas fa-arrow-right"></i>
                                        </button>
                                        <div class="vr"></div>
                                        <button class="btn btn-sm btn-outline-secondary" onclick="refreshFileBrowser()" title="刷新">
                                            <i class="fas fa-sync"></i>
                                        </button>
                                    </div>
                                </div>

                                <!-- 面包屑导航 -->
                                <div class="file-browser-breadcrumb">
                                    <nav aria-label="breadcrumb">
                                        <ol class="breadcrumb mb-0" id="breadcrumb-nav">
                                            <li class="breadcrumb-item">
                                                <a href="#" onclick="navigateToPath(''); return false;">
                                                    <i class="fas fa-home"></i> 项目根目录
                                                </a>
                                            </li>
                                        </ol>
                                    </nav>
                                </div>

                                <!-- 文件列表 -->
                                <div class="file-browser-content" id="file-list-container">
                                    <div class="text-center py-4 text-muted">加载中...</div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <!-- AI助手标签页 -->
        <div class="tab-content" id="assistant-content">
            <div class="assistant-card">
                <!-- 快捷操作 -->
                <div class="quick-actions-bar">
                    <span class="quick-label"><i class="fas fa-bolt me-1"></i>快捷指令:</span>
                    <button class="quick-btn" onclick="fillQuickCommand('code')">
                        <i class="fas fa-code"></i> 代码优化
                    </button>
                    <button class="quick-btn" onclick="fillQuickCommand('security')">
                        <i class="fas fa-shield-alt"></i> 安全增强
                    </button>
                    <button class="quick-btn" onclick="fillQuickCommand('docker')">
                        <i class="fab fa-docker"></i> Docker修复
                    </button>
                    <button class="quick-btn" onclick="fillQuickCommand('difficulty')">
                        <i class="fas fa-layer-group"></i> 难度调整
                    </button>
                </div>

                <!-- 对话区域 -->
                <div class="chat-box">
                    <div class="chat-history" id="chatHistory">
                        <div class="chat-welcome text-center text-muted py-4" id="chatWelcome">
                            <i class="fas fa-robot fa-3x mb-3 d-block text-primary"></i>
                            <h5>AI 助手</h5>
                            <p class="small">我可以帮你优化代码、修复问题、调整难度等</p>
                            <p class="small text-muted">点击上方快捷指令或直接输入你的需求</p>
                        </div>
                    </div>
                    <div class="chat-input-area">
                        <div class="chat-input">
                            <textarea id="chatInput" placeholder="输入指令，例如：修复Docker构建错误、增加一个提示文件..." rows="2"></textarea>
                            <button id="chatSendBtn" onclick="sendChatMessage()">
                                <i class="fas fa-paper-plane"></i>
                            </button>
                        </div>
                        <div class="d-flex justify-content-between align-items-center mt-2">
                            <span class="text-muted small"><i class="fas fa-info-circle me-1"></i>Enter 发送，Shift+Enter 换行</span>
                            <div>
                                <button class="btn btn-sm btn-outline-secondary me-1" onclick="clearScreen()">
                                    <i class="fas fa-eraser me-1"></i>清屏
                                </button>
                                <button class="btn btn-sm btn-outline-danger" onclick="clearChatHistory()">
                                    <i class="fas fa-trash-alt me-1"></i>清空记忆
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- 快速操作按钮 -->
    <div class="quick-actions">
        <a href="{{ url_for('generate_result_file_api.download_all', challenge_id=challenge_id) }}" class="btn btn-outline-primary">
            <i class="fas fa-download me-1"></i>下载源码
        </a>
        {% if deployable is none or deployable == true %}
        <a href="{{ url_for('deployment.index') }}?challenge_id={{ challenge_id }}" class="btn btn-outline-success">
            <i class="fas fa-rocket me-1"></i>部署题目
        </a>
        {% else %}
        <span class="btn btn-outline-secondary disabled" title="该题目不可部署（未找到 Docker 配置文件）">
            <i class="fas fa-ban me-1"></i>不可部署
        </span>
        {% endif %}
        <a href="{{ url_for('wizard.select_category') }}" class="btn btn-outline-secondary">
            <i class="fas fa-plus me-1"></i>生成新题目
        </a>
    </div>





    </div>

    <!-- 文件编辑模态框（知识库复用，结果页面用于查看） -->
    <div class="modal fade" id="fileEditorModal" tabindex="-1">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="fileEditorModalTitle">查看文件</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-2">
                        <span class="text-muted small" id="fileEditorPath"></span>
                    </div>
                    <textarea class="form-control font-monospace" id="fileEditorContent" rows="15" style="font-size: 0.9rem;"></textarea>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="saveFileContent()">
                        <i class="fas fa-save me-1"></i>保存
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 文件上传模态框（知识库复用，结果页面不需要但保留以兼容） -->
    <div class="modal fade" id="fileUploadModal" tabindex="-1" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">上传文件</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="fileUploadForm" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="uploadFile" class="form-label">选择文件</label>
                            <input type="file" class="form-control" id="uploadFile" name="file" required>
                            <div class="form-text">
                                <i class="fas fa-info-circle me-1"></i>
                                最大上传大小: <span id="maxUploadSize">未设置限制</span>
                            </div>
                            <div class="form-text mt-2">
                                <i class="fas fa-folder me-1"></i>
                                将上传到当前目录: <span id="uploadTargetPath" class="text-primary">根目录</span>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="uploadKnowledgeFile()">
                        <i class="fas fa-upload me-1"></i>上传
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 压缩包上传模态框（知识库复用，结果页面不需要但保留以兼容） -->
    <div class="modal fade" id="zipUploadModal" tabindex="-1" style="display: none;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">上传压缩包</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="zipUploadForm" enctype="multipart/form-data">
                        <div class="mb-3">
                            <label for="uploadZipFile" class="form-label">选择压缩包</label>
                            <input type="file" class="form-control" id="uploadZipFile" name="file" 
                                   accept=".zip,.rar,.7z,.tar,.gz" required>
                            <div class="form-text">
                                支持 .zip, .rar, .7z, .tar, .gz 格式<br>
                                <i class="fas fa-info-circle me-1"></i>
                                最大上传大小: <span id="maxUploadSizeZip">未设置限制</span>
                            </div>
                            <div class="form-text mt-2">
                                <i class="fas fa-folder me-1"></i>
                                将解压到当前目录: <span id="uploadZipTargetPath" class="text-primary">根目录</span>
                            </div>
                        </div>
                        <div class="alert alert-info mb-0">
                            <i class="fas fa-info-circle me-2"></i>
                            <strong>提示：</strong>压缩包将自动解压，如果目标目录已存在同名文件，将被覆盖。
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="uploadZipFile()">
                        <i class="fas fa-file-archive me-1"></i>上传并解压
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 代码文件数据 -->
    <script id="code-files-data" type="application/json">
        {{ code_files | tojson | safe }}
    </script>

    <!-- 题目ID数据 -->
    <script>
        window.CHALLENGE_ID = {{ challenge_id | tojson | safe }};
    </script>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ url_for('static', filename='vendor/highlightjs/highlight.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/marked/marked.min.js') }}"></script>
<!-- 文件浏览器模块（已拆分为两个文件） -->
<script src="{{ url_for('static', filename='js/pages/admin/category_detail/modules/file-tree.js') }}"></script>
<script src="{{ url_for('static', filename='js/pages/admin/category_detail/modules/file-list.js') }}"></script>
<script src="{{ url_for('static', filename='js/common/assistant.js') }}?v=20251221"></script>
<script src="{{ url_for('static', filename='js/pages/generate/result/init.js') }}"></script>
{% endblock %}