<?php
require_once __DIR__ . '/../src/PasswordPolicy.php';

if (session_status() === PHP_SESSION_NONE) {
    session_name(defined('SESSION_NAME') ? SESSION_NAME : 'traderalign_session');
    session_start();
}
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}

// If already logged in, redirect to dashboard
if (isset($auth) && $auth->isLoggedIn()) {
    header('Location: /traderalign/dashboard');
    exit;
}

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

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

// 2026-08-19 security fix (finding M-3) — a neutral, non-error notice for
// the 'email_taken' path api/auth/sign-up.php now redirects here with,
// deliberately worded and styled so it never confirms or denies whether
// the submitted email already has an account.
$notice = $_SESSION['signup_notice'] ?? null;
unset($_SESSION['signup_notice']);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up - 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>
.signup-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem}
.signup-card{width:100%;max-width:28rem;background:var(--background-elevated);border:1px solid var(--border);border-radius:var(--radius-xl);padding:2.5rem}
.signup-card h1{font-size:1.5rem;font-weight:700;color:var(--foreground);margin-bottom:.5rem}
.signup-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;transition:border-color var(--t-fast)}
.form-group input:focus{outline:none;border-color:var(--ring)}
.form-group .hint{font-size:.8rem;color:var(--foreground-dim);margin-top:.25rem}
.error-msg{background:color-mix(in srgb,var(--negative) 15%,transparent);border:1px solid var(--negative);color:var(--negative);padding:.75rem 1rem;border-radius:var(--radius-md);font-size:.875rem;margin-bottom:1.5rem}
.notice-msg{background:color-mix(in srgb,var(--primary) 12%,transparent);border:1px solid var(--primary);color:var(--foreground);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="signup-page">
<div class="signup-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>Create your account</h1>
    <p class="sub">Start journaling your trades with evidence.</p>
    
    <?php if (isset($error)): ?>
    <div class="error-msg"><?= htmlspecialchars($error) ?></div>
    <?php endif; ?>
    <?php if (isset($notice)): ?>
    <div class="notice-msg"><?= htmlspecialchars($notice) ?></div>
    <?php endif; ?>

    <form method="POST" action="/traderalign/api/auth/sign-up" id="signupForm" autocomplete="on">
        <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" placeholder="you@example.com" value="<?= htmlspecialchars($oldEmail) ?>">
        </div>
        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" id="password" name="password" required minlength="<?= PasswordPolicy::MIN_LENGTH ?>" placeholder="Create a password" autocomplete="new-password">
            <p class="hint"><?= htmlspecialchars(PasswordPolicy::requirementsSummary()) ?></p>
        </div>
        <div class="form-group">
            <label for="confirm_password">Confirm password</label>
            <input type="password" id="confirm_password" name="confirm_password" required minlength="<?= PasswordPolicy::MIN_LENGTH ?>" placeholder="Re-enter your password" autocomplete="new-password">
            <div class="field-error" id="confirmError" style="display:none;font-size:.8rem;color:var(--negative);margin-top:.25rem">Passwords do not match.</div>
        </div>
        <button type="submit" class="btn btn-primary btn-lg" id="signupSubmitBtn" style="width:100%">Create Account</button>
    </form>
    <script>
    (function () {
        var form = document.getElementById('signupForm');
        var pw = document.getElementById('password');
        var confirm = document.getElementById('confirm_password');
        var confirmError = document.getElementById('confirmError');
        var submitBtn = document.getElementById('signupSubmitBtn');
        var submitted = false;

        function mismatch() {
            return confirm.value.length > 0 && pw.value !== confirm.value;
        }
        confirm.addEventListener('input', function () {
            confirmError.style.display = mismatch() ? 'block' : 'none';
        });

        form.addEventListener('submit', function (e) {
            if (mismatch()) {
                e.preventDefault();
                confirmError.style.display = 'block';
                confirm.focus();
                return;
            }
            if (submitted) {
                e.preventDefault();
                return;
            }
            submitted = true;
            submitBtn.disabled = true;
            submitBtn.textContent = 'Creating account...';
        });
    })();
    </script>
    <p class="footer-text">Already have an account? <a href="/traderalign/sign-in">Sign in</a></p>
</div>
</body>
</html>