<?php
$user_id = $_SESSION['user_id'];
$tickets = $db->fetchAll("
    SELECT * FROM tickets 
    WHERE user_id = $user_id 
    ORDER BY CASE status WHEN 'open' THEN 1 WHEN 'processing' THEN 2 ELSE 3 END, id DESC 
    LIMIT 30
");
?>

<div style="display: flex; justify-content: flex-end; margin-bottom: 16px;">
    <button class="btn btn-primary" onclick="openTicketModal()">
        <img src="https://api.iconify.design/mdi:plus.svg?color=white" width="18" height="18" alt="">
        新建工单
    </button>
</div>

<?php foreach ($tickets as $ticket): ?>
<div class="card">
    <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
        <span style="font-weight: 600;"><?php echo htmlspecialchars($ticket['title']); ?></span>
        <span style="padding: 4px 10px; border-radius: 20px; font-size: 12px;
                     <?php 
                     if ($ticket['status'] == 'open') echo 'background:#fef3c7;color:#92400e;';
                     elseif ($ticket['status'] == 'processing') echo 'background:#ede9fe;color:#6d28d9;';
                     else echo 'background:#e5e7eb;color:#4b5563;';
                     ?>">
            <?php echo $ticket['status'] == 'open' ? '待处理' : ($ticket['status'] == 'processing' ? '处理中' : '已关闭'); ?>
        </span>
    </div>
    <div style="font-size: 12px; color: #999; margin-bottom: 10px;">
        <?php echo date('Y-m-d H:i', strtotime($ticket['created_at'])); ?>
    </div>
    <a href="?page=ticket_view&id=<?php echo $ticket['id']; ?>" style="display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; background: #f5f5f5; border-radius: 8px; text-decoration: none; color: #666; font-size: 14px;">
    <img src="https://api.iconify.design/mdi:eye.svg?color=%23666" width="16" height="16" alt=""> 查看详情
</a>
</div>
<?php endforeach; ?>

<?php if (empty($tickets)): ?>
<div class="card" style="text-align: center; padding: 40px;">
    <img src="https://api.iconify.design/mdi:ticket-outline.svg?color=%23999" width="48" height="48" alt="">
    <p style="color: #999;">暂无工单</p>
</div>
<?php endif; ?>

<script>
function openTicketModal() {
    const html = `
        <div style="position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);z-index:999;padding:20px;">
            <div style="background:white;border-radius:16px;padding:20px;">
                <h3 style="margin-bottom:16px;">新建工单</h3>
                <form id="ticketForm">
                    <input name="title" placeholder="标题" required style="width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:12px;">
                    <textarea name="content" placeholder="问题描述" rows="5" required style="width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:12px;"></textarea>
                    <select name="priority" style="width:100%;padding:12px;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:12px;">
                        <option value="low">低</option>
                        <option value="medium" selected>中</option>
                        <option value="high">高</option>
                    </select>
                    <div style="display:flex;gap:8px;">
                        <button type="button" onclick="this.closest('div[style*=fixed]').remove()" style="flex:1;padding:12px;background:#f5f5f5;border:none;border-radius:8px;">取消</button>
                        <button type="submit" style="flex:1;padding:12px;background:#667eea;color:white;border:none;border-radius:8px;">提交</button>
                    </div>
                </form>
            </div>
        </div>
    `;
    document.body.insertAdjacentHTML('beforeend', html);
    document.getElementById('ticketForm').onsubmit = async (e) => {
        e.preventDefault();
        const fd = new FormData(e.target);
        const r = await fetch('/api/user_create_ticket.php', {method:'POST', body:fd});
        const d = await r.json();
        showToast(d.message);
        if (d.success) location.reload();
    };
}
</script>