{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-list-check"></i> 审批任务</h2>
    <div>
        <!-- 所有用户都可以使用这些功能 -->
        <button class="btn btn-secondary" onclick="selectAll()">
            <i class="bi bi-check-all"></i> 全选
        </button>
        <button class="btn btn-outline-secondary" onclick="deselectAll()">
            <i class="bi bi-check2-square"></i> 全不选
        </button>
        <button class="btn btn-info" onclick="exportPDF()">
            <i class="bi bi-file-pdf"></i> 导出流程PDF
        </button>
        <button class="btn btn-success" onclick="exportTasks()">
            <i class="bi bi-download"></i> 导出Excel
        </button>
        <a href="{{ url_for('new_task') }}" class="btn btn-primary ms-2">
            <i class="bi bi-plus-circle"></i> 发起审批
        </a>
    </div>
</div>

<!-- 搜索区域 -->
<div class="card mb-4">
    <div class="card-body">
        <form method="get" id="searchForm" class="row g-3">
            <div class="col-md-4">
                <div class="input-group">
                    <span class="input-group-text"><i class="bi bi-search"></i></span>
                    <input type="text" name="keyword" class="form-control" 
                           placeholder="搜索标题/申请人..." 
                           value="{{ request.args.get('keyword', '') }}">
                </div>
            </div>
            <div class="col-md-2">
                <select name="status" class="form-select">
                    <option value="">全部状态</option>
                    <option value="pending" {% if status=='pending' %}selected{% endif %}>⏳ 待审批</option>
                    <option value="approved" {% if status=='approved' %}selected{% endif %}>✅ 已通过</option>
                    <option value="rejected" {% if status=='rejected' %}selected{% endif %}>❌ 已驳回</option>
                    <option value="discarded" {% if status=='discarded' %}selected{% endif %}>🗑️ 已弃置</option>
                    <option value="my_approved" {% if status=='my_approved' %}selected{% endif %}>✅ 已审批（我审批过的）</option>
                </select>
            </div>
            <div class="col-md-2">
                <input type="date" name="start_date" class="form-control" 
                       value="{{ request.args.get('start_date', '') }}" placeholder="开始日期">
            </div>
            <div class="col-md-2">
                <input type="date" name="end_date" class="form-control" 
                       value="{{ request.args.get('end_date', '') }}" placeholder="结束日期">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-primary w-100">
                    <i class="bi bi-search"></i> 查询
                </button>
            </div>
        </form>

        <!-- 快捷筛选 -->
        <div class="row mt-2">
            <div class="col-12">
                <small class="text-muted">快捷筛选：</small>
                <a href="{{ url_for('tasks', status='pending') }}" class="badge bg-warning text-dark text-decoration-none ms-1">待审批</a>
                <a href="{{ url_for('tasks', status='approved') }}" class="badge bg-success text-decoration-none ms-1">已通过</a>
                <a href="{{ url_for('tasks', status='rejected') }}" class="badge bg-danger text-decoration-none ms-1">已驳回</a>
                <a href="{{ url_for('tasks', status='discarded') }}" class="badge bg-secondary text-decoration-none ms-1">已弃置</a>
                <a href="{{ url_for('tasks', status='my_approved') }}" class="badge bg-info text-decoration-none ms-1" style="color:#fff;">已审批</a>
                <a href="{{ url_for('tasks') }}" class="badge bg-secondary text-decoration-none ms-1">全部</a>
                {% if request.args.get('keyword') or request.args.get('status') or request.args.get('start_date') %}
                    <span class="ms-2 text-muted">| 已筛选，</span>
                    <a href="{{ url_for('tasks') }}" class="text-decoration-none">清除筛选</a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 任务列表 -->
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr>
                        <th style="width:40px;">
                            <input type="checkbox" id="selectAllCheckbox" onchange="toggleAllCheckboxes(this)">
                        </th>
                        <th style="width:50px;">
                            {% if current_user.role == '管理员' %}
                                ID
                            {% else %}
                                序号
                            {% endif %}
                        </th>
                        <th>标题</th>
                        <th>申请人</th>
                        <th>状态</th>
                        <th>提交时间</th>
                        <th>附件</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody id="taskTableBody">
                    {% for task in tasks %}
                    <tr>
                        <td>
                            <input type="checkbox" class="task-checkbox" value="{{ task.id }}">
                        </td>
                        <td>
                            {% if current_user.role == '管理员' %}
                                #{{ task.id }}
                            {% else %}
                                {{ loop.index }}
                            {% endif %}
                        </td>
                        <td>{{ task.title }}</td>
                        <td>{{ task.applicant }}</td>
                        <td>
                            {% if task.status == 'pending' %}
                                {% if task.current_user_approved %}
                                    <span class="badge bg-info" style="color:#fff;">✅ 已审批</span>
                                {% elif task.is_current_approver %}
                                    <span class="badge badge-pending">⏳ 待我审批</span>
                                {% else %}
                                    <span class="badge badge-pending">⏳ 待审批</span>
                                {% endif %}
                            {% elif task.status == 'approved' %}
                                <span class="badge badge-approved">✅ 已通过</span>
                            {% elif task.status == 'rejected' %}
                                <span class="badge badge-rejected">❌ 已驳回</span>
                            {% elif task.status == 'discarded' %}
                                <span class="badge bg-secondary">🗑️ 已弃置</span>
                            {% else %}
                                <span class="badge bg-secondary">{{ task.status }}</span>
                            {% endif %}
                        </td>
                        <td>{{ task.created_at }}</td>
                        <td>
                            {% if task.attachment_name %}
                                <i class="bi bi-paperclip text-primary" title="{{ task.attachment_name }}"></i>
                            {% else %}
                                -
                            {% endif %}
                        </td>
                        <td>
                            <a href="{{ url_for('task_detail', task_id=task.id) }}" class="btn btn-sm btn-outline-primary">
                                <i class="bi bi-eye"></i> 查看
                            </a>
                            {# 只有待审批且当前用户是当前审批人且尚未审批过才显示审批按钮 #}
                            {% if task.status == 'pending' and task.is_current_approver and not task.current_user_approved %}
                                <a href="{{ url_for('approve_task', task_id=task.id) }}" class="btn btn-sm btn-success">
                                    <i class="bi bi-check-circle"></i> 审批
                                </a>
                            {% endif %}
                            {% if task.status == 'rejected' %}
                                <a href="{{ url_for('reapply_task', task_id=task.id) }}" class="btn btn-sm btn-warning">
                                    <i class="bi bi-arrow-counterclockwise"></i> 重提
                                </a>
                            {% endif %}
                            {# 弃置按钮（待审批或已驳回状态，发起人本人或管理员可见） #}
                            {% if task.status in ['pending', 'rejected'] %}
                                {% if task.applicant_id == current_user.id or current_user.is_admin() %}
                                    <button class="btn btn-sm btn-outline-danger" onclick="discardTask({{ task.id }}, '{{ task.title }}')">
                                        <i class="bi bi-trash"></i> 弃置
                                    </button>
                                {% endif %}
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="8" class="text-center text-muted py-4">
                            <i class="bi bi-inbox" style="font-size: 32px; display: block; margin-bottom: 8px;"></i>
                            {% if request.args.get('keyword') or request.args.get('status') or request.args.get('start_date') %}
                                没有找到匹配的审批任务
                            {% else %}
                                暂无审批任务，点击「发起审批」创建
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="mt-2 text-muted small" id="taskCount">共 {{ tasks|length }} 条记录</div>

<script>
// ==================== 全选/全不选 ====================
function toggleAllCheckboxes(master) {
    var checkboxes = document.getElementsByClassName('task-checkbox');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = master.checked;
    }
}

function selectAll() {
    var checkboxes = document.getElementsByClassName('task-checkbox');
    var master = document.getElementById('selectAllCheckbox');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = true;
    }
    if (master) master.checked = true;
}

function deselectAll() {
    var checkboxes = document.getElementsByClassName('task-checkbox');
    var master = document.getElementById('selectAllCheckbox');
    for (var i = 0; i < checkboxes.length; i++) {
        checkboxes[i].checked = false;
    }
    if (master) master.checked = false;
}

// 当单个复选框变化时更新全选状态
document.addEventListener('change', function(e) {
    if (e.target && e.target.className === 'task-checkbox') {
        var checkboxes = document.getElementsByClassName('task-checkbox');
        var master = document.getElementById('selectAllCheckbox');
        var allChecked = true;
        var anyChecked = false;
        for (var i = 0; i < checkboxes.length; i++) {
            if (!checkboxes[i].checked) allChecked = false;
            if (checkboxes[i].checked) anyChecked = true;
        }
        if (master) {
            master.checked = allChecked && anyChecked;
            master.indeterminate = !allChecked && anyChecked;
        }
    }
});

// ==================== 导出流程PDF ====================
function exportPDF() {
    var checkboxes = document.getElementsByClassName('task-checkbox');
    var selectedIds = [];
    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            selectedIds.push(checkboxes[i].value);
        }
    }
    
    if (selectedIds.length === 0) {
        alert('请至少选择一个审批任务！');
        return;
    }
    
    var url = '/export/tasks/pdf?ids=' + selectedIds.join(',');
    window.location.href = url;
}

// ==================== 导出Excel ====================
function exportTasks() {
    window.location.href = '/export/tasks';
}

// ==================== 弃置任务 ====================
function discardTask(taskId, taskTitle) {
    if (!confirm(`确定要弃置「${taskTitle}」吗？\n\n⚠️ 弃置后该任务将被标记为「已弃置」，不可恢复！`)) {
        return;
    }
    
    fetch(`/tasks/${taskId}/discard`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        }
    })
    .then(response => {
        if (response.redirected) {
            window.location.href = response.url;
        } else {
            return response.text();
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('弃置失败，请重试');
    });
}

// ==================== 回车自动提交 ====================
document.getElementById('searchForm').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        this.submit();
    }
});

// ==================== 自动刷新 ====================
{% set has_pending = false %}
{% for task in tasks %}
    {% if task.status == 'pending' and task.is_current_approver and not task.current_user_approved %}
        {% set has_pending = true %}
    {% endif %}
{% endfor %}

{% if has_pending %}
console.log('🔄 检测到待我审批的任务，启动自动刷新（每15秒）');
var refreshTimer = setTimeout(function() {
    location.reload();
}, 15000);
{% endif %}
</script>
{% endblock %}