{% extends 'base.html' %}
{% load static %}

{% block title %}神经网络训练矩阵 | NEURAL MATRIX{% endblock %}

{% block content %}
<style>
    /* =========================================================
       1. 布局与赛博拟态面板 (Cyber Glassmorphism)
       ========================================================= */
    .train-wrapper {
        max-width: 900px; /* 拓宽容器以容纳双列排版 */
        margin: 0 auto;
        padding-top: 30px;
        animation: fadeIn 0.8s ease-out forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .glass-panel {
        background: linear-gradient(135deg, rgba(6, 15, 30, 0.85) 0%, rgba(2, 6, 15, 0.95) 100%);
        border: 1px solid rgba(0, 229, 255, 0.2);
        border-radius: 8px;
        padding: 40px 50px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(0, 229, 255, 0.05);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        position: relative;
    }

    /* 科幻四角定位标 */
    .glass-panel::before, .glass-panel::after { content: ''; position: absolute; width: 30px; height: 30px; border: 2px solid #00e5ff; opacity: 0.7; transition: 0.3s; }
    .glass-panel::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
    .glass-panel::after { bottom: -2px; right: -2px; border-left: none; border-top: none; }
    .glass-panel:hover::before, .glass-panel:hover::after { width: 40px; height: 40px; opacity: 1; box-shadow: 0 0 10px rgba(0,229,255,0.5); }

    /* =========================================================
       2. 标题与终端字体
       ========================================================= */
    .cyber-header {
        text-align: center;
        border-bottom: 1px solid rgba(0, 229, 255, 0.15);
        padding-bottom: 20px;
        margin-bottom: 30px;
        position: relative;
    }
    .cyber-header::after {
        content: ''; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%);
        width: 150px; height: 2px; background: #00e5ff; box-shadow: 0 0 10px #00e5ff;
    }
    .cyber-header h2 {
        color: #fff; font-weight: 900; letter-spacing: 6px; margin: 0; font-size: 2rem;
        text-shadow: 0 0 15px rgba(0, 229, 255, 0.5); text-transform: uppercase;
    }
    .status-text {
        color: #00ff88; font-family: 'Fira Code', monospace; margin-top: 15px; font-size: 0.9rem;
        background: rgba(0, 255, 136, 0.1); display: inline-block; padding: 4px 15px; border-radius: 20px; border: 1px solid rgba(0, 255, 136, 0.3);
    }

    /* =========================================================
       3. Django 表单 Grid 双列重构引擎
       ========================================================= */
    /* 强行将 {{ form.as_p }} 折叠为双列网格 */
    .form-grid-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        column-gap: 30px;
        row-gap: 10px;
    }

    .form-grid-wrapper p {
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* 让输入框底部对齐 */
        position: relative;
    }

    .form-grid-wrapper label {
        color: #8d99ae;
        font-family: 'Nunito', sans-serif;
        font-size: 0.9rem;
        margin-bottom: 8px;
        display: block;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
    }
    .form-grid-wrapper label::before { content: '>> '; color: #00e5ff; font-weight: 900; }

    /* 战术输入框样式 */
    .form-grid-wrapper input[type="text"],
    .form-grid-wrapper input[type="number"],
    .form-grid-wrapper select {
        width: 100%;
        padding: 12px 15px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(0, 229, 255, 0.2) !important;
        border-left: 3px solid #00e5ff !important; /* 左侧高亮能量条 */
        color: #00e5ff !important;
        font-family: 'Fira Code', monospace;
        font-weight: bold;
        font-size: 1rem;
        transition: all 0.3s ease;
    }

    /* 文件上传按钮特调 */
    .form-grid-wrapper input[type="file"] {
        width: 100%; padding: 8px; border-radius: 4px; background: rgba(0, 0, 0, 0.5);
        border: 1px dashed rgba(0, 229, 255, 0.4); color: #00e5ff; font-family: 'Nunito';
    }
    .form-grid-wrapper input[type="file"]::file-selector-button {
        background: rgba(0, 229, 255, 0.1); border: 1px solid #00e5ff; color: #00e5ff;
        padding: 6px 12px; border-radius: 3px; margin-right: 15px; cursor: pointer; transition: 0.3s; font-weight: bold;
    }
    .form-grid-wrapper input[type="file"]::file-selector-button:hover { background: #00e5ff; color: #000; box-shadow: 0 0 10px #00e5ff; }

    .form-grid-wrapper input:focus, .form-grid-wrapper select:focus {
        background: rgba(0, 229, 255, 0.05) !important;
        border-color: #00e5ff !important;
        box-shadow: 0 0 20px rgba(0, 229, 255, 0.2) !important;
        outline: none;
    }

    .form-grid-wrapper select option { background: #050b14; color: #00e5ff; }

    /* 帮助文本或错误提示 */
    .helptext { font-size: 0.75rem; color: #6c7a9c; display: block; margin-top: 6px; font-family: 'Fira Code'; }
    .errorlist { color: #ff4757; list-style: none; padding: 0; font-size: 0.85rem; margin-top: 5px; font-weight: bold; }

    /* =========================================================
       4. 核弹级发光按钮
       ========================================================= */
    .btn-cyber {
        background: linear-gradient(90deg, rgba(0, 229, 255, 0.05), rgba(0, 229, 255, 0.2));
        border: 1px solid #00e5ff; color: #00e5ff; border-radius: 4px;
        padding: 15px 40px; font-size: 1.15rem; font-weight: 900;
        letter-spacing: 4px; transition: all 0.3s; width: 100%; cursor: pointer;
        text-transform: uppercase; margin-top: 20px;
        box-shadow: inset 0 0 10px rgba(0, 229, 255, 0.1);
    }
    .btn-cyber:hover {
        background: #00e5ff; color: #000;
        box-shadow: 0 0 25px rgba(0, 229, 255, 0.6), inset 0 0 10px rgba(255,255,255,0.5);
        transform: translateY(-2px);
    }
    .btn-cyber:disabled { border-color: #555; color: #555; background: rgba(255,255,255,0.05); cursor: not-allowed; box-shadow: none; transform: none; }

    /* =========================================================
       5. 科幻进度条与终端提示框
       ========================================================= */
    .cyber-progress-bg {
        background: rgba(0, 0, 0, 0.8); border: 1px solid rgba(0, 229, 255, 0.3);
        border-radius: 4px; height: 18px; overflow: hidden; position: relative; margin-top: 30px;
        box-shadow: inset 0 0 15px rgba(0,0,0,1);
    }
    .cyber-progress-bar {
        background: linear-gradient(90deg, #0088ff, #00e5ff); height: 100%; width: 0%;
        box-shadow: 0 0 15px #00e5ff; transition: width 0.5s ease; position: relative;
    }
    /* 进度条高能扫光动画 */
    .cyber-progress-bar::after {
        content: ""; position: absolute; top: 0; left: 0; bottom: 0; right: 0;
        background: linear-gradient(45deg, rgba(255,255,255,0.3) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0.3) 75%, transparent 75%, transparent);
        background-size: 20px 20px; animation: progress-stripes 1s linear infinite;
    }
    @keyframes progress-stripes { from {background-position: 20px 0;} to {background-position: 0 0;} }

    .cyber-progress-text {
        color: #00e5ff; font-family: 'Fira Code', monospace; font-size: 1rem; font-weight: bold;
        margin-top: 12px; text-align: center; text-shadow: 0 0 8px #00e5ff; letter-spacing: 1px;
    }

    /* 终端输出框 */
    .cyber-alert {
        padding: 15px 20px; border-radius: 4px; font-family: 'Fira Code', monospace;
        margin-top: 25px; font-size: 0.95rem; display: none; font-weight: bold;
    }
    .cyber-alert-success { background: rgba(0, 255, 136, 0.1); border: 1px solid #00ff88; color: #00ff88; text-shadow: 0 0 5px rgba(0,255,136,0.5); border-left: 4px solid #00ff88;}
    .cyber-alert-danger { background: rgba(255, 71, 87, 0.1); border: 1px solid #ff4757; color: #ff4757; text-shadow: 0 0 5px rgba(255,71,87,0.5); border-left: 4px solid #ff4757;}
</style>

<div class="train-wrapper">
    <div class="glass-panel">

        <div class="cyber-header">
            <h2><i class="fas fa-network-wired"></i> 神经网络训练矩阵</h2>
            <div class="status-text">
                <i class="fas fa-satellite-dish" style="animation: blinker 1.5s infinite;"></i> [SYSTEM ONLINE] 算力集群就绪，请配置超参数并挂载数据集。
            </div>
        </div>

        <form id="training-form" method="post" enctype="multipart/form-data">
            {% csrf_token %}

            <div class="form-grid-wrapper">
                {{ form.as_p }}
            </div>

            <div class="text-center mt-3">
                <button type="submit" class="btn-cyber" id="submit-btn">
                    <i class="fas fa-bolt me-2"></i> 注入算力并启动训练
                </button>
            </div>
        </form>

        <div id="progress-container" style="display: none;">
            <div class="cyber-progress-bg">
                <div id="progress-bar" class="cyber-progress-bar"></div>
            </div>
            <p class="cyber-progress-text" id="progress-text">> 正在分配 GPU 显存并初始化 Epoch... 0%</p>
        </div>

        <div id="result-message" class="cyber-alert"></div>

    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        // 表单提交事件
        $('#training-form').on('submit', function(e) {
            e.preventDefault();

            var formData = new FormData(this);
            var submitBtn = $('#submit-btn');

            // UI 状态更新
            submitBtn.prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-2"></i> 模型编译与数据挂载中...');
            $('#progress-container').fadeIn();
            $('#result-message').hide().removeClass('cyber-alert-success cyber-alert-danger');

            // 发起 AJAX 请求
            $.ajax({
                url: "{% url 'train:train_model' %}",
                type: "POST",
                data: formData,
                processData: false,
                contentType: false,
                success: function(response) {
                    if (response.status === 'success') {
                        submitBtn.html('<i class="fas fa-cog fa-spin me-2"></i> 神经网络反向传播中...');
                        var configId = response.config_id;
                        pollProgress(configId);
                    } else {
                        // 训练启动失败
                        submitBtn.prop('disabled', false).html('<i class="fas fa-bolt me-2"></i> 重新启动训练');
                        $('#progress-container').hide();
                        $('#result-message').addClass('cyber-alert-danger').html(`> [ERROR] 拦截信号: ${response.message}`).fadeIn();
                    }
                },
                error: function(xhr, status, error) {
                    submitBtn.prop('disabled', false).html('<i class="fas fa-bolt me-2"></i> 重新启动训练');
                    $('#progress-container').hide();
                    $('#result-message').addClass('cyber-alert-danger').html('> [FATAL] 核心失联，无法通讯，请稍后重试。').fadeIn();
                }
            });
        });

        // 轮询进度核心代码
        function pollProgress(configId) {
            var pollInterval = 1000;
            var progressCheck = setInterval(function() {
                $.ajax({
                    url: "{% url 'train:get_train_progress' config_id=0 %}".replace("0", configId),
                    type: "GET",
                    success: function(progressResponse) {
                        var progress = progressResponse.progress;
                        if (progress >= 0) {
                            $('#progress-bar').css('width', progress + '%');
                            $('#progress-text').text(`> 权重迭代中... [ ${progress}% ]`);
                        }

                        if (progress >= 100 || progress < 0) {
                            clearInterval(progressCheck);
                            var submitBtn = $('#submit-btn');
                            submitBtn.prop('disabled', false).html('<i class="fas fa-bolt me-2"></i> 开启新的训练任务');

                            if (progress >= 100) {
                                // 训练完成
                                $('#progress-bar').css('width', '100%');
                                $('#progress-text').text('> [SYS_OK] 训练迭代完成！');
                                $('#result-message').addClass('cyber-alert-success').html('> [系统通知] 神经网络权重训练序列已完成，已保存至节点集群！').fadeIn();
                            } else {
                                // 训练报错中断
                                $('#result-message').addClass('cyber-alert-danger').html('> [ERROR] 梯度爆炸或进程崩溃，训练失败，请检查底层日志。').fadeIn();
                            }
                        }
                    },
                    error: function() {
                        clearInterval(progressCheck);
                        $('#submit-btn').prop('disabled', false).html('<i class="fas fa-bolt me-2"></i> 重新启动训练');
                        $('#result-message').addClass('cyber-alert-danger').html('> [WARN] 获取进度数据包丢失。').fadeIn();
                    }
                });
            }, pollInterval);
        }
    });
</script>
{% endblock %}