<?php
/**
 * Modern Sidebar Component for User/Broker Dashboard
 * Mobile-friendly with React/Vue-like styling
 */

if (!defined('APP_RUNNING')) {
    die('Direct access not allowed');
}

$current_page = basename($_SERVER['PHP_SELF'], '.php');
$user_role = $_SESSION['role'] ?? 'user';
$username = $_SESSION['username'] ?? 'User';
$full_name = $_SESSION['full_name'] ?? $username;
$base = defined('BASE_PATH') ? BASE_PATH : '/uhakikimadalali';

// Get user type (basic/premium) and unread notifications
$sidebar_user_type = 'basic';
$sidebar_unread_count = 0;
if(isset($_SESSION['user_id']) && isset($conn)) {
    $sidebar_user_check = mysqli_query($conn, "SELECT user_type FROM users WHERE id = " . intval($_SESSION['user_id']));
    if($sidebar_user_check && $row = mysqli_fetch_assoc($sidebar_user_check)) {
        $sidebar_user_type = $row['user_type'] ?? 'basic';
    }

    // Get unread notification count
    $notif_check = mysqli_query($conn, "SELECT COUNT(*) as count FROM cbc_notifications WHERE user_id = " . intval($_SESSION['user_id']) . " AND is_read = 0");
    if($notif_check && $notif_row = mysqli_fetch_assoc($notif_check)) {
        $sidebar_unread_count = intval($notif_row['count']);
    }
}

// Define navigation items based on role
// Get pending conflict alerts count
$sidebar_conflict_count = 0;
if(isset($_SESSION['user_id']) && isset($conn)) {
    $conflict_check = @mysqli_query($conn, "
        SELECT COUNT(*) as count FROM satellite_changes sc
        JOIN lands l ON sc.land_id = l.id
        WHERE l.user_id = " . intval($_SESSION['user_id']) . "
        AND sc.status = 'detected'
        AND sc.severity IN ('high', 'critical')
    ");
    if($conflict_check && $conflict_row = mysqli_fetch_assoc($conflict_check)) {
        $sidebar_conflict_count = intval($conflict_row['count']);
    }
}

// Get pending fraud reports count for admins
$sidebar_fraud_count = 0;
if(isset($_SESSION['user_id']) && isset($conn) && in_array($user_role, ['admin', 'payment_admin', 'village_chairman', 'land_officer'])) {
    $fraud_check = @mysqli_query($conn, "SELECT COUNT(*) as count FROM land_fraud_reports WHERE status IN ('pending', 'investigating')");
    if($fraud_check && $fraud_row = mysqli_fetch_assoc($fraud_check)) {
        $sidebar_fraud_count = intval($fraud_row['count']);
    }
}

$nav_items = [
    ['url' => '/dashboard', 'page' => 'dashboard', 'icon' => 'fas fa-home', 'label' => 'Dashboard', 'roles' => ['user', 'broker', 'admin']],
    ['url' => '/lands', 'page' => 'lands', 'icon' => 'fas fa-map', 'label' => 'My Lands', 'roles' => ['user', 'admin']],
    ['url' => '/add-land', 'page' => 'add_land', 'icon' => 'fas fa-plus-circle', 'label' => 'Add New Land', 'roles' => ['user', 'admin']],
    ['url' => '/scan-location', 'page' => 'scan_location', 'icon' => 'fas fa-crosshairs', 'label' => 'Scan Location', 'roles' => ['user', 'broker', 'admin']],
    ['url' => '/neighbors-map', 'page' => 'neighbors_map', 'icon' => 'fas fa-map-marked-alt', 'label' => 'Neighbors Map', 'roles' => ['user']],
    ['url' => '/land-conflicts', 'page' => 'land_conflicts', 'icon' => 'fas fa-search-location', 'label' => 'Detect Conflicts', 'roles' => ['user'], 'badge' => $sidebar_conflict_count, 'highlight' => true],
    ['url' => '/satellite-monitoring', 'page' => 'satellite_monitoring', 'icon' => 'fas fa-satellite', 'label' => 'Satellite Monitoring', 'roles' => ['user']],
    ['url' => '/request-verification', 'page' => 'request_verification', 'icon' => 'fas fa-clipboard-check', 'label' => 'Request Verification', 'roles' => ['user']],
    ['url' => '/my-clients', 'page' => 'my_clients', 'icon' => 'fas fa-users', 'label' => 'My Clients', 'roles' => ['broker']],
    ['url' => '/user-payments', 'page' => 'user_payments', 'icon' => 'fas fa-receipt', 'label' => 'My Payments', 'roles' => ['user']],
    ['url' => '/shared-lands', 'page' => 'shared_lands', 'icon' => 'fas fa-share-alt', 'label' => 'Shared Lands', 'roles' => ['user', 'admin']],
    ['url' => '/my-transfers', 'page' => 'my_transfers', 'icon' => 'fas fa-exchange-alt', 'label' => 'Land Transfers', 'roles' => ['user', 'admin']],
    ['url' => '/fraud-reports', 'page' => 'fraud_reports', 'icon' => 'fas fa-exclamation-triangle', 'label' => 'Fraud Reports', 'roles' => ['admin', 'payment_admin', 'village_chairman', 'land_officer'], 'badge' => $sidebar_fraud_count, 'highlight' => true],
    ['url' => '/notifications', 'page' => 'notifications', 'icon' => 'fas fa-bell', 'label' => 'Notifications', 'roles' => ['user', 'broker', 'admin'], 'badge' => $sidebar_unread_count],
    ['url' => '/alerts', 'page' => 'alerts', 'icon' => 'fas fa-exclamation-circle', 'label' => 'Overlap Alerts', 'roles' => ['user', 'admin']],
    ['url' => '/profile', 'page' => 'profile', 'icon' => 'fas fa-user-cog', 'label' => 'My Profile', 'roles' => ['user', 'broker', 'admin']],
];
?>

<!-- Mobile Header -->
<header class="mobile-header">
    <button class="hamburger-btn" onclick="toggleSidebar()">
        <i class="fas fa-bars"></i>
    </button>
    <div class="mobile-logo">
        <i class="fas fa-map-marked-alt"></i>
        <span>Land Secure</span>
    </div>
    <div class="mobile-header-actions">
        <!-- Notification Bell (Facebook-style) -->
        <div class="notification-bell-container" id="notifBellContainer">
            <button class="notification-bell" onclick="toggleNotificationDropdown()">
                <i class="fas fa-bell"></i>
                <?php if($sidebar_unread_count > 0): ?>
                <span class="notification-count"><?php echo $sidebar_unread_count > 99 ? '99+' : $sidebar_unread_count; ?></span>
                <?php endif; ?>
            </button>
            <div class="notification-dropdown" id="notificationDropdown">
                <div class="notif-dropdown-header">
                    <h4>Arifa / Notifications</h4>
                    <a href="<?php echo $base; ?>/notifications">Tazama Zote</a>
                </div>
                <div class="notif-dropdown-body" id="notifDropdownBody">
                    <div class="notif-loading">
                        <i class="fas fa-spinner fa-spin"></i>
                        <span>Inapakia...</span>
                    </div>
                </div>
                <div class="notif-dropdown-footer">
                    <a href="<?php echo $base; ?>/notifications" class="btn-view-all">
                        <i class="fas fa-list"></i> Tazama Arifa Zote
                    </a>
                </div>
            </div>
        </div>
        <div class="mobile-user" onclick="toggleSidebar()">
            <div class="user-avatar-sm"><?php echo strtoupper(substr($username, 0, 1)); ?></div>
        </div>
    </div>
</header>

<!-- Sidebar Overlay -->
<div class="sidebar-overlay" onclick="toggleSidebar()"></div>

<!-- Sidebar -->
<aside class="app-sidebar" id="appSidebar">
    <div class="sidebar-header">
        <div class="logo-section">
            <div class="logo-icon">
                <i class="fas fa-map-marked-alt"></i>
            </div>
            <div class="logo-text">
                <h1>Land Secure</h1>
                <span>Management System</span>
            </div>
        </div>
        <button class="close-sidebar" onclick="toggleSidebar()">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <div class="user-profile">
        <div class="user-avatar <?php echo $sidebar_user_type == 'premium' ? 'premium' : ''; ?>">
            <?php echo strtoupper(substr($username, 0, 1)); ?>
            <?php if($sidebar_user_type == 'premium'): ?>
            <span class="premium-crown"><i class="fas fa-crown"></i></span>
            <?php endif; ?>
        </div>
        <div class="user-info">
            <h4><?php echo htmlspecialchars($full_name); ?></h4>
            <div class="user-badges">
                <span class="role-badge role-<?php echo $user_role; ?>">
                    <?php echo ucfirst($user_role); ?>
                </span>
                <?php if($sidebar_user_type == 'premium'): ?>
                <span class="type-badge premium">
                    <i class="fas fa-crown"></i> Premium
                </span>
                <?php endif; ?>
            </div>
        </div>
        <!-- Offline indicator -->
        <div class="offline-indicator" id="offlineIndicator" style="display: none;">
            <i class="fas fa-wifi-slash"></i>
            <span>Offline</span>
        </div>
    </div>

    <nav class="sidebar-nav">
        <div class="nav-section">
            <span class="nav-section-title">Main Menu</span>
            <?php foreach($nav_items as $item): ?>
                <?php if(in_array($user_role, $item['roles'])): ?>
                <a href="<?php echo $base . $item['url']; ?>"
                   class="nav-link <?php echo $current_page == $item['page'] ? 'active' : ''; ?> <?php echo isset($item['highlight']) && $item['highlight'] ? 'conflict-link' : ''; ?>">
                    <div class="nav-icon <?php echo isset($item['highlight']) && $item['highlight'] ? 'conflict' : ''; ?>">
                        <i class="<?php echo $item['icon']; ?>"></i>
                    </div>
                    <span><?php echo $item['label']; ?></span>
                    <?php if(isset($item['badge']) && $item['badge'] > 0): ?>
                    <span class="nav-badge-count"><?php echo $item['badge'] > 99 ? '99+' : $item['badge']; ?></span>
                    <?php endif; ?>
                </a>
                <?php endif; ?>
            <?php endforeach; ?>
        </div>

        <?php if($user_role === 'admin'): ?>
        <div class="nav-section">
            <span class="nav-section-title">Administration</span>
            <a href="<?php echo $base; ?>/admin" class="nav-link <?php echo strpos($current_page, 'admin') !== false ? 'active' : ''; ?>">
                <div class="nav-icon admin">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <span>Admin Panel</span>
            </a>
        </div>
        <?php endif; ?>

        <?php if($user_role == 'user' && $sidebar_user_type == 'basic'): ?>
        <div class="nav-section">
            <span class="nav-section-title">Upgrade</span>
            <a href="<?php echo $base; ?>/upgrade-premium" class="nav-link premium-link <?php echo $current_page == 'upgrade_premium' ? 'active' : ''; ?>">
                <div class="nav-icon premium">
                    <i class="fas fa-crown"></i>
                </div>
                <span>Go Premium</span>
                <span class="new-badge">NEW</span>
            </a>
        </div>
        <?php endif; ?>

        <div class="nav-section">
            <span class="nav-section-title">Support</span>
            <a href="<?php echo $base; ?>/contact" class="nav-link <?php echo $current_page == 'contact' ? 'active' : ''; ?>">
                <div class="nav-icon">
                    <i class="fas fa-envelope"></i>
                </div>
                <span>Contact Us</span>
            </a>
        </div>

        <div class="nav-section">
            <span class="nav-section-title">Account</span>
            <a href="<?php echo $base; ?>/logout" class="nav-link logout">
                <div class="nav-icon">
                    <i class="fas fa-sign-out-alt"></i>
                </div>
                <span>Logout</span>
            </a>
        </div>
    </nav>

    <!-- Sync Status -->
    <div class="sync-status" id="syncStatus">
        <div class="sync-icon synced">
            <i class="fas fa-cloud-upload-alt"></i>
        </div>
        <div class="sync-info">
            <span class="sync-label">Data Synced</span>
            <span class="sync-time" id="lastSyncTime">Just now</span>
        </div>
        <button class="sync-btn" onclick="syncData()" title="Sync Now">
            <i class="fas fa-sync-alt"></i>
        </button>
    </div>
</aside>

<style>
/* CSS Variables */
:root {
    --sidebar-width: 280px;
    --sidebar-collapsed: 0px;
    --header-height: 60px;
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --secondary-gradient: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --bg-dark: #1a1f2e;
    --bg-darker: #141825;
    --text-light: rgba(255, 255, 255, 0.9);
    --text-muted: rgba(255, 255, 255, 0.5);
    --border-color: rgba(255, 255, 255, 0.08);
}

* {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    background: #f1f5f9;
}

/* Mobile Header */
.mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    z-index: 1000;
    padding: 0 16px;
    align-items: center;
    justify-content: space-between;
}

.hamburger-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #f1f5f9;
    border-radius: 10px;
    color: #1e293b;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hamburger-btn:hover {
    background: #e2e8f0;
}

.mobile-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #1e293b;
}

.mobile-logo i {
    font-size: 24px;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mobile-header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar-sm {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 14px;
}

/* Facebook-style Notification Bell */
.notification-bell-container {
    position: relative;
}

.notification-bell {
    width: 40px;
    height: 40px;
    border: none;
    background: #f1f5f9;
    border-radius: 50%;
    color: #1e293b;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.notification-bell:hover {
    background: #e2e8f0;
}

.notification-bell .notification-count {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 11px;
    font-weight: 700;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 2px solid white;
    animation: notifPulse 2s infinite;
}

@keyframes notifPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.notification-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: 360px;
    max-width: calc(100vw - 32px);
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05);
    z-index: 2000;
    display: none;
    overflow: hidden;
}

.notification-dropdown.show {
    display: block;
    animation: dropdownSlide 0.2s ease;
}

@keyframes dropdownSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.notif-dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.notif-dropdown-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
}

.notif-dropdown-header a {
    font-size: 13px;
    color: #667eea;
    text-decoration: none;
    font-weight: 500;
}

.notif-dropdown-header a:hover {
    text-decoration: underline;
}

.notif-dropdown-body {
    max-height: 400px;
    overflow-y: auto;
}

.notif-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    color: #64748b;
}

.notif-loading i {
    font-size: 24px;
    color: #667eea;
}

.notif-item {
    display: flex;
    gap: 12px;
    padding: 14px 20px;
    transition: background 0.2s;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
}

.notif-item:hover {
    background: #f8fafc;
}

.notif-item.unread {
    background: #fef3c7;
}

.notif-item.unread:hover {
    background: #fde68a;
}

.notif-item-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

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

.notif-item-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notif-item-time {
    font-size: 11px;
    color: #64748b;
}

.notif-item-time i {
    margin-right: 4px;
}

.notif-empty {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
}

.notif-empty i {
    font-size: 40px;
    color: #cbd5e1;
    margin-bottom: 12px;
}

.notif-dropdown-footer {
    padding: 12px 20px;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

.btn-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border-radius: 10px;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-view-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    color: white;
}

/* Sidebar Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1001;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.active {
    display: block;
    opacity: 1;
}

/* Sidebar */
.app-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: var(--bg-dark);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-icon {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
}

.logo-text h1 {
    font-size: 18px;
    font-weight: 700;
    color: white;
    margin: 0;
}

.logo-text span {
    font-size: 11px;
    color: var(--text-muted);
}

.close-sidebar {
    display: none;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    cursor: pointer;
}

/* User Profile */
.user-profile {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
}

.user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--secondary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 20px;
}

.user-info h4 {
    font-size: 15px;
    font-weight: 600;
    color: white;
    margin: 0 0 4px 0;
}

.role-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.role-user {
    background: rgba(102, 126, 234, 0.2);
    color: #a5b4fc;
}

.role-broker {
    background: rgba(6, 182, 212, 0.2);
    color: #67e8f9;
}

.role-admin {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.user-badges {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
}

.type-badge.premium {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(245, 215, 122, 0.3));
    color: #f5d77a;
}

.user-avatar.premium {
    background: linear-gradient(135deg, #d4af37, #f5d77a);
    position: relative;
}

.premium-crown {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: #1a3a6e;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #d4af37;
    border: 2px solid var(--bg-dark);
}

.offline-indicator {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    font-size: 11px;
    color: #fca5a5;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Navigation */
.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 12px 0;
}

.nav-section {
    padding: 8px 16px;
}

.nav-section-title {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 12px;
    padding-left: 4px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 12px;
    color: var(--text-light);
    text-decoration: none;
    margin-bottom: 4px;
    transition: all 0.3s ease;
}

.nav-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    text-decoration: none;
}

.nav-link.active {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.nav-link.logout:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.nav-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: all 0.3s ease;
}

.nav-link.active .nav-icon {
    background: rgba(255, 255, 255, 0.2);
}

.nav-icon.admin {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.nav-badge-count {
    margin-left: auto;
    padding: 3px 8px;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    min-width: 22px;
    text-align: center;
    animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.nav-icon.premium {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.3), rgba(245, 215, 122, 0.3));
    color: #f5d77a;
}

.nav-icon.conflict {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.3), rgba(249, 115, 22, 0.3));
    color: #fb923c;
}

.nav-link.conflict-link {
    position: relative;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(249, 115, 22, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.nav-link.conflict-link:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(249, 115, 22, 0.1));
    border-color: rgba(239, 68, 68, 0.4);
}

.nav-link.conflict-link .nav-icon {
    animation: pulse-conflict 2s infinite;
}

@keyframes pulse-conflict {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}

.nav-link.premium-link {
    position: relative;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1), rgba(245, 215, 122, 0.05));
    border: 1px solid rgba(212, 175, 55, 0.2);
}

.nav-link.premium-link:hover {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.2), rgba(245, 215, 122, 0.1));
    border-color: rgba(212, 175, 55, 0.4);
}

.new-badge {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

/* Sync Status */
.sync-status {
    margin: 16px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.sync-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.sync-icon.synced {
    background: rgba(34, 197, 94, 0.2);
    color: #86efac;
}

.sync-icon.syncing {
    background: rgba(251, 191, 36, 0.2);
    color: #fde047;
    animation: spin 1s linear infinite;
}

.sync-icon.offline {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sync-info {
    flex: 1;
}

.sync-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: white;
}

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

.sync-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sync-btn:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Main Content Area */
.app-main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    padding: 24px;
    background: #f1f5f9;
}

/* Responsive */
@media (max-width: 1024px) {
    .mobile-header {
        display: flex;
    }

    .app-sidebar {
        transform: translateX(-100%);
    }

    .app-sidebar.active {
        transform: translateX(0);
    }

    .close-sidebar {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .app-main {
        margin-left: 0;
        padding-top: calc(var(--header-height) + 20px);
    }
}

@media (max-width: 768px) {
    .app-sidebar {
        width: 100%;
        max-width: 320px;
    }

    .app-main {
        padding: 16px;
        padding-top: calc(var(--header-height) + 16px);
    }
}
</style>

<script>
// Sidebar Toggle
function toggleSidebar() {
    const sidebar = document.getElementById('appSidebar');
    const overlay = document.querySelector('.sidebar-overlay');

    sidebar.classList.toggle('active');
    overlay.classList.toggle('active');
    document.body.style.overflow = sidebar.classList.contains('active') ? 'hidden' : '';
}

// Close sidebar when clicking nav link on mobile
document.querySelectorAll('.nav-link').forEach(link => {
    link.addEventListener('click', () => {
        if (window.innerWidth <= 1024) {
            toggleSidebar();
        }
    });
});

// Offline detection
function updateOnlineStatus() {
    const indicator = document.getElementById('offlineIndicator');
    const syncIcon = document.querySelector('.sync-icon');
    const syncLabel = document.querySelector('.sync-label');

    if (navigator.onLine) {
        indicator.style.display = 'none';
        syncIcon.className = 'sync-icon synced';
        syncIcon.innerHTML = '<i class="fas fa-cloud-upload-alt"></i>';
        syncLabel.textContent = 'Data Synced';
    } else {
        indicator.style.display = 'flex';
        syncIcon.className = 'sync-icon offline';
        syncIcon.innerHTML = '<i class="fas fa-cloud-slash"></i>';
        syncLabel.textContent = 'Offline Mode';
    }
}

window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);
document.addEventListener('DOMContentLoaded', updateOnlineStatus);

// Sync function
async function syncData() {
    const syncBtn = document.querySelector('.sync-btn');
    const syncIcon = document.querySelector('.sync-icon');
    const syncLabel = document.querySelector('.sync-label');
    const syncTime = document.getElementById('lastSyncTime');

    if (!navigator.onLine) {
        alert('You are offline. Data will sync when connection is restored.');
        return;
    }

    // Show syncing state
    syncBtn.disabled = true;
    syncIcon.className = 'sync-icon syncing';
    syncIcon.innerHTML = '<i class="fas fa-sync-alt"></i>';
    syncLabel.textContent = 'Syncing...';

    try {
        // Sync offline data
        if (typeof syncOfflineData === 'function') {
            await syncOfflineData();
        }

        // Update UI
        syncIcon.className = 'sync-icon synced';
        syncIcon.innerHTML = '<i class="fas fa-cloud-upload-alt"></i>';
        syncLabel.textContent = 'Data Synced';
        syncTime.textContent = 'Just now';

    } catch (error) {
        console.error('Sync failed:', error);
        syncIcon.className = 'sync-icon offline';
        syncIcon.innerHTML = '<i class="fas fa-exclamation-triangle"></i>';
        syncLabel.textContent = 'Sync Failed';
    }

    syncBtn.disabled = false;
}

// Notification Dropdown Functions
function toggleNotificationDropdown() {
    const dropdown = document.getElementById('notificationDropdown');
    const isOpen = dropdown.classList.contains('show');

    if (isOpen) {
        dropdown.classList.remove('show');
    } else {
        dropdown.classList.add('show');
        loadNotifications();
    }
}

// Close dropdown when clicking outside
document.addEventListener('click', function(e) {
    const container = document.getElementById('notifBellContainer');
    const dropdown = document.getElementById('notificationDropdown');

    if (container && dropdown && !container.contains(e.target)) {
        dropdown.classList.remove('show');
    }
});

// Load notifications via AJAX
async function loadNotifications() {
    const body = document.getElementById('notifDropdownBody');

    try {
        const response = await fetch('<?php echo $base; ?>/api/notifications.php?action=get');
        const data = await response.json();

        if (data.success && data.notifications && data.notifications.length > 0) {
            let html = '';
            data.notifications.slice(0, 5).forEach(notif => {
                const style = getNotifStyle(notif.notification_type);
                const timeAgo = formatTimeAgo(notif.created_at);
                const unreadClass = notif.is_read == 0 ? 'unread' : '';

                html += `
                    <div class="notif-item ${unreadClass}" onclick="window.location='<?php echo $base; ?>/notifications'">
                        <div class="notif-item-icon" style="background: ${style.bg}; color: ${style.color};">
                            <i class="fas ${style.icon}"></i>
                        </div>
                        <div class="notif-item-content">
                            <div class="notif-item-title">${escapeHtml(notif.title)}</div>
                            <div class="notif-item-time">
                                <i class="fas fa-clock"></i> ${timeAgo}
                            </div>
                        </div>
                    </div>
                `;
            });
            body.innerHTML = html;
        } else {
            body.innerHTML = `
                <div class="notif-empty">
                    <i class="fas fa-bell-slash"></i>
                    <p>Hakuna arifa mpya</p>
                </div>
            `;
        }
    } catch (error) {
        console.error('Error loading notifications:', error);
        body.innerHTML = `
            <div class="notif-empty">
                <i class="fas fa-exclamation-circle"></i>
                <p>Imeshindwa kupakia</p>
            </div>
        `;
    }
}

function getNotifStyle(type) {
    const styles = {
        'satellite_alert': {icon: 'fa-satellite', color: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)'},
        'neighbor_change': {icon: 'fa-map-marker-alt', color: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)'},
        'neighbor_confirmation': {icon: 'fa-user-check', color: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)'},
        'neighbor_confirmed': {icon: 'fa-check-circle', color: '#22c55e', bg: 'rgba(34, 197, 94, 0.1)'},
        'neighbor_disputed': {icon: 'fa-exclamation-triangle', color: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)'},
        'overlap_detected': {icon: 'fa-layer-group', color: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)'},
        'status_change': {icon: 'fa-sync-alt', color: '#8b5cf6', bg: 'rgba(139, 92, 246, 0.1)'},
        'new_land': {icon: 'fa-plus-circle', color: '#22c55e', bg: 'rgba(34, 197, 94, 0.1)'},
        'payment_received': {icon: 'fa-money-bill-wave', color: '#22c55e', bg: 'rgba(34, 197, 94, 0.1)'},
        'certificate_issued': {icon: 'fa-certificate', color: '#d4af37', bg: 'rgba(212, 175, 55, 0.1)'},
        'dispute_raised': {icon: 'fa-gavel', color: '#ef4444', bg: 'rgba(239, 68, 68, 0.1)'},
        'verification_request': {icon: 'fa-clipboard-check', color: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)'},
        'fraud_report': {icon: 'fa-exclamation-triangle', color: '#dc2626', bg: 'rgba(220, 38, 38, 0.1)'},
        'fraud_report_admin': {icon: 'fa-shield-alt', color: '#dc2626', bg: 'rgba(220, 38, 38, 0.1)'},
        'fraud_report_official': {icon: 'fa-user-shield', color: '#dc2626', bg: 'rgba(220, 38, 38, 0.1)'},
        'fraud_report_update': {icon: 'fa-file-alt', color: '#3b82f6', bg: 'rgba(59, 130, 246, 0.1)'},
        'fraud_investigation': {icon: 'fa-search', color: '#f59e0b', bg: 'rgba(245, 158, 11, 0.1)'}
    };
    return styles[type] || {icon: 'fa-bell', color: '#64748b', bg: 'rgba(100, 116, 139, 0.1)'};
}

function formatTimeAgo(dateStr) {
    const date = new Date(dateStr);
    const now = new Date();
    const seconds = Math.floor((now - date) / 1000);

    if (seconds < 60) return 'Sasa hivi';
    if (seconds < 3600) return Math.floor(seconds / 60) + ' dakika zilizopita';
    if (seconds < 86400) return Math.floor(seconds / 3600) + ' masaa yaliyopita';
    if (seconds < 604800) return Math.floor(seconds / 86400) + ' siku zilizopita';
    return date.toLocaleDateString('sw-TZ');
}

function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}
</script>
