<?php
require_once '../config/db.php';
require_once '../config/auth.php';
require_once '../config/functions.php';
requireLogin();

$page_title = 'My Dashboard';
$uid = $_SESSION['user_id'];

$my_lost = $conn->query("SELECT COUNT(*) c FROM lost_items WHERE user_id=$uid")->fetch_assoc()['c'];
$my_found = $conn->query("SELECT COUNT(*) c FROM found_items WHERE user_id=$uid")->fetch_assoc()['c'];
$my_returned = $conn->query("SELECT COUNT(*) c FROM lost_items WHERE user_id=$uid AND status='returned'")->fetch_assoc()['c'];
$my_matches = $conn->query("SELECT COUNT(*) c FROM matches m JOIN lost_items l ON m.lost_item_id=l.id WHERE l.user_id=$uid AND m.match_status='approved'")->fetch_assoc()['c'];

// Recovery rate
$user_recovery_rate = $my_lost > 0 ? round(($my_returned / $my_lost) * 100, 1) : 0;

$recent_lost = $conn->query("SELECT * FROM lost_items WHERE user_id=$uid ORDER BY created_at DESC LIMIT 5");
$recent_found = $conn->query("SELECT * FROM found_items WHERE user_id=$uid ORDER BY created_at DESC LIMIT 5");
$recent_notifs = $conn->query("SELECT * FROM notifications WHERE user_id=$uid ORDER BY created_at DESC LIMIT 5");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= $page_title ?> - RELINK</title>
<link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/style.css">
<style>
/* ═════════════════════════════════════════════════════════ */
/* 🎨 USER DASHBOARD - ENHANCED STYLES */
/* ═════════════════════════════════════════════════════════ */

.page-content { padding: 24px 28px; background: var(--bg-primary); }

/* STAT CARDS */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 28px;
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.stat-card {
    background: var(--white);
    border-radius: 14px;
    padding: 20px 18px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    border-color: currentColor;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    border-radius: 14px 0 0 14px;
    opacity: 0.8;
}

.stat-card::after {
    content: '';
    position: absolute;
    bottom: -25px; right: -25px;
    width: 80px; height: 80px;
    border-radius: 50%;
    opacity: 0.04;
    transition: all 0.3s ease;
}

.stat-card:hover::after { bottom: -15px; right: -15px; opacity: 0.08; }

.stat-card.blue::before { background: #3b82f6; }
.stat-card.blue::after { background: #3b82f6; }
.stat-card.green::before { background: #10b981; }
.stat-card.green::after { background: #10b981; }
.stat-card.yellow::before { background: #f59e0b; }
.stat-card.yellow::after { background: #f59e0b; }
.stat-card.purple::before { background: #8b5cf6; }
.stat-card.purple::after { background: #8b5cf6; }

.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.stat-icon.blue { background: #dbeafe; }
.stat-icon.green { background: #d1fae5; }
.stat-icon.yellow { background: #fef3c7; }
.stat-icon.purple { background: #ede9fe; }

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.value {
    font-size: 28px;
    font-weight: 900;
    color: var(--text);
    line-height: 1;
    letter-spacing: -1px;
    font-variant-numeric: tabular-nums;
}

.label {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Insight boxes */
.insight-box {
    background: linear-gradient(135deg, var(--white), var(--bg-secondary));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: all .3s ease;
}
.insight-box:hover { box-shadow: 0 8px 16px rgba(0,0,0,.06); transform: translateY(-3px); }
.insight-badge { display:inline-block; font-size:10px; font-weight:800; padding:4px 10px; border-radius:20px; margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px; }
.insight-value { font-size:22px; font-weight:900; color:var(--text); margin:6px 0; }
.insight-desc { font-size:11px; color:var(--text-muted); line-height:1.4; }
body.dark-mode .insight-box { background: linear-gradient(135deg, #1e293b, #0f172a); }

/* Action Buttons */
.action-buttons {
    display: flex;
    gap: 12px;
    margin-bottom: 28px;
    flex-wrap: wrap;
    animation: fadeInUp 0.6s ease-out 0.1s both;
}

.action-btn {
    flex: 1;
    min-width: 160px;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    border: none;
}

.action-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

/* Cards */
.card {
    background: var(--white);
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    animation: fadeInUp 0.6s ease-out forwards;
}

.card:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
}

.card-header {
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--white) 0%, var(--bg-secondary) 100%);
}

.card-header h3 {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.card-body {
    padding: 24px;
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.table-wrapper table tbody tr:hover {
    background: var(--bg-secondary);
    transition: background 0.2s ease;
}

.table-wrapper table td {
    padding: 12px 14px;
}

.table-wrapper table th {
    padding: 12px 14px;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
}

/* Notifications */
.notif-item {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.notif-item:hover {
    background: var(--bg-secondary);
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item.unread {
    background: linear-gradient(135deg, var(--primary-light), rgba(59, 130, 246, 0.04));
}

.notif-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.notif-content {
    flex: 1;
    min-width: 0;
}

.msg {
    font-size: 13px;
    color: var(--text);
    line-height: 1.4;
}

.time {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Dark mode */
body.dark-mode .card-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

/* Responsive */
@media(max-width: 1100px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media(max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .grid-2 { grid-template-columns: 1fr; }
    .action-buttons { margin-bottom: 20px; }
    .page-content { padding: 16px; }
}

@media(max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .action-btn { min-width: auto; }
    .value { font-size: 24px; }
}
</style>
</head>
<body>
<div class="layout">
    <?php include '../includes/user_sidebar.php'; ?>
    <div class="main-content">
        <?php include '../includes/topbar.php'; ?>
        <div class="page-content">
            <div class="stats-grid">
                <div class="stat-card blue"><div class="stat-icon blue">🔍</div><div class="stat-info"><div class="value counter" data-target="<?= $my_lost ?>">0</div><div class="label">My Lost Reports</div></div></div>
                <div class="stat-card green"><div class="stat-icon green">📦</div><div class="stat-info"><div class="value counter" data-target="<?= $my_found ?>">0</div><div class="label">My Found Reports</div></div></div>
                <div class="stat-card yellow"><div class="stat-icon yellow">✅</div><div class="stat-info"><div class="value counter" data-target="<?= $my_returned ?>">0</div><div class="label">Items Returned</div></div></div>
                <div class="stat-card purple"><div class="stat-icon purple">🤝</div><div class="stat-info"><div class="value counter" data-target="<?= $my_matches ?>">0</div><div class="label">Approved Matches</div></div></div>
            </div>

            <!-- QUICK INSIGHTS -->
            <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px;animation:fadeInUp .7s ease-out .1s both">
                <div class="insight-box">
                    <span class="insight-badge" style="background:#10b98133;color:#10b981">📊 Recovery Rate</span>
                    <div class="insight-value"><?= $user_recovery_rate ?>%</div>
                    <div class="insight-desc">Of your lost items have been recovered</div>
                </div>
                <div class="insight-box">
                    <span class="insight-badge" style="background:#3b82f633;color:#3b82f6">📋 Total Reports</span>
                    <div class="insight-value"><?= $my_lost + $my_found ?></div>
                    <div class="insight-desc"><?= $my_lost ?> lost · <?= $my_found ?> found submitted</div>
                </div>
                <div class="insight-box">
                    <span class="insight-badge" style="background:#8b5cf633;color:#8b5cf6">🤝 Matches</span>
                    <div class="insight-value"><?= $my_matches ?></div>
                    <div class="insight-desc">Approved matches on your reports</div>
                </div>
            </div>

            <div style="display:flex;gap:12px;margin-bottom:24px;flex-wrap:wrap">
                <a href="<?= BASE_URL ?>/user/report_lost.php" class="btn btn-primary">🔍 Report Lost Item</a>
                <a href="<?= BASE_URL ?>/user/report_found.php" class="btn btn-success">📦 Report Found Item</a>
                <a href="<?= BASE_URL ?>/public/browse.php" class="btn btn-outline">🌐 Browse Items</a>
            </div>

            <div class="grid-2 mb-24">
                <div class="card">
                    <div class="card-header"><h3>🔍 My Recent Lost Reports</h3><a href="<?= BASE_URL ?>/user/my_reports.php" class="btn btn-sm btn-outline">View All</a></div>
                    <div class="table-wrapper">
                        <table>
                            <thead><tr><th>Item</th><th>Category</th><th>Status</th><th>Date</th></tr></thead>
                            <tbody>
                            <?php while($r=$recent_lost->fetch_assoc()): ?>
                            <tr>
                                <td><?= htmlspecialchars($r['item_name']) ?></td>
                                <td><?= htmlspecialchars($r['category']) ?></td>
                                <td><span class="badge badge-<?= $r['status'] ?>"><?= $r['status'] ?></span></td>
                                <td><?= date('M d', strtotime($r['created_at'])) ?></td>
                            </tr>
                            <?php endwhile; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="card">
                    <div class="card-header"><h3>📦 My Recent Found Reports</h3><a href="<?= BASE_URL ?>/user/my_reports.php?tab=found" class="btn btn-sm btn-outline">View All</a></div>
                    <div class="table-wrapper">
                        <table>
                            <thead><tr><th>Item</th><th>Category</th><th>Status</th><th>Date</th></tr></thead>
                            <tbody>
                            <?php while($r=$recent_found->fetch_assoc()): ?>
                            <tr>
                                <td><?= htmlspecialchars($r['item_name']) ?></td>
                                <td><?= htmlspecialchars($r['category']) ?></td>
                                <td><span class="badge badge-<?= $r['status'] ?>"><?= $r['status'] ?></span></td>
                                <td><?= date('M d', strtotime($r['created_at'])) ?></td>
                            </tr>
                            <?php endwhile; ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="card">
                <div class="card-header"><h3>🔔 Recent Notifications</h3><a href="<?= BASE_URL ?>/user/notifications.php" class="btn btn-sm btn-outline">View All</a></div>
                <?php if($recent_notifs->num_rows === 0): ?>
                <p class="text-center text-muted" style="padding:24px">No notifications yet.</p>
                <?php endif; ?>
                <?php while($n=$recent_notifs->fetch_assoc()): ?>
                <div class="notif-item <?= $n['status'] ?>">
                    <div class="notif-icon"><?= $n['notification_type']==='match'?'🤝':($n['notification_type']==='approved'?'✅':'🔔') ?></div>
                    <div class="notif-content">
                        <div class="msg"><?= htmlspecialchars($n['message']) ?></div>
                        <div class="time"><?= date('M d, Y H:i', strtotime($n['created_at'])) ?></div>
                    </div>
                </div>
                <?php endwhile; ?>
            </div>
        </div>
    </div>
</div>
<script src="<?= BASE_URL ?>/assets/js/main.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
    setTimeout(() => {
        document.querySelectorAll('.counter').forEach(counter => {
            const target = parseInt(counter.getAttribute('data-target'));
            const increment = target / 40;
            let current = 0;
            const timer = setInterval(() => {
                current += increment;
                if (current >= target) {
                    counter.textContent = target.toLocaleString();
                    clearInterval(timer);
                } else {
                    counter.textContent = Math.floor(current).toLocaleString();
                }
            }, 15);
        });
    }, 300);
});
</script>
</html>
