@php
    $siteName = \App\Models\Setting::getValue('site_name', config('app.name', 'ProResume SaaS'));
    $siteTagline = \App\Models\Setting::getValue('site_tagline', 'Professional Workspace');
    $siteLogoUrl = \App\Models\Setting::getVersionedValue('site_logo_url', '');
@endphp

<nav x-data="{ open: false }" class="premium-nav">
    <div class="premium-container">
        <div class="flex h-20 items-center justify-between gap-4">
            <a href="{{ route('dashboard') }}" class="flex items-center gap-3">
                @if(!empty($siteLogoUrl))
                    <img src="{{ $siteLogoUrl }}" alt="{{ $siteName }}" class="h-11 w-11 rounded-xl border border-[var(--color-border)] object-cover">
                @else
                    <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-[var(--color-amber)] to-[var(--color-cyan)] text-sm font-bold text-[#081018]">
                        {{ strtoupper(substr($siteName, 0, 2)) }}
                    </div>
                @endif
                <div>
                    <p class="text-sm font-semibold text-[var(--color-text)]">{{ $siteName }}</p>
                    <p class="text-xs text-[var(--color-text-muted)]">{{ $siteTagline }}</p>
                </div>
            </a>

            <div class="hidden items-center gap-2 lg:flex">
                <x-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">Dashboard</x-nav-link>
                <x-nav-link :href="route('portfolios.index')" :active="request()->routeIs('portfolios.*')">Portfolios</x-nav-link>
                <x-nav-link :href="route('resumes.index')" :active="request()->routeIs('resumes.*')">Resumes</x-nav-link>
                <x-nav-link :href="route('support.index')" :active="request()->routeIs('support.*')">Support</x-nav-link>
                <x-nav-link :href="route('notifications.index')" :active="request()->routeIs('notifications.*')">Notifications</x-nav-link>
            </div>

            <div class="hidden items-center gap-3 lg:flex">
                @if(session()->has('impersonator_id'))
                    <form method="POST" action="{{ route('admin.impersonation.leave') }}">
                        @csrf
                        <button type="submit" class="premium-btn-secondary">Leave Impersonation</button>
                    </form>
                @endif
                <x-dropdown align="right" width="56">
                    <x-slot name="trigger">
                        <button class="inline-flex items-center gap-3 rounded-xl border border-[var(--color-border-light)] bg-[var(--color-card)]/70 px-3 py-2 text-left text-sm text-[var(--color-text)] transition hover:border-[var(--color-cyan)] hover:bg-[var(--color-card-light)]/70 focus:outline-none">
                            @if(!empty(auth()->user()->avatar_url))
                                <img
                                    src="{{ auth()->user()->avatar_url }}"
                                    alt="{{ auth()->user()->name }}"
                                    class="h-8 w-8 rounded-full border border-[var(--color-border)] object-cover"
                                >
                            @else
                                <span class="flex h-8 w-8 items-center justify-center rounded-full bg-[var(--color-card-light)] text-xs font-bold text-[var(--color-cyan)]">
                                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                                </span>
                            @endif
                            <span class="max-w-36 truncate font-medium">{{ auth()->user()->name }}</span>
                            <svg class="h-4 w-4 text-[var(--color-text-muted)]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25 12 15.75 4.5 8.25" />
                            </svg>
                        </button>
                    </x-slot>

                    <x-slot name="content">
                        <div class="border-b border-[var(--color-border)] px-4 py-3">
                            <p class="text-sm font-semibold text-[var(--color-text)]">{{ auth()->user()->name }}</p>
                            <p class="truncate text-xs text-[var(--color-text-muted)]">{{ auth()->user()->email }}</p>
                            <p class="mt-1 text-xs {{ auth()->user()->email_verified ? 'text-green-300' : 'text-amber-300' }}">
                                {{ auth()->user()->email_verified ? 'Verified' : 'Unverified' }}
                            </p>
                        </div>
                        @if (Route::has('profile.edit'))
                            <x-dropdown-link :href="route('profile.edit')">Profile Settings</x-dropdown-link>
                        @endif
                        @if(auth()->user()->isAdmin())
                            <x-dropdown-link :href="route('admin.users.index')">Admin Panel</x-dropdown-link>
                            <x-dropdown-link :href="route('admin.plans.index')">Plans</x-dropdown-link>
                            <x-dropdown-link :href="route('admin.templates.index')">Templates</x-dropdown-link>
                            <x-dropdown-link :href="route('admin.support.index')">Admin Support</x-dropdown-link>
                            <x-dropdown-link :href="route('admin.moderation.index')">Admin Moderation</x-dropdown-link>
                            <x-dropdown-link :href="route('staff.reports.dashboard')">Reports</x-dropdown-link>
                            <x-dropdown-link :href="route('admin.settings.edit')">Site Settings</x-dropdown-link>
                        @endif
                        @if(auth()->user()->isStaff() && !auth()->user()->isAdmin())
                            @if(auth()->user()->hasStaffPermission('view_reports'))
                                <x-dropdown-link :href="route('staff.reports.dashboard')">Staff Reports</x-dropdown-link>
                            @endif
                            @if(auth()->user()->hasStaffPermission('support_tickets'))
                                <x-dropdown-link :href="route('staff.support.index')">Staff Support</x-dropdown-link>
                            @endif
                            @if(auth()->user()->hasStaffPermission('moderate_portfolios'))
                                <x-dropdown-link :href="route('staff.moderation.index')">Staff Moderation</x-dropdown-link>
                            @endif
                        @endif
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <x-dropdown-link :href="route('logout')"
                                onclick="event.preventDefault(); this.closest('form').submit();">
                                Sign Out
                            </x-dropdown-link>
                        </form>
                    </x-slot>
                </x-dropdown>
            </div>

            <button
                @click="open = !open"
                class="inline-flex items-center rounded-lg border border-[var(--color-border-light)] p-2 text-[var(--color-text)] transition hover:border-[var(--color-cyan)] hover:text-[var(--color-cyan)] lg:hidden"
                aria-label="Toggle navigation"
            >
                <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor">
                    <path x-show="!open" stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
                    <path x-show="open" stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" style="display: none;" />
                </svg>
            </button>
        </div>
    </div>

    <div x-show="open" x-transition class="border-t border-[var(--color-border)] bg-[var(--color-darker)]/95 lg:hidden" style="display: none;">
        <div class="premium-container space-y-1 py-4">
            @if(session()->has('impersonator_id'))
                <form method="POST" action="{{ route('admin.impersonation.leave') }}" class="pb-2">
                    @csrf
                    <button type="submit" class="block w-full rounded-lg border border-[var(--color-border)] px-4 py-2 text-left text-sm font-medium text-[var(--color-text-secondary)] transition hover:border-[var(--color-cyan)] hover:text-[var(--color-cyan)]">
                        Leave Impersonation
                    </button>
                </form>
            @endif
            <x-responsive-nav-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">Dashboard</x-responsive-nav-link>
            <x-responsive-nav-link :href="route('portfolios.index')" :active="request()->routeIs('portfolios.*')">Portfolios</x-responsive-nav-link>
            <x-responsive-nav-link :href="route('resumes.index')" :active="request()->routeIs('resumes.*')">Resumes</x-responsive-nav-link>
            <x-responsive-nav-link :href="route('support.index')" :active="request()->routeIs('support.*')">Support</x-responsive-nav-link>
            <x-responsive-nav-link :href="route('notifications.index')" :active="request()->routeIs('notifications.*')">Notifications</x-responsive-nav-link>
            @if (Route::has('profile.edit'))
                <x-responsive-nav-link :href="route('profile.edit')" :active="request()->routeIs('profile.edit')">Profile Settings</x-responsive-nav-link>
            @endif
            @if(auth()->user()->isAdmin())
                <x-responsive-nav-link :href="route('admin.users.index')" :active="request()->routeIs('admin.*')">Admin Panel</x-responsive-nav-link>
                <x-responsive-nav-link :href="route('admin.plans.index')" :active="request()->routeIs('admin.plans.*')">Plans</x-responsive-nav-link>
                <x-responsive-nav-link :href="route('admin.templates.index')" :active="request()->routeIs('admin.templates.*')">Templates</x-responsive-nav-link>
                <x-responsive-nav-link :href="route('admin.support.index')" :active="request()->routeIs('admin.support.*')">Admin Support</x-responsive-nav-link>
                <x-responsive-nav-link :href="route('admin.moderation.index')" :active="request()->routeIs('admin.moderation.*')">Admin Moderation</x-responsive-nav-link>
                <x-responsive-nav-link :href="route('staff.reports.dashboard')" :active="request()->routeIs('staff.reports.*')">Reports</x-responsive-nav-link>
                <x-responsive-nav-link :href="route('admin.settings.edit')" :active="request()->routeIs('admin.settings.*')">Site Settings</x-responsive-nav-link>
            @endif
            @if(auth()->user()->isStaff() && !auth()->user()->isAdmin())
                @if(auth()->user()->hasStaffPermission('view_reports'))
                    <x-responsive-nav-link :href="route('staff.reports.dashboard')" :active="request()->routeIs('staff.reports.*')">Staff Reports</x-responsive-nav-link>
                @endif
                @if(auth()->user()->hasStaffPermission('support_tickets'))
                    <x-responsive-nav-link :href="route('staff.support.index')" :active="request()->routeIs('staff.support.*')">Staff Support</x-responsive-nav-link>
                @endif
                @if(auth()->user()->hasStaffPermission('moderate_portfolios'))
                    <x-responsive-nav-link :href="route('staff.moderation.index')" :active="request()->routeIs('staff.moderation.*')">Staff Moderation</x-responsive-nav-link>
                @endif
            @endif
            <form method="POST" action="{{ route('logout') }}" class="pt-1">
                @csrf
                <button type="submit" class="block w-full rounded-lg border border-[var(--color-border)] px-4 py-2 text-left text-sm font-medium text-[var(--color-text-secondary)] transition hover:border-red-500/60 hover:text-red-300">
                    Sign Out
                </button>
            </form>
        </div>
    </div>
</nav>