<?php
// access.php

function denyAccessModal(
    string $message = "You are not authorized to access this page.",
    string $redirect = "dashboard.php",
    int $httpStatusCode = 403,
    int $countdownSeconds = 10
): void {
    http_response_code($httpStatusCode);
    header("Cache-Control: no-store, no-cache, must-revalidate, max-age=0");
    header("Pragma: no-cache");

    $escapedMessage = htmlspecialchars($message, ENT_QUOTES, 'UTF-8');
    $escapedRedirect = htmlspecialchars($redirect, ENT_QUOTES, 'UTF-8');
    
    echo <<<HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Access Denied</title>
    <style>
        .access-denied-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
            padding: 20px;
            box-sizing: border-box;
        }

        .access-denied-content {
            background: #fff;
            padding: 2.5rem;
            border-radius: 12px;
            width: 100%;
            max-width: 600px;
            min-height: 300px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            animation: fadeInScale 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        @keyframes fadeInScale {
            from { transform: scale(0.96); opacity: 0; }
            to { transform: scale(1); opacity: 1; }
        }

        .access-denied-icon {
            margin-bottom: 1.5rem;
            width: 5rem;
            height: 5rem;
            color: #dc3545;
            flex-shrink: 0;
        }

        .access-denied-heading {
            margin: 0 0 1.25rem;
            color: #dc3545;
            font-size: 2rem;
            font-weight: 600;
            line-height: 1.3;
        }

        .access-denied-message {
            margin: 0 0 2rem;
            color: #495057;
            line-height: 1.6;
            font-size: 1.15rem;
            flex-grow: 1;
            overflow-y: auto;
            max-height: 200px;
            padding: 0 10px;
        }

        .button-container {
            margin-top: auto;
        }

        .access-denied-button {
            background: #dc3545;
            color: #fff;
            border: none;
            padding: 0.9rem 2rem;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: 500;
            transition: all 0.25s ease;
            min-width: 240px;
            margin-bottom: 1rem;
        }

        .countdown-text {
            color: #6c757d;
            font-size: 1rem;
            margin: 0.5rem 0 0;
            min-height: 1.5rem;
        }

        @media (max-width: 480px) {
            .access-denied-content {
                padding: 1.8rem;
                min-height: auto;
            }
            .access-denied-heading {
                font-size: 1.6rem;
            }
            .access-denied-message {
                font-size: 1rem;
                max-height: 150px;
            }
            .access-denied-button {
                min-width: 200px;
                padding: 0.8rem 1.5rem;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .access-denied-content,
            .access-denied-button {
                animation: none;
                transition: none;
            }
        }
    </style>
</head>
<body>
    <div class="access-denied-modal" role="alertdialog" aria-modal="true" aria-labelledby="access-denied-title">
        <div class="access-denied-content">
            <div>
                <svg xmlns="http://www.w3.org/2000/svg" class="access-denied-icon" fill="currentColor" viewBox="0 0 16 16" aria-hidden="true">
                    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                </svg>
                <h1 id="access-denied-title" class="access-denied-heading">Access Denied</h1>
                <p class="access-denied-message">{$escapedMessage}</p>
            </div>
            <div class="button-container">
                <button id="returnButton" class="access-denied-button">
                    Return to Dashboard ({$countdownSeconds})
                </button>
                <p id="countdown" class="countdown-text">Redirecting in {$countdownSeconds} seconds...</p>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const returnButton = document.getElementById('returnButton');
            const countdownText = document.getElementById('countdown');
            const modal = document.querySelector('.access-denied-modal');
            const modalContent = document.querySelector('.access-denied-content');
            let countdown = {$countdownSeconds};
            let redirectTimer;
            let isRedirecting = false;

            // Ensure modal content is vertically centered
            function centerModal() {
                const windowHeight = window.innerHeight;
                const contentHeight = modalContent.offsetHeight;
                if (contentHeight < windowHeight) {
                    const padding = (windowHeight - contentHeight) / 2;
                    modalContent.style.marginTop = `${padding}px`;
                } else {
                    modalContent.style.marginTop = '20px';
                }
            }

            // Update countdown display
            function updateCountdown() {
                const plural = countdown === 1 ? '' : 's';
                returnButton.textContent = `Return to Dashboard (${countdown})`;
                countdownText.textContent = `Redirecting in ${countdown} second${plural}...`;
                
                if (countdown <= 0) {
                    clearInterval(redirectTimer);
                    initiateRedirect();
                }
                countdown--;
            }

            // Handle the redirect with fade effect
            function initiateRedirect() {
                if (isRedirecting) return;
                isRedirecting = true;
                
                modal.style.transition = 'opacity 0.4s ease';
                modal.style.opacity = '0';
                clearInterval(redirectTimer);
                
                setTimeout(() => {
                    window.location.href = '{$escapedRedirect}';
                }, 400);
            }

            // Initial setup
            centerModal();
            window.addEventListener('resize', centerModal);
            redirectTimer = setInterval(updateCountdown, 1000);

            // Event listeners
            returnButton.addEventListener('click', initiateRedirect);
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape') initiateRedirect();
            });
            returnButton.focus();
        });
    </script>
</body>
</html>
HTML;
    exit;
}