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

{% block title %}{{ T.page_stream|default:'视频管理' }} - {{ settings.name|default:"Monitor" }}{% endblock %}
{% block nav_stream %}active{% endblock %}
{% block page_title %}{{ T.page_stream|default:'视频管理' }}{% endblock %}

{% block extra_head %}
<style>
/* 分组卡片 */
.sg-wrap { display: flex; flex-direction: column; gap: 10px; }
.sg-group {
    background: #fff;
    border: 1px solid var(--c-border-light, #eef2f5);
    border-radius: 8px;
    overflow: hidden;
}
.sg-head {
    display: flex;
    align-items: center;
    padding: 4px 16px;
    background: #fff;
    border-bottom: 1px solid var(--c-border-light, #eef2f5);
    gap: 10px;
}
.sg-device {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.sg-device::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 14px;
    background: #169F85;
    border-radius: 2px;
}
.sg-count {
    background: #e6f7f3;
    color: #0e7a65;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    min-width: 22px;
    text-align: center;
}
.sg-toggle {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    flex-shrink: 0;
    padding: 0;
}
.sg-toggle:hover { border-color: #169F85; color: #169F85; background: #f0f9f6; }
.sg-toggle svg { width: 14px; height: 14px; transition: transform .25s; }
.sg-toggle.open svg { transform: rotate(180deg); }
.sg-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.sg-body.open {
    max-height: 2000px;
}
.sg-body .data-table { margin: 0; table-layout: fixed; width: 100%; }
.sg-body .table-wrap { padding: 0; }
.sg-body .data-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* ID */
.sg-body .data-table th:nth-child(1),
.sg-body .data-table td:nth-child(1) { width: 60px; }
/* 编号 */
.sg-body .data-table th:nth-child(2),
.sg-body .data-table td:nth-child(2) { width: 16%; }
/* 接入协议 */
.sg-body .data-table th:nth-child(3),
.sg-body .data-table td:nth-child(3) { width: 10%; }
/* 名称 */
.sg-body .data-table th:nth-child(4),
.sg-body .data-table td:nth-child(4) { width: 12%; }
/* IP */
.sg-body .data-table th:nth-child(5),
.sg-body .data-table td:nth-child(5) { width: 11%; }
/* 状态 */
.sg-body .data-table th:nth-child(6),
.sg-body .data-table td:nth-child(6) { width: 5%; }
/* 更新时间 */
.sg-body .data-table th:nth-child(7),
.sg-body .data-table td:nth-child(7) { width: 13%; }
/* 操作 */
.sg-body .data-table th:nth-child(8),
.sg-body .data-table td:nth-child(8) { width: 148px; }
/* 操作列图标按钮 */
.act-bar { display: flex; gap: 2px; align-items: center; justify-content: center; }
.act-btn {
    width: 30px; height: 30px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
    color: #6b7280;
    padding: 0;
    text-decoration: none;
}
.act-btn:hover { background: #f3f4f6; color: #169F85; }
.act-btn[disabled] { opacity: .35; cursor: not-allowed; pointer-events: none; }
.act-btn.act-danger:hover { background: #fef2f2; color: #b91c1c; }
.act-btn.act-on { color: #169F85; }
.act-btn.act-on:hover { background: #e6f7f3; }
.act-btn.act-rec-on { color: #dc2626; position: relative; }
.act-btn.act-rec-on:hover { background: #fef2f2; }
.act-btn.act-rec-on::after {
    content: ''; position: absolute; top: 4px; right: 4px;
    width: 6px; height: 6px; border-radius: 50%; background: #ef4444;
    box-shadow: 0 0 0 2px #fff; animation: recPulse 1.4s infinite;
}
.act-btn.act-rec-idle { color: #d97706; }
.act-btn.act-rec-idle:hover { background: #fffbeb; }
.act-btn svg { width: 16px; height: 16px; pointer-events: none; }
@keyframes recPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
/* 状态指示点 */
.si { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.si-on { background: #22c55e; box-shadow: 0 0 4px rgba(34,197,94,.4); }
.si-off { background: #d1d5db; }
.sg-empty {
    text-align: center;
    padding: 48px 20px;
    color: #9ca3af;
    font-size: 14px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid var(--c-border-light, #eef2f5);
}
/* 批量操作下拉 */
.batch-dropdown { position: relative; display: inline-block; }
.batch-btn {
    padding: 6px 14px;
    border-radius: 6px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all .15s;
}
.batch-btn:hover { border-color: #169F85; color: #169F85; }
.batch-btn svg { width: 12px; height: 12px; transition: transform .2s; }
.batch-dropdown.open .batch-btn svg { transform: rotate(180deg); }
.batch-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.1);
    min-width: 160px;
    z-index: 100;
    padding: 4px 0;
    display: none;
}
.batch-dropdown.open .batch-menu { display: block; }
.batch-menu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    transition: background .1s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.batch-menu-item:hover { background: #f3f4f6; }
.batch-menu-item.danger { color: #b91c1c; }
.batch-menu-item.danger:hover { background: #fef2f2; }
.batch-menu-item svg { width: 14px; height: 14px; flex-shrink: 0; }
.batch-menu-sep { height: 1px; background: #e5e7eb; margin: 4px 0; }

/* ========== 弹框表单紧凑样式 ========== */
.modal .form-group { margin-bottom: 10px; }
.modal .form-label { font-size: 12px; margin-bottom: 4px; }
.modal .form-input, .modal .form-select { padding: 5px 8px; font-size: 12px; }
.modal .form-textarea { min-height: 48px; padding: 5px 8px; font-size: 12px; }
.modal .form-row { gap: 10px; }
/* 隐藏用户名和密码输入框 */
.modal .form-group.hide-field { display: none; }

/* ========== 美化文件选择框 ========== */
.file-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 4px 4px 10px;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-surface);
    transition: border-color var(--tr);
}
.file-input-wrap:hover { border-color: var(--c-border-strong, #d1d5db); }
.file-input-wrap:focus-within { border-color: var(--c-text); }
.file-input-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.file-input-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: #f3f4f6;
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: var(--r-sm);
    font-size: 12px;
    cursor: pointer;
    user-select: none;
    transition: background var(--tr), border-color var(--tr);
    flex-shrink: 0;
}
.file-input-trigger:hover { background: #e5e7eb; border-color: #d1d5db; }
.file-input-trigger:active { background: #d1d5db; }
.file-input-btn-text { line-height: 1; }
.file-input-name {
    flex: 1;
    font-size: 12px;
    color: var(--c-text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.file-input-name.has-file { color: var(--c-text); }

/* ========== 添加/编辑视频弹框（对齐布控管理弹框尺寸） ========== */
#streamModal.modal-overlay {
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .35);
    backdrop-filter: blur(4px);
    overflow: hidden;
}
#streamModal .stream-form-modal {
    width: min(820px, 94vw);
    max-width: min(820px, 94vw);
    max-height: 86vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--c-border, #e2e8f0);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .12);
    animation: streamModalIn .22s ease;
}
@keyframes streamModalIn {
    from { opacity: 0; transform: scale(.98) translateY(6px); }
    to { opacity: 1; transform: none; }
}
#streamModal .modal-header {
    padding: 14px 20px;
    background: linear-gradient(135deg, #f8fbfa 0%, #f0f9f6 100%);
    flex-shrink: 0;
}
#streamModal .modal-title {
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}
#streamModal .modal-title::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #169F85;
    box-shadow: 0 0 0 3px rgba(22, 159, 133, .15);
    flex-shrink: 0;
}
#streamModal .modal-close {
    width: 32px;
    height: 32px;
    border: 1px solid var(--c-border, #e2e8f0);
    border-radius: 8px;
    background: #fff;
}
#streamModal .modal-close:hover {
    border-color: #169F85;
    color: #169F85;
    background: #f0f9f6;
}
#streamModal .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px;
    max-height: none;
}
#streamModal .modal-footer {
    padding: 12px 20px;
    flex-shrink: 0;
    background: linear-gradient(135deg, #f8fbfa 0%, #f0f9f6 100%);
}
#streamModal .collapse-section { margin-bottom: 10px; }
#streamModal .collapse-header { padding: 8px 12px; font-size: 12px; }
#streamModal .collapse-body { padding: 10px 12px 4px; }
</style>
{% endblock %}

{% block content %}
<div class="stream-page">
<!-- 页面头部 -->
<div class="page-head">
    <div class="page-head-title">{{ T.page_stream|default:'视频管理' }}</div>
    <div class="page-head-right">
        <button class="btn" onclick="openOnvifModal()">{{ T.btn_onvif_discover|default:'ONVIF 发现' }}</button>
        <button class="btn" onclick="exportFile()">{{ T.btn_export|default:'↓ 导出' }}</button>
        <button class="btn" onclick="openImportModal()">{{ T.btn_import|default:'↑ 导入' }}</button>
        <button class="btn btn-primary" onclick="openAddModal()">{{ T.btn_add_video|default:'+ 添加视频' }}</button>
    </div>
</div>

<!-- 搜索栏 -->
<div class="card mb-16">
    <div class="card-body">
        <div class="search-bar">
            <div class="search-input-wrap">
                <span class="search-icon">🔍</span>
                <input type="search" class="form-input" id="searchText" name="searchText" autocomplete="off" readonly onfocus="this.removeAttribute('readonly')" placeholder="{{ T.placeholder_search_stream|default:'输入名称或编号搜索' }}" onkeypress="if(event.key==='Enter')loadList(1)">
            </div>
            <select class="form-select" id="searchStatus" style="width:140px" onchange="loadList(1)">
                <option value="-1">{{ T.filter_all_status|default:'全部状态' }}</option>
                <option value="1">{{ T.status_forwarding|default:'转发中' }}</option>
                <option value="0">{{ T.status_not_forwarding|default:'未转发' }}</option>
            </select>
            <button class="btn btn-primary" onclick="loadList(1)">{{ T.btn_search|default:'搜索' }}</button>
            <button class="btn" onclick="resetSearch()">{{ T.btn_reset|default:'重置' }}</button>
            <img id="searchLoading" src="{% static 'images/load.gif' %}" alt="loading" style="display:none;height:20px;margin-left:8px;vertical-align:middle">
            <span style="flex:1"></span>
            <button class="btn" onclick="loadList()">{{ T.btn_refresh_symbol|default:'↻ 刷新' }}</button>
            <div class="batch-dropdown" id="batchDropdown">
                <button class="batch-btn" onclick="toggleBatchMenu()">
                    {{ T.btn_batch_ops|default:'批量操作' }}
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>
                </button>
                <div class="batch-menu">
                    <button class="batch-menu-item" onclick="handleAllProxy('add')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none"/></svg>
                        {{ T.batch_start_all_forward|default:'全部开启转发' }}
                    </button>
                    <button class="batch-menu-item" onclick="handleAllProxy('del')">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12" rx="1"/></svg>
                        {{ T.batch_stop_all_forward|default:'全部停止转发' }}
                    </button>
                    <div class="batch-menu-sep"></div>
                    <button class="batch-menu-item danger" onclick="deleteAll()">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
                        {{ T.batch_delete_all|default:'全部删除' }}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 分组列表 -->
<div id="groupContainer" class="sg-wrap"></div>
<div style="margin-top:12px">
    <div class="pagination" id="pagination"></div>
</div>

<!-- ========== 添加/编辑弹窗 ========== -->
<div class="modal-overlay" id="streamModal" onclick="if(event.target===this)closeModal('streamModal')">
    <div class="modal stream-form-modal">
        <div class="modal-header">
            <span class="modal-title" id="streamModalTitle">添加视频</span>
            <button class="modal-close" onclick="closeModal('streamModal')">&times;</button>
        </div>
        <div class="modal-body">
            <form id="streamForm" onsubmit="return submitStreamForm(event)">
                <!-- 基本信息 -->
                <div class="collapse-section">
                    <div class="collapse-header expanded" onclick="toggleCollapse(this)">
                        <span>{{ T.section_basic_info|default:'基本信息' }}</span><span class="collapse-arrow">▶</span>
                    </div>
                    <div class="collapse-body show">
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">{{ T.label_code|default:'编号' }} <span class="required">*</span></label>
                                <input type="text" class="form-input" id="f_code" readonly>
                            </div>
                            <div class="form-group">
                                <label class="form-label">{{ T.label_name|default:'名称' }} <span class="required">*</span></label>
                                <input type="text" class="form-input" id="f_nickname" placeholder="{{ T.placeholder_enter_name|default:'请输入名称' }}" maxlength="50">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">{{ T.label_protocol|default:'接入协议' }} <span class="required">*</span></label>
                                <select class="form-select" id="f_pull_stream_type" onchange="onPullTypeChange()">
                                    <option value="0">{{ T.option_please_select|default:'请选择' }}</option>
                                    <option value="1">RTSP</option>
                                    <option value="2">RTMP</option>
                                    <option value="3">FLV</option>
                                    <option value="4">HLS</option>
                                    <option value="21">GB28181</option>
                                    <option value="31">cRTSP</option>
                                    <option value="32">cRTMP</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-label">{{ T.label_audio_type|default:'音频类型' }}</label>
                                <select class="form-select" id="f_is_audio">
                                    <option value="0">{{ T.audio_pull_mute|default:'静音' }}</option>
                                    <option value="1">{{ T.audio_pull_original|default:'原始音频' }}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">{{ T.label_stream_url|default:'直播流地址' }} <span class="required">*</span></label>
                            <input type="text" class="form-input" id="f_pull_stream_url" placeholder="rtsp:// / rtmp:// / http:// ...">
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">{{ T.label_stream_ip|default:'直播流IP' }}</label>
                                <input type="text" class="form-input" id="f_pull_stream_ip" placeholder="{{ T.placeholder_stream_ip|default:'如 192.168.1.100' }}">
                            </div>
                            <div class="form-group">
                                <label class="form-label">{{ T.label_port|default:'端口' }}</label>
                                <input type="number" class="form-input" id="f_pull_stream_port" placeholder="{{ T.placeholder_port|default:'如 554' }}" value="0">
                            </div>
                            <div class="form-group hide-field">
                                <label class="form-label">{{ T.label_username|default:'用户名' }}</label>
                                <input type="text" class="form-input" id="f_pull_stream_username" placeholder="{{ T.placeholder_onvif_username|default:'ONVIF用户名' }}">
                            </div>
                            <div class="form-group hide-field">
                                <label class="form-label">{{ T.label_password|default:'密码' }}</label>
                                <input type="text" class="form-input" id="f_pull_stream_password" placeholder="{{ T.placeholder_onvif_password|default:'ONVIF密码' }}">
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="form-group">
                                <label class="form-label">{{ T.label_camera_name|default:'摄像头名称' }}</label>
                                <input type="text" class="form-input" id="f_camera_name" placeholder="{{ T.placeholder_camera_name|default:'请输入摄像头名称' }}">
                            </div>
                            <div class="form-group">
                                <label class="form-label">{{ T.label_camera_manufacturer|default:'摄像头厂商' }}</label>
                                <input type="text" class="form-input" id="f_camera_manufacturer" placeholder="{{ T.placeholder_camera_manufacturer|default:'请输入摄像头厂商' }}">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label">{{ T.label_camera_device_id|default:'分组编号（国标设备ID）' }}</label>
                            <input type="text" class="form-input" id="f_camera_device_id" placeholder="{{ T.placeholder_camera_device_id|default:'默认使用编号' }}">
                        </div>
                        <div class="form-group">
                            <label class="form-label">{{ T.label_remark|default:'备注' }}</label>
                            <input type="text" class="form-input" id="f_remark" placeholder="{{ T.placeholder_remark|default:'请输入备注信息' }}">
                        </div>
                    </div>
                </div>

                <!-- 录像设置 -->
                <div class="collapse-section">
                    <div class="collapse-header" onclick="toggleCollapse(this)">
                        <span>{{ T.section_record_params|default:'录像设置' }}</span><span class="collapse-arrow">▶</span>
                    </div>
                    <div class="collapse-body">
                        <div class="form-group">
                            <label class="form-label">{{ T.label_enable_record|default:'启用 24/7 录像' }}</label>
                            <label class="switch">
                                <input type="checkbox" id="f_record_enable">
                                <span class="switch-slider"></span>
                            </label>
                            <div style="font-size:11px;color:#9ca3af;margin-top:6px">{{ T.label_record_hint|default:'开启后，在转发成功时自动分段录制到本地磁盘' }}</div>
                        </div>
                    </div>
                </div>

            </form>
        </div>
        <div class="modal-footer">
            <button class="btn" onclick="closeModal('streamModal')">{{ T.btn_cancel|default:'取消' }}</button>
            <button class="btn btn-primary" onclick="submitStreamForm()">{{ T.btn_submit|default:'提交' }}</button>
        </div>
    </div>
</div>

<!-- ========== ONVIF 发现弹窗 ========== -->
<div class="modal-overlay" id="onvifModal">
    <div class="modal modal-lg">
        <div class="modal-header">
            <span class="modal-title">{{ T.onvif_discover_title|default:'ONVIF 设备发现' }}</span>
            <button class="modal-close" onclick="closeModal('onvifModal')">&times;</button>
        </div>
        <div class="modal-body">
            <div class="search-bar" style="margin-bottom:12px">
                <input type="text" class="form-input" id="onvif_user" placeholder="{{ T.label_username|default:'用户名' }}" style="width:140px" value="admin">
                <input type="password" class="form-input" id="onvif_pass" placeholder="{{ T.label_password|default:'密码' }}" style="width:140px">
                <label style="font-size:12px;display:flex;align-items:center;gap:4px">
                    <input type="checkbox" id="onvif_resolve" checked> {{ T.onvif_resolve_rtsp|default:'解析 RTSP' }}
                </label>
                <button class="btn btn-primary" onclick="scanOnvif()" id="btnOnvifScan">{{ T.onvif_scan|default:'开始扫描' }}</button>
            </div>
            <div class="table-wrap">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>{{ T.th_ip|default:'IP' }}</th>
                            <th>{{ T.label_name|default:'名称' }}</th>
                            <th>ONVIF</th>
                            <th>RTSP</th>
                            <th>{{ T.col_action|default:'操作' }}</th>
                        </tr>
                    </thead>
                    <tbody id="onvifBody">
                        <tr><td colspan="5" style="text-align:center;color:#9ca3af;padding:24px">{{ T.onvif_scan_hint|default:'点击「开始扫描」发现局域网 ONVIF 摄像头' }}</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" onclick="closeModal('onvifModal')">{{ T.btn_close|default:'关闭' }}</button>
        </div>
    </div>
</div>

<!-- ========== 导入弹窗 ========== -->
<div class="modal-overlay" id="importModal">
    <div class="modal">
        <div class="modal-header">
            <span class="modal-title">{{ T.modal_import_camera|default:'批量导入摄像头' }}</span>
            <button class="modal-close" onclick="closeModal('importModal')">&times;</button>
        </div>
        <div class="modal-body">
            <div class="form-group">
                <label class="form-label">{{ T.label_import_file|default:'导入文件 (xlsx)' }}</label>
                <div class="file-input-wrap">
                    <input type="file" id="importFile" accept=".xlsx,.xls" class="file-input-hidden">
                    <label for="importFile" class="file-input-trigger">
                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="color:var(--c-text-tertiary)"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline></svg>
                        <span class="file-input-btn-text">{{ T.btn_choose_file|default:'选择文件' }}</span>
                    </label>
                    <span class="file-input-name" id="importFileName">{{ T.placeholder_no_file|default:'未选择文件' }}</span>
                </div>
            </div>
            <div class="form-group">
                <label class="form-label">{{ T.label_import_remark|default:'导入备注' }}</label>
                <input type="text" class="form-input" id="importRemark" placeholder="{{ T.placeholder_import_remark|default:'可选备注' }}">
            </div>
            <div style="font-size:13px;color:var(--c-text-tertiary);margin-top:12px">
                <a href="/static/resource/streamTemplate.xlsx" style="color:var(--c-primary)">{{ T.btn_download_template|default:'↓ 下载导入模板' }}</a>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btn" onclick="closeModal('importModal')">{{ T.btn_cancel|default:'取消' }}</button>
            <button class="btn btn-primary" onclick="submitImport()">{{ T.btn_submit|default:'提交' }}</button>
        </div>
    </div>
</div>

</div><!-- /.stream-page -->

{% endblock %}

{% block extra_js %}
<script>
var currentPage = 1;
var editMode = 'add'; // add or edit

// 加载列表
function loadList(page) {
    if (page) currentPage = page;
    var container = document.getElementById('groupContainer');
    var searchLoading = document.getElementById('searchLoading');
    if (searchLoading) searchLoading.style.display = 'inline-block';
    container.innerHTML = '<div class="sg-empty">' + _t('loading', '加载中...') + '</div>';

    var params = {
        p: currentPage,
        ps: 10,
        search_text: document.getElementById('searchText').value.trim(),
        search_status: document.getElementById('searchStatus').value
    };

    Api.get('/stream/openIndex', params).then(function(res) {
        if (searchLoading) searchLoading.style.display = 'none';
        if (res.code === 1000) {
            renderTable(res.data || []);
            renderPagination(document.getElementById('pagination'), res.pageData, loadList);
        } else {
            showGroupEmpty(res.msg);
        }
    }).catch(function() {
        if (searchLoading) searchLoading.style.display = 'none';
        showGroupEmpty(_t('load_failed', '加载失败'));
    });
}

function showGroupEmpty(msg) {
    var container = document.getElementById('groupContainer');
    container.innerHTML = '<div class="sg-empty">' + (msg || _t('no_data', '暂无数据')) + '</div>';
}

function toggleGroup(btn) {
    var head = btn.closest('.sg-head');
    var body = head.nextElementSibling;
    body.classList.toggle('open');
    btn.classList.toggle('open');
}

function renderTable(data) {
    var container = document.getElementById('groupContainer');
    if (!data || data.length === 0) {
        showGroupEmpty();
        return;
    }

    // 构建流数据映射
    window.streamMap = {};
    data.forEach(function(group) {
        var streams = Array.isArray(group) ? group : [group];
        streams.forEach(function(s) { if (s.code) window.streamMap[s.code] = s; });
    });

    var html = '';
    data.forEach(function(group) {
        var streams = Array.isArray(group) ? group : [group];
        var deviceId = streams[0].camera_device_id || streams[0].code || '--';
        var count = streams.length;

        html += '<div class="sg-group">';
        html += '<div class="sg-head">';
        html += '<div class="sg-device">' + escapeHtml(deviceId) + '</div>';
        html += '<span class="sg-count">' + count + '</span>';
        html += '<button class="sg-toggle open" onclick="toggleGroup(this)">';
        html += '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>';
        html += '</button>';
        html += '</div>';
        html += '<div class="sg-body open">';
        html += '<div class="table-wrap"><table class="data-table">';
        html += '<thead><tr>';
        html += '<th>' + _t('th_id', 'ID') + '</th>';
        html += '<th>' + _t('label_code', '编号') + '</th>';
        html += '<th>' + _t('label_protocol', '接入协议') + '</th>';
        html += '<th>' + _t('label_name', '名称') + '</th>';
        html += '<th>' + _t('th_ip', 'IP') + '</th>';
        html += '<th>' + _t('th_status', '状态') + '</th>';
        html += '<th>' + _t('th_update_time', '更新时间') + '</th>';
        html += '<th>' + _t('th_action', '操作') + '</th>';
        html += '</tr></thead><tbody>';
        streams.forEach(function(d) { html += renderRow(d); });
        html += '</tbody></table></div></div></div>';
    });
    container.innerHTML = html;
}

function renderRow(d) {
    var id = d.id || '--';
    var code = escapeHtml(d.code || '');
    var nickname = escapeHtml(d.nickname || '');
    var protocol = getPullStreamTypeName(d.pull_stream_type);
    var ip = escapeHtml(d.pull_stream_ip || '--');

    var recordTitle;
    var recordCls = 'act-btn';
    if (d.record_enable == 1 && d.is_recording == 1) {
        recordTitle = _t('title_record_recording', '录制中 · 查看录像');
        recordCls += ' act-rec-on';
    } else if (d.record_enable == 1) {
        recordTitle = _t('title_record_enabled_idle', '已启用录像 · 等待转发或查看历史');
        recordCls += ' act-rec-idle';
    } else {
        recordTitle = _t('title_record_disabled_history', '录像已关闭 · 查看历史录像');
    }
    var recordBtn = '<a href="/record/index?stream_id=' + encodeURIComponent(d.id) + '" class="' + recordCls + '" title="' + recordTitle + '">'
        + '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/>'
        + '<circle cx="12" cy="12" r="3" fill="currentColor" stroke="none"/></svg></a>';

    var forwardState = d.forward_state == 1
        ? '<span class="si si-on" title="' + _t('status_forwarding', '转发中') + '"></span>'
        : '<span class="si si-off" title="' + _t('status_not_forwarding', '未转发') + '"></span>';
    var updateTime = d.last_update_time || '--';

    var playBtn = d.forward_state == 1
        ? '<a href="/stream/player?app=' + encodeURIComponent(d.app) + '&name=' + encodeURIComponent(d.name) + '" class="act-btn act-on" title="' + _t('title_play', '播放') + '"><svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5 3 19 12 5 21"/></svg></a>'
        : '<button class="act-btn" disabled title="' + _t('title_play', '播放') + '"><svg viewBox="0 0 24 24" fill="currentColor" stroke="none"><polygon points="5 3 19 12 5 21"/></svg></button>';

    var proxyBtn = d.forward_state == 1
        ? '<button class="act-btn" onclick="delStreamProxy(\'' + code + '\')" title="' + _t('title_stop_forward', '停止转发') + '"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="6" y="6" width="12" height="12" rx="1"/></svg></button>'
        : '<button class="act-btn act-on" onclick="addStreamProxy(\'' + code + '\')" title="' + _t('title_start_forward', '开启转发') + '"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><polygon points="10 8 16 12 10 16" fill="currentColor" stroke="none"/></svg></button>';

    var editBtn = '<button class="act-btn" onclick="openEditModal(\'' + code + '\')" title="' + _t('btn_edit', '编辑') + '"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/></svg></button>';

    var delBtn = '<button class="act-btn act-danger" onclick="deleteStream(\'' + code + '\')" title="' + _t('btn_delete', '删除') + '"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg></button>';

    return '<tr>' +
        '<td>' + id + '</td>' +
        '<td class="mono" style="font-size:12px">' + code + '</td>' +
        '<td><span class="badge badge-neutral">' + protocol + '</span></td>' +
        '<td>' + nickname + '</td>' +
        '<td>' + ip + '</td>' +
        '<td>' + forwardState + '</td>' +
        '<td style="font-size:12px;color:var(--c-text-tertiary)">' + updateTime + '</td>' +
        '<td><div class="act-bar">' + playBtn + recordBtn + proxyBtn + editBtn + delBtn + '</div></td>' +
        '</tr>';
}

function resetSearch() {
    document.getElementById('searchText').value = '';
    document.getElementById('searchStatus').value = '-1';
    loadList(1);
}

// 开启转发
function addStreamProxy(code) {
    Api.post('/stream/openAddStreamProxy', { code: code }).then(function(res) {
        showToast(res.msg, res.code === 1000 ? 'success' : 'error');
        if (res.code === 1000) loadList();
    });
}

// 停止转发
function delStreamProxy(code) {
    Api.post('/stream/openDelStreamProxy', { code: code }).then(function(res) {
        showToast(res.msg, res.code === 1000 ? 'success' : 'error');
        if (res.code === 1000) loadList();
    });
}

// 全部开启/停止转发
function handleAllProxy(handle) {
    closeBatchMenu();
    var msg = handle === 'add' ? _t('confirm_start_all_forward', '确认全部开启转发吗？') : _t('confirm_stop_all_forward', '确认全部停止转发吗？');
    confirmDialog(msg, function() {
        Api.post('/stream/openHandleAllStreamProxy', { handle: handle }).then(function(res) {
            showToast(res.msg, res.code === 1000 ? 'success' : 'error');
            if (res.code === 1000) setTimeout(loadList, 1000);
        });
    });
}

// 批量操作下拉菜单
function toggleBatchMenu() {
    document.getElementById('batchDropdown').classList.toggle('open');
}
function closeBatchMenu() {
    document.getElementById('batchDropdown').classList.remove('open');
}
document.addEventListener('click', function(e) {
    var dd = document.getElementById('batchDropdown');
    if (dd && !dd.contains(e.target)) closeBatchMenu();
});

// 删除单个
function deleteStream(code) {
    confirmDialog(_t('confirm_delete_camera', '确认删除该摄像头吗？'), function() {
        Api.post('/stream/openDel', { handle: 'one', code: code }).then(function(res) {
            showToast(res.msg, res.code === 1000 ? 'success' : 'error');
            if (res.code === 1000) loadList();
        });
    });
}

// 全部删除
function deleteAll() {
    confirmDialog(_t('confirm_delete_all', '确认全部删除吗？此操作不可恢复！'), function() {
        Api.post('/stream/openDel', { handle: 'all' }).then(function(res) {
            showToast(res.msg, res.code === 1000 ? 'success' : 'error');
            if (res.code === 1000) loadList();
        });
    });
}

// 导出
function exportFile() {
    window.location.href = '/stream/openExportFile';
}

// ========== 添加/编辑 ==========
function openAddModal() {
    editMode = 'add';
    document.getElementById('streamModalTitle').textContent = _t('btn_add_video', '添加视频');
    document.getElementById('f_code').readOnly = false;

    Api.get('/stream/openAddContext').then(function(res) {
        if (res.code === 1000) {
            var s = res.stream || {};
            fillForm(s);
            openModal('streamModal');
        } else {
            showToast(res.msg, 'error');
        }
    });
}

function openEditModal(code) {
    editMode = 'edit';
    document.getElementById('streamModalTitle').textContent = _t('modal_edit_video', '编辑视频');
    document.getElementById('f_code').readOnly = true;

    Api.get('/stream/openEditContext', { code: code }).then(function(res) {
        if (res.code === 1000) {
            var s = res.stream || {};
            fillForm(s);
            openModal('streamModal');
        } else {
            showToast(res.msg, 'error');
        }
    });
}

function fillForm(s) {
    document.getElementById('f_code').value = s.code || '';
    document.getElementById('f_nickname').value = s.nickname || '';
    document.getElementById('f_pull_stream_type').value = s.pull_stream_type || 0;
    document.getElementById('f_is_audio').value = s.is_audio || 0;
    document.getElementById('f_pull_stream_url').value = s.pull_stream_url || '';
    document.getElementById('f_pull_stream_ip').value = s.pull_stream_ip || '';
    document.getElementById('f_pull_stream_port').value = s.pull_stream_port || 0;
    document.getElementById('f_pull_stream_username').value = s.pull_stream_username || '';
    document.getElementById('f_pull_stream_password').value = s.pull_stream_password || '';
    document.getElementById('f_camera_name').value = s.camera_name || '';
    document.getElementById('f_camera_manufacturer').value = s.camera_manufacturer || '';
    document.getElementById('f_remark').value = s.remark || '';
    document.getElementById('f_camera_device_id').value = s.camera_device_id || '';

    document.getElementById('f_record_enable').checked = s.record_enable == 1;

    onPullTypeChange();
}

function onPullTypeChange() {
    var type = parseInt(document.getElementById('f_pull_stream_type').value);
    // 添加模式下，被动协议不允许直接添加
    if (editMode === 'add' && (type === 21 || type === 31 || type === 32)) {
        var names = { 21: 'GB28181', 31: 'cRTSP', 32: 'cRTMP' };
        showToast(_t('toast_passive_protocol', names[type] + ' 为被动接入协议，不可直接添加'), 'warning');
        document.getElementById('f_pull_stream_type').value = 0;
    }
}

function submitStreamForm() {
    var code = document.getElementById('f_code').value.trim();
    var nickname = document.getElementById('f_nickname').value.trim();

    if (!code) { showToast(_t('toast_code_required', '编号不能为空'), 'warning'); return false; }
    if (!nickname) { showToast(_t('toast_name_required', '名称不能为空'), 'warning'); return false; }

    var pullType = parseInt(document.getElementById('f_pull_stream_type').value);
    if (editMode === 'add') {
        if (pullType === 0) { showToast(_t('toast_protocol_required', '请选择接入协议'), 'warning'); return false; }
        if (pullType === 21 || pullType === 31 || pullType === 32) {
            var names = { 21: 'GB28181', 31: 'cRTSP', 32: 'cRTMP' };
            showToast(_t('toast_passive_protocol', names[pullType] + ' 为被动接入协议，不可直接添加'), 'warning'); return false;
        }
        if (pullType === 1 || pullType === 2 || pullType === 3 || pullType === 4) {
            var url = document.getElementById('f_pull_stream_url').value.trim();
            if (!url) { showToast(_t('toast_stream_url_required', '直播流地址不能为空'), 'warning'); return false; }
        }
    }

    var data = {
        code: code,
        nickname: nickname,
        pull_stream_type: pullType,
        pull_stream_url: document.getElementById('f_pull_stream_url').value.trim(),
        pull_stream_ip: document.getElementById('f_pull_stream_ip').value.trim(),
        pull_stream_port: parseInt(document.getElementById('f_pull_stream_port').value) || 0,
        onvif_username: document.getElementById('f_pull_stream_username').value.trim(),
        onvif_password: document.getElementById('f_pull_stream_password').value.trim(),
        camera_name: document.getElementById('f_camera_name').value.trim(),
        camera_manufacturer: document.getElementById('f_camera_manufacturer').value.trim(),
        camera_device_id: document.getElementById('f_camera_device_id').value.trim(),
        remark: document.getElementById('f_remark').value.trim(),
        is_audio: parseInt(document.getElementById('f_is_audio').value),
        record_enable: document.getElementById('f_record_enable').checked ? 1 : 0
    };

    var url = editMode === 'add' ? '/stream/openAdd' : '/stream/openEdit';
    Api.post(url, data).then(function(res) {
        showToast(res.msg, res.code === 1000 ? 'success' : 'error');
        if (res.code === 1000) {
            closeModal('streamModal');
            loadList();
        }
    });

    return false;
}

// ========== 导入 ==========
function openImportModal() {
    document.getElementById('importFile').value = '';
    document.getElementById('importFileName').textContent = _t('placeholder_no_file', '未选择文件');
    document.getElementById('importFileName').classList.remove('has-file');
    document.getElementById('importRemark').value = '';
    openModal('importModal');
}

// 文件选择框美化：选中后显示文件名
(function() {
    document.addEventListener('change', function(e) {
        if (e.target && e.target.id === 'importFile') {
            var nameEl = document.getElementById('importFileName');
            if (e.target.files && e.target.files.length > 0) {
                nameEl.textContent = e.target.files[0].name;
                nameEl.classList.add('has-file');
            } else {
                nameEl.textContent = _t('placeholder_no_file', '未选择文件');
                nameEl.classList.remove('has-file');
            }
        }
    });
})();

function submitImport() {
    var file = document.getElementById('importFile').files[0];
    if (!file) { showToast(_t('toast_select_file', '请选择文件'), 'warning'); return; }
    if (file.size > 10 * 1024 * 1024) { showToast(_t('toast_file_size_limit', '文件大小不能超过10M'), 'warning'); return; }

    var fd = new FormData();
    fd.append('file', file);
    fd.append('importRemark', document.getElementById('importRemark').value.trim());

    fetch('/stream/openImportFile', {
        method: 'POST',
        credentials: 'same-origin',
        headers: csrfHeaders(),
        body: fd
    })
    .then(function(r) { return r.json(); })
    .then(function(res) {
        showToast(res.msg, res.code === 1000 ? 'success' : 'error');
        if (res.code === 1000) {
            closeModal('importModal');
            loadList();
        }
    });
}

// ========== ONVIF 发现 ==========
function openOnvifModal(){
    document.getElementById('onvifBody').innerHTML = '<tr><td colspan="5" style="text-align:center;color:#9ca3af;padding:24px">'+_t('onvif_scan_hint','点击「开始扫描」发现局域网 ONVIF 摄像头')+'</td></tr>';
    openModal('onvifModal');
}

function scanOnvif(){
    var btn = document.getElementById('btnOnvifScan');
    var body = document.getElementById('onvifBody');
    btn.disabled = true;
    body.innerHTML = '<tr><td colspan="5" style="text-align:center;color:#9ca3af;padding:24px">'+_t('onvif_scanning','扫描中...')+'</td></tr>';
    var p = {
        timeout: 4,
        username: document.getElementById('onvif_user').value.trim(),
        password: document.getElementById('onvif_pass').value,
        resolve_rtsp: document.getElementById('onvif_resolve').checked ? 1 : 0
    };
    Api.get('/stream/openOnvifDiscover', p).then(function(res){
        btn.disabled = false;
        body.innerHTML = '';
        if(!res || res.code!==1000 || !(res.data||[]).length){
            body.innerHTML = '<tr><td colspan="5" style="text-align:center;color:#9ca3af;padding:24px">'+_t('onvif_no_devices','未发现 ONVIF 设备')+'</td></tr>';
            return;
        }
        res.data.forEach(function(d, idx){
            var tr = document.createElement('tr');
            var rtsp = d.rtsp_url ? escapeHtml(d.rtsp_url) : '<span style="color:#9ca3af">--</span>';
            tr.innerHTML = '<td class="mono">'+escapeHtml(d.ip||'')+'</td>'
                +'<td>'+escapeHtml(d.name||('Device-'+(idx+1)))+'</td>'
                +'<td style="font-size:11px;max-width:180px;overflow:hidden;text-overflow:ellipsis" title="'+escapeHtml(d.xaddr||'')+'">'+escapeHtml((d.xaddr||'').substring(0,40))+'</td>'
                +'<td style="font-size:11px;max-width:220px;overflow:hidden;text-overflow:ellipsis" title="'+(d.rtsp_url||'')+'">'+rtsp+'</td>'
                +'<td><button class="btn btn-sm" onclick="addFromOnvif('+idx+')">'+_t('onvif_add_stream','添加')+'</button></td>';
            tr._onvifData = d;
            body.appendChild(tr);
        });
        window._onvifList = res.data;
    }).catch(function(){
        btn.disabled = false;
        body.innerHTML = '<tr><td colspan="5" style="text-align:center;color:#dc2626;padding:24px">'+_t('load_failed','加载失败')+'</td></tr>';
    });
}

function addFromOnvif(idx){
    var d = (window._onvifList||[])[idx];
    if(!d) return;
    closeModal('onvifModal');
    editMode = 'add';
    document.getElementById('streamModalTitle').textContent = _t('btn_add_video', '添加视频');
    document.getElementById('f_code').readOnly = false;
    Api.get('/stream/openAddContext').then(function(res){
        if(res.code !== 1000){ showToast(res.msg,'error'); return; }
        var s = res.stream || {};
        fillForm(s);
        document.getElementById('f_pull_stream_type').value = '1';
        document.getElementById('f_nickname').value = d.name || ('ONVIF-'+d.ip);
        document.getElementById('f_camera_name').value = d.name || '';
        document.getElementById('f_pull_stream_ip').value = d.ip || '';
        if(d.rtsp_url){
            document.getElementById('f_pull_stream_url').value = d.rtsp_url;
        }
        var user = document.getElementById('onvif_user').value.trim();
        var pass = document.getElementById('onvif_pass').value;
        if(user) document.getElementById('f_pull_stream_username').value = user;
        if(pass) document.getElementById('f_pull_stream_password').value = pass;
        onPullTypeChange();
        openModal('streamModal');
    });
}

// 初始化
// 反 Chrome autofill：input 上加了 readonly，Chrome 会跳过该字段不填充，
// 用户首次点击/聚焦时移除 readonly 即可正常输入
loadList(1);
</script>
{% endblock %}