@php
    $sessionLifetimeSeconds = max(60, (int) config('session.lifetime') * 60);
    $sessionIsArabic = app()->getLocale() === 'ar';
    $sessionLoginUrl = \Illuminate\Support\Facades\Route::has('login.view') ? route('login.view') : url('/');
@endphp

<style>
    .session-timeout-overlay {
        align-items: center;
        background: rgba(15, 23, 42, .58);
        display: none;
        inset: 0;
        justify-content: center;
        padding: 20px;
        position: fixed;
        z-index: 100000;
    }

    .session-timeout-overlay.is-visible { display: flex; }

    .session-timeout-dialog {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 20px 60px rgba(15, 23, 42, .28);
        direction: {{ $sessionIsArabic ? 'rtl' : 'ltr' }};
        max-width: 460px;
        padding: 28px;
        text-align: {{ $sessionIsArabic ? 'right' : 'left' }};
        width: 100%;
    }

    .session-timeout-dialog h4 {
        color: #b45309;
        font-size: 20px;
        margin: 0 0 12px;
    }

    .session-timeout-dialog p {
        color: #475569;
        line-height: 1.8;
        margin: 0 0 18px;
    }

    .session-timeout-countdown {
        color: #dc2626;
        direction: ltr;
        display: inline-block;
        font-weight: 700;
        min-width: 52px;
        text-align: center;
    }

    .session-timeout-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .session-timeout-continue,
    .session-timeout-login {
        border: 0;
        border-radius: 6px;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        padding: 10px 18px;
        text-decoration: none;
    }

    .session-timeout-continue {
        background: #765dbb;
        color: #fff;
    }

    .session-timeout-continue:disabled {
        cursor: wait;
        opacity: .65;
    }

    .session-timeout-login {
        background: #e2e8f0;
        color: #334155;
        display: none;
    }

    .session-timeout-status {
        color: #dc2626;
        display: none;
        font-size: 13px;
        margin-top: 14px;
    }
</style>

<div id="session-timeout-overlay" class="session-timeout-overlay" role="dialog" aria-modal="true"
     aria-labelledby="session-timeout-title">
    <div class="session-timeout-dialog">
        <h4 id="session-timeout-title">
            {{ $sessionIsArabic ? 'ستنتهي جلستك قريبًا' : 'Your session will expire soon' }}
        </h4>
        <p id="session-timeout-message">
            @if ($sessionIsArabic)
                ستنتهي الجلسة خلال <span id="session-timeout-countdown" class="session-timeout-countdown">05:00</span>.
                اضغط «استمرار الجلسة» حتى لا تفقد العمل الحالي.
            @else
                Your session will expire in <span id="session-timeout-countdown" class="session-timeout-countdown">05:00</span>.
                Select “Continue session” to keep your current work.
            @endif
        </p>
        <div class="session-timeout-actions">
            <button id="session-timeout-continue" class="session-timeout-continue" type="button">
                {{ $sessionIsArabic ? 'استمرار الجلسة' : 'Continue session' }}
            </button>
            <a id="session-timeout-login" class="session-timeout-login" href="{{ $sessionLoginUrl }}"
               target="_blank" rel="noopener">
                {{ $sessionIsArabic ? 'فتح تسجيل الدخول' : 'Open login' }}
            </a>
        </div>
        <div id="session-timeout-status" class="session-timeout-status" role="alert"></div>
    </div>
</div>

<script>
    (function () {
        'use strict';

        var lifetimeMs = {{ $sessionLifetimeSeconds * 1000 }};
        var warningMs = Math.min(5 * 60 * 1000, Math.max(30 * 1000, Math.floor(lifetimeMs / 2)));
        var keepAliveUrl = @json(route('admin.session.keep_alive'));
        var loginUrl = @json($sessionLoginUrl);
        var storageKey = @json('ezdan.session.last_activity.' . auth('admin')->id());
        var overlay = document.getElementById('session-timeout-overlay');
        var countdown = document.getElementById('session-timeout-countdown');
        var continueButton = document.getElementById('session-timeout-continue');
        var loginButton = document.getElementById('session-timeout-login');
        var status = document.getElementById('session-timeout-status');
        var message = document.getElementById('session-timeout-message');
        var title = document.getElementById('session-timeout-title');
        var lastActivityAt = Date.now();
        var isRefreshing = false;
        var isArabic = {{ $sessionIsArabic ? 'true' : 'false' }};

        function readSharedActivity() {
            try {
                var savedActivity = Number(window.localStorage.getItem(storageKey));
                return Number.isFinite(savedActivity) && savedActivity > 0 ? savedActivity : null;
            } catch (error) {
                return null;
            }
        }

        function writeSharedActivity(value) {
            try {
                window.localStorage.setItem(storageKey, String(value));
            } catch (error) {
                // The timer still works when local storage is unavailable.
            }
        }

        function markServerActivity(activityAt) {
            lastActivityAt = activityAt || Date.now();
            writeSharedActivity(lastActivityAt);
            overlay.classList.remove('is-visible');
            status.style.display = 'none';
            loginButton.style.display = 'none';
            continueButton.disabled = false;
            continueButton.textContent = isArabic ? 'استمرار الجلسة' : 'Continue session';
        }

        function isLoginResponse(url) {
            if (!url) return false;

            try {
                return new URL(url, window.location.origin).pathname ===
                    new URL(loginUrl, window.location.origin).pathname;
            } catch (error) {
                return false;
            }
        }

        function showExpiredState() {
            overlay.classList.add('is-visible');
            title.textContent = isArabic ? 'انتهت مهلة الجلسة' : 'Session time elapsed';
            message.textContent = isArabic
                ? 'حاول استمرار الجلسة أولًا. إذا طُلب تسجيل الدخول، افتحه في تبويب جديد حتى تبقى بيانات هذه الصفحة محفوظة.'
                : 'Try to continue first. If sign-in is required, open it in a new tab so the data on this page remains in place.';
            continueButton.textContent = isArabic ? 'محاولة استمرار الجلسة' : 'Try to continue';
        }

        function showLoginRequired() {
            showExpiredState();
            loginButton.style.display = 'inline-block';
            status.textContent = isArabic
                ? 'تعذر تجديد الجلسة. سجّل الدخول في التبويب الجديد، ثم ارجع واضغط «محاولة استمرار الجلسة».'
                : 'The session could not be renewed. Sign in in the new tab, then return and try again.';
            status.style.display = 'block';
        }

        function updateTimer() {
            var sharedActivity = readSharedActivity();
            if (sharedActivity && sharedActivity > lastActivityAt) lastActivityAt = sharedActivity;

            var remainingMs = lifetimeMs - (Date.now() - lastActivityAt);
            if (remainingMs <= 0) {
                showExpiredState();
                return;
            }

            if (remainingMs <= warningMs) {
                var totalSeconds = Math.max(0, Math.ceil(remainingMs / 1000));
                var minutes = Math.floor(totalSeconds / 60);
                var seconds = totalSeconds % 60;
                countdown.textContent = String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0');
                overlay.classList.add('is-visible');
            } else {
                overlay.classList.remove('is-visible');
            }
        }

        function continueSession() {
            if (isRefreshing) return;

            isRefreshing = true;
            continueButton.disabled = true;
            continueButton.textContent = isArabic ? 'جارٍ التجديد...' : 'Renewing...';
            status.style.display = 'none';

            window.fetch(keepAliveUrl, {
                method: 'GET',
                credentials: 'same-origin',
                cache: 'no-store',
                redirect: 'follow',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            }).then(function (response) {
                if (!response.ok || response.redirected || isLoginResponse(response.url)) {
                    throw new Error('SESSION_EXPIRED');
                }
                return response.json();
            }).then(function (data) {
                if (!data || data.ok !== true) throw new Error('INVALID_RESPONSE');

                if (Number(data.expires_in) > 0) {
                    lifetimeMs = Number(data.expires_in) * 1000;
                    warningMs = Math.min(5 * 60 * 1000, Math.max(30 * 1000, Math.floor(lifetimeMs / 2)));
                }
                title.textContent = isArabic ? 'ستنتهي جلستك قريبًا' : 'Your session will expire soon';
                markServerActivity();
            }).catch(function () {
                showLoginRequired();
            }).finally(function () {
                isRefreshing = false;
                continueButton.disabled = false;
            });
        }

        continueButton.addEventListener('click', continueSession);
        window.addEventListener('storage', function (event) {
            if (event.key === storageKey && Number(event.newValue) > lastActivityAt) {
                lastActivityAt = Number(event.newValue);
                updateTimer();
            }
        });

        if (window.jQuery) {
            window.jQuery(document).ajaxComplete(function (event, xhr) {
                if (xhr.status >= 200 && xhr.status < 400 && !isLoginResponse(xhr.responseURL)) {
                    markServerActivity();
                }
            });
        }

        markServerActivity();
        updateTimer();
        window.setInterval(updateTimer, 1000);
    }());
</script>