@extends('layouts.error')

@section('title', 'Page Expired')

@section('content')
<div class="error-card">
    <div class="error-code text-warning">419</div>
    <h1 class="error-title">Your Session Has Expired</h1>
    <p class="error-description">
        This happens when the page has been idle for too long or after a system restart. 
        Please sign in again to continue.
    </p>
    
    <div class="error-actions">
        <a class="btn btn-primary" href="{{ route('login') }}">
            <i class="fas fa-sign-in-alt"></i>
            Sign In
        </a>
        <button type="button" class="btn btn-falcon-default d-none" onclick="window.location.reload()">
            <i class="fas fa-sync-alt"></i>
            Refresh Page
        </button>
    </div>
    
    <div class="error-tip">
        <i class="fas fa-lightbulb text-warning"></i>
        Tip: If login fails, try refreshing the page first to get a fresh security token.
    </div>
</div>
@endsection

@push('scripts')
<script>
// Store the current URL as intended URL before redirecting
(function() {
    const currentUrl = window.location.href;
    const isErrorPage = window.location.pathname.match(/\/(login|logout|register|password|419|401|403|404|500|unauthorized)/);
    
    if (!isErrorPage) {
        try {
            fetch('/auth/intended', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                },
                body: JSON.stringify({ intended: currentUrl }),
                credentials: 'same-origin'
            }).catch(() => {});
        } catch(e) {}
    }
})();

// Attempt a silent CSRF refresh so next action succeeds
(function(){
    try {
        fetch('{{ route('csrf.refresh') }}', { 
            method: 'POST', 
            headers: { 'X-Requested-With': 'XMLHttpRequest' }
        })
        .then(r => r.ok ? r.json() : null)
        .then(data => {
            if (data && data.csrf_token) {
                const meta = document.querySelector('meta[name="csrf-token"]');
                if (meta) meta.setAttribute('content', data.csrf_token);
                document.querySelectorAll('input[name="_token"]').forEach(i => i.value = data.csrf_token);
                if (window.$ && $.ajaxSetup) { 
                    $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': data.csrf_token } }); 
                }
            }
        }).catch(() => {});
    } catch(e) {}
})();

// Auto-redirect to login after 10 seconds if user doesn't click
setTimeout(function() {
    if (confirm('Still here? Click OK to go to login page now.')) {
        window.location.href = '{{ route('login') }}';
    }
}, 10000);
</script>
@endpush