<?php
require_once 'app/helpers/auth.php';
initSessionConfig();
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
$csrf = $_SESSION['csrf_token'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Login</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="preload" as="image" href="assets/img/logo_landing-hero-fleet.png">
    <link href="assets/css/auth.css" rel="stylesheet">
    <style> /* tiny inline override for light text on dark bg when needed */
        .bg-muted { color: #6b7280; }
    </style>
</head>
<body class="auth-bg">

<main class="auth-card">
    <div class="auth-hero">
        <div class="auth-chip">FleetOps</div>
        <div>
            <h1 class="auth-title">Welcome back</h1>
            <p class="auth-sub">Sign in to continue to your workspace</p>
        </div>
    </div>

    <div id="errorBox" class="alert alert-danger error-box" role="alert" aria-live="polite"></div>

    <div class="mb-2">
        <label for="email" class="form-label small">Email</label>
        <input type="email" id="email" class="form-control" placeholder="you@example.com" autocomplete="username" required>
    </div>

    <div class="mb-2">
        <label for="password" class="form-label small">Password</label>
        <div class="input-group">
            <input type="password" id="password" class="form-control" placeholder="Your password" autocomplete="current-password" required>
            <span class="input-group-text password-toggle" id="togglePassword" title="Show password">Show</span>
        </div>
    </div>

    <div class="d-grid gap-2 mt-3">
        <button id="btnLogin" class="btn btn-primary btn-lg" type="button">
            <span id="btnLabel">Sign in</span>
            <span id="btnSpinner" class="spinner-border spinner-border-sm ms-2 d-none" role="status" aria-hidden="true"></span>
        </button>
    </div>

    <div class="d-flex justify-content-between align-items-center mt-3 small">
        <a class="small-link" href="forgot_password.php">Forgot password?</a>
        <a class="small-link" href="register.php">Create account</a>
    </div>

</main>

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
var CSRF_TOKEN = <?= json_encode($csrf) ?>;

function showError(msg) {
    var $e = $('#errorBox');
    $e.text(msg).addClass('show');
}

$('#togglePassword').on('click', function(){
    var $p = $('#password');
    var t = $p.attr('type') === 'password' ? 'text' : 'password';
    $p.attr('type', t);
    $(this).text(t === 'password' ? 'Show' : 'Hide');
});

$('#btnLogin').on('click', function(){
    $('#errorBox').removeClass('show').text('');
    var email = $('#email').val().trim();
    var password = $('#password').val();
    if (!email) { showError('Email is required.'); return; }
    if (!password) { showError('Password is required.'); return; }

    var $btn = $(this);
    $btn.prop('disabled', true);
    $('#btnSpinner').removeClass('d-none');

    $.post('api/auth.php?action=login', {
        email: email,
        password: password,
        csrf_token: CSRF_TOKEN
    }, function(res){
        if (res && res.status === 'success') {
            // small delay to show success, then redirect
            window.location = 'dashboard.php';
        } else {
            showError((res && res.message) ? res.message : 'Invalid login');
        }
    }, 'json').fail(function(xhr){
        showError('Unable to process request.');
    }).always(function(){
        $btn.prop('disabled', false);
        $('#btnSpinner').addClass('d-none');
    });
});
</script>

</body>
</html>
