<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IVBench视频标注工具</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .container {
            max-width: 95%; /* 增加页面宽度 */
        }
        table {
            width: 100%; /* 表格宽度占满父容器 */
            table-layout: fixed; /* 固定布局，防止列过窄 */
        }
        th, td {
            word-wrap: break-word; /* 自动换行 */
        }
        th {
            text-align: center;
        }
        video {
            max-width: 100%; /* 视频最大宽度为列宽 */
            height: auto; /* 保持视频比例 */
        }
        .question-preview {
            max-height: 150px;
            overflow-y: auto; /* 添加滚动条 */
        }
    </style>
</head>
<body>
<div class="container mt-5">
    <h1 class="text-center mb-4">IVBench视频标注工具</h1>
    <table class="table table-bordered">
        <thead>
            <tr class="text-center">
                <th style="width: 25%;">视频</th>
                <th style="width: 40%;">问题</th>
                <th style="width: 20%;">备注</th>
                <th style="width: 15%;">视频类型</th>
                <th style="width: 10%;">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for video in videos %}
            <tr>
                <td>
                    <video controls>
                        <source src="/videos/{{ video }}" type="video/mp4">
                        您的浏览器不支持视频播放。
                    </video>
                </td>
                <td>
                    <button class="btn btn-primary btn-sm add-question" data-video="{{ video }}" data-bs-toggle="modal" data-bs-target="#questionModal">添加问题</button>
                    <ul class="list-group mt-2 question-preview" data-video="{{ video }}">
                        <!-- 仅显示问题内容 -->
                    </ul>
                </td>
                <td>
                    <input type="text" class="form-control remark" placeholder="备注">
                </td>
                <td>
                    <select class="form-select video-type">
                        <option value="cartoon">动画</option>
                        <option value="movie">电影</option>
                        <option value="documentary">纪录片</option>
                        <option value="education">教育视频</option>
                        <option value="other">其他</option>
                    </select>
                </td>
                <td>
                    <button class="btn btn-success btn-sm save-btn" data-video="{{ video }}">保存</button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- 问题模态框 -->
<div class="modal fade" id="questionModal" tabindex="-1" aria-hidden="true">
    <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" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="questionForm">
                    <input type="hidden" id="editingIndex" value="-1">
                    <div class="mb-3">
                        <label for="questionInput" class="form-label">问题</label>
                        <input type="text" class="form-control" id="questionInput" placeholder="输入问题">
                    </div>
                    <div class="mb-3">
                        <label>选项</label>
                        <div id="optionsContainer">
                            <div class="input-group mb-2">
                                <input type="text" class="form-control option-input" placeholder="输入选项">
                                <button type="button" class="btn btn-danger remove-option">删除</button>
                            </div>
                        </div>
                        <button type="button" class="btn btn-secondary add-option">添加选项</button>
                    </div>
                    <div class="mb-3">
                        <label for="correctAnswer" class="form-label">正确答案</label>
                        <input type="text" class="form-control" id="correctAnswer" placeholder="输入正确答案">
                    </div>
                    <div class="mb-3">
                        <label for="abilityType" class="form-label">能力类型</label>
                        <input type="text" class="form-control" id="abilityType" placeholder="输入能力类型">
                    </div>
                    <div class="mb-3">
                        <label for="remark" class="form-label">备注</label>
                        <textarea class="form-control" id="remark" rows="3"></textarea>
                    </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 save-question">保存</button>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
    $(document).ready(function () {
        // 添加选项
        $(document).on('click', '.add-option', function () {
            $('#optionsContainer').append(
                <div class="input-group mb-2">
                    <input type="text" class="form-control option-input" placeholder="输入选项">
                    <button type="button" class="btn btn-danger remove-option">删除</button>
                </div>
            );
        });

        // 删除选项
        $(document).on('click', '.remove-option', function () {
            $(this).closest('.input-group').remove();
        });

        // 保存问题
        $('.save-question').click(function () {
            const question = $('#questionInput').val();
            const options = $('.option-input').map((_, el) => $(el).val()).get();
            const correctAnswer = $('#correctAnswer').val();
            const abilityType = $('#abilityType').val();
            const remark = $('#remark').val();
            const editingIndex = parseInt($('#editingIndex').val(), 10);

            if (!question || options.length === 0 || !correctAnswer) {
                alert("请填写完整信息！");
                return;
            }

            const questionData = { question, options, correctAnswer, abilityType, remark };

            const video = $('#questionModal').data('video');
            const questionList = $(.question-preview[data-video="${video}"]);

            if (editingIndex === -1) {
                // 新增问题
                appendQuestionToList(questionList, questionData);
            } else {
                // 编辑问题
                questionList.find(li[data-index="${editingIndex}"]).replaceWith(generateQuestionHtml(editingIndex, questionData));
            }

            $('#questionForm')[0].reset();
            $('#editingIndex').val('-1');
            $('#questionModal').modal('hide');
        });

        // 打开模态框
        $('.add-question').click(function () {
            $('#questionForm')[0].reset();
            $('#editingIndex').val('-1');
            $('#questionModal').data('video', $(this).data('video'));
        });

        // 保存到服务器
        $('.save-btn').click(function () {
            const video = $(this).data('video');
            const remark = $(this).closest('tr').find('.remark').val();
            const videoType = $(this).closest('tr').find('.video-type').val();

            const questions = [];
            $(.question-preview[data-video="${video}"] li).each(function () {
                questions.push($(this).data('question'));
            });

            $.ajax({
                url: '/save',
                type: 'POST',
                contentType: 'application/json',
                data: JSON.stringify({ video, remark, videoType, questions }),
                success: function (response) {
                    alert(response.message);
                },
                error: function () {
                    alert("保存失败！");
                }
            });
        });

        function appendQuestionToList(questionList, questionData) {
            const index = questionList.find('li').length;
            questionList.append(generateQuestionHtml(index, questionData));
        }

        function generateQuestionHtml(index, questionData) {
            return 
                <li class="list-group-item d-flex justify-content-between align-items-start" data-index="${index}" data-question='${JSON.stringify(questionData)}'>
                    <div>
                        <strong>问题:</strong> ${questionData.question}<br>
                    </div>
                    <div>
                        <button class="btn btn-warning btn-sm edit-question">编辑</button>
                        <button class="btn btn-danger btn-sm delete-question">删除</button>
                    </div>
                </li>
            ;
        }

        // 编辑问题
        $(document).on('click', '.edit-question', function () {
            const questionData = $(this).closest('li').data('question');
            const index = $(this).closest('li').data('index');

            $('#questionInput').val(questionData.question);
            $('#correctAnswer').val(questionData.correctAnswer);
            $('#abilityType').val(questionData.abilityType);
            $('#remark').val(questionData.remark);
            $('#optionsContainer').empty();
            questionData.options.forEach(option => {
                $('#optionsContainer').append(
                    <div class="input-group mb-2">
                        <input type="text" class="form-control option-input" value="${option}">
                        <button type="button" class="btn btn-danger remove-option">删除</button>
                    </div>
                );
            });
            $('#editingIndex').val(index);
            $('#questionModal').modal('show');
        });

        // 删除问题
        $(document).on('click', '.delete-question', function () {
            $(this).closest('li').remove();
        });
    });
</script>
</body>
</html>