{{--
    System Status notch — a pull-down tab in the spirit of a phone's
    notification shade, following the same auto-hide pattern as the Obvizio
    header: reaching the very top of the page transitions it in, scrolling away
    puts it back, and it retracts on its own after a few seconds.

    Super Admin only, and gated at the top so nobody else receives the markup,
    the styles or the script at all — this is a link into raw log output, not a
    feature to hide with CSS. MsgWave pinned it to a hardcoded user id; here it
    follows the same role check the boards themselves enforce, so access can
    never drift apart from the pages it points at.

    Resting state: a thin sliver peeking under the top edge.
    Revealed:      drops fully into view, holds for 5 seconds, then retracts.
                   Hovering it keeps it open; clicking opens the status board.
--}}
@if (auth()->user()?->isSuperAdmin())
    @php
        $statusUrl = \Illuminate\Support\Facades\Route::has('dev.signal')
            ? route('dev.signal')
            : url('/the-bat-signal');
        $pulseUrl = \Illuminate\Support\Facades\Route::has('dev.pulse')
            ? route('dev.pulse')
            : url('/the-knights-watch');
    @endphp

    {{-- Two boards behind one tab: Signal answers "what is broken", Pulse
         "what is slow". Splitting them into two notches would clutter the top
         edge for a page that is mostly not being looked at. --}}
    <div id="system-status-notch" class="ssn">
        <a href="{{ $statusUrl }}" class="ssn-link" target="_blank" rel="noopener"
           aria-label="Signal — error status board (opens in a new tab)">Signal</a>
        <span class="ssn-sep" aria-hidden="true"></span>
        <a href="{{ $pulseUrl }}" class="ssn-link" target="_blank" rel="noopener"
           aria-label="Pulse — performance board (opens in a new tab)">Pulse</a>
    </div>

    <style>
        .ssn {
            position: fixed;
            top: 0;
            left: 50%;
            z-index: 10000;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 168px;
            height: 30px;
            padding: 0 14px;
            box-sizing: border-box;
            background: #4e4e4e;
            color: #fff;
            gap: 10px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .02em;
            text-decoration: none;
            border-radius: 0 0 10px 10px;
            pointer-events: none;
            will-change: transform;
            /* Resting: all but a sliver tucked above the edge. */
            transform: translateX(-50%) translateY(-24px);
        }
        .ssn.ssn-transition {
            transition: transform .28s cubic-bezier(.22, .61, .36, 1);
        }
        .ssn.ssn-open {
            transform: translateX(-50%) translateY(0);
            pointer-events: auto;
        }
        /*
            The two flares either side of the top edge. border-radius can only
            bulge outward, so the concave corner is a radial-gradient: a 10px
            square filled with the notch colour everywhere except a quarter
            circle, which leaves the notch flowing into the top edge the way a
            Mac notch does. Change the colour here too if you change it above.
        */
        .ssn::before,
        .ssn::after {
            content: "";
            position: absolute;
            top: 0;
            width: 10px;
            height: 8px;
        }
        .ssn::before {
            left: -10px;
            background: radial-gradient(circle at 0 100%, rgba(78, 78, 78, 0) 10px, #4e4e4e 10.5px);
        }
        .ssn::after {
            right: -10px;
            background: radial-gradient(circle at 100% 100%, rgba(78, 78, 78, 0) 10px, #4e4e4e 10.5px);
        }
        .ssn-link {
            color: #fff;
            text-decoration: none;
            white-space: nowrap;
            opacity: .85;
        }
        .ssn-link:hover, .ssn-link:focus { color: #fff; opacity: 1; text-decoration: underline; }
        .ssn-sep { width: 1px; height: 14px; background: rgba(255, 255, 255, .35); }
    </style>

    <script>
    (function () {
        var notch = document.getElementById('system-status-notch');
        if (!notch) { return; }

        var HOLD_MS = 5000;        // how long it stays down once shown
        var PULL_REQUIRED = 90;    // extra pull, once already at the top, to re-summon it
        var isOpen = false;
        var hovering = false;
        var hideTimeout = null;
        var pulled = 0;
        var pullReset = null;

        // Added after the first paint so the notch does not slide in on load.
        setTimeout(function () { notch.classList.add('ssn-transition'); }, 50);

        function atTop() {
            return (window.pageYOffset || document.documentElement.scrollTop || 0) <= 0;
        }

        function startHideTimer() {
            clearTimeout(hideTimeout);
            hideTimeout = setTimeout(function () {
                if (!hovering) { hideNotch(); }
            }, HOLD_MS);
        }

        function showNotch() {
            if (!isOpen) {
                notch.classList.add('ssn-open');
                isOpen = true;
            }
            startHideTimer();
        }

        function hideNotch() {
            notch.classList.remove('ssn-open');
            isOpen = false;
            pulled = 0;
            clearTimeout(hideTimeout);
            hideTimeout = null;
        }

        function checkScroll() {
            if (atTop()) {
                showNotch();
            } else if (isOpen && !hovering) {
                hideNotch();
            }
        }

        // Already at the top and still pulling down — summon it again.
        function pull(amount) {
            if (!atTop() || isOpen) { return; }
            pulled += amount;
            clearTimeout(pullReset);
            pullReset = setTimeout(function () { pulled = 0; }, 400);
            if (pulled >= PULL_REQUIRED) { showNotch(); }
        }

        window.addEventListener('scroll', checkScroll, { passive: true });

        window.addEventListener('wheel', function (e) {
            if (e.deltaY < 0) { pull(-e.deltaY); }
            else if (e.deltaY > 0 && isOpen && !hovering) { hideNotch(); }
        }, { passive: true });

        var touchY = null;
        window.addEventListener('touchstart', function (e) {
            touchY = (e.touches && e.touches.length) ? e.touches[0].clientY : null;
        }, { passive: true });
        window.addEventListener('touchmove', function (e) {
            if (touchY === null || !e.touches || !e.touches.length) { return; }
            var dy = e.touches[0].clientY - touchY;
            touchY = e.touches[0].clientY;
            if (dy > 0) { pull(dy); }
            else if (dy < 0 && isOpen && !hovering) { hideNotch(); }
        }, { passive: true });
        window.addEventListener('touchend', function () { touchY = null; }, { passive: true });

        notch.addEventListener('mouseenter', function () {
            hovering = true;
            clearTimeout(hideTimeout);
        });
        notch.addEventListener('mouseleave', function () {
            hovering = false;
            if (isOpen) { startHideTimer(); }
        });

        checkScroll();
    })();
    </script>
@endif