{% extends "base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="bi bi-gear"></i> 考勤规则设置</h2>
    <div>
        <button class="btn btn-success" onclick="exportRules()">
            <i class="bi bi-download"></i> 导出Excel
        </button>
        <button class="btn btn-primary ms-2" data-bs-toggle="modal" data-bs-target="#addRuleModal">
            <i class="bi bi-plus-circle"></i> 添加规则
        </button>
    </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:50px;">ID</th>
                        <th>规则名称</th>
                        <th>上班时间</th>
                        <th>下班时间</th>
                        <th>迟到阈值</th>
                        <th>工作日</th>
                        <th style="width:80px;">状态</th>
                        <th style="width:250px;">操作</th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in rules %}
                    <tr id="rule-row-{{ r.id }}">
                        <td>{{ r.id }}</td>
                        <td><strong>{{ r.rule_name }}</strong></td>
                        <td>{{ r.work_start_time }}</td>
                        <td>{{ r.work_end_time }}</td>
                        <td>{{ r.late_threshold }} 分钟</td>
                        <td>
                            {% set week_map = {'1':'周一','2':'周二','3':'周三','4':'周四','5':'周五','6':'周六','7':'周日'} %}
                            {% for d in r.work_days %}
                                <span class="badge bg-light text-dark">{{ week_map.get(d, d) }}</span>
                            {% endfor %}
                        </td>
                        <td>
                            {% if r.status == 1 %}
                                <span class="badge bg-success" id="status-badge-{{ r.id }}">✅ 启用</span>
                            {% else %}
                                <span class="badge bg-secondary" id="status-badge-{{ r.id }}">⛔ 停用</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if r.status == 1 %}
                                <button class="btn btn-sm btn-success" id="btn-enable-{{ r.id }}" onclick="toggleRule({{ r.id }}, 1)" disabled>
                                    <i class="bi bi-check-circle"></i> 启用
                                </button>
                            {% else %}
                                <button class="btn btn-sm btn-success" id="btn-enable-{{ r.id }}" onclick="toggleRule({{ r.id }}, 1)">
                                    <i class="bi bi-check-circle"></i> 启用
                                </button>
                            {% endif %}
                            <button class="btn btn-sm btn-outline-primary" onclick="editRule({{ r.id }})">
                                <i class="bi bi-pencil"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteRule({{ r.id }}, '{{ r.rule_name }}')">
                                <i class="bi bi-trash"></i>
                            </button>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="8" class="text-center text-muted py-4">暂无考勤规则，点击「添加规则」创建</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- ====== 添加规则弹窗 ====== -->
<div class="modal fade" id="addRuleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-plus-circle"></i> 添加考勤规则</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="addRuleForm">
                    <div class="mb-3">
                        <label class="form-label">规则名称 <span class="text-danger">*</span></label>
                        <input type="text" name="rule_name" class="form-control" placeholder="如：冬季作息、夏季作息" required>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">上班时间</label>
                                <input type="time" name="work_start_time" class="form-control" value="09:00" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">下班时间</label>
                                <input type="time" name="work_end_time" class="form-control" value="18:00" required>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">迟到阈值（分钟）</label>
                        <input type="number" name="late_threshold" class="form-control" value="10" min="0">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">工作日</label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="work_days" value="1" checked>
                                <label class="form-check-label">周一</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="work_days" value="2" checked>
                                <label class="form-check-label">周二</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="work_days" value="3" checked>
                                <label class="form-check-label">周三</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="work_days" value="4" checked>
                                <label class="form-check-label">周四</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="work_days" value="5" checked>
                                <label class="form-check-label">周五</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="work_days" value="6">
                                <label class="form-check-label">周六</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="checkbox" name="work_days" value="7">
                                <label class="form-check-label">周日</label>
                            </div>
                        </div>
                    </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" id="saveRuleBtn">添加</button>
            </div>
        </div>
    </div>
</div>

<!-- ====== 编辑规则弹窗 ====== -->
<div class="modal fade" id="editRuleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title"><i class="bi bi-pencil"></i> 编辑考勤规则</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="editRuleForm">
                    <input type="hidden" id="editRuleId" name="rule_id">
                    <div class="mb-3">
                        <label class="form-label">规则名称 <span class="text-danger">*</span></label>
                        <input type="text" id="editRuleName" name="rule_name" class="form-control" required>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">上班时间</label>
                                <input type="time" id="editWorkStart" name="work_start_time" class="form-control" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label class="form-label">下班时间</label>
                                <input type="time" id="editWorkEnd" name="work_end_time" class="form-control" required>
                            </div>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">迟到阈值（分钟）</label>
                        <input type="number" id="editLateThreshold" name="late_threshold" class="form-control" min="0">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">工作日</label>
                        <div id="editWorkDaysContainer">
                            <!-- 由JS动态生成 -->
                        </div>
                    </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" id="updateRuleBtn">保存修改</button>
            </div>
        </div>
    </div>
</div>

<script>
// ====== 导出 ======
function exportRules() {
    window.location.href = '/export/rules';
}

// ====== 根据数据库中的状态刷新单条规则的显示（状态徽章 + 启用按钮） ======
function updateRuleStatusUI(ruleId, status) {
    const isEnabled = status === 1;
    const badge = document.getElementById(`status-badge-${ruleId}`);
    const btnEnable = document.getElementById(`btn-enable-${ruleId}`);
    if (badge) {
        badge.className = isEnabled ? 'badge bg-success' : 'badge bg-secondary';
        badge.innerHTML = isEnabled ? '✅ 启用' : '⛔ 停用';
    }
    if (btnEnable) btnEnable.disabled = isEnabled;
}

// ====== 页面加载时，从数据库同步所有规则的显示状态 ======
// 保证退出系统后重新登录再次进入本页面时，
// 上次已经启用（启动）的规则仍然正确显示为“已启用”状态
document.addEventListener('DOMContentLoaded', function() {
    fetch('/api/rules')
        .then(r => r.json())
        .then(rules => {
            (rules || []).forEach(function(rule) {
                updateRuleStatusUI(rule.id, rule.status);
            });
        })
        .catch(function() {
            // 获取失败时保留服务端渲染的显示结果
        });
});

// ====== 添加规则 ======
document.getElementById('saveRuleBtn').addEventListener('click', function() {
    const form = document.getElementById('addRuleForm');
    const data = {
        rule_name: form.querySelector('[name="rule_name"]').value,
        work_start_time: form.querySelector('[name="work_start_time"]').value,
        work_end_time: form.querySelector('[name="work_end_time"]').value,
        late_threshold: form.querySelector('[name="late_threshold"]').value || 10,
        work_days: Array.from(form.querySelectorAll('[name="work_days"]:checked')).map(el => el.value)
    };

    if (!data.rule_name) {
        alert('请输入规则名称');
        return;
    }

    fetch('/api/rules/add', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            alert('✅ 规则添加成功！');
            location.reload();
        } else {
            alert('❌ ' + (data.message || '添加失败'));
        }
    });
});

// ====== 编辑规则 ======
function editRule(ruleId) {
    // 获取当前规则数据
    fetch('/api/rules')
        .then(r => r.json())
        .then(rules => {
            const rule = rules.find(r => r.id === ruleId);
            if (!rule) {
                alert('规则不存在');
                return;
            }

            document.getElementById('editRuleId').value = rule.id;
            document.getElementById('editRuleName').value = rule.rule_name;
            document.getElementById('editWorkStart').value = rule.work_start_time;
            document.getElementById('editWorkEnd').value = rule.work_end_time;
            document.getElementById('editLateThreshold').value = rule.late_threshold;

            // 生成工作日复选框
            const container = document.getElementById('editWorkDaysContainer');
            const weekMap = {'1':'周一','2':'周二','3':'周三','4':'周四','5':'周五','6':'周六','7':'周日'};
            let html = '';
            for (let i = 1; i <= 7; i++) {
                const checked = rule.work_days.includes(String(i)) ? 'checked' : '';
                html += `
                    <div class="form-check form-check-inline">
                        <input class="form-check-input" type="checkbox" name="edit_work_days" value="${i}" ${checked}>
                        <label class="form-check-label">${weekMap[String(i)]}</label>
                    </div>
                `;
            }
            container.innerHTML = html;

            const modal = new bootstrap.Modal(document.getElementById('editRuleModal'));
            modal.show();
        });
}

document.getElementById('updateRuleBtn').addEventListener('click', function() {
    const id = document.getElementById('editRuleId').value;
    const data = {
        rule_name: document.getElementById('editRuleName').value,
        work_start_time: document.getElementById('editWorkStart').value,
        work_end_time: document.getElementById('editWorkEnd').value,
        late_threshold: document.getElementById('editLateThreshold').value || 10,
        work_days: Array.from(document.querySelectorAll('[name="edit_work_days"]:checked')).map(el => el.value)
    };

    if (!data.rule_name) {
        alert('请输入规则名称');
        return;
    }

    fetch(`/api/rules/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data)
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            alert('✅ 规则已更新！');
            location.reload();
        } else {
            alert('❌ ' + (data.message || '更新失败'));
        }
    });
});

// ====== 启用规则（停用按钮已移除，仅保留启用操作） ======
function toggleRule(ruleId, targetStatus) {
    // targetStatus: 1=启用
    const actionText = targetStatus === 1 ? '启用' : '停用';
    
    if (!confirm(`确定要${actionText}该考勤规则吗？`)) return;

    // 立即（乐观）刷新整页显示：被点击的规则马上显示为“启用”，其余规则马上显示为“停用”，
    // 无需等待服务器返回，保证点击后瞬间看到状态变化
    document.querySelectorAll('[id^="status-badge-"]').forEach(function(el) {
        const id = parseInt(el.id.replace('status-badge-', ''), 10);
        updateRuleStatusUI(id, id === ruleId ? 1 : 0);
    });

    fetch(`/api/rules/${ruleId}/toggle`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' }
    })
    .then(r => r.json())
    .then(data => {
        console.log('切换结果:', data); // 调试用
        
        if (data.success) {
            // 被点击规则：以启用接口返回的 status 为准（点击启用后即保持“已启用”显示，
            // 不会被下面的整表同步结果覆盖回“停用”）
            updateRuleStatusUI(ruleId, data.status !== undefined ? data.status : targetStatus);

            // 其余规则：从数据库重新拉取最新状态并刷新显示
            // （启用某条规则时，服务端会自动停用其他规则，因此需要同步其他行）
            fetch('/api/rules')
                .then(r => r.json())
                .then(rules => {
                    (rules || []).forEach(function(rule) {
                        if (rule.id !== ruleId) {
                            updateRuleStatusUI(rule.id, rule.status);
                        }
                    });
                })
                .catch(function() {
                    // 拉取失败时忽略，被点击规则本身的状态已在上一步更新
                });

            alert(`✅ 规则已${actionText}成功！`);
        } else {
            alert('❌ ' + (data.message || '操作失败'));
            // 恢复为服务器真实状态
            location.reload();
        }
    })
    .catch(err => {
        alert('❌ 操作失败：' + err.message);
        // 恢复为服务器真实状态
        location.reload();
    });
}

// ====== 删除规则 ======
function deleteRule(ruleId, name) {
    if (!confirm(`确定要删除考勤规则「${name}」吗？\n⚠️ 删除后不可恢复！`)) return;

    fetch(`/api/rules/${ruleId}`, { method: 'DELETE' })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                alert('✅ 规则已删除！');
                location.reload();
            } else {
                alert('❌ ' + (data.message || '删除失败'));
            }
        });
}
</script>
{% endblock %}