<?php
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

$current_page = basename($_SERVER['PHP_SELF']);
$is_vip = isset($_SESSION['user_tier']) && $_SESSION['user_tier'] === 'VIP';
$site_url = defined('SITE_URL') ? SITE_URL : '';

function isActive($page_slug, $current) {
    return strpos($current, $page_slug) !== false;
}
?>

<div id="sidebarOverlay" class="fixed inset-0 bg-slate-950/80 backdrop-blur-sm z-40 hidden md:hidden transition-opacity" onclick="toggleSidebar()"></div>

<aside id="sidebar" class="fixed inset-y-0 left-0 z-50 w-64 bg-[#05050a] border-r-2 border-emerald-500/50 transform -translate-x-full md:translate-x-0 transition-transform duration-300 ease-in-out flex flex-col h-full shadow-[5px_0_30px_rgba(16,185,129,0.1)]">
    
    <!-- ========== LOGO AREA - SINGLE LOGO (controlled by JS) ========== -->
    <div class="logo-area pt-6 pb-4 flex flex-col items-center justify-center border-b border-slate-800/60 relative">
        <div class="logo-container w-16 h-16 md:w-20 md:h-20 flex items-center justify-center mb-1 transition-all duration-300">
            <img src="<?php echo $site_url; ?>/assets/images/tipspac trans.png" 
                 alt="tipspac" 
                 class="logo-image w-full h-full object-contain drop-shadow-[0_0_15px_rgba(16,185,129,0.2)]">
        </div>
        <!-- Brand Name & Tagline - Always visible on both -->
        <h2 class="brand-name text-lg md:text-xl font-black text-white tracking-tight"></h2>
        <span class="brand-tagline text-[9px] font-mono text-emerald-400 mt-0.5 uppercase tracking-[0.2em] font-bold"></span>
    </div>

    <div class="flex-1 overflow-y-auto py-4 px-4 space-y-6 hide-scrollbar relative">
        
        <div>
            <h3 class="text-[9px] font-black text-slate-500 uppercase tracking-[0.15em] mb-3 ml-2">Main Hub</h3>
            <ul class="space-y-1">
                <li>
                    <a href="dashboard.php" class="flex items-center space-x-3 px-4 py-3 rounded-2xl text-xs font-bold transition-all <?php echo isActive('dashboard', $current_page) ? 'bg-[#15132b] text-white border border-emerald-500/30 shadow-lg' : 'text-slate-400 hover:text-white hover:bg-slate-900/50'; ?>">
                        <svg class="w-4 h-4 <?php echo isActive('dashboard', $current_page) ? 'text-emerald-400' : 'text-slate-500'; ?>" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
                        <span>Dashboard</span>
                    </a>
                </li>
            </ul>
        </div>

        <div>
            <h3 class="text-[9px] font-black text-slate-500 uppercase tracking-[0.15em] mb-3 ml-2">Neural Terminals</h3>
            <ul class="space-y-1">
                <li>
                    <a href="bet-of-the-day-pro.php" class="flex items-center space-x-3 px-4 py-3 rounded-2xl text-xs font-bold transition-all <?php echo isActive('bet-of-the-day-pro', $current_page) ? 'bg-[#15132b] text-white border border-emerald-500/30 shadow-lg' : 'text-slate-400 hover:text-white hover:bg-slate-900/50'; ?>">
                        <svg class="w-4 h-4 <?php echo isActive('bet-of-the-day-pro', $current_page) ? 'text-emerald-400' : 'text-slate-500'; ?>" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <span>Odds Database</span>
                    </a>
                </li>
            </ul>
        </div>

        <div>
            <h3 class="text-[9px] font-black text-slate-500 uppercase tracking-[0.15em] mb-3 ml-2">Advanced Tools</h3>
            <ul class="space-y-1">
                <li>
                    <a href="bet-builder-pro.php" class="flex items-center space-x-3 px-4 py-3 rounded-2xl text-xs font-bold transition-all <?php echo isActive('bet-builder-pro', $current_page) ? 'bg-[#15132b] text-white border border-emerald-500/30 shadow-lg' : 'text-slate-400 hover:text-white hover:bg-slate-900/50'; ?>">
                        <svg class="w-4 h-4 <?php echo isActive('bet-builder-pro', $current_page) ? 'text-emerald-400' : 'text-slate-500'; ?>" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path></svg>
                        <span>AI Bet Builder</span>
                    </a>
                </li>
                <li>
                    <a href="history.php" class="flex items-center space-x-3 px-4 py-3 rounded-2xl text-xs font-bold transition-all <?php echo isActive('history', $current_page) ? 'bg-[#15132b] text-white border border-emerald-500/30 shadow-lg' : 'text-slate-400 hover:text-white hover:bg-slate-900/50'; ?>">
                        <svg class="w-4 h-4 <?php echo isActive('history', $current_page) ? 'text-emerald-400' : 'text-slate-500'; ?>" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                        <span>Performance Ledger</span>
                    </a>
                </li>
            </ul>
        </div>

        <div>
            <h3 class="text-[9px] font-black text-slate-500 uppercase tracking-[0.15em] mb-3 ml-2">Account & Ledger</h3>
            <ul class="space-y-1">
                <li>
                    <a href="billing.php" class="flex items-center space-x-3 px-4 py-3 rounded-2xl text-xs font-bold transition-all <?php echo isActive('billing', $current_page) ? 'bg-[#15132b] text-white border border-emerald-500/30 shadow-lg' : 'text-slate-400 hover:text-white hover:bg-slate-900/50'; ?>">
                        <svg class="w-4 h-4 <?php echo isActive('billing', $current_page) ? 'text-emerald-400' : 'text-slate-500'; ?>" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"></path></svg>
                        <span>Subscription</span>
                    </a>
                </li>
                <li>
                    <a href="settings.php" class="flex items-center space-x-3 px-4 py-3 rounded-2xl text-xs font-bold transition-all <?php echo isActive('settings', $current_page) ? 'bg-[#15132b] text-white border border-emerald-500/30 shadow-lg' : 'text-slate-400 hover:text-white hover:bg-slate-900/50'; ?>">
                        <svg class="w-4 h-4 <?php echo isActive('settings', $current_page) ? 'text-emerald-400' : 'text-slate-500'; ?>" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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.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><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
                        <span>Account Settings</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>

    <div class="p-4 border-t border-slate-800/60 bg-slate-950/30">
        <div class="flex items-center space-x-3">
            <div class="w-8 h-8 rounded-full bg-emerald-600 flex items-center justify-center text-white font-bold text-xs shadow-lg shadow-emerald-500/30">
                <?php echo isset($_SESSION['user_name']) ? substr($_SESSION['user_name'], 0, 1) : 'U'; ?>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-xs font-bold text-white truncate"><?php echo isset($_SESSION['user_name']) ? htmlspecialchars($_SESSION['user_name']) : 'User'; ?></p>
                <p class="text-[9px] text-slate-400 uppercase tracking-widest truncate"><?php echo $is_vip ? 'VIP Member' : 'Free Basic'; ?></p>
            </div>
            <a href="logout.php" class="text-slate-500 hover:text-rose-400 transition" title="Logout">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><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"></path></svg>
            </a>
        </div>
    </div>
    
    <!-- Mobile close button -->
    <button onclick="toggleSidebar()" class="md:hidden absolute bottom-20 right-4 w-12 h-12 bg-emerald-600 rounded-full flex items-center justify-center text-white shadow-[0_0_20px_rgba(16,185,129,0.5)] z-50 focus:outline-none">
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path></svg>
    </button>
</aside>

<style>
    .hide-scrollbar::-webkit-scrollbar { display: none; }
    .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

    /* Smooth sidebar transitions */
    #sidebar {
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    #sidebar.translate-x-0 {
        transform: translateX(0);
    }
    #sidebar.-translate-x-full {
        transform: translateX(-100%);
    }

    /* Logo container transitions */
    .logo-container {
        transition: width 0.3s ease, height 0.3s ease;
    }
    
    /* Mobile specific styles (applied by JS) */
    .mobile-logo .logo-container {
        width: 4rem !important;  /* 16 */
        height: 4rem !important; /* 16 */
    }
    .mobile-logo .brand-name {
        font-size: 1.125rem !important; /* text-lg */
    }
    .mobile-logo .brand-tagline {
        font-size: 0.7rem !important;
    }

    .desktop-logo .logo-container {
        width: 5rem !important;  /* 20 */
        height: 5rem !important; /* 20 */
    }
    .desktop-logo .brand-name {
        font-size: 1.25rem !important; /* text-xl */
    }
    .desktop-logo .brand-tagline {
        font-size: 0.75rem !important; /* text-[9px] */
    }

    @media (min-width: 768px) {
        #sidebar {
            transform: translateX(0) !important;
        }
        .mobile-close-btn {
            display: none !important;
        }
    }
</style>

<script>
    // ============================================================
    // SINGLE LOGO + SIDEBAR CONTROLLER
    // ============================================================
    (function() {
        'use strict';

        const sidebar = document.getElementById('sidebar');
        const overlay = document.getElementById('sidebarOverlay');
        const logoArea = document.querySelector('.logo-area');

        // ============================================================
        // 1. APPLY LOGO SIZE BASED ON SCREEN
        // ============================================================
        function updateLogoSize() {
            const isMobile = window.innerWidth < 768;
            
            // Remove both classes first
            logoArea.classList.remove('mobile-logo', 'desktop-logo');
            
            // Add the appropriate class
            if (isMobile) {
                logoArea.classList.add('mobile-logo');
            } else {
                logoArea.classList.add('desktop-logo');
            }
        }

        // ============================================================
        // 2. TOGGLE SIDEBAR (mobile only)
        // ============================================================
        window.toggleSidebar = function() {
            if (window.innerWidth >= 768) {
                // On desktop, sidebar is always visible
                return;
            }
            
            sidebar.classList.toggle('-translate-x-full');
            sidebar.classList.toggle('translate-x-0');
            if (overlay) {
                overlay.classList.toggle('hidden');
            }
        };

        // ============================================================
        // 3. CLOSE SIDEBAR (mobile only)
        // ============================================================
        function closeSidebar() {
            if (window.innerWidth < 768) {
                sidebar.classList.add('-translate-x-full');
                sidebar.classList.remove('translate-x-0');
                if (overlay) {
                    overlay.classList.add('hidden');
                }
            }
        }

        // ============================================================
        // 4. EVENT LISTENERS
        // ============================================================
        // Close sidebar when clicking overlay
        if (overlay) {
            overlay.addEventListener('click', closeSidebar);
        }

        // Update logo size on resize
        window.addEventListener('resize', function() {
            updateLogoSize();
            // On desktop, ensure sidebar is visible
            if (window.innerWidth >= 768) {
                sidebar.classList.add('translate-x-0');
                sidebar.classList.remove('-translate-x-full');
                if (overlay) {
                    overlay.classList.add('hidden');
                }
            }
        });

        // Close sidebar when pressing Escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape') {
                closeSidebar();
            }
        });

        // ============================================================
        // 5. INITIALIZE
        // ============================================================
        updateLogoSize();

        // On desktop, ensure sidebar is visible
        if (window.innerWidth >= 768) {
            sidebar.classList.add('translate-x-0');
            sidebar.classList.remove('-translate-x-full');
            if (overlay) {
                overlay.classList.add('hidden');
            }
        }

        console.log('✅ Sidebar initialized with single logo controlled by JS');
    })();
</script>