<?php
require_once __DIR__ . '/../config/config.php';

if (session_status() === PHP_SESSION_NONE) { session_name(SESSION_NAME); session_start(); }

$error = $_SESSION['signin_error'] ?? '';
unset($_SESSION['signin_error']);

$oldEmail = $_SESSION['signin_email'] ?? '';
unset($_SESSION['signin_email']);

if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

if (isset($auth) && $auth->isLoggedIn()) {
    header('Location: /traderalign/dashboard');
    exit;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign In - TraderAlign</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/traderalign/assets/tokens.css">
<link rel="icon" type="image/png" sizes="32x32" href="/traderalign/assets/favicon/favicon-32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/traderalign/assets/favicon/favicon-16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/traderalign/assets/favicon/apple-touch-icon.png">
    <link rel="shortcut icon" href="/traderalign/assets/favicon/favicon.ico">
<link rel="stylesheet" href="/traderalign/assets/css/brand.css">
<style>
.signin-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;background:var(--background)}
.signin-card{width:100%;max-width:26rem;background:var(--background-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2.5rem}
.signin-card h1{font-size:1.5rem;font-weight:700;color:var(--foreground);margin-bottom:.5rem}
.signin-card .sub{color:var(--foreground-muted);font-size:.9rem;margin-bottom:2rem}
.form-group{margin-bottom:1.25rem}
.form-group label{display:block;font-size:.875rem;font-weight:500;color:var(--foreground);margin-bottom:.375rem}
.form-group input{width:100%;height:2.75rem;padding:0 .875rem;background:var(--background-surface);border:1px solid var(--border);border-radius:var(--radius-md);color:var(--foreground);font-family:inherit;font-size:.95rem}
.form-group input:focus{outline:none;border-color:var(--primary)}
.error-msg{background:color-mix(in srgb,var(--negative) 12%,transparent);border:1px solid var(--negative);color:var(--negative);padding:.75rem 1rem;border-radius:var(--radius-md);font-size:.875rem;margin-bottom:1.5rem}
.footer-text{text-align:center;margin-top:1.5rem;font-size:.875rem;color:var(--foreground-muted)}
.footer-text a{color:var(--primary);font-weight:500}
.auth-brand{display:flex;justify-content:center;margin-bottom:1.75rem}
</style>
</head>
<body class="signin-page">
<div class="signin-card">
    <div class="auth-brand"><a href="/traderalign/"><img src="/traderalign/images/logo.png" alt="TraderAlign" class="ta-logo ta-logo--xl"></a></div>
    <h1>Welcome back</h1>
    <p class="sub">Sign in to your TraderAlign journal.</p>
    
    <?php if ($error): ?>
    <div class="error-msg"><?= htmlspecialchars($error) ?></div>
    <?php endif; ?>

    <form method="POST" action="/traderalign/api/auth/sign-in" id="signinForm">
        <input type="hidden" name="csrf_token" value="<?= htmlspecialchars($_SESSION['csrf_token']) ?>">
        <div class="form-group">
            <label for="email">Email</label>
            <input type="email" id="email" name="email" required autocomplete="email" value="<?= htmlspecialchars($oldEmail) ?>">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required autocomplete="current-password">
        </div>
        <button type="submit" class="btn btn-primary btn-lg" id="signinSubmitBtn" style="width:100%">Sign In</button>
    </form>
    <script>
    (function () {
        var form = document.getElementById('signinForm');
        var btn = document.getElementById('signinSubmitBtn');
        var submitted = false;
        form.addEventListener('submit', function (e) {
            if (submitted) { e.preventDefault(); return; }
            submitted = true;
            btn.disabled = true;
            btn.textContent = 'Signing in...';
        });
    })();
    </script>
    <p style="text-align:center;margin-top:.75rem"><a href="/traderalign/forgot-password" style="font-size:.85rem;color:var(--foreground-dim)">Forgot password?</a></p>
    <p class="footer-text">Don't have an account? <a href="/traderalign/sign-up">Sign up</a></p>
</div>
</body>
</html>