<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FireAlerts911 - Emergency Dispatch System</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🔥</text></svg>">
    <meta name="robots" content="noindex,nofollow">
    <meta name="application-name" content="FireAlerts911">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
            background-color: #1a2035;
            color: #f5f5f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow: hidden;
        }

        .redirect-container {
            text-align: center;
            padding: 40px;
            background-color: #272e48;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            max-width: 400px;
            width: 90%;
        }

        .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 30px;
        }

        .logo i {
            color: #e53935;
            margin-right: 15px;
            font-size: 48px;
        }

        .logo h1 {
            margin: 0;
            font-size: 32px;
            font-weight: 700;
            color: #f5f5f5;
        }

        .subtitle {
            color: #b8c2cc;
            font-size: 16px;
            margin-bottom: 30px;
            font-weight: 300;
        }

        .loading-spinner {
            display: inline-block;
            width: 40px;
            height: 40px;
            border: 3px solid #464d63;
            border-radius: 50%;
            border-top-color: #1e88e5;
            animation: spin 1s ease-in-out infinite;
            margin-bottom: 20px;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .redirect-message {
            color: #b8c2cc;
            font-size: 14px;
            margin-bottom: 20px;
        }

        .manual-link {
            display: inline-block;
            color: #1e88e5;
            text-decoration: none;
            padding: 10px 20px;
            border: 1px solid #1e88e5;
            border-radius: 4px;
            transition: all 0.3s ease;
            font-weight: 500;
        }

        .manual-link:hover {
            background-color: #1e88e5;
            color: #ffffff;
        }

        .redirect-container {
            opacity: 0;
            animation: fadeIn 0.5s ease-in-out forwards;
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="redirect-container">
        <div class="logo">
            <i class="fas fa-fire-alt"></i>
            <h1>FireAlerts911</h1>
        </div>
        <div class="subtitle">Emergency Dispatch System</div>

        <div class="loading-spinner"></div>
        <div class="redirect-message">Redirecting to login...</div>

        <a href="login.html" class="manual-link" id="manualLink" style="display: none;">
            Continue to Login
        </a>
    </div>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

    <script>
        (function() {
            function isAuthenticated() {
                const token = localStorage.getItem('token') || sessionStorage.getItem('token');
                const hasLoginState = localStorage.getItem('isLoggedIn') === 'true';

                if (token) {
                    try {
                        const payload = JSON.parse(atob(token.split('.')[1]));
                        if (payload.exp && payload.exp * 1000 < Date.now()) {
                            localStorage.removeItem('token');
                            sessionStorage.removeItem('token');
                            localStorage.removeItem('isLoggedIn');
                            localStorage.removeItem('userInfo');
                            return false;
                        }
                    } catch (e) {
                        localStorage.removeItem('token');
                        sessionStorage.removeItem('token');
                        localStorage.removeItem('isLoggedIn');
                        localStorage.removeItem('userInfo');
                        return false;
                    }
                }

                return !!token || hasLoginState;
            }

            function handleRedirect() {
                if (isAuthenticated()) {
                    console.log('User is authenticated, redirecting to dashboard');
                    window.location.replace('dashboard.html');
                } else {
                    console.log('User is not authenticated, redirecting to login');
                    window.location.replace('login.html');
                }
            }

            setTimeout(function() {
                const manualLink = document.getElementById('manualLink');
                const redirectMessage = document.querySelector('.redirect-message');
                const spinner = document.querySelector('.loading-spinner');

                if (manualLink && redirectMessage && spinner) {
                    spinner.style.display = 'none';
                    redirectMessage.textContent = 'If you are not redirected automatically:';
                    manualLink.style.display = 'inline-block';
                }
            }, 3000);

            handleRedirect();
        })();
    </script>
</body>
</html>