@php
    $monitorSession = (bool) ($monitorSession ?? false);
    $showSessionExpired = (bool) ($showSessionExpired ?? false);
@endphp

<style>
    .session-expired-overlay {
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        display: grid;
        place-items: center;
        padding: 20px;
        background: rgba(5, 20, 17, 0.78);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 180ms ease, visibility 180ms ease;
    }

    .session-expired-overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }

    .session-expired-dialog {
        width: min(430px, 100%);
        padding: 30px;
        border: 1px solid rgba(214, 235, 205, 0.22);
        border-radius: 28px;
        background: linear-gradient(155deg, rgba(29, 65, 56, 0.98), rgba(10, 36, 30, 0.99));
        color: #f4f8f3;
        box-shadow: 0 28px 80px rgba(2, 15, 12, 0.56);
        text-align: center;
        transform: translateY(12px) scale(0.98);
        transition: transform 180ms ease;
    }

    .session-expired-overlay.is-visible .session-expired-dialog {
        transform: translateY(0) scale(1);
    }

    .session-expired-icon {
        width: 58px;
        height: 58px;
        margin: 0 auto 18px;
        display: grid;
        place-items: center;
        border: 1px solid rgba(186, 212, 176, 0.28);
        border-radius: 18px;
        background: rgba(186, 212, 176, 0.12);
        color: #d6ebcd;
    }

    .session-expired-icon svg {
        width: 28px;
        height: 28px;
        fill: none;
        stroke: currentColor;
        stroke-linecap: round;
        stroke-linejoin: round;
        stroke-width: 1.8;
    }

    .session-expired-title {
        margin: 0 0 10px;
        color: #f4f8f3;
        font-family: "Space Grotesk", "Manrope", sans-serif;
        font-size: clamp(24px, 5vw, 30px);
        line-height: 1.15;
    }

    .session-expired-message {
        margin: 0 0 24px;
        color: #c7d7cc;
        font-family: "Manrope", sans-serif;
        font-size: 14px;
        line-height: 1.65;
    }

    .session-expired-login {
        display: inline-flex;
        width: 100%;
        min-height: 50px;
        align-items: center;
        justify-content: center;
        border: 0;
        border-radius: 16px;
        background: linear-gradient(120deg, #d6ebcd, #90ad98);
        color: #0c2924;
        font-family: "Manrope", sans-serif;
        font-size: 15px;
        font-weight: 700;
        text-decoration: none;
        box-shadow: 0 14px 28px rgba(3, 20, 16, 0.3);
    }

    html.session-expired-open,
    html.session-expired-open body {
        overflow: hidden !important;
    }
</style>

<script>
    (() => {
        const monitorSession = @json($monitorSession);
        const showInitially = @json($showSessionExpired);
        const loginUrl = @json(route('login'));
        const lifetimeMilliseconds = @json((int) config('session.lifetime', 480) * 60 * 1000);
        const nativeFetch = window.fetch ? window.fetch.bind(window) : null;
        let expirationTimer = null;
        let expiresAt = Date.now() + lifetimeMilliseconds;
        let isExpired = false;

        const mountModal = () => {
            let overlay = document.getElementById('session-expired-modal');

            if (overlay) {
                return overlay;
            }

            overlay = document.createElement('div');
            overlay.id = 'session-expired-modal';
            overlay.className = 'session-expired-overlay';
            overlay.setAttribute('role', 'dialog');
            overlay.setAttribute('aria-modal', 'true');
            overlay.setAttribute('aria-labelledby', 'session-expired-title');
            overlay.innerHTML = `
                <div class="session-expired-dialog">
                    <div class="session-expired-icon" aria-hidden="true">
                        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"></circle><path d="M12 7v5l3 2"></path></svg>
                    </div>
                    <h2 class="session-expired-title" id="session-expired-title">La sesión caducó</h2>
                    <p class="session-expired-message">Por seguridad, vuelve a ingresar para continuar usando Argos.</p>
                    <a class="session-expired-login" href="${loginUrl}">Iniciar sesión</a>
                </div>`;
            document.body.appendChild(overlay);

            return overlay;
        };

        const showExpiredModal = () => {
            if (isExpired) {
                return;
            }

            isExpired = true;
            window.clearTimeout(expirationTimer);

            const reveal = () => {
                const overlay = mountModal();
                document.documentElement.classList.add('session-expired-open');
                overlay.classList.add('is-visible');
                window.setTimeout(() => overlay.querySelector('.session-expired-login')?.focus(), 50);
            };

            document.readyState === 'loading'
                ? document.addEventListener('DOMContentLoaded', reveal, { once: true })
                : reveal();
        };

        const scheduleExpiration = () => {
            if (!monitorSession || isExpired) {
                return;
            }

            expiresAt = Date.now() + lifetimeMilliseconds;
            window.clearTimeout(expirationTimer);
            expirationTimer = window.setTimeout(showExpiredModal, lifetimeMilliseconds);
        };

        const isSameOriginRequest = (input) => {
            try {
                const rawUrl = typeof input === 'string' || input instanceof URL ? input : input.url;
                return new URL(rawUrl, window.location.href).origin === window.location.origin;
            } catch (_) {
                return false;
            }
        };

        const returnedToLogin = (response) => {
            if (!response.redirected || !response.url) {
                return false;
            }

            try {
                return new URL(response.url).pathname === new URL(loginUrl, window.location.href).pathname;
            } catch (_) {
                return false;
            }
        };

        if (monitorSession && nativeFetch) {
            window.fetch = async (...argumentsList) => {
                const sameOrigin = isSameOriginRequest(argumentsList[0]);
                const response = await nativeFetch(...argumentsList);

                if (sameOrigin && (response.status === 401 || response.status === 419 || returnedToLogin(response))) {
                    showExpiredModal();
                } else if (sameOrigin && response.ok) {
                    scheduleExpiration();
                }

                return response;
            };
        }

        if (monitorSession) {
            scheduleExpiration();
            document.addEventListener('visibilitychange', () => {
                if (!document.hidden && Date.now() >= expiresAt) {
                    showExpiredModal();
                }
            });
            window.addEventListener('focus', () => {
                if (Date.now() >= expiresAt) {
                    showExpiredModal();
                }
            });
        }

        if (showInitially) {
            showExpiredModal();
        }
    })();
</script>