@php
    $authUser = auth()->guard('web')->user();
    $isUserHeader = $authUser && ! $authUser->hasAnyRole(['admin', 'super admin']);
    $userNavSection = $userNavSection ?? null;
@endphp

@include('partials.account-dropdown-styles')

@if($isUserHeader)
    <style>
        /* User-facing pages should keep the shared header in normal flow so
           page content starts below it on marketplace, detail, create, and dashboard pages. */
        html.layout-navbar-fixed body.user-theme .user-global-topnav.layout-navbar {
            position: relative !important;
            inset: auto !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            z-index: 20;
        }

        html.layout-navbar-fixed body.user-theme .layout-wrapper.layout-content-navbar .layout-page {
            padding-top: 0 !important;
        }

        html.layout-navbar-fixed body.user-theme .layout-wrapper.layout-content-navbar .layout-page::before {
            display: none !important;
        }

        body.user-theme .user-global-topnav {
            min-height: 72px;
            width: 100%;
            max-width: none;
            margin: 0;
            padding: 0 1.5rem;
            border-radius: 0;
            background: #fff !important;
            border: 0;
            border-bottom: 1px solid rgba(201, 142, 74, 0.12);
            box-shadow: none;
        }

        body.user-theme .layout-page .user-global-topnav {
            margin-bottom: 1rem;
        }

        body.user-theme .subscriptions-shell .subscriptions-header {
            margin-bottom: 1rem;
            border-bottom: 0;
        }

        body.user-theme .subscriptions-shell .subscriptions-main {
            padding-top: 0.35rem;
        }

        body.user-theme .user-global-topnav .navbar-collapse {
            align-items: center;
        }

        body.user-theme .user-global-brand {
            display: inline-flex;
            align-items: center;
            gap: 0.65rem;
            padding: 0;
            margin-right: 1rem;
            text-decoration: none;
            flex-shrink: 0;
        }

        body.user-theme .user-global-brand img {
            width: 72px;
            height: 72px;
            object-fit: contain;
            display: block;
        }

        body.user-theme .user-global-links {
            display: flex;
            align-items: center;
            gap: 0.2rem;
            margin: 0 auto;
        }

        body.user-theme .user-global-links .nav-link {
            padding: 0.55rem 0.75rem;
            color: #4b4853;
            font-size: 0.98rem;
            font-weight: 700;
            border-radius: 12px;
            transition: background-color 0.2s ease, color 0.2s ease;
        }

        body.user-theme .user-global-links .nav-link:hover,
        body.user-theme .user-global-links .nav-link:focus {
            color: var(--user-accent, #c98e4a) !important;
            background: rgba(var(--user-accent-rgb, 201, 142, 74), 0.08);
        }

        body.user-theme .user-global-links .nav-link.is-active {
            color: #2f2b38 !important;
            background: rgba(47, 43, 56, 0.06);
        }

        body.user-theme .user-global-actions {
            display: flex;
            align-items: center;
            gap: 0.9rem;
            margin-left: auto;
        }

        body.user-theme .user-global-coin {
            width: 40px;
            height: 40px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, #ffe08a 0%, #f3b31f 48%, #c98500 100%);
            color: #fff8dc;
            box-shadow:
                inset 0 0 0 4px rgba(255, 242, 196, 0.78),
                0 10px 18px rgba(201, 133, 0, 0.25);
            flex-shrink: 0;
            transform-origin: center;
            animation: user-global-coin-spin-pause 3s linear infinite;
        }

        @keyframes user-global-coin-spin-pause {
            0% {
                transform: rotate(0deg);
            }

            33.333% {
                transform: rotate(360deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        body.user-theme .user-global-cta {
            min-height: 46px;
            padding: 0 1.25rem;
            border: 1px solid var(--user-accent, #c98e4a);
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.55rem;
            background: linear-gradient(180deg, rgba(201, 142, 74, 0.94) 0%, var(--user-accent, #c98e4a) 100%);
            color: #fff !important;
            font-size: 1.05rem;
            font-weight: 700;
            text-decoration: none;
            box-shadow: 0 12px 22px rgba(var(--user-accent-rgb, 201, 142, 74), 0.18);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        body.user-theme .user-global-cta:hover,
        body.user-theme .user-global-cta:focus {
            color: #fff !important;
            transform: translateY(-1px);
            box-shadow: 0 14px 24px rgba(var(--user-accent-rgb, 201, 142, 74), 0.24);
        }

        body.user-theme .user-global-avatar {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
        }

        body.user-theme .user-global-avatar .avatar img {
            width: 40px;
            height: 40px;
            object-fit: cover;
        }

        body.user-theme .user-global-topnav .navbar-toggler {
            border-color: rgba(201, 142, 74, 0.2);
        }

        body.user-theme .user-global-topnav .layout-menu-toggle .nav-link {
            color: #4b4853;
        }

        body.user-theme .user-mobile-dock {
            display: none;
        }

        body.user-theme .user-mobile-dock-panel {
            position: relative;
            display: grid;
            grid-template-columns: repeat(5, minmax(0, 1fr));
            align-items: end;
            gap: 0;
            min-height: 88px;
            padding: 0.9rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
            border: 1px solid rgba(228, 223, 218, 0.96);
            border-bottom: 0;
            border-radius: 1.9rem 1.9rem 0 0;
            background: #fff;
            box-shadow: 0 -8px 24px rgba(31, 27, 23, 0.08);
            overflow: visible;
        }

        body.user-theme .user-mobile-dock-panel::before,
        body.user-theme .user-mobile-dock-panel::after {
            content: "";
            position: absolute;
            top: 0.55rem;
            width: calc(50% - 58px);
            height: 0.95rem;
            border-radius: 999px;
            background: linear-gradient(180deg, rgba(247, 217, 220, 0.52) 0%, rgba(255, 255, 255, 0) 100%);
            pointer-events: none;
        }

        body.user-theme .user-mobile-dock-panel::before {
            left: 0.9rem;
            transform: skewX(-22deg);
            transform-origin: right center;
        }

        body.user-theme .user-mobile-dock-panel::after {
            right: 0.9rem;
            transform: skewX(22deg);
            transform-origin: left center;
        }

        body.user-theme .user-mobile-dock-link {
            position: relative;
            z-index: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-end;
            gap: 0.28rem;
            padding: 1.05rem 0 0.05rem;
            color: #c2bcba;
            text-decoration: none;
            text-align: center;
            transition: color 0.2s ease, transform 0.2s ease;
        }

        body.user-theme .user-mobile-dock-link:hover,
        body.user-theme .user-mobile-dock-link:focus {
            color: var(--user-accent, #c98e4a) !important;
            transform: translateY(-1px);
        }

        body.user-theme .user-mobile-dock-link.is-active {
            color: var(--user-accent, #c98e4a);
        }

        body.user-theme .user-mobile-dock-icon {
            width: 2rem;
            height: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            line-height: 1;
        }

        body.user-theme .user-mobile-dock-link.is-active .user-mobile-dock-icon {
            transform: translateY(-1px);
        }

        body.user-theme .user-mobile-dock-label {
            font-size: 0.79rem;
            font-weight: 500;
            line-height: 1.1;
            white-space: nowrap;
        }

        body.user-theme .user-mobile-dock-center {
            position: relative;
            z-index: 2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            justify-self: center;
            align-self: start;
            width: 88px;
            margin-top: -1.9rem;
            text-decoration: none;
            transition: transform 0.2s ease;
        }

        body.user-theme .user-mobile-dock-center::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 1.85rem;
            width: 126px;
            height: 2.7rem;
            transform: translateX(-50%);
            border-radius: 0 0 999px 999px;
            background: #fff;
            box-shadow: 0 -1px 0 rgba(228, 223, 218, 0.96);
            z-index: -1;
            pointer-events: none;
        }

        body.user-theme .user-mobile-dock-center:hover,
        body.user-theme .user-mobile-dock-center:focus {
            transform: translateY(-1px);
        }

        body.user-theme .user-mobile-dock-center.is-active .user-mobile-dock-fab {
            box-shadow: 0 18px 32px rgba(255, 93, 82, 0.42);
            transform: translateY(-1px);
        }

        body.user-theme .user-mobile-dock-fab {
            width: 74px;
            height: 74px;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 7px solid #fff;
            background: linear-gradient(180deg, #ff7b70 0%, #ff5d52 100%);
            color: #fff;
            box-shadow: 0 14px 24px rgba(255, 93, 82, 0.32);
        }

        body.user-theme .user-mobile-dock-fab i {
            font-size: 1.7rem;
            line-height: 1;
        }

        @media (max-width: 991.98px) {
            body.user-theme .user-global-topnav {
                display: none !important;
            }

            body.user-theme .user-global-topnav .layout-menu-toggle,
            body.user-theme .user-global-topnav .navbar-toggler,
            body.user-theme .user-global-topnav .navbar-collapse {
                display: none !important;
            }

            body.user-theme .user-global-topnav {
                justify-content: flex-start;
            }

            body.user-theme .user-global-brand {
                margin-right: 0;
            }

            body.user-theme .user-global-brand img {
                width: 64px;
                height: 64px;
            }

            body.user-theme .layout-page .content-wrapper,
            body.user-theme .subscriptions-shell .subscriptions-main {
                padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
            }

            body.user-theme .subscriptions-shell .subscriptions-footer {
                padding-bottom: calc(1rem + 92px + env(safe-area-inset-bottom, 0px));
            }

            body.user-theme .floating-chat-btn {
                right: 18px;
                bottom: calc(80px + env(safe-area-inset-bottom, 0px));
                width: 58px;
                height: 58px;
                border-color: rgba(255, 146, 55, 0.85);
                background: linear-gradient(180deg, #ffac62 0%, #ff892f 100%) !important;
                box-shadow: 0 14px 24px rgba(255, 137, 47, 0.26);
            }

            body.user-theme .user-mobile-dock {
                position: fixed;
                right: 0;
                bottom: 0;
                left: 0;
                display: block;
                z-index: 1081;
            }
        }

        @media (max-width: 575.98px) {
            body.user-theme .user-global-topnav {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            body.user-theme .user-mobile-dock-panel {
                min-height: 84px;
                padding-top: 0.82rem;
                padding-left: 0.85rem;
                padding-right: 0.85rem;
            }

            body.user-theme .user-mobile-dock-center {
                width: 82px;
                margin-top: -1.75rem;
            }

            body.user-theme .user-mobile-dock-center::before {
                top: 1.7rem;
                width: 116px;
                height: 2.45rem;
            }

            body.user-theme .user-mobile-dock-fab {
                width: 70px;
                height: 70px;
            }

            body.user-theme .user-mobile-dock-label {
                font-size: 0.76rem;
            }

            body.user-theme .floating-chat-btn {
                right: 16px;
                bottom: calc(78px + env(safe-area-inset-bottom, 0px));
                width: 56px;
                height: 56px;
            }
        }
    </style>

    @php
        $displayBalance = number_format((float) ($authUser->balance ?? 0), 2);
        $displayCurrency = optional($authUser->wallet)->currency ?? 'USD';
        $currencySymbol = match (strtoupper((string) $displayCurrency)) {
            'EUR' => '€',
            'GBP' => '£',
            default => '$',
        };
        $avatar = $authUser->avatar ?: 'assets/img/avatars/user_avatar.webp';
        $mobileHomeActive = $userNavSection === 'home'
            || (
                $userNavSection === null
                && (request()->routeIs('subscriptions.index') || request()->routeIs('subscriptions.show'))
            );
        $mobileSubscriptionsActive = $userNavSection === 'my-subscriptions'
            || request()->routeIs('dashboard.my-subscriptions')
            || request()->routeIs('subscriptions.manage')
            || request()->routeIs('dashboard.subscription-members.*')
            || request()->routeIs('refunds.owner')
            || request()->routeIs('refunds.co-subscribers');
        $mobileMessagesActive = request()->routeIs('messages.index')
            || in_array($userNavSection, ['chat', 'notice'], true);
        $mobileProfileActive = request()->routeIs('profile') || request()->routeIs('change_password');
        $mobileSplitActive = request()->routeIs('subscriptions.create');
    @endphp

    <nav class="layout-navbar navbar navbar-expand-lg align-items-center bg-navbar-theme user-global-topnav"
        id="layout-navbar">
        @if(($showSidebar ?? true))
            <div class="layout-menu-toggle navbar-nav align-items-xl-center me-2 me-xl-0 d-xl-none">
                <a class="nav-item nav-link px-0 me-3" href="javascript:void(0)">
                    <i class="icon-base ti tabler-menu-2 icon-md"></i>
                </a>
            </div>
        @endif

        <a class="navbar-brand user-global-brand" href="{{ route('subscriptions.index') }}">
            <img src="{{ asset('assets/img/blacklg.jpeg') }}" alt="BlackSplit logo">
        </a>

        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#userGlobalNavbar"
            aria-controls="userGlobalNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="userGlobalNavbar">
            <ul class="navbar-nav me-auto user-global-links">
                <li class="nav-item">
                    <a class="nav-link {{ $userNavSection === 'home' || ($userNavSection === null && (request()->routeIs('subscriptions.index') || request()->routeIs('subscriptions.show') || request()->routeIs('subscriptions.create'))) ? 'is-active' : '' }}"
                        href="{{ route('subscriptions.index') }}">
                        Home
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ $userNavSection === 'my-subscriptions' || ($userNavSection === null && request()->routeIs('dashboard.my-subscriptions')) ? 'is-active' : '' }}"
                        href="{{ route('dashboard.my-subscriptions') }}">
                        My Subscriptions
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ $userNavSection === 'chat' || ($userNavSection === null && request()->routeIs('messages.index') && request('tab', 'messages') !== 'notifications') ? 'is-active' : '' }}"
                        href="{{ route('messages.index', ['tab' => 'messages']) }}">
                        Chat
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link {{ $userNavSection === 'notice' || ($userNavSection === null && request()->routeIs('messages.index') && request('tab') === 'notifications') ? 'is-active' : '' }}"
                        href="{{ route('messages.index', ['tab' => 'notifications']) }}">
                        Notice
                    </a>
                </li>
                {{--
                <li class="nav-item">
                    <a class="nav-link {{ $userNavSection === 'my-listings' || ($userNavSection === null && request()->routeIs('dashboard.my-shared-subscriptions')) ? 'is-active' : '' }}"
                        href="{{ route('dashboard.my-shared-subscriptions') }}">
                        My Listings
                    </a>
                </li>
                --}}
            </ul>

            <div class="user-global-actions">
                <span class="user-global-coin" aria-hidden="true">
                    <i class="ti tabler-currency-dollar"></i>
                </span>

                <button type="button" class="global-music-toggle js-global-music-toggle" aria-label="Play music" title="Play music">
                    <i class="fa-solid fa-music music-play-icon"></i>
                    <i class="fa-solid fa-pause music-pause-icon"></i>
                </button>

                <a href="{{ route('subscriptions.create') }}" class="user-global-cta">
                    <i class="ti tabler-plus"></i>
                    <span>Split a subscription</span>
                </a>

                <div class="dropdown dropdown-user">
                    <a class="user-global-avatar dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                        <div class="avatar avatar-online">
                            <img src="{{ asset($avatar) }}" alt="{{ $authUser->name }}" class="rounded-circle" />
                        </div>
                    </a>
                    @include('partials.account-dropdown-menu')
                </div>
            </div>
        </div>
    </nav>

    <nav class="user-mobile-dock d-lg-none" aria-label="Mobile navigation">
        <div class="user-mobile-dock-panel">
            <a href="{{ route('subscriptions.index') }}" class="user-mobile-dock-link {{ $mobileHomeActive ? 'is-active' : '' }}">
                <span class="user-mobile-dock-icon">
                    <i class="fa-solid fa-house"></i>
                </span>
                <span class="user-mobile-dock-label">Home</span>
            </a>

            <a href="{{ route('dashboard.my-subscriptions') }}" class="user-mobile-dock-link {{ $mobileSubscriptionsActive ? 'is-active' : '' }}">
                <span class="user-mobile-dock-icon">
                    <i class="fa-solid fa-border-all"></i>
                </span>
                <span class="user-mobile-dock-label">Subscription</span>
            </a>

            <a href="{{ route('subscriptions.create') }}" class="user-mobile-dock-center {{ $mobileSplitActive ? 'is-active' : '' }}" aria-label="Split a subscription" title="Split a subscription">
                <span class="user-mobile-dock-fab">
                    <i class="fa-solid fa-plus"></i>
                </span>
            </a>

            <a href="{{ route('messages.index', ['tab' => 'messages']) }}" class="user-mobile-dock-link {{ $mobileMessagesActive ? 'is-active' : '' }}">
                <span class="user-mobile-dock-icon">
                    <i class="fa-regular fa-comment-dots"></i>
                </span>
                <span class="user-mobile-dock-label">Message</span>
            </a>

            <a href="{{ route('profile') }}" class="user-mobile-dock-link {{ $mobileProfileActive ? 'is-active' : '' }}">
                <span class="user-mobile-dock-icon">
                    <i class="fa-regular fa-user"></i>
                </span>
                <span class="user-mobile-dock-label">Profile</span>
            </a>
        </div>
    </nav>
@else
    <nav class="layout-navbar container-xxl navbar navbar-expand-xl navbar-detached align-items-center bg-navbar-theme"
        id="layout-navbar">
        @php
            $displayBalance = number_format((float) ($authUser->balance ?? 0), 2);
            $displayCurrency = optional($authUser->wallet)->currency ?? 'USD';
            $currencySymbol = match (strtoupper((string) $displayCurrency)) {
                'EUR' => '€',
                'GBP' => '£',
                default => '$',
            };
        @endphp

        @if(($showSidebar ?? true))
            <div class="layout-menu-toggle navbar-nav align-items-xl-center me-3 me-xl-0 d-xl-none">
                <a class="nav-item nav-link px-0 me-xl-4" href="javascript:void(0)">
                    <i class="icon-base ti tabler-menu-2 icon-md"></i>
                </a>
            </div>
        @endif

        <div class="navbar-nav-right d-flex align-items-center" id="navbar-collapse">
            <ul class="navbar-nav flex-row align-items-center ms-auto">
                @php
                    $avatar = auth()->guard('web')->user()->avatar;
                    if (empty($avatar)) {
                        $avatar = 'assets/img/avatars/user_avatar.webp';
                    }
                @endphp
                <li class="nav-item navbar-dropdown dropdown-user dropdown">
                    <a class="nav-link dropdown-toggle hide-arrow" href="javascript:void(0);" data-bs-toggle="dropdown">
                        <div class="avatar avatar-online">
                            <img src="{{ asset($avatar) }}" alt class="h-auto rounded-circle" />
                        </div>
                    </a>
                    @include('partials.account-dropdown-menu')
                </li>
            </ul>
        </div>
    </nav>
@endif

@include('partials.account-dropdown-script')