{% extends "base_auth.html" %}
{% block title %}Sign Up — TheNicheQuiz{% endblock %}
{% block content %}
<h1 class="auth-title">Create your account</h1>
<p class="auth-subtitle">Start finding profitable niches in 60 seconds</p>

<div id="auth-error" class="auth-error" style="display:none;"></div>

<form id="signup-form">
    <div class="form-group">
        <label class="form-label">Full Name</label>
        <input type="text" name="name" id="name" class="form-input" placeholder="John Smith" required autofocus>
    </div>
    <div class="form-group">
        <label class="form-label">Email</label>
        <input type="email" name="email" id="email" class="form-input" placeholder="you@example.com" required>
    </div>
    <div class="form-group">
        <label class="form-label">Password</label>
        <input type="password" name="password" id="password" class="form-input" placeholder="At least 6 characters" minlength="6" required>
    </div>
    <button type="submit" class="auth-btn" id="submit-btn">Create Account →</button>
</form>

<script>
document.getElementById('signup-form').addEventListener('submit', async function(e) {
    e.preventDefault();
    const btn = document.getElementById('submit-btn');
    const errDiv = document.getElementById('auth-error');
    btn.disabled = true;
    btn.textContent = 'Creating account...';
    errDiv.style.display = 'none';
    
    try {
        const resp = await fetch('/api/signup', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                name: document.getElementById('name').value,
                email: document.getElementById('email').value,
                password: document.getElementById('password').value
            })
        });
        const data = await resp.json();
        if (data.success) {
            window.location.href = '/app/generate';
        } else {
            errDiv.textContent = data.error || 'Something went wrong.';
            errDiv.style.display = 'block';
            btn.disabled = false;
            btn.textContent = 'Create Account →';
        }
    } catch (err) {
        errDiv.textContent = 'Connection error. Please try again.';
        errDiv.style.display = 'block';
        btn.disabled = false;
        btn.textContent = 'Create Account →';
    }
});
</script>
{% endblock %}

{% block footer %}
<div class="auth-footer">
    Already have an account? <a href="/login">Log in</a>
</div>
{% endblock %}
