<?php
// 1. Initialize variables with safe defaults
$displayName = "User";
$userCoins = 0;
$profilePic = "";

if (isset($_SESSION['user_id']) && isset($pdo)) {
    try {
        // 2. Fetch User and Wallet data using a LEFT JOIN
        // This ensures that even if a wallet row is missing, the user info still loads
        $stmt = $pdo->prepare("
            SELECT u.username, u.profile_pic, IFNULL(w.coins, 0) as coins 
            FROM users u 
            LEFT JOIN wallets w ON u.id = w.user_id 
            WHERE u.id = ? 
            LIMIT 1
        ");
        $stmt->execute([$_SESSION['user_id']]);
        $userData = $stmt->fetch();

        if ($userData) {
            $displayName = $userData['username'];
            $userCoins = $userData['coins'];
            $profilePic = $userData['profile_pic'];
        }
    } catch (PDOException $e) {
        // If there's an error, we keep the defaults to prevent a 500 crash
        // error_log("Topbar DB Error: " . $e->getMessage()); 
    }
}

// 3. Logic for the Profile Image
$avatarSource = !empty($profilePic) ? $profilePic : "https://ui-avatars.com/api/?name=" . urlencode($displayName) . "&background=D91A2A&color=fff";
?>

<style>
    .app-topbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 20px;
        background: rgba(11, 11, 11, 0.8);
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-bottom: 1px solid var(--glass-border);
        position: sticky;
        top: 0;
        z-index: 99;
    }

    /* Left: Desktop Search */
    .tb-left { flex: 1; display: flex; align-items: center; }
    .tb-search {
        background: var(--glass);
        border: 1px solid var(--glass-border);
        padding: 8px 15px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        gap: 10px;
        width: 260px;
    }
    .tb-search input {
        background: none; border: none; color: white; outline: none; font-size: 0.85rem; width: 100%;
    }

    /* Right: Actions */
    .tb-right { display: flex; align-items: center; gap: 15px; }

    .coin-badge {
        background: rgba(217, 26, 42, 0.15);
        border: 1px solid rgba(217, 26, 42, 0.3);
        padding: 5px 12px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
    }
    .coin-badge span { color: #FFD700; font-weight: 800; font-size: 0.85rem; }

    .notif-icon { color: var(--text-muted); font-size: 1.1rem; cursor: pointer; position: relative; }
    .notif-dot { 
        position: absolute; top: -2px; right: -2px; width: 7px; height: 7px; 
        background: var(--primary-red); border-radius: 50%; border: 1.5px solid var(--black);
    }

    .user-pill { display: flex; align-items: center; gap: 10px; text-decoration: none; color: white; }
    .user-pill img { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--primary-red); object-fit: cover; }
    .user-pill span { font-weight: 600; font-size: 0.85rem; }

    /* Brand Center (Mobile Only) */
    .tb-center { display: none; font-weight: 900; font-size: 1.2rem; letter-spacing: -1px; }
    .tb-center span { color: var(--primary-red); }

    @media (max-width: 992px) {
        .tb-left, .user-pill span { display: none; }
        .tb-center { display: block; }
        .app-topbar { padding: 10px 15px; }
    }
</style>

<header class="app-topbar">
    <div class="tb-left">
        <div class="tb-search">
            <i class="fa-solid fa-magnifying-glass" style="color: #555;"></i>
            <input type="text" placeholder="Search ID...">
        </div>
    </div>

    <div class="tb-center">ECHO<span>LIVE</span></div>

    <div class="tb-right">
        <div class="coin-badge" onclick="window.location.href='wallet.php'">
            <i class="fa-solid fa-coins" style="color: #FFD700;"></i>
            <span><?= number_format($userCoins) ?></span>
        </div>

        <div class="notif-icon">
            <i class="fa-solid fa-bell"></i>
            <div class="notif-dot"></div>
        </div>

        <a href="profile.php" class="user-pill">
            <span><?= htmlspecialchars($displayName) ?></span>
            <img src="<?= $avatarSource ?>" alt="Avatar">
        </a>
    </div>
</header>