{% extends "base.html" %}

{% load i18n %}
{% load crispy_forms_tags %}
{% block title %}{% trans "Signup" %}{% endblock %}

{% block content %}
    <h3>{% trans "Sign Up" %}</h3>

    <p>{% blocktrans %}Already have an account? Then please <a href="{{ login_url }}">sign in</a>.{% endblocktrans %}</p>

    {% comment %}
      Same providers as the sign-in page, so someone who created their account in the app can find
      the matching button here (and vice versa) instead of being pushed into a second, password
      account with the same address. Hidden in the app, where the web OAuth redirect is blocked in
      embedded WebViews and the app has its own native flow.
    {% endcomment %}
    {% if not request.is_mobile_app %}
      {% if GOOGLE_LOGIN_ENABLED %}
      <a id='sign-up-google' class='btn btn-primary' href="/google/login/?process=login&next={{ redirect_field_value }}">Sign up with Google</a>
      {% endif %}
      {% if APPLE_LOGIN_ENABLED %}
      <a id='sign-up-apple' class='btn btn-primary' href="/apple/login/?process=login&next={{ redirect_field_value }}">Sign up with Apple</a>
      {% endif %}
      {% if FACEBOOK_LOGIN_ENABLED %}
      <a id='sign-up-facebook' class='btn btn-primary' href="/facebook/login/?process=login&next={{ redirect_field_value }}">Sign up with Facebook</a>
      {% endif %}
      {% if GOOGLE_LOGIN_ENABLED or APPLE_LOGIN_ENABLED or FACEBOOK_LOGIN_ENABLED %}
      <h5 class="mt-3">Or create an account on this site:</h5>
      {% endif %}
    {% endif %}

    <form class="signup" id="signup_form" method="post" action="{% url 'account_signup' %}">
      {% csrf_token %}
      {{ form | crispy }}
      {% if redirect_field_value %}
      <input type="hidden" name="{{ redirect_field_name }}" value="{{ redirect_field_value }}" />
      {% endif %}
      <button class="btn btn-primary" type="submit">{% trans "Sign Up" %}</button>
    </form>
    {% comment %}
    Terms and privacy at the point of sign-up. Apple requires both to be reachable from inside the
    app (App Store Review 5.1.1), and the app's WebView allow-lists exactly these two paths so they
    open in place instead of kicking a half-filled form out to the system browser. The app draws its
    own copy of these links natively on this screen; these are for the web page.
    {% endcomment %}
    <p class="text-muted small mt-3 mb-0">
      By signing up you agree to our <a href="{% url 'tos' %}">terms of service</a>
      and <a href="{% url 'privacy_policy' %}">privacy policy</a>.
    </p>
<script>
document.addEventListener('DOMContentLoaded', function () {
    {% if not recaptcha_enabled %}
    console.error('reCAPTCHA is not configured; signup is running without a captcha field.');
    {% endif %}
    const form = document.querySelector('form');
    const submitBtn = form.querySelector('[type="submit"]');

    form.addEventListener('submit', function () {
        if (submitBtn) {
            submitBtn.disabled = true;
            submitBtn.innerText = 'Submitting...';
        }
    });

    // --- Username validation ---
    const usernameField = document.getElementById('id_username');
    let usernameHint = document.createElement('div');
    usernameHint.className = 'invalid-feedback';
    if (usernameField) {
        usernameField.parentNode.appendChild(usernameHint);
    }

    let usernameTimer = null;

    function setUsernameError(msg) {
        if (!usernameField) return;
        usernameField.classList.add('is-invalid');
        usernameField.classList.remove('is-valid');
        usernameHint.style.display = 'block';
        usernameHint.textContent = msg;
    }

    function setUsernameValid() {
        if (!usernameField) return;
        usernameField.classList.remove('is-invalid');
        usernameField.classList.add('is-valid');
        usernameHint.style.display = 'none';
        usernameHint.textContent = '';
    }

    function clearUsernameState() {
        if (!usernameField) return;
        usernameField.classList.remove('is-invalid', 'is-valid');
        usernameHint.style.display = 'none';
        usernameHint.textContent = '';
    }

    function checkUsername() {
        const val = usernameField.value.trim();
        if (!val) { clearUsernameState(); return; }
        if (val.includes('@')) {
            setUsernameError('Usernames cannot contain the @ symbol.');
            return;
        }
        // Debounced availability check
        clearTimeout(usernameTimer);
        usernameTimer = setTimeout(function () {
            fetch(checkUsernameUrl + '?username=' + encodeURIComponent(val))
                .then(function (r) { return r.json(); })
                .then(function (data) {
                    if (usernameField.value.trim() !== val) return; // stale
                    if (data.available) {
                        setUsernameValid();
                    } else {
                        usernameHint.innerHTML = 'That username is already taken. <a href="{{ login_url }}">Sign in instead?</a>';
                        usernameField.classList.add('is-invalid');
                        usernameField.classList.remove('is-valid');
                        usernameHint.style.display = 'block';
                    }
                })
                .catch(function () {
                    // Network error: validation unavailable, allow form to proceed normally
                });
        }, 400);
    }

    const checkUsernameUrl = '{% url "check_username" %}';

    if (usernameField) {
        usernameField.addEventListener('input', checkUsername);
        usernameField.addEventListener('blur', checkUsername);
    }

    // --- Email validation ---
    const emailField = document.getElementById('id_email');
    let emailHint = document.createElement('div');
    emailHint.className = 'form-text';
    emailHint.style.display = 'none';
    if (emailField) {
        emailField.parentNode.appendChild(emailHint);
    }

    function isGmail(email) {
        return /@gmail\.com\s*$/i.test(email);
    }

    function checkEmail() {
        const val = emailField.value.trim();
        emailHint.style.display = 'none';
        emailHint.innerHTML = '';
        if (!val) return;

        // Gmail hint — show immediately
        {% if GOOGLE_LOGIN_ENABLED %}
        if (isGmail(val)) {
            const next = encodeURIComponent('{{ redirect_field_value|default:"/" }}');
            emailHint.innerHTML = 'Looks like a Gmail address! You can <a href="{% url "google_login" %}?process=login&next=' + next + '">sign up with one click using Google</a>.';
            emailHint.style.display = 'block';
        }
        {% endif %}
    }

    if (emailField) {
        emailField.addEventListener('input', checkEmail);
        emailField.addEventListener('blur', checkEmail);
    }
});
</script>
{% endblock %}