{{--
    Navigation Component
    This component renders the complete navigation system including:
    - Top navbar with user info and actions
    - Sidebar navigation with all menu items
    - Mobile bottom navigation with core menu items

    Parameters:
    - navItems: Array of navigation items to display
    - userDropdownItems: Array of user-related items for avatar dropdown
    - isGuest: Boolean indicating if user is a guest
--}}

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

{{-- Top Navbar --}}
<nav class="navbar navbar-expand fixed-top px-3" id="mainNav">
    {{-- Sidebar Toggle Button - للجميع --}}
    <button class="sidebar-toggle" id="sidebarToggle" data-target="#navbarResponsive" aria-controls="navbarResponsive"
        aria-expanded="true" aria-label="Toggle navigation">
        <x-lucide-panel-left class="sidebar-open-icon" width="20" height="20" />
        <x-lucide-panel-right class="sidebar-close-icon" width="20" height="20" />
    </button>

    <a class="navbar-logo" href="{{ route('index') }}" title="{{ $siteConfig['name'] ?? 'SWgames' }}">
        <img src="{{ url($siteConfig['branding']['logo_path'] ?? 'assest/front2/img/logo.png') }}" alt="{{ $siteConfig['name'] ?? 'SWgames' }} 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>زائر</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'] ?? true)
        <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)
        {{-- User Avatar Dropdown - على أقصى الشمال --}}
        <li class="nav-item">
            <div class="user-avatar-dropdown">
                <button class="user-avatar-btn" id="userAvatarBtn" aria-expanded="false" aria-haspopup="true" title="{{ Auth::user()->name }}">
                    @if (Auth::user()->image)
                        <img src="{{ route('media.users.avatar', ['user' => Auth::user()->id]) }}" alt="{{ Auth::user()->name }}" class="user-avatar-img">
                    @elseif ($currentLevelIcon)
                        @svg('lucide-' . $currentLevelIcon, ['class' => 'user-level-icon', 'width' => 20, 'height' => 20, 'aria-hidden' => 'true', 'style' => $currentLevelColor ? "color: {$currentLevelColor};" : ''])
                    @else
                        <x-lucide-circle-user width="20" height="20" />
                    @endif
                </button>
                <div class="user-dropdown-menu" id="userDropdownMenu">
                    {{-- User Info Header with Name and Balance --}}
                    <div class="dropdown-header">
                        <div class="user-info">
                            @if (Auth::user()->image)
                                <img src="{{ route('media.users.avatar', ['user' => Auth::user()->id]) }}" alt="{{ Auth::user()->name }}" class="user-avatar-img-large">
                            @elseif ($currentLevelIcon)
                                @svg('lucide-' . $currentLevelIcon, ['width' => 24, 'height' => 24, 'style' => $currentLevelColor ? "color: {$currentLevelColor};" : ''])
                            @else
                                <x-lucide-circle-user width="24" height="24" />
                            @endif
                            <div class="user-details">
                                <span class="user-name-dropdown">{{ Auth::user()->name }}</span>
                                <span class="user-level-name">{{ $currentLevelName ?? 'مستخدم' }}</span>
                            </div>
                        </div>
                        <div class="user-balance-dropdown">
                            <x-lucide-wallet width="16" height="16" />
                            <span>{{ formatAmountWithCurrency(Auth::user()->balance, Auth::user()->currency) }}</span>
                        </div>
                    </div>
                    <div class="dropdown-divider"></div>
                    {{-- Dropdown Items --}}
                    @foreach ($userDropdownItems as $item)
                        <a href="{{ route($item['route']) }}" class="dropdown-item {{ ($item['active'] ?? false) ? 'active' : '' }}">
                            @svg('lucide-' . $item['icon'], ['width' => '16', 'height' => '16'])
                            <span>{{ $item['label'] }}</span>
                        </a>
                    @endforeach
                    <div class="dropdown-divider"></div>
                    {{-- Logout --}}
                    <a href="#" class="dropdown-item dropdown-item-danger logout-btn">
                        <x-lucide-log-out width="16" height="16" />
                        <span>تسجيل الخروج</span>
                    </a>
                </div>
            </div>
        </li>
        @endif
    </ul>
</nav>

@if ($isGuest)
    {{-- Sidebar Navigation - للزوار --}}
    <nav class="navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav navbar-sidenav side-navigation" id="exampleAccordion" style="text-align:center;">
            {{-- Guest Sidebar Header --}}
            <div class="side-navigation-header">
                <div class="sidebar-close-btn" id="sidebarCloseBtn">
                    <x-lucide-x width="20" height="20" />
                </div>

                <div class="d-flex flex-column align-items-center">
                    <div class="sidebar-logo">
                        <img src="{{ url($siteConfig['branding']['logo_path'] ?? 'assest/front2/img/logo.png') }}" alt="{{ $siteConfig['name'] ?? 'SWgames' }} Logo">
                    </div>
                </div>

                <div class="header-actions">
                    @if($siteConfig['ui']['dark_mode_enabled'] ?? true)
                    <button id="mobile-theme-toggle" class="theme-toggle-btn" title="تبديل المظهر">
                        <x-lucide-sun width="18" height="18" />
                        <x-lucide-moon width="18" height="18" />
                    </button>
                    @endif
                </div>
            </div>

            {{-- Guest Navigation Items --}}
            <x-navigation.partials.nav-item icon="house" label="الرئيسية" route="index" tooltip="الصفحة الرئيسية" />
            <x-navigation.partials.nav-item icon="credit-card" label="طرق الشحن" route="charge.index"
                tooltip="عرض طرق الشحن المتاحة" />
            <x-navigation.partials.nav-item icon="file-text" label="الشروط والأحكام" route="static.terms"
                tooltip="شروط الخدمة والأحكام" />

            {{-- أزرار تسجيل الدخول - تظهر فقط عند فتح السايدبار --}}
            <li class="nav-item guest-auth-buttons mt-4">
                <a class="btn btn-primary guest-auth-btn" href="{{ route('login') }}">
                    <x-lucide-log-in width="18" height="18" />
                    <span class="nav-link-text">تسجيل الدخول</span>
                </a>
            </li>
            <li class="nav-item guest-auth-buttons mt-2">
                <a class="btn btn-outline-secondary guest-auth-btn" href="{{ route('register') }}">
                    <x-lucide-user-plus width="18" height="18" />
                    <span class="nav-link-text">حساب جديد</span>
                </a>
            </li>
        </ul>
    </nav>
@else
    {{-- Sidebar Navigation - للمستخدمين المسجلين --}}
    <nav class="navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav navbar-sidenav side-navigation" id="exampleAccordion" style="text-align:center;">
            {{-- Mobile Sidebar Header with Logo and Balance - Only visible on mobile --}}
            <div class="side-navigation-header">
                <div class="sidebar-close-btn" id="sidebarCloseBtn">
                    <x-lucide-x width="20" height="20" />
                </div>

                <div class="d-flex flex-column align-items-center">
                    <div class="sidebar-logo">
                        <img src="{{ url($siteConfig['branding']['logo_path'] ?? 'assest/front2/img/logo.png') }}" alt="{{ $siteConfig['name'] ?? 'SWgames' }} Logo">
                    </div>
                    <a href="{{ route('profile.overview') }}" class="user-name-link d-flex align-items-center gap-2"
                        title="{{ $currentLevelName ? 'عرض الملف الشخصي - ' . $currentLevelName : 'عرض الملف الشخصي' }}">
                        @if ($currentLevelIcon)
                            @svg('lucide-' . $currentLevelIcon, ['class' => 'user-level-icon', 'width' => 18, 'height' => 18, 'aria-hidden' => 'true', 'style' => $currentLevelColor ? "color: {$currentLevelColor};" : ''])
                        @endif
                        <span class="user-name">{{ Auth::user()->name }}</span>
                    </a>
                </div>

                <div class="header-actions">
                    @if($siteConfig['ui']['dark_mode_enabled'] ?? true)
                    <button id="mobile-theme-toggle" class="theme-toggle-btn" title="تبديل المظهر">
                        <x-lucide-sun width="18" height="18" />
                        <x-lucide-moon width="18" height="18" />
                    </button>
                    @endif
                    <div class="">
                        <a class="balance">
                            <x-lucide-wallet width="16" height="16" />
                            <span>{{ formatAmountWithCurrency(Auth::user()->balance, Auth::user()->currency) }}</span>
                        </a>
                    </div>
                    <a class="logout-btn" href="#">
                        <x-lucide-log-out width="16" height="16" />
                        <span>تسجيل خروج</span>
                    </a>
                </div>
            </div>

            {{-- Sidebar Navigation Items --}}
            @foreach ($navItems as $item)
                @if (isset($item['condition']) && !$item['condition'])
                    {{-- Skip this item if condition is false --}}
                    @continue
                @endif

                <x-navigation.partials.nav-item :icon="$item['icon']" :label="$item['label']" :route="$item['route'] ?? '#'" :active="$item['active'] ?? false"
                    :hideOnMobile="$item['hideOnMobile'] ?? false" :tooltip="$item['tooltip'] ?? null" :modal="$item['modal'] ?? null" :badge="$item['badge'] ?? null" :badgeClass="$item['badgeClass'] ?? 'bg-danger'"
                    :isNotification="$item['isNotification'] ?? false" :unreadCount="$unreadCount" />
            @endforeach
        </ul>
    </nav>
@endif

{{-- Mobile Bottom Navigation --}}
<div class="mobile-bottom-nav">
    <div class="nav-items">
        @if ($isGuest)
            {{-- للزوار: أزرار تسجيل الدخول والرئيسية --}}
            <x-navigation.partials.mobile-nav-item icon="house" label="الرئيسية" route="index" />
            <x-navigation.partials.mobile-nav-item icon="credit-card" label="طرق الشحن" route="charge.index" />
            <x-navigation.partials.mobile-nav-item icon="log-in" label="دخول" route="login" />
            <x-navigation.partials.mobile-nav-item icon="user-plus" label="تسجيل" route="register" />
        @else
            {{-- Mobile menu toggle --}}
            <x-navigation.partials.mobile-nav-item icon="list" label="القائمة" :toggle="true" />

            {{-- Core navigation items for mobile --}}
            @foreach ($navItems as $item)
                @if (isset($item['showInBottomNav']) && $item['showInBottomNav'])
                    <x-navigation.partials.mobile-nav-item :icon="$item['icon']" :label="$item['label']" :route="$item['route'] ?? '#'"
                        :active="$item['active'] ?? false" />
                @endif
            @endforeach
        @endif
    </div>
</div>