{{--
    Topbar-Only Navigation Component
    This component renders a top navbar with hamburger menu (no sidebar).
    Used for Kaiali and Mega sites.
    
    Parameters:
    - navItems: Array of navigation items to display
    - isGuest: Boolean indicating if user is a guest
--}}

@props([
    'navItems',
    'unreadCount' => 0,
    'currentLevelIcon' => null,
    'currentLevelName' => null,
    'currentLevelColor' => null,
    'currentLevelKey' => null,
    'isGuest' => false,
])

{{-- Top Navbar --}}
<nav class="navbar navbar-expand fixed-top px-3 topbar-only-nav" id="mainNav" aria-label="Main navigation">
    {{-- Hamburger Menu Button --}}
    <button class="hamburger-toggle" id="hamburgerToggle" aria-controls="slideMenu" aria-expanded="false" aria-label="Toggle menu">
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
        <span class="hamburger-line"></span>
    </button>

    <a class="navbar-logo" href="{{ route('index') }}" title="{{ $siteConfig['name'] ?? 'Store' }}">
        <img src="{{ url($siteConfig['branding']['logo_path'] ?? 'assest/front2/img/logo.png') }}" alt="{{ $siteConfig['name'] ?? 'Store' }} Logo">
    </a>

    @if ($isGuest)
        <a class="navbar-brand d-flex align-items-center gap-2" href="{{ route('login') }}" title="تسجيل الدخول">
            <x-lucide-circle-user width="20" height="20" />
            <span class="d-none d-sm-inline">زائر</span>
        </a>
    @else
        <a class="navbar-brand user-profile-link d-flex align-items-center gap-2" href="{{ route('profile.overview') }}"
            title="{{ $currentLevelName ? "عرض الملف الشخصي - {$currentLevelName}" : 'عرض الملف الشخصي' }}">
            @if ($currentLevelIcon)
                @svg('lucide-' . $currentLevelIcon, ['class' => 'user-level-icon', 'width' => 20, 'height' => 20, 'aria-hidden' => 'true', 'style' => $currentLevelColor ? "color: {$currentLevelColor};" : ''])
            @endif
            <span class="d-none d-sm-inline">{{ Auth::user()->name }}</span>
        </a>
    @endif

    <ul class="navbar-nav ml-auto d-flex flex-row align-items-center gap-1">
        {{-- Favorites - visible for all users (guest + auth) --}}
        <li class="nav-item">
            <a href="{{ route('favorites.index') }}" class="topbar-icon-btn {{ request()->routeIs('favorites.*') ? 'active' : '' }}" title="المفضلة">
                <x-lucide-heart width="18" height="18" />
                <span class="fav-badge-count topbar-badge" style="display: none;">0</span>
            </a>
        </li>

        @if($siteConfig['ui']['dark_mode_enabled'] ?? false)
        <li class="nav-item">
            <button id="theme-toggle" class="theme-toggle-btn" title="تبديل المظهر">
                <x-lucide-sun width="18" height="18" />
                <x-lucide-moon width="18" height="18" />
            </button>
        </li>
        @endif
        @if (!$isGuest)
            <li class="nav-item">
                <a class="balance">
                    <x-lucide-wallet width="16" height="16" />
                    <span>{{ formatAmountWithCurrency(Auth::user()->balance, Auth::user()->currency) }}</span>
                </a>
            </li>
            <li class="nav-item d-none d-md-block">
                <a class="logout-btn" data-toggle="modal" data-target="#exampleModal">
                    <x-lucide-log-out width="16" height="16" />
                    <span>خروج</span>
                </a>
            </li>
        @endif
    </ul>
</nav>

{{-- Slide Menu Overlay --}}
<div class="slide-menu-overlay" id="slideMenuOverlay"></div>

{{-- Slide Menu --}}
<nav class="slide-menu" id="slideMenu" aria-label="Slide menu">
    <div class="slide-menu-header">
        <div class="slide-menu-logo">
            <img src="{{ url($siteConfig['branding']['logo_path'] ?? 'assest/front2/img/logo.png') }}" alt="{{ $siteConfig['name'] ?? 'Store' }} Logo">
        </div>
        <button class="slide-menu-close" id="slideMenuClose" aria-label="Close menu">
            <x-lucide-x width="20" height="20" />
        </button>
    </div>

    @if (!$isGuest)
    <div class="slide-menu-user">
        <a href="{{ route('profile.overview') }}" class="user-info-link">
            @if ($currentLevelIcon)
                @svg('lucide-' . $currentLevelIcon, ['class' => 'user-level-icon', 'width' => 18, 'height' => 18, 'style' => $currentLevelColor ? "color: {$currentLevelColor};" : ''])
            @endif
            <span class="user-name">{{ Auth::user()->name }}</span>
        </a>
        <div class="user-balance">
            <x-lucide-wallet width="16" height="16" />
            <span>{{ formatAmountWithCurrency(Auth::user()->balance, Auth::user()->currency) }}</span>
        </div>
    </div>
    @endif

    <ul class="slide-menu-items">
        @if ($isGuest)
            <li><a href="{{ route('index') }}" class="slide-menu-item"><x-lucide-house width="18" height="18" /><span>الرئيسية</span></a></li>
            <li><a href="{{ route('charge.index') }}" class="slide-menu-item"><x-lucide-credit-card width="18" height="18" /><span>طرق الشحن</span></a></li>
            <li><a href="{{ route('static.terms') }}" class="slide-menu-item"><x-lucide-file-text width="18" height="18" /><span>الشروط والأحكام</span></a></li>
            <li class="slide-menu-divider"></li>
            <li><a href="{{ route('login') }}" class="slide-menu-item slide-menu-item-primary"><x-lucide-log-in width="18" height="18" /><span>تسجيل الدخول</span></a></li>
            <li><a href="{{ route('register') }}" class="slide-menu-item"><x-lucide-user-plus width="18" height="18" /><span>حساب جديد</span></a></li>
        @else
            @foreach ($navItems as $item)
                @if (isset($item['condition']) && !$item['condition'])
                    @continue
                @endif
                @php
                    $routeUrl = isset($item['route']) && $item['route'] !== '#' ? route($item['route']) : '#';
                    $isActive = $item['active'] ?? false;
                @endphp
                <li>
                    <a href="{{ $routeUrl }}" class="slide-menu-item {{ $isActive ? 'active' : '' }}">
                        @svg('lucide-' . $item['icon'], ['width' => '18', 'height' => '18'])
                        <span>{{ $item['label'] }}</span>
                        @if (!empty($item['badge']))
                            <span class="slide-menu-badge">{{ $item['badge'] }}</span>
                        @endif
                    </a>
                </li>
            @endforeach
            <li class="slide-menu-divider"></li>
            <li>
                <a href="#" class="slide-menu-item slide-menu-item-danger logout-btn" data-toggle="modal" data-target="#exampleModal">
                    <x-lucide-log-out width="18" height="18" />
                    <span>تسجيل الخروج</span>
                </a>
            </li>
        @endif
    </ul>
</nav>