{% extends "base.html" %}

{% block content %}
<div class="row justify-content-center">
    <div class="col-md-6">
        <div class="card text-center py-5">
            <div class="card-body">
                <div style="font-size: 80px; color: #1a237e;"><i class="bi bi-clock"></i></div>
                <h1 id="clockDisplay" style="font-size: 48px; font-weight: bold; color: #1a237e;">--:--:--</h1>
                <p class="text-muted" id="dateDisplay"></p>
                <div class="mt-4" id="statusDisplay"><div class="alert alert-secondary">加载中...</div></div>
                <div class="btn-group mt-3">
                    <button class="btn btn-success btn-lg px-5" id="checkInBtn"><i class="bi bi-arrow-up-circle"></i> 上班打卡</button>
                    <button class="btn btn-warning btn-lg px-5" id="checkOutBtn"><i class="bi bi-arrow-down-circle"></i> 下班打卡</button>
                </div>
                <div class="mt-3"><small class="text-muted">💡 键盘快捷键：按 1 上班打卡，按 2 下班打卡</small></div>
                <div class="mt-4"><a href="{{ url_for('dashboard') }}" class="btn btn-outline-secondary"><i class="bi bi-arrow-left"></i> 返回</a></div>
            </div>
        </div>
    </div>
</div>

<script>
function updateClock() {
    const now = new Date();
    document.getElementById('clockDisplay').textContent = now.toLocaleTimeString('zh-CN');
    document.getElementById('dateDisplay').textContent = now.toLocaleDateString('zh-CN', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' });
}
setInterval(updateClock, 1000);
updateClock();

function updateStatus() {
    fetch('/api/today_status').then(r=>r.json()).then(data => {
        const el = document.getElementById('statusDisplay');
        if (data.has_checked_in && data.has_checked_out) {
            el.innerHTML = '<div class="alert alert-success">✅ 已完成打卡<br>上班：' + data.check_in_time + ' | 下班：' + data.check_out_time + '</div>';
        } else if (data.has_checked_in) {
            el.innerHTML = '<div class="alert alert-warning">⏳ 已上班打卡 (' + data.check_in_time + ')，请记得下班打卡</div>';
        } else {
            el.innerHTML = '<div class="alert alert-danger">❌ 今日尚未打卡</div>';
        }
    });
}
updateStatus();

function doCheckin() {
    const btn = document.getElementById('checkInBtn');
    btn.disabled = true; btn.innerHTML = '<span class="spinner"></span> 打卡中...';
    fetch('/api/checkin', { method: 'POST' }).then(r=>r.json()).then(data => { alert(data.message); location.reload(); })
    .finally(() => { btn.disabled = false; btn.innerHTML = '<i class="bi bi-arrow-up-circle"></i> 上班打卡'; });
}
function doCheckout() {
    const btn = document.getElementById('checkOutBtn');
    btn.disabled = true; btn.innerHTML = '<span class="spinner"></span> 打卡中...';
    fetch('/api/checkout', { method: 'POST' }).then(r=>r.json()).then(data => { alert(data.message); location.reload(); })
    .finally(() => { btn.disabled = false; btn.innerHTML = '<i class="bi bi-arrow-down-circle"></i> 下班打卡'; });
}
document.getElementById('checkInBtn').addEventListener('click', doCheckin);
document.getElementById('checkOutBtn').addEventListener('click', doCheckout);
document.addEventListener('keydown', function(e) { if (e.key === '1') doCheckin(); if (e.key === '2') doCheckout(); });
</script>
{% endblock %}