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

{% block title %}系统反馈终端 | COMMS LINK{% endblock %}

{% block content %}
<style>
    /* =========================================================
       1. 专属赛博布局 (接管全屏)
       ========================================================= */
    .feedback-wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        padding: 20px 30px;
        box-sizing: border-box;
        animation: fadeIn 0.6s ease-out forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: scale(0.98); }
        to { opacity: 1; transform: scale(1); }
    }

    /* 顶部标题栏 */
    .feedback-header {
        display: flex; justify-content: space-between; align-items: flex-end;
        border-bottom: 1px solid rgba(0, 229, 255, 0.2);
        padding-bottom: 15px; margin-bottom: 25px; flex-shrink: 0; position: relative;
    }
    .feedback-header::after {
        content: ''; position: absolute; bottom: -1px; left: 0; width: 250px; height: 2px;
        background: linear-gradient(90deg, #00e5ff, transparent); box-shadow: 0 0 10px #00e5ff;
    }
    .feedback-header h2 {
        margin: 0; color: #fff; font-weight: 900; letter-spacing: 4px; font-size: 2rem;
        text-shadow: 0 0 15px rgba(0, 229, 255, 0.5); text-transform: uppercase;
    }
    .feedback-header h2 i { color: #00e5ff; margin-right: 15px; }

    /* =========================================================
       2. 核心双列网格 (撑满屏幕)
       ========================================================= */
    .feedback-grid {
        display: grid;
        grid-template-columns: 400px 1fr; /* 左侧固定 400px，右侧自动填满 */
        gap: 30px;
        flex: 1;
        min-height: 0; /* 极其关键：防止溢出 */
    }

    /* 统一的玻璃面板基座 */
    .glass-box {
        background: linear-gradient(145deg, rgba(6, 15, 28, 0.8) 0%, rgba(2, 6, 13, 0.95) 100%);
        border: 1px solid rgba(0, 229, 255, 0.15);
        border-radius: 8px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.6), inset 0 0 20px rgba(0, 229, 255, 0.05);
        backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
        display: flex; flex-direction: column; overflow: hidden; position: relative;
    }

    .box-title {
        padding: 20px 25px; font-size: 1.1rem; font-weight: 900; letter-spacing: 2px; color: #00e5ff;
        background: rgba(0, 0, 0, 0.4); border-bottom: 1px dashed rgba(0, 229, 255, 0.2);
        display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    }

    /* =========================================================
       3. 左侧：加密通讯表单
       ========================================================= */
    .form-content { padding: 25px; display: flex; flex-direction: column; flex: 1; }

    .form-label { color: #8d99ae; font-family: 'Fira Code', monospace; font-size: 0.95rem; margin-bottom: 10px; font-weight: bold; letter-spacing: 1px; }
    .form-label::before { content: '> '; color: #00e5ff; }

    .tech-textarea {
        background: rgba(0, 0, 0, 0.6) !important;
        border: 1px solid rgba(0, 229, 255, 0.3) !important;
        border-left: 3px solid #00e5ff !important;
        color: #00ff88 !important; /* 绿色代码字体 */
        font-family: 'Fira Code', monospace;
        border-radius: 4px !important;
        padding: 20px !important;
        flex: 1; /* 自动撑满高度 */
        resize: none; /* 禁止手动拖拽，由 Flex 接管 */
        transition: all 0.3s;
        line-height: 1.6;
    }
    .tech-textarea: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;
    }

    .btn-send {
        background: linear-gradient(90deg, rgba(0, 229, 255, 0.1), rgba(0, 229, 255, 0.2));
        border: 1px solid #00e5ff; color: #00e5ff; border-radius: 4px;
        padding: 15px; font-size: 1.1rem; font-weight: 900; letter-spacing: 4px;
        transition: all 0.3s; width: 100%; text-transform: uppercase; margin-top: 25px; cursor: pointer;
    }
    .btn-send:hover { background: #00e5ff; color: #000; box-shadow: 0 0 20px rgba(0, 229, 255, 0.6); transform: translateY(-2px); }

    /* =========================================================
       4. 右侧：历史通讯日志 (Log Stream)
       ========================================================= */
    .log-stream {
        padding: 25px; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 15px;
    }

    .log-item {
        background: rgba(0, 0, 0, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-left: 4px solid #3a506b;
        padding: 20px; border-radius: 6px; transition: all 0.3s;
        display: flex; justify-content: space-between; align-items: flex-start;
        position: relative; overflow: hidden;
    }
    .log-item::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.02)); pointer-events: none; }
    .log-item:hover { border-color: rgba(0, 229, 255, 0.3); transform: translateX(5px); box-shadow: 0 5px 15px rgba(0,0,0,0.5); }

    .log-item.processed { border-left-color: #00ff88; }
    .log-item.unprocessed { border-left-color: #ffaa00; }

    .log-content-box { flex: 1; padding-right: 20px; }
    .log-text { color: #e0e0e0; font-size: 1rem; line-height: 1.6; margin-bottom: 12px; font-family: 'Nunito', sans-serif; }

    .log-meta { display: flex; gap: 20px; font-size: 0.85rem; color: #6c7a9c; font-family: 'Fira Code', monospace; }
    .log-meta span { display: flex; align-items: center; gap: 6px; }

    .status-badge {
        padding: 4px 10px; border-radius: 3px; font-size: 0.75rem; font-weight: 900; letter-spacing: 1px; border: 1px solid;
    }
    .badge-processed { border-color: #00ff88; color: #00ff88; background: rgba(0, 255, 136, 0.1); box-shadow: 0 0 10px rgba(0,255,136,0.2); }
    .badge-unprocessed { border-color: #ffaa00; color: #ffaa00; background: rgba(255, 170, 0, 0.1); box-shadow: 0 0 10px rgba(255,170,0,0.2); }

    .btn-delete {
        background: rgba(255, 71, 87, 0.05); border: 1px solid rgba(255, 71, 87, 0.5); color: #ff4757;
        padding: 8px 15px; border-radius: 4px; font-size: 0.85rem; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 6px;
    }
    .btn-delete:hover { background: #ff4757; color: #fff; box-shadow: 0 0 15px rgba(255,71,87,0.5); }

    .empty-log {
        display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: #4a5568; text-align: center;
    }
    .empty-log i { font-size: 4rem; margin-bottom: 15px; opacity: 0.5; }

    /* =========================================================
       5. 模态框 (Modal) 科幻重写
       ========================================================= */
    .modal-content {
        background: rgba(6, 15, 28, 0.95); border: 1px solid #ff4757; box-shadow: 0 0 40px rgba(255, 71, 87, 0.3); color: #fff; backdrop-filter: blur(15px); border-radius: 8px;
    }
    .modal-header { border-bottom: 1px dashed rgba(255, 71, 87, 0.3); padding: 20px 25px;}
    .modal-title { color: #ff4757; font-weight: 900; letter-spacing: 2px; text-shadow: 0 0 10px #ff4757; }
    .modal-footer { border-top: 1px dashed rgba(255, 71, 87, 0.3); padding: 15px 25px;}
    .close { color: #fff; text-shadow: none; opacity: 0.5; transition: 0.3s;}
    .close:hover { color: #ff4757; opacity: 1; }
    .cyber-alert { background: rgba(255, 71, 87, 0.1); border: 1px solid #ff4757; border-left: 4px solid #ff4757; color: #ff4757; padding: 15px; border-radius: 4px; font-family: 'Fira Code', monospace; margin-bottom: 15px; font-weight: bold;}
</style>

<div class="feedback-wrapper">

    <div class="feedback-header">
        <h2><i class="fas fa-satellite-dish"></i> 系统反馈终端</h2>
    </div>

    <div class="feedback-grid">

        <div class="glass-box">
            <div class="box-title"><i class="fas fa-link"></i> 建立加密通讯链路</div>

            <form method="post" action="{% url 'feedback_view' %}" style="display: flex; flex-direction: column; flex: 1;">
                {% csrf_token %}
                <div class="form-content">
                    <label for="id_message" class="form-label">报告内容 (SYS_MSG)</label>
                    <textarea name="message" id="id_message" class="tech-textarea" placeholder="> 输入系统异常、模型建议或运行故障详情...&#10;> 等待终端输入_"></textarea>

                    {% if form.errors %}
                        <div class="cyber-alert" style="margin-top: 15px;">
                            <i class="fas fa-exclamation-triangle me-2"></i> [ERROR] 链路建立失败，请检查输入格式。
                        </div>
                    {% endif %}

                    <button type="submit" class="btn-send">
                        <i class="fas fa-paper-plane"></i> 发送数据包
                    </button>
                </div>
            </form>
        </div>

        <div class="glass-box">
            <div class="box-title"><i class="fas fa-list-alt"></i> 历史通讯日志 (COMMS LOG)</div>

            <div class="log-stream" id="feedback-list">
                {% for feedback in user_feedbacks %}
                    <div class="log-item {{ feedback.is_processed|yesno:'processed,unprocessed' }}" id="feedback-{{ feedback.id }}">
                        <div class="log-content-box">
                            <div class="log-text">{{ feedback.message }}</div>
                            <div class="log-meta">
                                <span><i class="fas fa-clock"></i> <span class="time-text">{{ feedback.created_at|date:"Y-m-d H:i" }}</span></span>
                                <span><i class="fas fa-microchip"></i>
                                    <span class="status-badge {{ feedback.is_processed|yesno:'badge-processed,badge-unprocessed' }}">
                                        {{ feedback.is_processed|yesno:"已阅 [OK],待办 [WAIT]" }}
                                    </span>
                                </span>
                            </div>
                        </div>
                        <button class="btn-delete delete-feedback" data-feedback-id="{{ feedback.id }}">
                            <i class="fas fa-trash-alt"></i> 擦除
                        </button>
                    </div>
                {% empty %}
                    <div class="empty-log">
                        <i class="fas fa-inbox"></i>
                        <p style="font-family: 'Fira Code', monospace; letter-spacing: 1px;">[SYS] 当前终端无历史通讯记录。</p>
                    </div>
                {% endfor %}
            </div>
        </div>

    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel"><i class="fas fa-exclamation-triangle me-2"></i> 危险操作：确认擦除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="font-family: 'Fira Code', monospace; color: #e0e0e0; padding: 25px;">
                <p style="color: #ff4757; font-weight: bold; font-size: 1.1rem; margin-bottom: 20px;">> 警告：您正在请求永久擦除底层通讯数据，此操作不可逆转。</p>
                <div style="background: rgba(0,0,0,0.5); padding: 20px; border: 1px solid rgba(255,255,255,0.1); border-radius: 4px;">
                    <p class="mb-3"><strong style="color:#00e5ff;">内容:</strong> <span id="feedback-content" style="color:#00ff88; line-height: 1.5; display: block; margin-top: 8px;"></span></p>
                    <p class="mb-0"><strong style="color:#00e5ff;">时间:</strong> <span id="feedback-time"></span></p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn" data-dismiss="modal" style="background: transparent; border: 1px solid #8d99ae; color: #8d99ae; font-weight: bold;">中止操作</button>
                <button type="button" class="btn" id="confirm-delete" style="background: #ff4757; color: #fff; font-weight: bold; letter-spacing: 1px; border: none; padding: 8px 25px; box-shadow: 0 0 15px rgba(255,71,87,0.4);">确认擦除</button>
            </div>
        </div>
    </div>
</div>

{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function () {
        // 🌟 修复弹窗层级 BUG 的魔法指令：将弹窗强行移动到 body 最外层，摆脱毛玻璃容器的束缚 🌟
        $('#deleteModal').appendTo("body");

        var feedbackIdToDelete = null;

        // 点击删除按钮时显示模态框
        $('.delete-feedback').on('click', function () {
            feedbackIdToDelete = $(this).data('feedback-id');
            // 获取对应的反馈内容和时间
            var feedbackContent = $(this).closest('.log-item').find('.log-text').text();
            var feedbackTime = $(this).closest('.log-item').find('.time-text').text();

            // 设置模态框内容
            $('#feedback-content').text(feedbackContent);
            $('#feedback-time').text(feedbackTime);

            // 显示模态框
            $('#deleteModal').modal('show');
        });

        // 点击确认删除按钮时发送 AJAX 请求
        $('#confirm-delete').on('click', function () {
            if (feedbackIdToDelete) {
                // 优化替换逻辑：加上斜杠 /0/ 替换，防止 URL 里有其他 0 导致替换错误
                var deleteUrl = '{% url "delete_user_feedback" feedback_id=0 %}'.replace('/0/', '/' + feedbackIdToDelete + '/');

                $.ajax({
                    url: deleteUrl,
                    method: 'POST',
                    data: {
                        csrfmiddlewaretoken: '{{ csrf_token }}'
                    },
                    success: function (response) {
                        if (response.success) {
                            // 加上一个滑动淡出动画再删除，更具科技感
                            $('#feedback-' + response.feedback_id).slideUp(400, function() {
                                $(this).remove();
                            });
                        } else {
                            alert('⚠️ [ERR] 擦除失败: ' + response.message);
                        }
                    },
                    error: function () {
                        alert('⚠️ [ERR] 网络中断，擦除信号未送达。');
                    }
                });

                // 关闭模态框
                $('#deleteModal').modal('hide');
            }
        });
    });
</script>
{% endblock %}