{% extends 'base.html' %}

{% block title %}模型军械库 - 节点管理{% endblock %}

{% block content %}
<style>
    /* =========================================================
       1. 移除原生 Bootstrap 容器的冗余边距，完美契合 base 底座
       ========================================================= */
    .container.mt-5 {
        margin-top: 0 !important;
        padding: 0 !important;
    }

    /* =========================================================
       2. 标题与面板装饰
       ========================================================= */
    .cyber-panel-header {
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid rgba(0, 229, 255, 0.3);
        padding-bottom: 20px;
        margin-bottom: 30px;
        position: relative;
    }
    .cyber-panel-header h2 {
        color: #fff;
        font-weight: 800;
        letter-spacing: 3px;
        margin: 0;
        text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    }
    .cyber-panel-header h2 i {
        color: #00e5ff;
        margin-right: 15px;
    }
    /* 标题底部的呼吸发光条 */
    .cyber-panel-header::after {
        content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
        width: 150px; height: 3px; background: #00e5ff;
        box-shadow: 0 0 15px #00e5ff; border-radius: 3px;
    }

    /* =========================================================
       3. 科幻数据栅格 (Cyber Data Table)
       ========================================================= */
    .cyber-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 12px; /* 让每一行分开，形成独立数据块的感觉 */
        color: #e0e0e0;
    }

    .cyber-table thead th {
        color: #00e5ff;
        font-weight: 600;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 15px;
        border: none;
        background: rgba(0, 229, 255, 0.05);
        border-top: 1px solid rgba(0, 229, 255, 0.3);
        border-bottom: 1px solid rgba(0, 229, 255, 0.3);
    }
    /* 表头左右两端的斜角视觉效果 */
    .cyber-table thead th:first-child { border-left: 1px solid rgba(0, 229, 255, 0.3); border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
    .cyber-table thead th:last-child { border-right: 1px solid rgba(0, 229, 255, 0.3); border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

    .cyber-table tbody tr {
        background: rgba(28, 37, 65, 0.5);
        transition: all 0.3s ease;
        box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
    }

    .cyber-table tbody td {
        padding: 18px 15px;
        vertical-align: middle;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .cyber-table tbody td:first-child { border-left: 1px solid rgba(255, 255, 255, 0.05); }
    .cyber-table tbody td:last-child { border-right: 1px solid rgba(255, 255, 255, 0.05); }

    /* 数据行悬停特效：发光与背景高亮 */
    .cyber-table tbody tr:hover {
        background: rgba(0, 229, 255, 0.08);
        transform: scale(1.01);
    }
    .cyber-table tbody tr:hover td {
        border-color: rgba(0, 229, 255, 0.4);
    }

    /* 数据强调样式 */
    .model-name { font-weight: bold; color: #fff; font-size: 1.1rem; letter-spacing: 1px; }
    .model-date { color: #8d99ae; font-family: monospace; }

    /* =========================================================
       4. 极客操作按钮
       ========================================================= */
    .btn-cyber {
        background: transparent;
        border: 1px solid;
        border-radius: 4px;
        padding: 6px 15px;
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 1px;
        text-transform: uppercase;
        transition: all 0.3s;
        text-decoration: none;
        display: inline-block;
        margin: 0 4px;
    }

    .btn-cyber-info { border-color: #00e5ff; color: #00e5ff; }
    .btn-cyber-info:hover { background: #00e5ff; color: #0b132b; box-shadow: 0 0 10px #00e5ff; }

    .btn-cyber-warning { border-color: #ffaa00; color: #ffaa00; }
    .btn-cyber-warning:hover { background: #ffaa00; color: #0b132b; box-shadow: 0 0 10px #ffaa00; }

    .btn-cyber-danger { border-color: #ff4757; color: #ff4757; }
    .btn-cyber-danger:hover { background: #ff4757; color: #fff; box-shadow: 0 0 10px #ff4757; }

    /* 空数据提示 */
    .empty-state {
        padding: 60px 20px;
        text-align: center;
        color: #8d99ae;
        border: 1px dashed rgba(255,255,255,0.2);
        border-radius: 8px;
        background: rgba(0,0,0,0.2);
    }
</style>

<div class="container mt-5">

    <div class="cyber-panel-header">
        <h2><i class="fas fa-cube"></i> 模型军械库 (Model Repository)</h2>
    </div>

    <div class="mb-4">
        <div class="row">
            <div class="col-md-6">
                <a href="{% url 'upload_model' %}" class="btn-cyber btn-cyber-info">
                    <i class="fas fa-cloud-upload-alt me-2"></i> 挂载新节点
                </a>
            </div>
            <div class="col-md-6">
                <div class="input-group">
                    <input type="text" class="tech-input" placeholder="搜索模型名称或描述..." id="model-search">
                    <div class="input-group-append">
                        <button class="btn-cyber btn-cyber-info" onclick="searchModels()">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div>
        {% if models %}
            <div class="table-responsive">
                <table class="cyber-table">
                    <thead>
                        <tr>
                            <th>节点名称 (Name)</th>
                            <th>架构描述 (Description)</th>
                            <th>性能指标 (mAP)</th>
                            <th>版本 (Version)</th>
                            <th>挂载时间 (Timestamp)</th>
                            <th class="text-center">权重流 (File)</th>
                            <th class="text-center">指令覆盖 (Operations)</th>
                        </tr>
                    </thead>
                    <tbody id="model-table-body">
                        {% for model in models %}
                        <tr data-model-id="{{ model.id }}" 
                            data-name="{{ model.name }}"
                            data-description="{{ model.description }}"
                            data-map="{{ model.mAP|default:"" }}"
                            data-version="{{ model.version|default:"1.0" }}"
                            data-uploaded="{{ model.uploaded_at|date:"Y-m-d H:i:s" }}">
                            <td>
                                <div class="model-name"><i class="fas fa-network-wired me-2" style="color: #00e5ff; font-size: 0.9em;"></i>{{ model.name }}</div>
                            </td>
                            <td style="color: #a0aab5; max-width: 300px;">{{ model.description }}</td>
                            <td style="color: #00ff88; font-weight: bold;">{{ model.mAP|default:"N/A" }}</td>
                            <td style="color: #ffaa00;">v{{ model.version|default:"1.0" }}</td>
                            <td class="model-date">{{ model.uploaded_at|date:"Y-m-d H:i:s" }}</td>
                            <td class="text-center">
                                <a href="{{ model.model_file.url }}" class="btn-cyber btn-cyber-info">
                                    <i class="fas fa-download me-1"></i> 下载
                                </a>
                            </td>
                            <td class="text-center">
                                <a href="{% url 'edit_model' model.id %}" class="btn-cyber btn-cyber-warning">
                                    <i class="fas fa-edit me-1"></i> 编辑
                                </a>
                                <a href="{% url 'delete_model' model.id %}" class="btn-cyber btn-cyber-danger"
                                   onclick="return confirm('⚠️ 警告：切断此节点的连接不可逆转。确认删除该模型？')">
                                    <i class="fas fa-trash-alt me-1"></i> 销毁
                                </a>
                                <button class="btn-cyber btn-cyber-info" onclick="viewModelDetails({{ model.id }})")">
                                    <i class="fas fa-eye me-1"></i> 详情
                                </button>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        {% else %}
            <div class="empty-state">
                <i class="fas fa-database fa-3x mb-3" style="color: #4a5568;"></i>
                <h4 style="color: #a0aab5;">⚠️ 未检测到已挂载的神经网络节点</h4>
                <p>系统核心存储阵列目前为空，请上传您的 YOLO 权重文件。</p>
                <a href="{% url 'upload_model' %}" class="btn-cyber btn-cyber-info mt-3">
                    <i class="fas fa-cloud-upload-alt me-2"></i> 立即挂载
                </a>
            </div>
        {% endif %}
    </div>

    <!-- 模型详情模态框 -->
    <div class="modal fade" id="model-detail-modal" tabindex="-1" role="dialog" aria-labelledby="model-detail-modal-label" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" style="background: rgba(11, 19, 43, 0.95); border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 8px;">
                <div class="modal-header" style="border-bottom: 1px solid rgba(0, 229, 255, 0.3);">
                    <h5 class="modal-title" id="model-detail-modal-label" style="color: #00e5ff; font-weight: bold;">模型详细信息</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color: #fff;">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="color: #e0e0e0;">
                    <div id="model-detail-content">
                        <!-- 模型详情将通过 JavaScript 动态填充 -->
                    </div>
                </div>
                <div class="modal-footer" style="border-top: 1px solid rgba(0, 229, 255, 0.3);">
                    <button type="button" class="btn-cyber btn-cyber-info" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <style>
        .tech-input {
            background: rgba(0, 0, 0, 0.3) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            color: #fff !important;
            border-radius: 6px !important;
            padding: 12px 15px !important;
            transition: all 0.3s;
        }
        
        .tech-input:focus {
            border-color: #00e5ff !important;
            box-shadow: 0 0 15px rgba(0, 229, 255, 0.2) !important;
        }
        
        .input-group-append .btn-cyber {
            margin: 0;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
    </style>

    <script>
        function searchModels() {
            const searchTerm = document.getElementById('model-search').value.toLowerCase();
            const rows = document.querySelectorAll('#model-table-body tr');
            
            rows.forEach(row => {
                const name = row.querySelector('.model-name').textContent.toLowerCase();
                const description = row.querySelector('td:nth-child(2)').textContent.toLowerCase();
                
                if (name.includes(searchTerm) || description.includes(searchTerm)) {
                    row.style.display = '';
                } else {
                    row.style.display = 'none';
                }
            });
        }
        
        function viewModelDetails(modelId) {
            // 从模型列表数据中查找对应模型
            const modelRow = document.querySelector(`tr[data-model-id="${modelId}"]`);
            let modelDetails;
            
            if (modelRow) {
                // 从DOM中提取数据
                modelDetails = {
                    name: modelRow.dataset.name || '未知模型',
                    mAP: modelRow.dataset.map || '0.98',
                    version: modelRow.dataset.version || '1.0',
                    uploaded_at: modelRow.dataset.uploaded || new Date().toLocaleString(),
                    file_size: modelRow.dataset.size || '未知',
                    description: modelRow.dataset.description || '无描述'
                };
            } else {
                modelDetails = {
                    name: '模型 #' + modelId,
                    description: '模型详情加载失败',
                    mAP: '--',
                    version: '--',
                    uploaded_at: '--',
                    file_size: '--'
                };
            }
            
            const content = `
                <div class="row">
                    <div class="col-md-6">
                        <h6 style="color: #00e5ff; margin-bottom: 15px;">基本信息</h6>
                        <div class="mb-2"><strong>模型名称:</strong> ${modelDetails.name}</div>
                        <div class="mb-2"><strong>版本:</strong> v${modelDetails.version}</div>
                        <div class="mb-2"><strong>上传时间:</strong> ${modelDetails.uploaded_at}</div>
                    </div>
                    <div class="col-md-6">
                        <h6 style="color: #00e5ff; margin-bottom: 15px;">性能指标</h6>
                        <div class="mb-2"><strong>mAP:</strong> <span style="color: #00ff88;">${modelDetails.mAP || 'N/A'}</span></div>
                    </div>
                </div>
                <div class="mt-4">
                    <h6 style="color: #00e5ff; margin-bottom: 15px;">详细描述</h6>
                    <p>${modelDetails.description || '无描述'}</p>
                </div>
            `;
            
            document.getElementById('model-detail-content').innerHTML = content;
            $('#model-detail-modal').modal('show');
        }
        
        // 回车键触发搜索
        document.getElementById('model-search').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchModels();
            }
        });
    </script>

</div>
{% endblock %}