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

{% block title %}政策/情绪/热点工作台 - AgomTradePro{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/policy-workbench.css' %}?v=20260301-modalfix1">
{% endblock %}

{% block content %}
<div class="workbench-container">
    <div class="page-header" style="margin-bottom: 24px;">
        <h1>政策/情绪/热点工作台</h1>
        <p>政策/情绪/热点一体化</p>
    </div>

    <!-- 概览卡片 -->
    <div class="overview-cards">
        <div class="overview-card policy">
            <div class="overview-card-title">政策档位</div>
            <div class="overview-card-value" id="policy-level">
                <span id="policy-level-value">-</span>
                <span class="level" id="policy-level-event"></span>
            </div>
            <div class="overview-card-meta">按全部已生效事件计算</div>
        </div>

        <div class="overview-card heat">
            <div class="overview-card-title">全局热度</div>
            <div class="overview-card-value" id="global-heat">
                <span id="heat-value">-</span>
                <span class="level" id="gate-level">(L0)</span>
            </div>
            <div class="overview-card-meta" id="sentiment-value">情绪: -</div>
        </div>

        <div class="overview-card pending">
            <div class="overview-card-title">待审核</div>
            <div class="overview-card-value" id="pending-count">0</div>
            <div class="overview-card-meta">等待人工处理</div>
        </div>

        <div class="overview-card sla">
            <div class="overview-card-title">SLA 超时</div>
            <div class="overview-card-value" id="sla-count">0</div>
            <div class="overview-card-meta" id="sla-note">P2/P3 超 2h 标红</div>
        </div>
    </div>

    <!-- Tab 导航 -->
    <div class="tab-nav">
        <button class="tab-btn" data-tab="pending">待审核队列</button>
        <button class="tab-btn" data-tab="effective">已生效事件流</button>
        <button class="tab-btn active" data-tab="all">全部事件</button>
    </div>

    <!-- 筛选器 -->
    <div class="filters">
        <div class="filter-group">
            <label>事件类型</label>
            <select id="filter-event-type">
                <option value="">全部</option>
                <option value="policy">政策事件</option>
                <option value="hotspot">热点事件</option>
                <option value="sentiment">情绪事件</option>
                <option value="mixed">混合事件</option>
            </select>
        </div>

        <div class="filter-group">
            <label>档位</label>
            <select id="filter-level">
                <option value="">全部</option>
                <option value="P0">P0 - 常态</option>
                <option value="P1">P1 - 预警</option>
                <option value="P2">P2 - 干预</option>
                <option value="P3">P3 - 危机</option>
            </select>
        </div>

        <div class="filter-group">
            <label>闸门等级</label>
            <select id="filter-gate-level">
                <option value="">全部</option>
                <option value="L0">L0 - 正常</option>
                <option value="L1">L1 - 关注</option>
                <option value="L2">L2 - 警戒</option>
                <option value="L3">L3 - 严控</option>
            </select>
        </div>

        <div class="filter-group">
            <label>起始日期</label>
            <input type="date" id="filter-start-date">
        </div>

        <div class="filter-group">
            <label>结束日期</label>
            <input type="date" id="filter-end-date">
        </div>

        <div class="filter-group">
            <label>搜索</label>
            <input type="text" id="filter-search" placeholder="标题或描述...">
        </div>

        <button class="btn btn-primary" onclick="applyFilters()">筛选</button>
        <button class="btn btn-outline" onclick="resetFilters()">重置</button>
    </div>

    <!-- 批量操作栏 -->
    <div class="batch-actions">
        <input type="checkbox" id="select-all" onchange="toggleSelectAll()">
        <span class="selected-count">已选择 <span id="selected-count">0</span> 项</span>
        <button class="btn btn-success btn-sm" onclick="batchApprove()">批量通过</button>
        <button class="btn btn-danger btn-sm" onclick="batchReject()">批量拒绝</button>
    </div>

    <!-- 事件表格 -->
    <table class="events-table">
        <thead>
            <tr>
                <th class="checkbox"></th>
                <th class="date">日期</th>
                <th class="type">类型</th>
                <th>档位</th>
                <th>闸门</th>
                <th>标题</th>
                <th>AI 置信度</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="events-tbody">
            <tr>
                <td colspan="8" class="wb-loading-cell">
                    <div class="app-loading-state app-loading-state--table">
                        <span class="app-spinner app-spinner--sm" aria-hidden="true"></span>
                        <span class="app-loading-text">加载中...</span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

    <!-- 分页 -->
    <div class="pagination" id="pagination"></div>

    <!-- 快捷操作栏 -->
    <div class="quick-actions">
        <button class="btn btn-primary" onclick="fetchAll()">
            <svg style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 12a9 9 0 11-9-9c2.52 0 4.93 1 6.74 2.74L21 8"></path>
                <path d="M21 3v5h-5"></path>
            </svg>
            立即抓取全部
        </button>
        <select id="fetch-source" style="padding: 8px 12px; border: 1px solid #d1d5db; border-radius: 4px;">
            <option value="">指定源抓取...</option>
        </select>
        <label style="display: inline-flex; align-items: center; gap: 6px; color: #4b5563; font-size: 13px;">
            <input type="checkbox" id="toggle-media-sources">
            显示媒体源
        </label>
        <button class="btn btn-secondary" onclick="fetchSelectedSource()">抓取指定源</button>
        <button class="btn btn-outline" onclick="refreshData()">
            <svg style="width:16px;height:16px;vertical-align:middle;margin-right:4px;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M23 4v6h-6M1 20v-6h6"></path>
                <path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"></path>
            </svg>
            刷新
        </button>
    </div>
</div>

<!-- 审核模态框 -->
<div class="modal-overlay" id="review-modal">
    <div class="wb-modal">
        <div class="wb-modal-header">
            <h3 class="wb-modal-title" id="modal-title">审核事件</h3>
            <button class="wb-modal-close" onclick="closeReviewModal()">&times;</button>
        </div>
        <div class="wb-modal-body" id="modal-body">
            <!-- 动态内容 -->
        </div>
        <div class="wb-modal-footer">
            <button class="btn btn-outline" onclick="closeReviewModal()">取消</button>
            <button class="btn btn-primary" id="modal-confirm">确认</button>
        </div>
    </div>
</div>

{% endblock %}

{% block extra_js %}
<script src="{% static 'js/policy-workbench.js' %}?v=20260301-modalfix1"></script>
{% endblock %}