@php
    $admin = auth('admin')->user();
    $name  = $admin?->name ?? '';
    $email = $admin?->email ?? '';
    $initials = collect(preg_split('/\s+/', trim($name)))
        ->filter()
        ->take(2)
        ->map(fn ($p) => mb_strtoupper(mb_substr($p, 0, 1)))
        ->implode('') ?: 'NA';
    $currentLocale = app()->getLocale();

    // The Edit-Mode toggle only renders on the two show pages where
    // inline editing actually lives — adding it globally would confuse
    // the navbar everywhere else (logs, dashboard, etc. have no
    // editable sections).
    $currentRoute = optional(request()->route())->getName();
    $showEditModeToggle = in_array($currentRoute, ['admin.investors.show', 'admin.startups.show'], true);
@endphp

<header class="navbar">
    <div class="navbar-inner">
        <button type="button" class="sidebar-toggle" data-sidebar-toggle aria-label="{{ __('admin.nav.toggle_sidebar') }}" aria-expanded="false">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="3" y1="6" x2="21" y2="6"/>
                <line x1="3" y1="12" x2="21" y2="12"/>
                <line x1="3" y1="18" x2="21" y2="18"/>
            </svg>
        </button>

        <h1 class="navbar-title">@yield('page_title', __('admin.brand.tagline'))</h1>

        <div class="navbar-spacer"></div>

        @if ($showEditModeToggle)
            {{-- Edit-Mode toggle. Default = off (grey). Click → confirm
                 → on (primary). Not persisted: every page load defaults
                 to off so admins consciously opt into editing each time.
                 Powered by the Alpine.store('editMode') singleton wired
                 in the navbar's <script> below. --}}
            <button type="button"
                    class="edit-mode-toggle"
                    x-data
                    :class="$store.editMode.enabled ? 'edit-mode-toggle--on' : ''"
                    :aria-pressed="$store.editMode.enabled ? 'true' : 'false'"
                    :title="$store.editMode.enabled
                        ? @js(__('admin.edit_mode.tooltip_on'))
                        : @js(__('admin.edit_mode.tooltip_off'))"
                    @click="$store.editMode.toggle()">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
                </svg>
                <span class="edit-mode-toggle__dot" aria-hidden="true"></span>
            </button>
        @endif

        <div class="lang-switcher" role="group" aria-label="{{ __('admin.nav.language') }}">
            <a href="{{ route('locale.switch', 'en') }}" class="{{ $currentLocale === 'en' ? 'is-active' : '' }}">EN</a>
            <a href="{{ route('locale.switch', 'ar') }}" class="{{ $currentLocale === 'ar' ? 'is-active' : '' }}">AR</a>
        </div>

        <div class="user-menu" data-user-menu>
            <button type="button" class="user-menu-trigger" data-user-menu-trigger aria-haspopup="true" aria-expanded="false">
                <span class="avatar">{{ $initials }}</span>
                <span class="user-menu-name">{{ $name }}</span>
                <svg class="user-menu-caret" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                    <polyline points="6 9 12 15 18 9"/>
                </svg>
            </button>

            <ul class="user-menu-dropdown" role="menu">
                <li class="user-menu-header">
                    <span class="user-menu-header-name">{{ $name }}</span>
                    @if ($email)
                        <span class="user-menu-header-email">{{ $email }}</span>
                    @endif
                </li>
                <li class="user-menu-divider" aria-hidden="true"></li>
                {{-- Direct link to the Links page. Spec'd to sit ABOVE
                     Logout inside this dropdown rather than as a sidebar
                     entry, so the navbar stays the canonical place for
                     account-level utilities. --}}
                <li role="none">
                    <a href="{{ route('admin.links.index') }}"
                       class="user-menu-item {{ request()->routeIs('admin.links.*') ? 'is-active' : '' }}"
                       role="menuitem">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
                            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
                        </svg>
                        <span>{{ __('admin.user_menu.links') }}</span>
                    </a>
                </li>
                {{-- Inter-admin notes / reminders — same dropdown anchor
                     as Links so admins find both account-utilities in
                     one place. --}}
                <li role="none">
                    <a href="{{ route('admin.admin-notes.index') }}"
                       class="user-menu-item {{ request()->routeIs('admin.admin-notes.*') ? 'is-active' : '' }}"
                       role="menuitem">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                            <polyline points="14 2 14 8 20 8"/>
                            <line x1="16" y1="13" x2="8" y2="13"/>
                            <line x1="16" y1="17" x2="8" y2="17"/>
                            <polyline points="10 9 9 9 8 9"/>
                        </svg>
                        <span>{{ __('admin.user_menu.notes') }}</span>
                    </a>
                </li>
                {{-- AI Agents — accessed here (beside Notes), not from the
                     main sidebar, per ops. Gated by the agents.manage perm at
                     the route level. --}}
                @if (Route::has('admin.agents.index'))
                <li role="none">
                    <a href="{{ route('admin.agents.index') }}"
                       class="user-menu-item {{ request()->routeIs('admin.agents.*') ? 'is-active' : '' }}"
                       role="menuitem">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <path d="M12 8V4H8"/><rect width="16" height="12" x="4" y="8" rx="2"/><path d="M2 14h2M20 14h2M15 13v2M9 13v2"/>
                        </svg>
                        <span>{{ __('admin.user_menu.ai_agents') }}</span>
                    </a>
                </li>@endif
                @if (Route::has('admin.teams-webinars.index'))
                <li role="none">
                    <a href="{{ route('admin.teams-webinars.index') }}"
                       class="user-menu-item {{ request()->routeIs('admin.teams-webinars.*') ? 'is-active' : '' }}"
                       role="menuitem">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                            <rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>
                        </svg>
                        <span>{{ __('admin.user_menu.microsoft_teams_webinars') }}</span>
                    </a>
                </li>@endif
                <li role="none">
                    <form method="POST" action="{{ route('admin.logout') }}" class="user-menu-logout-form">
                        @csrf
                        <button type="submit" class="user-menu-item is-logout" role="menuitem">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
                                <polyline points="16 17 21 12 16 7"/>
                                <line x1="21" y1="12" x2="9" y2="12"/>
                            </svg>
                            <span>{{ __('admin.user_menu.logout') }}</span>
                        </button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</header>

@if ($showEditModeToggle)
    @once
    <style>
        .edit-mode-toggle {
            display: inline-flex; align-items: center; justify-content: center;
            position: relative;
            width: 34px; height: 34px;
            background: #f1f5f9;
            color: #64748b;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            cursor: pointer;
            margin-inline: 6px;
            transition: background-color .15s, color .15s, border-color .15s, transform .08s;
        }
        .edit-mode-toggle:hover { background: #e2e8f0; color: #475569; }
        .edit-mode-toggle:active { transform: translateY(1px); }
        /* Tiny status dot — grey when off, green when on. Lives in the
           corner so the icon itself stays the action affordance. */
        .edit-mode-toggle__dot {
            position: absolute;
            top: 3px; inset-inline-end: 3px;
            width: 7px; height: 7px;
            background: #cbd5e1;
            border: 2px solid #fff;
            border-radius: 50%;
            transition: background-color .15s;
        }
        .edit-mode-toggle--on {
            background: #eef2ff;
            color: #4f46e5;
            border-color: #c7d2fe;
            /* Continuous glow ring + icon wobble keep the admin aware
               edit mode is live (premature destructive clicks are easy
               otherwise). Animations stop on hover/focus so the user
               can read the tooltip without movement. */
            animation: editModePulseRing 2.2s ease-in-out infinite;
        }
        .edit-mode-toggle--on:hover { background: #e0e7ff; color: #4338ca; animation: none; }
        .edit-mode-toggle--on .edit-mode-toggle__dot {
            background: #10b981;
            animation: editModeDotPulse 1.4s ease-in-out infinite;
        }
        .edit-mode-toggle--on svg {
            animation: editModeIconNudge 2.2s ease-in-out infinite;
        }
        .edit-mode-toggle--on:hover svg,
        .edit-mode-toggle--on:hover .edit-mode-toggle__dot { animation: none; }

        @keyframes editModePulseRing {
            0%, 100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
            50%      { box-shadow: 0 0 0 6px rgba(79, 70, 229, .18); }
        }
        @keyframes editModeDotPulse {
            0%, 100% { transform: scale(1);   box-shadow: 0 0 0 0 rgba(16, 185, 129, .55); }
            50%      { transform: scale(1.2); box-shadow: 0 0 0 4px rgba(16, 185, 129, 0); }
        }
        @keyframes editModeIconNudge {
            0%, 80%, 100% { transform: rotate(0deg); }
            85%           { transform: rotate(-10deg); }
            92%           { transform: rotate(8deg); }
        }
        @media (prefers-reduced-motion: reduce) {
            .edit-mode-toggle--on,
            .edit-mode-toggle--on .edit-mode-toggle__dot,
            .edit-mode-toggle--on svg { animation: none !important; }
        }

        /* When edit mode is off, every editable affordance hides itself
           via this body-level signal. Avoids per-element x-show plumbing
           in every component. Notes + Action picker live OUTSIDE this
           cascade (they don't carry the [data-edit-affordance] hook)
           so they stay always-on. */
        body:not(.edit-mode-on) [data-edit-affordance] { display: none !important; }
    </style>

    <script>
    // Page-scoped, NOT persisted. Closing/reopening the page resets to
    // off so admins consciously opt into editing every time.
    document.addEventListener('alpine:init', () => {
        Alpine.store('editMode', {
            enabled: false,
            init() { document.body.classList.remove('edit-mode-on'); },
            toggle() {
                if (this.enabled) {
                    // Turning OFF is silent. Any section / team row
                    // that's currently mid-edit auto-cancels via this
                    // window event so we don't leave orphan forms open
                    // when the Edit affordances disappear.
                    this.enabled = false;
                    document.body.classList.remove('edit-mode-on');
                    window.dispatchEvent(new CustomEvent('edit-mode:disabled'));
                    return;
                }
                // Turning ON requires explicit consent each time.
                const msg = @json(__('admin.edit_mode.confirm_enable'));
                if (window.confirm(msg)) {
                    this.enabled = true;
                    document.body.classList.add('edit-mode-on');
                }
            },
        });
    });
    </script>
    @endonce
@endif