@if(session('impersonation'))
    @php
        $impersonationData = session('impersonation');
        $impersonator = \App\Models\User::find($impersonationData['impersonator_id']);
        $impersonatedUser = \App\Models\User::find($impersonationData['impersonated_user_id']);
        $startedAt = \Carbon\Carbon::parse($impersonationData['started_at']);
        $expiresAt = \Carbon\Carbon::parse($impersonationData['expires_at']);
    @endphp

    <div class="bg-warning text-warning-content p-3 shadow-lg border-b-2 border-warning-focus">
        <div class="max-w-7xl mx-auto flex items-center justify-between">
            <div class="flex items-center space-x-4">
                <div class="flex items-center space-x-2">
                    <svg class="w-5 h-5 text-warning-content" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                    </svg>
                    <span class="font-semibold">IMPERSONATION ACTIVE</span>
                </div>
                
                <div class="hidden md:flex items-center space-x-4 text-sm">
                    <div>
                        <span class="font-medium">Impersonator:</span>
                        <span>{{ $impersonator->name ?? 'Unknown' }}</span>
                    </div>
                    <div>
                        <span class="font-medium">Impersonating:</span>
                        <span>{{ $impersonatedUser->name ?? 'Unknown' }}</span>
                    </div>
                    <div>
                        <span class="font-medium">Started:</span>
                        <span>{{ $startedAt->diffForHumans() }}</span>
                    </div>
                    <div>
                        <span class="font-medium">Expires:</span>
                        <span>{{ $expiresAt->diffForHumans() }}</span>
                    </div>
                </div>
            </div>

            <div class="flex items-center space-x-2">
                <!-- Session Timer -->
                <div class="hidden lg:block text-sm">
                    <span class="font-medium">Session Time:</span>
                    <span id="impersonation-timer" class="font-mono">{{ $startedAt->diffForHumans(null, true) }}</span>
                </div>

                <!-- Exit Impersonation Button -->
                <x-splade-form 
                    method="POST" 
                    :action="route('admin.impersonation.end')"
                    confirm="Are you sure you want to end this impersonation session?"
                    confirm-text="You will be logged back in as {{ $impersonator->name ?? 'the original user' }}."
                    confirm-button="Yes, end session"
                    cancel-button="Cancel"
                    class="inline"
                >
                    <button type="submit" class="btn btn-sm btn-error">
                        <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                            <path fill-rule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clip-rule="evenodd"></path>
                        </svg>
                        Exit Impersonation
                    </button>
                </x-splade-form>
            </div>
        </div>

        <!-- Mobile View -->
        <div class="md:hidden mt-2 pt-2 border-t border-warning-focus/30">
            <div class="grid grid-cols-2 gap-2 text-xs">
                <div>
                    <span class="font-medium">Impersonator:</span>
                    <div>{{ $impersonator->name ?? 'Unknown' }}</div>
                </div>
                <div>
                    <span class="font-medium">Impersonating:</span>
                    <div>{{ $impersonatedUser->name ?? 'Unknown' }}</div>
                </div>
                <div>
                    <span class="font-medium">Started:</span>
                    <div>{{ $startedAt->diffForHumans() }}</div>
                </div>
                <div>
                    <span class="font-medium">Expires:</span>
                    <div>{{ $expiresAt->diffForHumans() }}</div>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        // Update the impersonation timer every minute
        function updateImpersonationTimer() {
            const timerElement = document.getElementById('impersonation-timer');
            if (timerElement) {
                const startedAt = new Date('{{ $startedAt->toISOString() }}');
                const now = new Date();
                const diffInMinutes = Math.floor((now - startedAt) / (1000 * 60));
                
                let timeString;
                if (diffInMinutes < 60) {
                    timeString = diffInMinutes + 'm';
                } else {
                    const hours = Math.floor(diffInMinutes / 60);
                    const minutes = diffInMinutes % 60;
                    timeString = hours + 'h ' + minutes + 'm';
                }
                
                timerElement.textContent = timeString;
            }
        }

        // Update timer immediately and then every minute
        updateImpersonationTimer();
        setInterval(updateImpersonationTimer, 60000);

        // Check for session expiration every 30 seconds
        function checkSessionExpiration() {
            const expiresAt = new Date('{{ $expiresAt->toISOString() }}');
            const now = new Date();
            
            if (now >= expiresAt) {
                // Session has expired, show warning and redirect
                alert('Your impersonation session has expired. You will be redirected to the admin dashboard.');
                window.location.href = '{{ route("admin.dashboard") }}';
            } else if (now >= new Date(expiresAt.getTime() - 5 * 60 * 1000)) {
                // 5 minutes before expiration, show warning
                const minutesLeft = Math.ceil((expiresAt - now) / (1000 * 60));
                if (minutesLeft <= 5 && !sessionStorage.getItem('impersonation_warning_shown')) {
                    alert(`Warning: Your impersonation session will expire in ${minutesLeft} minute(s).`);
                    sessionStorage.setItem('impersonation_warning_shown', 'true');
                }
            }
        }

        // Check expiration every 30 seconds
        setInterval(checkSessionExpiration, 30000);
        
        // Clear warning flag when page loads
        sessionStorage.removeItem('impersonation_warning_shown');
    </script>
    @endpush
@endif