<?php
if (!isset($notifCount)) {
    $notifCount = getNotificationCount($_SESSION['user_id'] ?? 0);
}
if (!isset($notifications)) {
    $notifications = getUnreadNotifications($_SESSION['user_id'] ?? 0);
}
?>
<div class="header">
    <div class="header-left">
        <button class="header-toggle" onclick="toggleSidebar()">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
        </button>
        <h1 class="header-title">
            <?php 
            $pageTitles = [
                'dashboard' => 'Dashboard',
                'transfer' => 'Transfer Funds',
                'transactions' => 'Transaction History',
                'crypto-deposit' => 'Crypto Deposit',
                'cards' => 'My Cards',
                'investments' => 'Investments',
                'loans' => 'Loans & Credit',
                'kyc' => 'KYC Verification',
                'support' => 'Support Center',
                'ticket' => 'Ticket Details',
                'profile' => 'My Profile',
                'settings' => 'Account Settings',
            ];
            $currentPage = basename($_SERVER['PHP_SELF'], '.php');
            echo $pageTitles[$currentPage] ?? 'Dashboard';
            ?>
        </h1>
    </div>
    
    <div class="header-right">
        <div style="position: relative;">
            <button class="header-icon-btn" onclick="document.getElementById('notifDropdown').classList.toggle('hidden');">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>
                <?php if ($notifCount > 0): ?>
                    <span class="badge"><?php echo $notifCount; ?></span>
                <?php endif; ?>
            </button>
            
            <div id="notifDropdown" class="hidden" style="position: absolute; top: 50px; right: 0; background: white; border-radius: var(--border-radius); box-shadow: var(--shadow-xl); min-width: 320px; max-height: 400px; overflow-y: auto; z-index: 200; border: 1px solid var(--gray-200);">
                <div style="padding: 12px 16px; border-bottom: 1px solid var(--gray-200); display: flex; justify-content: space-between; align-items: center;">
                    <span style="font-weight: 700; font-size: 14px;">Notifications</span>
                    <a href="notifications.php" style="font-size: 12px; color: var(--primary); font-weight: 600;">View All</a>
                </div>
                <?php if (count($notifications) > 0): ?>
                    <?php foreach ($notifications as $notif): ?>
                        <div style="padding: 12px 16px; border-bottom: 1px solid var(--gray-100); cursor: pointer; transition: var(--transition);" onmouseover="this.style.background='var(--gray-50)'" onmouseout="this.style.background=''">
                            <div style="display: flex; gap: 10px;">
                                <div style="width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-top: 5px; flex-shrink: 0;"></div>
                                <div>
                                    <div style="font-size: 13px; font-weight: 600; margin-bottom: 2px;"><?php echo e($notif['title']); ?></div>
                                    <div style="font-size: 12px; color: var(--gray);"><?php echo e(substr($notif['message'], 0, 60)); ?>...</div>
                                    <div style="font-size: 11px; color: var(--gray-light); margin-top: 4px;"><?php echo formatDateShort($notif['created_at']); ?></div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php else: ?>
                    <div style="padding: 24px; text-align: center; color: var(--gray);">
                        <div style="font-size: 24px; margin-bottom: 8px;">📭</div>
                        <div style="font-size: 13px;">No new notifications</div>
                    </div>
                <?php endif; ?>
            </div>
        </div>
        
        <div class="header-user" onclick="document.getElementById('userDropdown').classList.toggle('hidden');" style="position: relative;">
            <div class="header-user-avatar"><?php echo strtoupper(substr($user['first_name'], 0, 1) . substr($user['last_name'], 0, 1)); ?></div>
            <div class="header-user-info">
                <div class="header-user-name"><?php echo e($user['first_name'] . ' ' . $user['last_name']); ?></div>
                <div class="header-user-role"><?php echo ucfirst(e($user['account_type'])); ?></div>
            </div>
            
            <div id="userDropdown" class="hidden" style="position: absolute; top: 50px; right: 0; background: white; border-radius: var(--border-radius); box-shadow: var(--shadow-xl); min-width: 200px; z-index: 200; border: 1px solid var(--gray-200);">
                <a href="profile.php" style="display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--gray-100); transition: var(--transition);" onmouseover="this.style.background='var(--gray-50)'" onmouseout="this.style.background=''">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /></svg>
                    My Profile
                </a>
                <a href="settings.php" style="display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; border-bottom: 1px solid var(--gray-100); transition: var(--transition);" onmouseover="this.style.background='var(--gray-50)'" onmouseout="this.style.background=''">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
                    Settings
                </a>
                <a href="logout.php" style="display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: 14px; color: var(--danger); transition: var(--transition);" onmouseover="this.style.background='var(--danger-light)'" onmouseout="this.style.background=''">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" /></svg>
                    Logout
                </a>
            </div>
        </div>
    </div>
</div>

<script>
// Close dropdowns when clicking outside
document.addEventListener('click', function(e) {
    if (!e.target.closest('.header-icon-btn') && !e.target.closest('#notifDropdown')) {
        document.getElementById('notifDropdown').classList.add('hidden');
    }
    if (!e.target.closest('.header-user')) {
        document.getElementById('userDropdown').classList.add('hidden');
    }
});
</script>
