{% extends 'auth/base.html' %}

{% block title %}Register{% endblock %}

{% block content %}
<main class="min-h-[100dvh] w-full flex justify-center items-start p-4 sm:p-8 md:p-12">
    <section class="w-full max-w-4xl mt-2 sm:mt-8">
        <div class="relative rounded-2xl border border-line bg-surface shadow-sm overflow-hidden flex flex-col md:flex-row">
            <div class="w-full md:w-3/5 p-8 md:px-12 md:pb-12 flex flex-col justify-center">
                <header class="mb-12 mt-8 flex items-center justify-between">
                    <a href="{{ url_for('core_bp.home') }}" class="flex items-center gap-1 text-xl font-semibold tracking-tight text-ink">
                        lombik<span class="text-brand">.</span>
                    </a>
                    <a href="{{ url_for('auth_bp.login') }}"
                       class="text-sm text-ink-muted hover:text-ink transition-colors font-medium">
                        Log in &rarr;
                    </a>
                </header>

                <div class="space-y-1 mb-8">
                    <h2 class="text-2xl font-semibold text-ink tracking-tight">Create your account</h2>
                    <p class="text-sm text-ink-muted">A few details and you're in.</p>
                </div>

                <form
                    id="register-form"
                    method="POST"
                    action="{{ url_for('auth_bp.register_user') }}"
                    hx-post="{{ url_for('auth_bp.register_user') }}"
                    hx-swap="none"
                    class="space-y-5"
                >
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
                    <input type="hidden" name="next" value="{{ next }}" />

                    <div class="space-y-2">
                        <label for="reg-username" class="text-[13px] font-medium text-ink">Username</label>
                        <input
                            id="reg-username"
                            name="username"
                            type="text"
                            autocomplete="username"
                            required
                            minlength="3"
                            placeholder="johndoe"
                            class="w-full px-3.5 py-2.5 text-sm rounded-lg bg-raised border border-line focus:border-ink placeholder:text-ink-muted/60 text-ink transition-colors"
                        />
                    </div>

                    <div class="space-y-2">
                        <label for="reg-email" class="text-[13px] font-medium text-ink">Email address</label>
                        <input
                            id="reg-email"
                            name="email"
                            type="email"
                            autocomplete="email"
                            required
                            placeholder="you@company.com"
                            class="w-full px-3.5 py-2.5 text-sm rounded-lg bg-raised border border-line focus:border-ink placeholder:text-ink-muted/60 text-ink transition-colors"
                        />
                    </div>

                    <div class="space-y-2">
                        <label for="reg-password" class="text-[13px] font-medium text-ink">Password</label>
                        <input
                            id="reg-password"
                            name="password"
                            type="password"
                            autocomplete="new-password"
                            required
                            minlength="8"
                            placeholder="Create a password"
                            class="w-full px-3.5 py-2.5 text-sm rounded-lg bg-raised border border-line focus:border-ink placeholder:text-ink-muted/60 text-ink transition-colors"
                        />
                        <div id="password-criteria-list" class="flex flex-wrap gap-x-4 gap-y-1 text-[11px] text-ink-muted">
                            <span data-criterion="length">Min 8 characters</span>
                            <span data-criterion="special">One special</span>
                            <span data-criterion="number">One number</span>
                            <span data-criterion="uppercase">One uppercase</span>
                            <span data-criterion="lowercase">One lowercase</span>
                        </div>
                    </div>

                    <div class="space-y-2">
                        <label for="reg-confirm-password" class="text-[13px] font-medium text-ink">Confirm password</label>
                        <input
                            id="reg-confirm-password"
                            name="confirm_password"
                            type="password"
                            autocomplete="new-password"
                            required
                            minlength="8"
                            placeholder="Repeat your password"
                            class="w-full px-3.5 py-2.5 text-sm rounded-lg bg-raised border border-line focus:border-ink placeholder:text-ink-muted/60 text-ink transition-colors"
                        />
                    </div>

                    <div class="space-y-2">
                        <label for="reg-country" class="text-[13px] font-medium text-ink">Country</label>
                        <select
                            id="reg-country"
                            name="country"
                            required
                            class="w-full px-3.5 py-2.5 text-sm rounded-lg bg-raised border border-line focus:border-ink text-ink transition-colors"
                        >
                            <option value="" disabled selected>Select a country</option>
                            {% for country in countries %}
                                <option value="{{ country }}">{{ country }}</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="flex items-center gap-2.5">
                        <input
                            id="agree-terms"
                            name="terms"
                            type="checkbox"
                            required
                            class="w-4 h-4 rounded border-line bg-raised text-ink focus:ring-0 cursor-pointer"
                        />
                        <label for="agree-terms" class="text-sm text-ink-muted cursor-pointer select-none">
                            I agree to the terms and conditions
                        </label>
                    </div>

                    <button
                        type="submit"
                        id="submit-btn"
                        disabled
                        class="w-full py-2.5 px-4 rounded-lg bg-ink text-canvas font-medium text-sm hover:opacity-90 active:scale-[0.99] transition-all duration-150 disabled:opacity-40 disabled:cursor-not-allowed"
                    >
                        Create account
                    </button>
                </form>
            </div>

            <div class="w-full md:w-2/5 bg-line/30 border-t md:border-t-0 md:border-l border-line p-8 md:p-12 flex flex-col justify-center">
                <div class="space-y-3">
                    <span class="inline-block text-[11px] font-semibold uppercase tracking-widest text-ink-muted">
                        What you get
                    </span>
                    <h3 class="text-2xl font-medium text-ink leading-tight tracking-tight">
                        A clean starting point
                    </h3>
                </div>
                <ul class="mt-8 space-y-5">
                    <li class="flex gap-3">
                        <ion-icon name="checkmark-circle-outline" class="text-brand text-lg mt-0.5"></ion-icon>
                        <p class="text-sm text-ink-muted">Production-ready Flask structure with blueprints.</p>
                    </li>
                    <li class="flex gap-3">
                        <ion-icon name="checkmark-circle-outline" class="text-brand text-lg mt-0.5"></ion-icon>
                        <p class="text-sm text-ink-muted">Auth, CSRF, sessions and rate limiting wired up.</p>
                    </li>
                    <li class="flex gap-3">
                        <ion-icon name="checkmark-circle-outline" class="text-brand text-lg mt-0.5"></ion-icon>
                        <p class="text-sm text-ink-muted">A command line that generates models and CRUD.</p>
                    </li>
                </ul>
            </div>
        </div>
    </section>
</main>

<script>
(function () {
    const form = document.getElementById('register-form');
    const submitBtn = document.getElementById('submit-btn');
    const username = document.getElementById('reg-username');
    const email = document.getElementById('reg-email');
    const password = document.getElementById('reg-password');
    const confirmPassword = document.getElementById('reg-confirm-password');
    const country = document.getElementById('reg-country');
    const terms = document.getElementById('agree-terms');

    const criteria = {
        length: document.querySelector('[data-criterion="length"]'),
        special: document.querySelector('[data-criterion="special"]'),
        number: document.querySelector('[data-criterion="number"]'),
        uppercase: document.querySelector('[data-criterion="uppercase"]'),
        lowercase: document.querySelector('[data-criterion="lowercase"]'),
    };

    function checkPassword(value) {
        criteria.length.classList.toggle('text-success', value.length >= 8);
        criteria.special.classList.toggle('text-success', /[^A-Za-z0-9]/.test(value));
        criteria.number.classList.toggle('text-success', /[0-9]/.test(value));
        criteria.uppercase.classList.toggle('text-success', /[A-Z]/.test(value));
        criteria.lowercase.classList.toggle('text-success', /[a-z]/.test(value));
    }

    function isValid() {
        const passwordOk = Object.values(criteria).every(function (el) {
            return el.classList.contains('text-success');
        });
        const match = password.value === confirmPassword.value && password.value.length > 0;
        const valid =
            username.value.trim().length >= 3 &&
            email.validity.valid &&
            passwordOk &&
            match &&
            country.value !== '' &&
            terms.checked;

        submitBtn.disabled = !valid;
        return valid;
    }

    password.addEventListener('input', function () {
        checkPassword(password.value);
        isValid();
    });
    [username, email, confirmPassword, country].forEach(function (el) {
        el.addEventListener('input', isValid);
    });
    terms.addEventListener('change', isValid);

    form.addEventListener('submit', function (e) {
        if (!isValid()) e.preventDefault();
    });

    checkPassword(password.value);
    isValid();
})();
</script>
{% endblock %}