{% extends "layout.html" %}

{% block content %}
<div class="row">
    <!-- 左侧面板：检测结果 -->
    <div class="col-md-8">
        <div class="card shadow-sm">
            <div class="card-header bg-dark text-white">
                <h5 class="card-title mb-0"><i class="bi bi-list-check"></i> 检测结果列表</h5>
            </div>
            <div class="card-body">
                {% if reports %}
                <div class="table-responsive">
                    <table class="table table-striped table-hover table-bordered">
                        <thead class="table-dark">
                            <tr>
                                <th><i class="bi bi-calendar"></i> 日期时间</th>
                                <th><i class="bi bi-film"></i> 视频数</th>
                                <th class="text-center"><i class="bi bi-eye"></i> 操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for report in reports %}
                            <tr>
                                <td>{{ report.timestamp }}</td>
                                <td class="text-center">{{ report.video_count }}</td>
                                <td class="text-center">
                                    <div class="d-flex justify-content-center gap-2">
                                        <a href="{{ url_for('view_report', report_filename=report.id) }}" class="btn btn-sm btn-primary">
                                            <i class="bi bi-file-text"></i> 查看报告
                                        </a>
                                        <form action="{{ url_for('delete_report', report_filename=report.id) }}" method="post" class="d-inline">
                                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('确定要删除此报告吗？')">
                                                <i class="bi bi-trash"></i> 删除
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
                {% else %}
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i> 暂无检测结果。请上传视频并开始检测。
                </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- 右侧面板：文件处理和配置 -->
    <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-dark text-white">
                <h5 class="card-title mb-0"><i class="bi bi-box"></i> 模型管理</h5>
            </div>
            <div class="card-body">
                <form action="{{ url_for('upload_model') }}" method="post" enctype="multipart/form-data">
                    <div class="upload-area mb-3" onclick="document.getElementById('model_file').click();">
                        <div class="upload-icon">
                            <i class="bi bi-cloud-arrow-up"></i>
                        </div>
                        <p>点击上传新模型 (.pt 文件)</p>
                        <input type="file" class="form-control d-none" id="model_file" name="model_file" accept=".pt">
                    </div>
                    <button type="submit" class="btn btn-primary w-100 py-2">
                        <i class="bi bi-upload"></i> 上传模型
                    </button>
                </form>
                
                <hr>
                
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <h6><i class="bi bi-list-check"></i> 可用模型:</h6>
                </div>
                <ul class="list-group mt-2">
                    {% if models %}
                        {% for model in models %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <i class="bi bi-file-earmark-binary me-2"></i> {{ model }}
                            </div>
                            <form action="{{ url_for('delete_model', filename=model) }}" method="post" class="d-inline">
                                <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('确定要删除此模型吗？')">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </li>
                        {% endfor %}
                    {% else %}
                        <li class="list-group-item text-center text-muted">
                            <i class="bi bi-exclamation-circle"></i> 暂无可用模型
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>

        <div class="card mb-4 shadow-sm">
            <div class="card-header bg-dark text-white">
                <h5 class="card-title mb-0"><i class="bi bi-camera-video"></i> 视频文件管理</h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle me-2"></i> <strong>请直接将视频文件放入以下文件夹：</strong>
                    <div class="mt-2 p-2 bg-light rounded">
                        <code>{{ config.INPUT_FOLDER }}</code>
                    </div>
                    <p class="small mt-2 mb-0">支持格式: mp4, avi, mov, mkv, wmv, flv, webm</p>
                </div>
                
                <div class="d-flex justify-content-between align-items-center mt-3">
                    <h6><i class="bi bi-list-check"></i> 当前视频文件:</h6>
                    <form action="{{ url_for('clear_input_folder') }}" method="post">
                        <button type="submit" class="btn btn-outline-danger btn-sm">
                            <i class="bi bi-trash"></i> 清空
                        </button>
                    </form>
                </div>
                
                <ul class="list-group mt-2">
                    {% if videos %}
                        {% for video in videos %}
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <i class="bi bi-film me-2"></i> {{ video }}
                            </div>
                            <form action="{{ url_for('delete_video', filename=video) }}" method="post" class="d-inline">
                                <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('确定要删除此视频吗？')">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </li>
                        {% endfor %}
                    {% else %}
                        <li class="list-group-item text-center text-muted">
                            <i class="bi bi-exclamation-circle"></i> 暂无视频文件
                        </li>
                    {% endif %}
                </ul>
            </div>
        </div>

        <div class="card shadow-sm">
            <div class="card-header bg-dark text-white">
                <h5 class="card-title mb-0"><i class="bi bi-play-circle"></i> 开始检测</h5>
            </div>
            <div class="card-body">
                <form action="{{ url_for('start_detection') }}" method="post" id="detection-form">
                    <div class="mb-3">
                        <label for="model_select" class="form-label"><i class="bi bi-box-seam"></i> 选择模型</label>
                        <select class="form-select" id="model_select" name="model_select" required>
                            <option value="" selected disabled>-- 请选择模型 --</option>
                            {% for model in models %}
                            {% if model is string %}
                            <option value="{{ model }}">{{ model }}</option>
                            {% else %}
                            <option value="{{ model.filename }}" 
                                    data-analyzed="{{ model.analyzed }}" 
                                    data-class-count="{{ model.class_count }}" 
                                    data-scene-types="{{ model.scene_types|join(', ') if model.scene_types else '' }}">
                                {{ model.filename }}
                                {% if model.analyzed and model.class_count and model.class_count > 0 %}
                                - {{ model.class_count }}种场景: {{ model.scene_types|join(', ') if model.scene_types else '未知' }}
                                {% endif %}
                            </option>
                            {% endif %}
                            {% endfor %}
                        </select>
                        <div id="model-info" class="mt-2" style="display: none;">
                            <small class="text-muted">
                                <i class="bi bi-info-circle"></i> 
                                <span id="model-details"></span>
                            </small>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="confidence_threshold" class="form-label">
                            <i class="bi bi-sliders"></i> 置信度阈值: <span class="confidence-value" id="confidence_value">{{ confidence_threshold }}</span>
                        </label>
                        <input type="range" class="form-range" id="confidence_threshold" name="confidence_threshold" 
                               min="0.1" max="0.9" step="0.05" value="{{ confidence_threshold }}">
                        <div class="d-flex justify-content-between">
                            <small>0.1 (低精度)</small>
                            <small>0.9 (高精度)</small>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-success w-100 py-2" id="start-detection-btn" {% if detection_in_progress %}disabled="disabled"{% endif %}>
                        <i class="bi bi-play-fill"></i> 开始检测
                    </button>
                </form>
                
                {% if detection_in_progress %}
                <div class="mt-3" id="detection-progress-container">
                    <h6 class="text-center">检测进行中...</h6>
                    <div class="progress mb-2">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" 
                             role="progressbar" data-progress="{{ detection_progress }}"
                             aria-valuenow="{{ detection_progress }}" aria-valuemin="0" aria-valuemax="100">
                            {{ detection_progress }}%
                        </div>
                    </div>
                    <div class="text-center">
                        <p class="mb-1" id="detection-status">{{ detection_status }}</p>
                        <small class="text-muted" id="video-info"></small>
                        <br>
                        <small class="text-muted" id="frame-info"></small>
                    </div>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // 初始化进度条宽度
    document.addEventListener('DOMContentLoaded', function() {
        const progressBar = document.querySelector('.progress-bar');
        if (progressBar) {
            const progress = progressBar.getAttribute('data-progress');
            if (progress) {
                progressBar.style.width = progress + '%';
            }
        }
    });
    
    // 更新置信度显示值
    const confidenceSlider = document.getElementById('confidence_threshold');
    const confidenceValue = document.getElementById('confidence_value');
    
    confidenceSlider.addEventListener('input', function() {
        confidenceValue.textContent = this.value;
    });
    
    // 模型选择变化事件
    const modelSelect = document.getElementById('model_select');
    const modelInfo = document.getElementById('model-info');
    const modelDetails = document.getElementById('model-details');
    
    modelSelect.addEventListener('change', function() {
        const selectedOption = this.options[this.selectedIndex];
        const analyzed = selectedOption.getAttribute('data-analyzed') === 'True';
        const classCount = selectedOption.getAttribute('data-class-count');
        const sceneTypes = selectedOption.getAttribute('data-scene-types');
        
        if (analyzed && classCount > 0) {
            modelDetails.textContent = `此模型可检测 ${classCount} 种场景类型: ${sceneTypes}`;
            modelInfo.style.display = 'block';
        } else if (this.value) {
            modelDetails.textContent = '模型信息未分析，将在首次使用时进行分析';
            modelInfo.style.display = 'block';
        } else {
            modelInfo.style.display = 'none';
        }
    });
    
    // 视频文件管理相关脚本已移除
    
    document.getElementById('model_file').addEventListener('change', function() {
        if (this.files.length > 0) {
            const fileName = this.files[0].name;
            this.closest('.upload-area').querySelector('p').innerHTML = `已选择: ${fileName}`;
        }
    });
</script>

{% if detection_in_progress %}
<script>
    // 检测进度更新
    function updateProgress() {
        fetch('{{ url_for("get_detection_progress") }}')
            .then(response => response.json())
            .then(data => {
                const progressBar = document.querySelector('.progress-bar');
                progressBar.style.width = data.progress + '%';
                progressBar.setAttribute('aria-valuenow', data.progress);
                progressBar.textContent = data.progress + '%';
                
                // 更新状态文本，添加检测时长信息
                let statusText = data.status;
                if (data.elapsed_time) {
                    statusText += ` (已用时间: ${data.elapsed_time})`;
                }
                document.getElementById('detection-status').textContent = statusText;
                
                // 更新视频信息
                const videoInfo = document.getElementById('video-info');
                if (data.current_video && data.total_videos > 0) {
                    videoInfo.textContent = `当前视频: ${data.current_video} (${data.current_video_index}/${data.total_videos})`;
                } else {
                    videoInfo.textContent = '';
                }
                
                // 更新帧信息
                const frameInfo = document.getElementById('frame-info');
                if (data.current_frame_count > 0) {
                    frameInfo.textContent = `已处理帧数: ${data.current_frame_count}`;
                } else {
                    frameInfo.textContent = '';
                }
                
                if (data.in_progress) {
                    setTimeout(updateProgress, 1000);
                } else {
                    // 检测完成，刷新页面
                    setTimeout(() => {
                        window.location.reload();
                    }, 2000);
                }
            })
            .catch(error => {
                console.error('获取进度信息失败:', error);
                // 如果获取进度失败，继续尝试
                setTimeout(updateProgress, 2000);
            });
    }
    
    // 开始轮询进度
    updateProgress();
</script>
{% endif %}
{% endblock %}