{{--
    Minimal Topbar Navigation Component
    A cleaner, more minimal topbar for Mega/Kaiali sites.
    Shows: Home icon, Logo, Balance, Notifications
    No username displayed in topbar.
--}}

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

{{-- Minimal Top Navbar --}}
<nav class="navbar navbar-expand fixed-top px-2 topbar-minimal" id="mainNav" aria-label="Main navigation">
    <div class="topbar-minimal__start">
        {{-- Home Button --}}
        <a href="{{ route('index') }}" class="topbar-minimal__home" title="الرئيسية">
            <x-lucide-house width="20" height="20" />
        </a>
        
        {{-- 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>
    </div>

    {{-- Center Logo --}}
    <a class="topbar-minimal__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>

    <div class="topbar-minimal__end">
        {{-- Favorites - visible for all users (guest + auth) --}}
        <a href="{{ route('favorites.index') }}" class="topbar-minimal__favorites {{ 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>

        @if ($isGuest)
            <a href="{{ route('login') }}" class="topbar-minimal__login" title="تسجيل الدخول">
                <x-lucide-circle-user width="20" height="20" />
                <span>دخول</span>
            </a>
        @else
            {{-- Balance --}}
            <a href="{{ route('charge.index') }}" class="topbar-minimal__balance" title="الرصيد">
                <x-lucide-wallet width="16" height="16" />
                <span>{{ formatAmountWithCurrency(Auth::user()->balance, Auth::user()->currency) }}</span>
            </a>
            
            {{-- Profile Icon (instead of name) --}}
            <a href="{{ route('profile.overview') }}" class="topbar-minimal__profile" title="{{ Auth::user()->name }}">
                @if ($currentLevelIcon)
                    @svg('lucide-' . $currentLevelIcon, ['width' => 20, 'height' => 20, 'style' => $currentLevelColor ? "color: {$currentLevelColor};" : ''])
                @else
                    <x-lucide-circle-user width="20" height="20" />
                @endif
            </a>
        @endif
    </div>
</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>