<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>EcoBot - Login</title>
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="/admin/css/style.css">
    <style>
        .success-message {
            background: #e8f5e9;
            border-left: 4px solid #28a745;
            color: #2e7d32;
            padding: 10px 15px;
            border-radius: 4px;
            margin-bottom: 18px;
            font-size: 14px;
            display: none;
        }
        .forgot-link {
            display: block;
            text-align: right;
            font-size: 13px;
            color: #28a745;
            text-decoration: none;
            margin-top: 6px;
        }
        .forgot-link:hover { text-decoration: underline; }
        .login-subtitle {
            color: #888;
            font-size: 13px;
            text-align: center;
            margin-top: 4px;
        }
    </style>
</head>
<body>
    <div class="login-container">
        <div class="login-box">
            <div class="logo">
                <h1>EcoBot</h1>
                <p class="login-subtitle">Coach Portal</p>
            </div>

            <div id="successMsg" class="success-message">
                <span class="material-icons" style="font-size:16px;vertical-align:middle;margin-right:6px;">check_circle</span>
                <span id="successText">Account created successfully! Please log in below.</span>
            </div>
            <div id="errorMsg" class="error-message" style="display: none;"></div>

            <form id="loginForm" class="login-form">
                <div class="form-group">
                    <label for="email">Email</label>
                    <input type="email" id="email" name="email" placeholder="your@email.com" required autocomplete="email">
                </div>
                <div class="form-group">
                    <label for="password">Password</label>
                    <input type="password" id="password" name="password" placeholder="Your password" required autocomplete="current-password">
                    <a href="/admin/forgot-password" class="forgot-link">Forgot password?</a>
                </div>
                <button type="submit" class="btn-login">Log In</button>
            </form>

            <p style="text-align:center;margin-top:18px;font-size:13px;color:#888;">
                Don't have an account? <a href="/admin/signup" style="color:#28a745;text-decoration:none;">Sign up</a>
            </p>
        </div>
    </div>

    <script>
        const params = new URLSearchParams(window.location.search);
        if (params.get('setup') === 'done') {
            document.getElementById('successText').textContent = 'Account created successfully! Please log in below.';
            document.getElementById('successMsg').style.display = 'block';
        }
        if (params.get('reset') === 'done') {
            document.getElementById('successText').textContent = 'Password reset successfully! Please log in below.';
            document.getElementById('successMsg').style.display = 'block';
        }

        document.getElementById('loginForm').addEventListener('submit', function(e) {
            e.preventDefault();

            const email = document.getElementById('email').value;
            const password = document.getElementById('password').value;
            const errorMsg = document.getElementById('errorMsg');

            errorMsg.style.display = 'none';

            fetch('/admin/api/login', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ email, password })
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    window.location.href = data.redirect;
                } else {
                    errorMsg.textContent = data.error || 'Invalid email or password';
                    errorMsg.style.display = 'block';
                    setTimeout(() => { errorMsg.style.display = 'none'; }, 4000);
                }
            })
            .catch(() => {
                errorMsg.textContent = 'Connection error. Please try again.';
                errorMsg.style.display = 'block';
                setTimeout(() => { errorMsg.style.display = 'none'; }, 4000);
            });
        });
    </script>
</body>
</html>
