{% extends "base.html" %}
{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">抢购任务</h4>
    <div>
        <button class="btn btn-outline-success btn-sm me-1 rounded-pill" data-bs-toggle="modal" data-bs-target="#syncCartModal">
            <i class="bi bi-cart-check"></i> 同步购物车
        </button>
        <button class="btn btn-outline-warning btn-sm me-1 rounded-pill" onclick="startAll()">
            <i class="bi bi-play-circle"></i> 全部启动
        </button>
        <button class="btn btn-outline-primary btn-sm rounded-pill" data-bs-toggle="modal" data-bs-target="#addTaskModal">
            <i class="bi bi-plus-lg"></i> 手动新建
        </button>
    </div>
</div>

{% if not grouped %}
<div class="card p-5 text-center text-muted">
    <i class="bi bi-inbox" style="font-size:2.5rem"></i>
    <p class="mt-2 mb-0">暂无任务，点击"同步购物车"自动添加预售商品</p>
</div>
{% else %}
{% for account_id, group in grouped.items() %}
<div class="card mb-3">
    <div class="card-header d-flex justify-content-between align-items-center"
         style="background:linear-gradient(135deg,#f8f9ff,#eef1fb);border-radius:14px 14px 0 0;border:none">
        <div>
            <i class="bi bi-person-circle text-primary"></i>
            <span class="fw-bold">{{ group.name }}</span>
            <span class="badge bg-light text-muted ms-1">{{ group.tasks|length }} 个任务</span>
        </div>
        <button class="btn btn-success btn-sm rounded-pill"
                onclick="startAccount({{ account_id }})">
            <i class="bi bi-play-fill"></i> 启动全部
        </button>
    </div>
    <div class="card-body p-2">
    {% for t in group.tasks %}
        <div class="task-row d-flex align-items-start gap-3 p-2 {% if not loop.last %}border-bottom{% endif %}">
            <div class="countdown-box text-center flex-shrink-0"
                 data-snatch-time="{{ t.snatch_time }}" data-status="{{ t.status }}">
                <div class="cd-time font-monospace">--:--:--</div>
                <div class="cd-label text-muted" style="font-size:.7rem">距开售</div>
            </div>
            <div class="flex-grow-1 min-w-0">
                <div class="d-flex align-items-center gap-2 mb-1">
                    <span class="status-badge status-{{ t.status }}">{{ t.status }}</span>
                    {% if t.price %}
                    <span class="text-danger fw-bold" style="font-size:.85rem">¥{{ t.price }}</span>
                    {% endif %}
                </div>
                <div class="item-name mb-1">
                    {% if t.item_name %}
                    <a href="{{ t.target_url }}" target="_blank" class="text-decoration-none text-dark"
                       title="{{ t.target_url }}">{{ t.item_name[:50] }}{% if t.item_name|length > 50 %}...{% endif %}</a>
                    {% elif t.target_url %}
                    <a href="{{ t.target_url }}" target="_blank" class="text-decoration-none text-muted"
                       style="font-size:.85rem">{{ t.target_url[:60] }}...</a>
                    {% else %}<span class="text-muted">-</span>{% endif %}
                </div>
                <div style="font-size:.78rem" class="text-muted">
                    <i class="bi bi-clock"></i> {{ t.snatch_time }}
                    {% if t.result %}
                    <span class="ms-2 text-truncate d-inline-block" style="max-width:250px;vertical-align:bottom"
                          title="{{ t.result }}">· {{ t.result[:50] }}</span>
                    {% endif %}
                </div>
            </div>
            <div class="flex-shrink-0 d-flex gap-1">
                {% if t.status == 'pending' %}
                <button class="btn btn-success btn-sm rounded-pill" onclick="startTask({{ t.id }})"><i class="bi bi-play-fill"></i></button>
                {% elif t.id in running_ids %}
                <button class="btn btn-warning btn-sm rounded-pill" onclick="stopTask({{ t.id }})"><i class="bi bi-stop-fill"></i></button>
                {% endif %}
                <button class="btn btn-outline-danger btn-sm rounded-pill" onclick="deleteTask({{ t.id }})"><i class="bi bi-trash"></i></button>
            </div>
        </div>
    {% endfor %}
    </div>
</div>
{% endfor %}
{% endif %}

<!-- 同步购物车弹窗 -->
<div class="modal fade" id="syncCartModal" tabindex="-1">
    <div class="modal-dialog"><div class="modal-content rounded-4">
        <div class="modal-header border-0 pb-0">
            <h5 class="modal-title">同步购物车预售商品</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
            <p class="text-muted small">获取购物车中的预售商品并自动创建抢购任务</p>
            <div class="mb-3">
                <label class="form-label">选择账号</label>
                <select class="form-select rounded-3" id="syncAccountId">
                    <option value="">请选择</option>
                    {% for a in accounts %}
                    {% if a.is_logged_in %}
                    <option value="{{ a.id }}">{{ a.name }}</option>
                    {% else %}
                    <option value="{{ a.id }}" disabled>{{ a.name }}（未登录）</option>
                    {% endif %}
                    {% endfor %}
                </select>
            </div>
            <div id="syncResult" class="d-none">
                <div class="alert rounded-3" role="alert"></div>
            </div>
        </div>
        <div class="modal-footer border-0 pt-0">
            <button class="btn btn-outline-secondary btn-sm rounded-pill" data-bs-dismiss="modal">取消</button>
            <button class="btn btn-success btn-sm rounded-pill" id="syncBtn" onclick="syncCart()">
                <i class="bi bi-cart-check"></i> 同步选中
            </button>
            <button class="btn btn-primary btn-sm rounded-pill" id="syncAllBtn" onclick="syncAllCarts()">
                <i class="bi bi-arrow-repeat"></i> 同步全部
            </button>
        </div>
    </div></div>
</div>
<!-- 手动新建任务弹窗 -->
<div class="modal fade" id="addTaskModal" tabindex="-1">
    <div class="modal-dialog"><div class="modal-content rounded-4">
        <div class="modal-header border-0 pb-0">
            <h5 class="modal-title">手动新建抢购任务</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
            <form id="taskForm">
                <div class="mb-3">
                    <label class="form-label">选择账号</label>
                    <select class="form-select rounded-3" name="account_id" required>
                        <option value="">请选择</option>
                        {% for a in accounts %}
                        <option value="{{ a.id }}">{{ a.name }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">商品名称（可选）</label>
                    <input type="text" class="form-control rounded-3" name="item_name" placeholder="备注商品名">
                </div>
                <div class="mb-3">
                    <label class="form-label">商品链接</label>
                    <input type="url" class="form-control rounded-3" name="target_url" required placeholder="https://weidian.com/...">
                </div>
                <div class="mb-3">
                    <label class="form-label">抢购时间</label>
                    <input type="text" class="form-control rounded-3" name="snatch_time" required placeholder="2026-03-20 10:00:00">
                </div>
                <div class="row">
                    <div class="col-6 mb-3">
                        <label class="form-label">商品ID（可选）</label>
                        <input type="text" class="form-control rounded-3" name="item_id">
                    </div>
                    <div class="col-6 mb-3">
                        <label class="form-label">SKU ID（可选）</label>
                        <input type="text" class="form-control rounded-3" name="sku_id">
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label">价格（可选）</label>
                    <input type="text" class="form-control rounded-3" name="price">
                </div>
            </form>
        </div>
        <div class="modal-footer border-0 pt-0">
            <button class="btn btn-outline-secondary btn-sm rounded-pill" data-bs-dismiss="modal">取消</button>
            <button class="btn btn-primary btn-sm rounded-pill" onclick="addTask()">创建</button>
        </div>
    </div></div>
</div>
{% endblock %}

{% block scripts %}
<style>
.task-row { transition: background .15s; }
.task-row:hover { background: #f8f9ff; }
.countdown-box {
    width: 84px; padding: 8px 4px;
    background: linear-gradient(135deg, #f0f4ff, #e8ecf8);
    border-radius: 10px;
}
.countdown-box.cd-active { background: linear-gradient(135deg, #fff3e0, #ffe0b2); }
.countdown-box.cd-passed { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }
.countdown-box.cd-done { background: #f5f5f5; }
.cd-time { font-size: .95rem; font-weight: 700; color: #333; line-height: 1.2; }
.cd-active .cd-time { color: #e65100; }
.cd-passed .cd-time { color: #2e7d32; font-size: .82rem; }
.cd-done .cd-time { color: #999; font-size: .82rem; }
.cd-label { line-height: 1; }
.status-badge {
    display: inline-block; padding: 2px 10px; border-radius: 20px;
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
}
.status-pending { background: #e3e8f0; color: #5a6a85; }
.status-running { background: #fff3cd; color: #856404; }
.status-completed { background: #d4edda; color: #155724; }
.status-failed { background: #f8d7da; color: #721c24; }
.status-cancelled { background: #e2e3e5; color: #383d41; }
.item-name { font-size: .92rem; font-weight: 500; }
.card-header { font-size: .9rem; }
</style>
<script>
function updateCountdowns() {
    var now = new Date();
    document.querySelectorAll('.countdown-box').forEach(function(box) {
        var ts = box.dataset.snatchTime, st = box.dataset.status;
        var ct = box.querySelector('.cd-time'), cl = box.querySelector('.cd-label');
        if (['completed','cancelled'].includes(st)) {
            box.className = 'countdown-box text-center flex-shrink-0 cd-done';
            ct.textContent = st === 'completed' ? '已完成' : '已取消'; cl.textContent = ''; return;
        }
        if (st === 'failed') {
            box.className = 'countdown-box text-center flex-shrink-0 cd-done';
            ct.textContent = '失败'; cl.textContent = ''; return;
        }
        var target = new Date(ts.replace(/-/g, '/'));
        if (isNaN(target.getTime())) { ct.textContent = ts || '--'; cl.textContent = ''; return; }
        var diff = target - now;
        if (diff <= 0) {
            box.className = 'countdown-box text-center flex-shrink-0 cd-passed';
            ct.textContent = '已开售'; cl.textContent = st === 'running' ? '抢购中' : ''; return;
        }
        box.className = 'countdown-box text-center flex-shrink-0 cd-active';
        var h = Math.floor(diff/3600000), m = Math.floor((diff%3600000)/60000), s = Math.floor((diff%60000)/1000);
        if (h > 24) { var d = Math.floor(h/24); ct.textContent = d + '天' + (h%24) + '时'; }
        else { ct.textContent = pad(h)+':'+pad(m)+':'+pad(s); }
        cl.textContent = '距开售';
    });
}
function pad(n) { return n < 10 ? '0'+n : ''+n; }
updateCountdowns(); setInterval(updateCountdowns, 1000);

function syncCart() {
    var id = document.getElementById('syncAccountId').value;
    if (!id) { alert('请选择账号'); return; }
    var btn = document.getElementById('syncBtn');
    btn.disabled = true; btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> 同步中...';
    var rd = document.getElementById('syncResult'); rd.classList.add('d-none');
    fetch('/tasks/sync_cart/' + id, { method: 'POST' }).then(r=>r.json()).then(d => {
        rd.classList.remove('d-none');
        var a = rd.querySelector('.alert');
        a.className = 'alert rounded-3 ' + (d.success ? 'alert-success' : 'alert-danger');
        a.textContent = d.msg; btn.disabled = false; btn.innerHTML = '<i class="bi bi-cart-check"></i> 同步选中';
        if (d.success && d.count > 0) setTimeout(() => location.reload(), 1500);
    }).catch(() => { btn.disabled = false; btn.innerHTML = '<i class="bi bi-cart-check"></i> 同步选中'; });
}
function syncAllCarts() {
    var btn = document.getElementById('syncAllBtn');
    btn.disabled = true; btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span> 同步中...';
    var rd = document.getElementById('syncResult'); rd.classList.add('d-none');
    fetch('/tasks/sync_all', { method: 'POST' }).then(r=>r.json()).then(d => {
        rd.classList.remove('d-none');
        var a = rd.querySelector('.alert');
        a.className = 'alert rounded-3 ' + (d.success ? 'alert-success' : 'alert-danger');
        a.textContent = d.msg; btn.disabled = false; btn.innerHTML = '<i class="bi bi-arrow-repeat"></i> 同步全部';
        if (d.success && d.count > 0) setTimeout(() => location.reload(), 1500);
    }).catch(() => { btn.disabled = false; btn.innerHTML = '<i class="bi bi-arrow-repeat"></i> 同步全部'; });
}
function addTask() {
    var data = new FormData(document.getElementById('taskForm'));
    fetch('/tasks/add', { method: 'POST', body: data }).then(r=>r.json()).then(d => { if (d.success) location.reload(); else alert(d.msg); });
}
function startTask(id) { fetch('/tasks/start/'+id, { method:'POST' }).then(()=>location.reload()); }
function stopTask(id) { fetch('/tasks/stop/'+id, { method:'POST' }).then(()=>location.reload()); }
function deleteTask(id) { if (!confirm('确定删除？')) return; fetch('/tasks/delete/'+id, { method:'POST' }).then(r=>r.json()).then(d => { if (d.success) location.reload(); }); }
function startAll() { if (!confirm('启动所有账号的待执行任务？')) return; fetch('/tasks/start_all', { method:'POST' }).then(r=>r.json()).then(d => { alert(d.msg); location.reload(); }); }
function startAccount(aid) { fetch('/tasks/start_account/'+aid, { method:'POST' }).then(r=>r.json()).then(d => { alert(d.msg); location.reload(); }); }
</script>
{% endblock %}