@php
    $user = $user ?? null;
    $user?->loadMissing('role');
    $mayConfigure = \App\Support\WorkspaceNavigation::userMayConfigurePlatform($user);
    $nav = $activeNav ?? '';
    $navAccountsOpen = in_array($nav, ['accounts', 'accounts-registry'], true);
    $navTreasuryOpen = in_array($nav, ['treasury', 'deals', 'shipments', 'settlements'], true);
    $navDisburseOpen = in_array($nav, ['payouts', 'payables'], true);
    $cpPreview = !empty($cpanelPreviewShell);
    $opsNavHref = $cpPreview ? \App\Support\WorkspaceNavigation::controlPanelPreviewSurface('operations') : route('dashboard');
    $tasksNavHref = $cpPreview ? \App\Support\WorkspaceNavigation::controlPanelPreviewSurface('task-queue') : route('tasks.index');
    $offersNavHref = $cpPreview ? \App\Support\WorkspaceNavigation::controlPanelPreviewSurface('offers-intake') : route('offers.index');
    $payablesNavHref = $cpPreview ? \App\Support\WorkspaceNavigation::controlPanelPreviewSurface('payables') : route('payables');
    $notificationsNavHref = $cpPreview ? \App\Support\WorkspaceNavigation::controlPanelPreviewSurface('notifications') : route('notifications.index');
    $adminNavHref = $cpPreview ? \App\Support\WorkspaceNavigation::controlPanelPreviewSurface('admin-overview') : \App\Support\WorkspaceNavigation::adminOverview();
@endphp
<aside
    id="workspace-sidebar"
    class="bg-white border border-[#ECECEC] rounded-3xl p-4 flex flex-col w-full shrink-0 min-h-0 h-full lg:w-56 lg:min-w-[210px] lg:max-w-[224px] xl:w-60 xl:min-w-[240px] xl:max-w-[240px]"
    x-data="{
        accountsOpen: @json($navAccountsOpen),
        treasuryOpen: @json($navTreasuryOpen),
        disburseOpen: @json($navDisburseOpen),
        platformOpen: false,
        closeAllGroups() { this.accountsOpen = false; this.treasuryOpen = false; this.disburseOpen = false; },
        toggleAccounts() { const n = !this.accountsOpen; this.closeAllGroups(); this.accountsOpen = n; },
        toggleTreasury() { const n = !this.treasuryOpen; this.closeAllGroups(); this.treasuryOpen = n; },
        toggleDisburse() { const n = !this.disburseOpen; this.closeAllGroups(); this.disburseOpen = n; },
    }"
>
    <div class="shrink-0 flex items-start justify-between gap-2">
        <a href="{{ $opsNavHref }}" class="flex items-start gap-2.5 min-w-0">
            @include('partials.platform-lock-icon', ['size' => 'sm'])
            <span class="min-w-0 flex flex-col leading-none">
                <span class="text-base font-bold text-[#111] tracking-tight">Sedco</span>
                <span class="text-[10px] font-semibold uppercase tracking-wide text-[#6F6F6F] leading-[1.2] mt-[-7px] pt-[1px]">NOBLE DUBAI LLC</span>
            </span>
        </a>
    </div>

    <nav class="mt-4 flex flex-col gap-0.5 text-xs font-medium leading-tight min-h-0 flex-1 overflow-y-auto overscroll-y-contain [scrollbar-gutter:stable] pr-0.5 -mr-0.5" aria-label="Primary">
        <a class="group flex items-center gap-2.5 rounded-lg px-3 py-2 {{ $nav === 'dashboard' ? 'bg-[#012169] text-white' : 'text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#012169]' }}" href="{{ $opsNavHref }}" data-ws-nav="dashboard" data-ws-tier="primary">
            @include('partials.sidebar-nav-icon', ['variant' => 'operations'])
            <span>Operations</span>
        </a>
        <a class="flex items-center gap-2.5 rounded-lg px-3 py-2 {{ $nav === 'tasks' ? 'bg-[#012169] text-white' : 'text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#012169]' }}" href="{{ $tasksNavHref }}" data-ws-nav="tasks" data-ws-tier="primary">
            @include('partials.sidebar-nav-icon', ['variant' => 'tasks'])
            <span>Task queue</span>
        </a>
        <a class="flex items-center gap-2.5 rounded-lg px-3 py-2 {{ $nav === 'offers' ? 'bg-[#012169] text-white' : 'text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#012169]' }}" href="{{ $offersNavHref }}" data-ws-nav="offers" data-ws-tier="primary">
            @include('partials.sidebar-nav-icon', ['variant' => 'trade'])
            <span class="leading-snug">Offers &amp; trade intake</span>
        </a>

        <div class="rounded-lg border border-transparent {{ $navAccountsOpen ? 'bg-[#F5F7FA] border-[#ECECEC]' : '' }}" data-ws-nav-group="accounts">
            <button type="button" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#012169]" @click="toggleAccounts()" :aria-expanded="accountsOpen ? 'true' : 'false'">
                @include('partials.sidebar-nav-icon', ['variant' => 'accounts'])
                <span class="flex-1 min-w-0">Accounts</span>
                <svg class="w-3.5 h-3.5 shrink-0 text-[#7B7B7B] transition-transform" :class="accountsOpen ? 'rotate-180' : ''" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
            </button>
            <div x-show="accountsOpen" x-transition class="pb-1.5 pt-0 space-y-0.5">
                <a class="flex items-center gap-2 rounded-md py-1.5 pl-3 pr-3 text-[11px] {{ $nav === 'accounts' ? 'bg-[#F5F7FA] text-[#012169] font-semibold' : 'text-[#5A5A5A] hover:bg-white/80' }}" href="{{ route('accounts') }}" data-ws-nav="accounts" data-ws-tier="sub">
                    @include('partials.sidebar-nav-icon', ['variant' => 'overview', 'sub' => true])
                    <span>Overview</span>
                </a>
                <a class="flex items-center gap-2 rounded-md py-1.5 pl-3 pr-3 text-[11px] {{ $nav === 'accounts-registry' ? 'bg-[#F5F7FA] text-[#012169] font-semibold' : 'text-[#5A5A5A] hover:bg-white/80' }}" href="{{ route('accounts.working-registry') }}" data-ws-nav="accounts-registry" data-ws-tier="sub">
                    @include('partials.sidebar-nav-icon', ['variant' => 'registry', 'sub' => true])
                    <span>Working registry</span>
                </a>
            </div>
        </div>

        <div class="rounded-lg border border-transparent {{ $navTreasuryOpen ? 'bg-[#F5F7FA] border-[#ECECEC]' : '' }}" data-ws-nav-group="treasury">
            <button type="button" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#012169]" @click="toggleTreasury()" :aria-expanded="treasuryOpen ? 'true' : 'false'">
                @include('partials.sidebar-nav-icon', ['variant' => 'settlements'])
                <span class="flex-1 min-w-0 leading-snug">Movement &amp; settlement</span>
                <svg class="w-3.5 h-3.5 shrink-0 text-[#7B7B7B] transition-transform" :class="treasuryOpen ? 'rotate-180' : ''" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
            </button>
            <div x-show="treasuryOpen" x-transition class="pb-1.5 pt-0 space-y-0.5">
                <a class="flex items-center gap-2 rounded-md py-1.5 pl-3 pr-3 text-[11px] {{ $nav === 'treasury' ? 'bg-[#F5F7FA] text-[#012169] font-semibold' : 'text-[#5A5A5A] hover:bg-white/80' }}" href="{{ route('treasury') }}" data-ws-nav="treasury" data-ws-tier="sub">
                    @include('partials.sidebar-nav-icon', ['variant' => 'treasury-movement', 'sub' => true])
                    <span>Treasury Movement</span>
                </a>
                <a class="flex items-center gap-2 rounded-md py-1.5 pl-3 pr-3 text-[11px] {{ $nav === 'deals' ? 'bg-[#F5F7FA] text-[#012169] font-semibold' : 'text-[#5A5A5A] hover:bg-white/80' }}" href="{{ route('deals') }}" data-ws-nav="deals" data-ws-tier="sub">
                    @include('partials.sidebar-nav-icon', ['variant' => 'deals', 'sub' => true])
                    <span>Deal Pipeline</span>
                </a>
                <a class="flex items-center gap-2 rounded-md py-1.5 pl-3 pr-3 text-[11px] {{ $nav === 'shipments' ? 'bg-[#F5F7FA] text-[#012169] font-semibold' : 'text-[#5A5A5A] hover:bg-white/80' }}" href="{{ route('shipments') }}" data-ws-nav="shipments" data-ws-tier="sub">
                    @include('partials.sidebar-nav-icon', ['variant' => 'shipments', 'sub' => true])
                    <span>Shipment Events</span>
                </a>
                <a class="flex items-center gap-2 rounded-md py-1.5 pl-3 pr-3 text-[11px] {{ $nav === 'settlements' ? 'bg-[#F5F7FA] text-[#012169] font-semibold' : 'text-[#5A5A5A] hover:bg-white/80' }}" href="{{ route('settlements') }}" data-ws-nav="settlements" data-ws-tier="sub">
                    @include('partials.sidebar-nav-icon', ['variant' => 'settlements', 'sub' => true])
                    <span>Treasury &amp; Settlement</span>
                </a>
            </div>
        </div>

        <div class="rounded-lg border border-transparent {{ $navDisburseOpen ? 'bg-[#F5F7FA] border-[#ECECEC]' : '' }}" data-ws-nav-group="disburse">
            <button type="button" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#012169]" @click="toggleDisburse()" :aria-expanded="disburseOpen ? 'true' : 'false'">
                @include('partials.sidebar-nav-icon', ['variant' => 'disbursements'])
                <span class="flex-1 min-w-0">Disbursements</span>
                <svg class="w-3.5 h-3.5 shrink-0 text-[#7B7B7B] transition-transform" :class="disburseOpen ? 'rotate-180' : ''" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.17l3.71-3.94a.75.75 0 111.08 1.04l-4.24 4.5a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"/></svg>
            </button>
            <div x-show="disburseOpen" x-transition class="pb-1.5 pt-0 space-y-0.5">
                <a class="flex items-center gap-2 rounded-md py-1.5 pl-3 pr-3 text-[11px] {{ $nav === 'payouts' ? 'bg-[#F5F7FA] text-[#012169] font-semibold' : 'text-[#5A5A5A] hover:bg-white/80' }}" href="{{ route('payouts.index') }}" data-ws-nav="payouts" data-ws-tier="sub">
                    @include('partials.sidebar-nav-icon', ['variant' => 'payouts', 'sub' => true])
                    <span>Payout Routing</span>
                </a>
                <a class="flex items-center gap-2 rounded-md py-1.5 pl-3 pr-3 text-[11px] {{ $nav === 'payables' ? 'bg-[#F5F7FA] text-[#012169] font-semibold' : 'text-[#5A5A5A] hover:bg-white/80' }}" href="{{ $payablesNavHref }}" data-ws-nav="payables" data-ws-tier="sub">
                    @include('partials.sidebar-nav-icon', ['variant' => 'payables', 'sub' => true])
                    <span>Payables / Invoice</span>
                </a>
            </div>
        </div>

        <a class="flex items-center gap-2.5 rounded-lg px-3 py-2 {{ $nav === 'cards' ? 'bg-[#012169] text-white' : 'text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#012169]' }}" href="{{ route('cards.index') }}" data-ws-nav="cards" data-ws-tier="primary">
            @include('partials.sidebar-nav-icon', ['variant' => 'cards'])
            <span>Card Management</span>
        </a>
        <a class="flex items-center gap-2.5 rounded-lg px-3 py-2 {{ $nav === 'security' ? 'bg-[#012169] text-white' : 'text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#012169]' }}" href="{{ route('security') }}" data-ws-nav="security" data-ws-tier="primary">
            @include('partials.sidebar-nav-icon', ['variant' => 'security'])
            <span>Security</span>
        </a>
        @php
            $attentionCount = (int) (($attentionAlerts ?? [])['count'] ?? 0);
        @endphp
        <a class="flex items-center gap-2.5 rounded-lg px-3 py-2 {{ $nav === 'notifications' ? 'bg-[#012169] text-white' : 'text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#012169]' }}" href="{{ $attentionCount > 0 ? \App\Support\WorkspaceNavigation::notificationsCenterUrl(['tab' => 'attention']) : $notificationsNavHref }}" @if($cpPreview && $attentionCount > 0) data-turbo="false" @endif data-ws-nav="notifications" data-ws-tier="primary">
            @include('partials.sidebar-nav-icon', ['variant' => 'notifications'])
            <span class="flex-1 min-w-0">Notifications Center</span>
            @if ($attentionCount > 0)
                <span class="inline-flex min-w-[1.25rem] h-5 items-center justify-center rounded-full bg-[#012169] px-1.5 text-[10px] font-bold text-white tabular-nums" aria-label="{{ $attentionCount }} need attention">{{ $attentionCount > 99 ? '99+' : $attentionCount }}</span>
            @endif
        </a>
        <a class="flex items-center gap-2.5 rounded-lg px-3 py-2 {{ $nav === 'help' ? 'bg-[#012169] text-white' : 'text-[#4A5568] hover:bg-[#F5F7FA] hover:text-[#012169]' }}" href="{{ route('help.index') }}" data-ws-nav="help" data-ws-tier="primary">
            @include('partials.sidebar-nav-icon', ['variant' => 'help'])
            <span>Help Center</span>
        </a>
    </nav>

    <div class="mt-3 shrink-0 border-t border-[#ECECEC] pt-2 space-y-2">
        <p class="px-3 text-[10px] font-semibold uppercase tracking-wider text-[#9A9A9A]">Other</p>
        <div class="space-y-0.5 pb-1">
            <a class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-[11px] {{ request()->routeIs('reports.*') ? 'bg-[#F5F7FA] text-[#012169] font-semibold' : 'text-[#5A6F85] hover:bg-[#F5F7FA] hover:text-[#012169]' }}" href="{{ route('reports.monthly') }}">
                @include('partials.sidebar-nav-icon', ['variant' => 'reports', 'sub' => true])
                <span>Reports</span>
            </a>
            @if ($mayConfigure)
                <a href="{{ \App\Support\WorkspaceNavigation::controlPanel() }}" data-turbo="false" class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-[11px] {{ $nav === 'control' ? 'bg-[#F5F7FA] text-[#012169] font-semibold' : 'text-[#5A6F85] hover:bg-[#F5F7FA] hover:text-[#012169]' }}" data-ws-nav="control" data-ws-tier="control">Control Panel</a>
            @endif
            <a href="{{ $adminNavHref }}" class="flex items-center gap-2 rounded-lg px-3 py-1.5 text-[11px] {{ $nav === 'admin' ? 'bg-[#F5F7FA] text-[#012169] font-semibold' : 'text-[#5A6F85] hover:bg-[#F5F7FA] hover:text-[#012169]' }}" data-ws-nav="admin" data-ws-tier="admin">Admin</a>
        </div>
        <a href="{{ route('profile') }}" class="flex items-center gap-2 rounded-lg px-3 py-2 hover:bg-[#F5F7FA] transition-colors" data-ws-nav="profile" data-ws-tier="primary">
            @include('partials.user-avatar-image', ['size' => 'sm', 'user' => $user])
            <span class="text-xs font-medium text-[#4A5568] truncate">{{ config('platform.operator_display_name', $user?->name ?? 'User') }}</span>
        </a>
    </div>
</aside>