{% extends 'base.html' %}

{% block content %}
<div class="row justify-content-center align-items-center" style="min-height: 80vh;">
    <div class="col-md-6">
        <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
            <div class="bg-dark p-4 text-center text-white">
                <i class="bi bi-person-plus-fill fs-1"></i>
                <h3 class="fw-bold mt-2">Join SwiftCart</h3>
                <p class="small opacity-75">Email is verified before your account is created</p>
            </div>
            <div class="card-body p-4">
                <div id="signup-alert" class="alert d-none" role="alert"></div>

                <form id="signup-form" action="{{ url_for('web.signup') }}" method="POST">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold">Username</label>
                            <input type="text" name="username" id="signup-username" class="form-control bg-light border-0"
                                placeholder="john_doe" required minlength="3" maxlength="100"
                                pattern="[A-Za-z][A-Za-z0-9_.-]{2,}"
                                title="At least 3 characters; start with A–Z; then letters, numbers, underscore, dot, or hyphen.">
                        </div>
                        <div class="col-md-6 mb-3">
                            <label class="form-label small fw-bold">Email</label>
                            <input type="email" name="email" id="signup-email" class="form-control bg-light border-0"
                                placeholder="john@example.com" required>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Mobile Number</label>
                        <input type="tel" name="phone" id="signup-phone" class="form-control bg-light border-0"
                            placeholder="03XX-XXXXXXX">
                        <div class="form-text">Optional. Saved on signup if unique.</div>
                    </div>
                    <div class="mb-3">
                        <label class="form-label small fw-bold">Password</label>
                        <input type="password" name="password" id="signup-password" class="form-control bg-light border-0"
                            placeholder="At least 8 characters" required minlength="8">
                    </div>
                    <div class="mb-4">
                        <label class="form-label small fw-bold">Delivery Address</label>
                        <textarea name="address" id="signup-address" class="form-control bg-light border-0" rows="2"
                            placeholder="Street, City, Country"></textarea>
                    </div>

                    <div id="otp-section" class="border rounded-3 p-3 bg-light mb-4 d-none">
                        <p class="small text-muted mb-3">Enter the verification code sent to your email.</p>
                        <div class="mb-0">
                            <label class="form-label small fw-bold">Email verification code</label>
                            <input type="text" name="email_otp" id="signup-email-otp" class="form-control border-0"
                                inputmode="numeric" autocomplete="one-time-code" maxlength="6" placeholder="6-digit code">
                        </div>
                    </div>

                    <button type="button" id="send-otp-btn" class="btn btn-outline-dark w-100 py-2 fw-bold rounded-3 shadow-sm mb-3">
                        Send email verification code
                    </button>
                    <button type="submit" id="complete-signup-btn" class="btn btn-dark w-100 py-2 fw-bold rounded-3 shadow-sm d-none">
                        Create Account
                    </button>
                </form>
            </div>
            <div class="card-footer bg-white border-0 text-center pb-4">
                <p class="small text-muted">Already have an account?
                    <a href="{{ url_for('web.login') }}" class="text-primary fw-bold text-decoration-none">Login
                        Here</a>
                </p>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById('signup-form');
    const alertBox = document.getElementById('signup-alert');
    const sendOtpBtn = document.getElementById('send-otp-btn');
    const completeBtn = document.getElementById('complete-signup-btn');
    const otpSection = document.getElementById('otp-section');
    const emailOtpInput = document.getElementById('signup-email-otp');
    let verificationReady = false;

    function showAlert(message, level) {
        alertBox.className = 'alert alert-' + level;
        alertBox.textContent = message;
        alertBox.classList.remove('d-none');
    }

    sendOtpBtn.addEventListener('click', async function () {
        alertBox.classList.add('d-none');
        const username = (document.getElementById('signup-username').value || '').trim();
        const passwordField = document.getElementById('signup-password');
        const password = passwordField.value != null ? String(passwordField.value) : '';

        if (username.length < 3) {
            showAlert('Username must be at least 3 characters.', 'danger');
            return;
        }
        if (!/^[A-Za-z]/.test(username)) {
            showAlert('Username must start with a letter (A–Z).', 'danger');
            return;
        }
        if (password.length < 8) {
            showAlert('Password must be at least 8 characters.', 'danger');
            return;
        }

        sendOtpBtn.disabled = true;
        sendOtpBtn.textContent = 'Sending...';

        try {
            const response = await fetch('{{ url_for("web.signup_send_otp") }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams(new FormData(form)),
            });
            const data = await response.json();
            if (!response.ok || !data.ok) {
                showAlert(data.message || 'Could not send verification email.', 'danger');
                return;
            }

            showAlert(data.message, 'success');
            verificationReady = true;
            otpSection.classList.remove('d-none');
            completeBtn.classList.remove('d-none');
            emailOtpInput.required = true;
        } catch (error) {
            showAlert('Network error while sending verification email.', 'danger');
        } finally {
            sendOtpBtn.disabled = false;
            sendOtpBtn.textContent = 'Resend email code';
        }
    });

    form.addEventListener('submit', function (event) {
        if (!verificationReady) {
            event.preventDefault();
            showAlert('Send and enter the email code before creating an account.', 'warning');
            return;
        }

        if (!emailOtpInput.value.trim()) {
            event.preventDefault();
            showAlert('Enter the email verification code.', 'warning');
            return;
        }

        const usernameSubmit = (document.getElementById('signup-username').value || '').trim();
        const passwordEl = document.getElementById('signup-password');
        const passwordSubmit = passwordEl.value != null ? String(passwordEl.value) : '';
        if (usernameSubmit.length < 3 || !/^[A-Za-z]/.test(usernameSubmit)) {
            event.preventDefault();
            showAlert('Username must be at least 3 characters and start with a letter (A–Z).', 'warning');
            return;
        }
        if (passwordSubmit.length < 8) {
            event.preventDefault();
            showAlert('Password must be at least 8 characters.', 'warning');
            return;
        }
    });
});
</script>
{% endblock %}