<?php
/**
 * Reusable Store Owner Navigation Menu
 * 
 * Usage: 
 *   require_once 'includes/store_nav.php';
 *   renderStoreNav($store, $currentPage);
 * 
 * @param array $store - Store data array (must include 'store_name' and 'store_slug')
 * @param string $currentPage - Current page identifier (e.g., 'dashboard', 'pricing', 'orders')
 */

if (!function_exists('renderStoreNav')) {
    function renderStoreNav($store, $currentPage = '') {
        // Build store URL
        $baseUrl = (isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] === 'on' ? "https" : "http") . "://" . $_SERVER['HTTP_HOST'];
        $storeUrl = $baseUrl . "/store.php?slug=" . urlencode($store['store_slug'] ?? '');
        
        // Define all menu items
        $menuItems = [
            [
                'id' => 'dashboard',
                'url' => 'store_dashboard.php',
                'icon' => 'fa-chart-line',
                'label' => 'Dashboard',
                'desktop_label' => 'Dashboard'
            ],
            [
                'id' => 'pricing',
                'url' => 'store_pricing.php',
                'icon' => 'fa-tag',
                'label' => 'Agent Pricing',
                'desktop_label' => 'Pricing'
            ],
            [
                'id' => 'customer_pricing',
                'url' => 'store_customer_pricing.php',
                'icon' => 'fa-users',
                'label' => 'Customer Pricing',
                'desktop_label' => 'Customer Pricing'
            ],
            [
                'id' => 'orders',
                'url' => 'store_orders.php',
                'icon' => 'fa-shopping-cart',
                'label' => 'Orders',
                'desktop_label' => 'Orders'
            ],
            [
                'id' => 'customization',
                'url' => 'store_customization.php',
                'icon' => 'fa-palette',
                'label' => 'Customize',
                'desktop_label' => 'Customize'
            ],
            [
                'id' => 'paystack',
                'url' => 'store_paystack_settings.php',
                'icon' => 'fa-credit-card',
                'label' => 'Paystack',
                'desktop_label' => 'Paystack'
            ],
            [
                'id' => 'history',
                'url' => '../user_index.php?page=balance_history',
                'icon' => 'fa-history',
                'label' => 'Balance History',
                'desktop_label' => 'History'
            ],
            [
                'id' => 'password',
                'url' => 'store_change_password.php',
                'icon' => 'fa-key',
                'label' => 'Change Password',
                'desktop_label' => 'Password'
            ],
            [
                'id' => 'view_store',
                'url' => $storeUrl,
                'icon' => 'fa-external-link-alt',
                'label' => 'View Store',
                'desktop_label' => 'View',
                'target' => '_blank',
                'external' => true
            ]
        ];
        
        // Helper function to check if menu item is active
        $isActive = function($itemId) use ($currentPage) {
            return $currentPage === $itemId;
        };
        
        // Helper function to get menu item classes
        $getMenuItemClasses = function($itemId, $isMobile = false) use ($isActive) {
            $baseClasses = $isMobile 
                ? 'px-3 py-2 rounded-lg text-sm btn-touch'
                : 'px-2 py-1.5 rounded-lg text-sm btn-touch';
            
            if ($isActive($itemId)) {
                return $baseClasses . ' text-white bg-gray-700';
            } else {
                return $baseClasses . ' text-gray-300 hover:text-white hover:bg-gray-700';
            }
        };
        ?>
        <!-- Navigation -->
        <nav class="bg-gray-800 border-b border-gray-700 sticky top-0 z-40">
            <div class="container mx-auto px-3 sm:px-4">
                <div class="flex items-center justify-between py-3">
                    <div class="flex items-center gap-2 sm:gap-4 flex-1 min-w-0">
                        <div class="flex items-center gap-2 min-w-0">
                            <div class="w-9 h-9 sm:w-10 sm:h-10 bg-blue-600 rounded-lg flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-store text-white text-sm sm:text-base"></i>
                            </div>
                            <div class="min-w-0">
                                <h1 class="text-sm sm:text-lg font-bold text-white truncate">My Store</h1>
                                <p class="text-xs text-gray-400 truncate"><?php echo htmlspecialchars($store['store_name'] ?? 'Store'); ?></p>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Mobile Menu Button -->
                    <button id="mobileMenuBtn" class="md:hidden text-gray-300 hover:text-white p-2 btn-touch">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                    
                    <!-- Desktop Navigation -->
                    <div class="hidden md:flex items-center gap-2">
                        <?php foreach ($menuItems as $item): ?>
                            <?php if ($item['id'] === 'view_store'): ?>
                                <a href="<?php echo htmlspecialchars($item['url']); ?>" 
                                   <?php echo isset($item['target']) ? 'target="' . htmlspecialchars($item['target']) . '"' : ''; ?>
                                   class="<?php echo $getMenuItemClasses($item['id']); ?>">
                                    <i class="fas <?php echo $item['icon']; ?> mr-1"></i> <?php echo htmlspecialchars($item['desktop_label']); ?>
                                </a>
                            <?php else: ?>
                                <a href="<?php echo htmlspecialchars($item['url']); ?>" 
                                   class="<?php echo $getMenuItemClasses($item['id']); ?>">
                                    <i class="fas <?php echo $item['icon']; ?> mr-1"></i> <?php echo htmlspecialchars($item['desktop_label']); ?>
                                </a>
                            <?php endif; ?>
                        <?php endforeach; ?>
                        
                        <!-- Logout Button -->
                        <a href="../logout.php" class="text-gray-400 hover:text-red-400 px-2 py-1.5 btn-touch">
                            <i class="fas fa-sign-out-alt"></i>
                        </a>
                    </div>
                </div>
                
                <!-- Mobile Menu -->
                <div id="mobileMenu" class="hidden md:hidden border-t border-gray-700 pb-2">
                    <div class="flex flex-col gap-1 pt-2">
                        <?php foreach ($menuItems as $item): ?>
                            <?php if ($item['id'] === 'view_store'): ?>
                                <a href="<?php echo htmlspecialchars($item['url']); ?>" 
                                   <?php echo isset($item['target']) ? 'target="' . htmlspecialchars($item['target']) . '"' : ''; ?>
                                   class="<?php echo $getMenuItemClasses($item['id'], true); ?>">
                                    <i class="fas <?php echo $item['icon']; ?> mr-2"></i> <?php echo htmlspecialchars($item['label']); ?>
                                </a>
                            <?php else: ?>
                                <a href="<?php echo htmlspecialchars($item['url']); ?>" 
                                   class="<?php echo $getMenuItemClasses($item['id'], true); ?>">
                                    <i class="fas <?php echo $item['icon']; ?> mr-2"></i> <?php echo htmlspecialchars($item['label']); ?>
                                </a>
                            <?php endif; ?>
                        <?php endforeach; ?>
                        
                        <!-- Logout Button -->
                        <a href="../logout.php" class="text-red-400 hover:text-red-300 px-3 py-2 rounded-lg hover:bg-gray-700 text-sm btn-touch">
                            <i class="fas fa-sign-out-alt mr-2"></i> Logout
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <script>
            // Mobile menu toggle
            document.addEventListener('DOMContentLoaded', function() {
                const mobileMenuBtn = document.getElementById('mobileMenuBtn');
                const mobileMenu = document.getElementById('mobileMenu');
                
                if (mobileMenuBtn && mobileMenu) {
                    mobileMenuBtn.addEventListener('click', function() {
                        mobileMenu.classList.toggle('hidden');
                    });
                    
                    // Close mobile menu when clicking outside
                    document.addEventListener('click', function(e) {
                        if (!mobileMenu.contains(e.target) && !mobileMenuBtn.contains(e.target)) {
                            mobileMenu.classList.add('hidden');
                        }
                    });
                }
            });
        </script>
        <?php
    }
}
?>

