{% extends 'base.html' %}

{% block title %}{{ _('Sign Up') }} - CrashXAF{% endblock %}

{% block extra_css %}
<style>
    .auth-page {
        min-height: calc(100vh - 70px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-xl);
        background:
            radial-gradient(ellipse at top, rgba(255, 107, 53, 0.08) 0%, transparent 60%),
            var(--bg-primary);
    }

    .auth-card {
        width: 100%;
        max-width: 440px;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        padding: var(--spacing-2xl);
        backdrop-filter: blur(10px);
        position: relative;
        overflow: hidden;
    }

    .auth-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--accent-gradient);
    }

    .auth-header {
        text-align: center;
        margin-bottom: var(--spacing-xl);
    }

    .auth-logo {
        font-size: 3.5rem;
        margin-bottom: var(--spacing-md);
        animation: rocket-float 3s ease-in-out infinite;
    }

    @keyframes rocket-float {

        0%,
        100% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-10px);
        }
    }

    .auth-title {
        font-size: 1.75rem;
        margin-bottom: var(--spacing-xs);
        font-weight: 700;
    }

    .auth-subtitle {
        color: var(--text-muted);
        font-size: 0.95rem;
    }

    .bonus-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--spacing-lg);
        background: linear-gradient(135deg, rgba(0, 255, 136, 0.15), rgba(0, 255, 136, 0.05));
        border: 1px solid rgba(0, 255, 136, 0.3);
        border-radius: var(--radius-full);
        color: var(--success);
        font-size: 0.9rem;
        font-weight: 600;
        margin-top: var(--spacing-md);
        animation: pulse-glow 2s ease-in-out infinite;
    }

    @keyframes pulse-glow {

        0%,
        100% {
            box-shadow: 0 0 10px rgba(0, 255, 136, 0.2);
        }

        50% {
            box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
        }
    }

    .form-group {
        margin-bottom: var(--spacing-lg);
    }

    .form-label {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-sm);
        font-weight: 500;
        color: var(--text-secondary);
    }

    .form-label i {
        color: var(--accent-primary);
        font-size: 0.9rem;
    }

    .form-input {
        width: 100%;
        padding: 1rem 1.25rem;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font-family: var(--font-primary);
        font-size: 1rem;
        transition: all 0.3s ease;
    }

    .form-input:focus {
        outline: none;
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
    }

    .form-input::placeholder {
        color: var(--text-muted);
    }

    /* Phone Input with Country Code */
    .phone-input-group {
        display: flex;
        gap: var(--spacing-sm);
    }

    .country-code {
        width: 100px;
        padding: 1rem;
        background: var(--bg-tertiary);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        font-size: 1rem;
        text-align: center;
    }

    .phone-input-group .form-input {
        flex: 1;
    }

    /* PIN Input */
    .pin-container {
        display: flex;
        gap: var(--spacing-md);
        justify-content: center;
    }

    .pin-input {
        width: 60px;
        height: 70px;
        text-align: center;
        font-size: 1.75rem;
        font-weight: 700;
        background: var(--bg-tertiary);
        border: 2px solid var(--border-color);
        border-radius: var(--radius-md);
        color: var(--text-primary);
        transition: all 0.3s ease;
    }

    .pin-input:focus {
        outline: none;
        border-color: var(--accent-primary);
        box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
        transform: scale(1.05);
    }

    .pin-input.filled {
        background: rgba(255, 107, 53, 0.1);
        border-color: var(--accent-primary);
    }

    .pin-hint {
        text-align: center;
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: var(--spacing-sm);
    }

    /* Hidden real input for form submission */
    .pin-hidden {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    /* Language Select */
    .lang-select {
        display: flex;
        gap: var(--spacing-sm);
    }

    .lang-option {
        flex: 1;
        padding: var(--spacing-md);
        background: var(--bg-tertiary);
        border: 2px solid var(--border-color);
        border-radius: var(--radius-md);
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        font-size: 0.95rem;
    }

    .lang-option:hover {
        border-color: var(--accent-primary);
    }

    .lang-option.active {
        border-color: var(--accent-primary);
        background: rgba(255, 107, 53, 0.1);
    }

    .lang-option input {
        display: none;
    }

    .auth-footer {
        text-align: center;
        margin-top: var(--spacing-xl);
        padding-top: var(--spacing-lg);
        border-top: 1px solid var(--border-color);
    }

    .auth-footer a {
        color: var(--accent-primary);
        font-weight: 600;
    }

    .submit-btn {
        width: 100%;
        padding: 1rem;
        background: var(--accent-gradient);
        border: none;
        border-radius: var(--radius-md);
        color: white;
        font-family: var(--font-primary);
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
    }

    .submit-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(255, 107, 53, 0.5);
    }

    .terms-text {
        font-size: 0.8rem;
        color: var(--text-muted);
        text-align: center;
        margin-top: var(--spacing-md);
    }

    .terms-text a {
        color: var(--accent-primary);
    }

    /* Alert Messages */
    .auth-alert {
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-lg);
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        animation: slideDown 0.3s ease;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .auth-alert-error {
        background: rgba(239, 68, 68, 0.15);
        border: 1px solid rgba(239, 68, 68, 0.3);
        color: #f87171;
    }

    .auth-alert-success {
        background: rgba(34, 197, 94, 0.15);
        border: 1px solid rgba(34, 197, 94, 0.3);
        color: #4ade80;
    }

    /* Step Indicator */
    .step-indicator {
        display: flex;
        justify-content: center;
        gap: var(--spacing-md);
        margin-bottom: var(--spacing-xl);
    }

    .step {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .step-number {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--bg-tertiary);
        border: 2px solid var(--border-color);
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        font-size: 0.8rem;
    }

    .step.active .step-number {
        background: var(--accent-gradient);
        border-color: transparent;
        color: white;
    }

    .step.completed .step-number {
        background: var(--success);
        border-color: transparent;
        color: white;
    }

    .step-line {
        width: 40px;
        height: 2px;
        background: var(--border-color);
    }

    @media (max-width: 480px) {
        .pin-input {
            width: 50px;
            height: 60px;
            font-size: 1.5rem;
        }

        .phone-input-group {
            flex-direction: column;
        }

        .country-code {
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="auth-page">
    <div class="auth-card">
        <div class="auth-header">
            <div class="auth-logo">🚀</div>
            <h1 class="auth-title">{{ _('Join CrashXAF') }}</h1>
            <p class="auth-subtitle">{{ _('Create your account and start winning') }}</p>
            <span class="bonus-badge">
                <i class="fas fa-gift"></i>
                {{ _('Get 2x on your first top-up!') }}
            </span>
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
        {% for category, message in messages %}
        <div class="auth-alert auth-alert-{{ category }}">
            <i class="fas fa-{{ 'exclamation-circle' if category == 'error' else 'check-circle' }}"></i>
            {{ message }}
        </div>
        {% endfor %}
        {% endif %}
        {% endwith %}

        <form method="POST" action="{{ url_for('auth.register') }}" id="signup-form">
            <!-- Username -->
            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-user"></i>
                    {{ _('Username') }}
                </label>
                <input type="text" name="username" class="form-input" placeholder="{{ _('Choose a username') }}"
                    required minlength="3" maxlength="20" pattern="[a-zA-Z0-9_]+"
                    title="{{ _('Only letters, numbers, and underscores allowed') }}">
            </div>

            <!-- Phone Number -->
            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-phone"></i>
                    {{ _('Phone Number') }}
                </label>
                <div class="phone-input-group">
                    <input type="text" class="country-code" value="+237" readonly>
                    <input type="tel" name="phone" class="form-input" placeholder="6XX XXX XXX" required
                        pattern="[0-9]{9}" title="{{ _('Enter 9 digit phone number') }}" maxlength="9" inputmode="numeric">
                </div>
            </div>

            <!-- 4-Digit PIN -->
            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-lock"></i>
                    {{ _('Create 4-Digit PIN') }}
                </label>
                <div class="pin-container">
                    <input type="password" class="pin-input" maxlength="1" inputmode="numeric" pattern="[0-9]"
                        data-pin="1">
                    <input type="password" class="pin-input" maxlength="1" inputmode="numeric" pattern="[0-9]"
                        data-pin="2">
                    <input type="password" class="pin-input" maxlength="1" inputmode="numeric" pattern="[0-9]"
                        data-pin="3">
                    <input type="password" class="pin-input" maxlength="1" inputmode="numeric" pattern="[0-9]"
                        data-pin="4">
                </div>
                <input type="hidden" name="pin" id="pin-value" required>
                <p class="pin-hint"><i class="fas fa-info-circle"></i> {{ _('This PIN will be used to login') }}</p>
            </div>

            <!-- Confirm PIN -->
            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-check-circle"></i>
                    {{ _('Confirm PIN') }}
                </label>
                <div class="pin-container">
                    <input type="password" class="pin-input confirm-pin" maxlength="1" inputmode="numeric"
                        pattern="[0-9]" data-confirm="1">
                    <input type="password" class="pin-input confirm-pin" maxlength="1" inputmode="numeric"
                        pattern="[0-9]" data-confirm="2">
                    <input type="password" class="pin-input confirm-pin" maxlength="1" inputmode="numeric"
                        pattern="[0-9]" data-confirm="3">
                    <input type="password" class="pin-input confirm-pin" maxlength="1" inputmode="numeric"
                        pattern="[0-9]" data-confirm="4">
                </div>
                <input type="hidden" name="confirm_pin" id="confirm-pin-value" required>
            </div>

            <!-- Language Preference -->
            <div class="form-group">
                <label class="form-label">
                    <i class="fas fa-globe"></i>
                    {{ _('Preferred Language') }}
                </label>
                <div class="lang-select">
                    <label class="lang-option {{ 'active' if session.get('lang', 'en') != 'fr' }}" id="langEn">
                        <input type="radio" name="language" value="en" {{ 'checked' if session.get('lang', 'en') != 'fr' }}>
                        {{ _('English') }}
                    </label>
                    <label class="lang-option {{ 'active' if session.get('lang') == 'fr' }}" id="langFr">
                        <input type="radio" name="language" value="fr" {{ 'checked' if session.get('lang') == 'fr' }}>
                        {{ _('French') }}
                    </label>
                </div>
            </div>

            <button type="submit" class="submit-btn">
                <i class="fas fa-rocket"></i>
                {{ _('Create Account') }}
            </button>

            <p class="terms-text">
                {{ _('By registering, you agree to our') }}
                <a href="{{ url_for('main.terms') }}">{{ _('Terms') }}</a>
                {{ _('and') }}
                <a href="{{ url_for('main.privacy') }}">{{ _('Privacy Policy') }}</a>
            </p>
        </form>

        <div class="auth-footer">
            <p>{{ _("Already have an account?") }} <a href="{{ url_for('auth.login') }}">{{ _('Sign in') }}</a></p>
        </div>
    </div>
</div>

<script>
    const registerI18n = {
        enterPin: {{ _('Please enter a 4-digit PIN')|tojson }},
        pinsMismatch: {{ _('PINs do not match')|tojson }}
    };

    // PIN Input Handling
    const pinInputs = document.querySelectorAll('.pin-input:not(.confirm-pin)');
    const confirmPinInputs = document.querySelectorAll('.pin-input.confirm-pin');
    const pinValue = document.getElementById('pin-value');
    const confirmPinValue = document.getElementById('confirm-pin-value');

    function setupPinInputs(inputs, hiddenInput) {
        inputs.forEach((input, index) => {
            // Only allow numbers
            input.addEventListener('input', (e) => {
                e.target.value = e.target.value.replace(/[^0-9]/g, '');

                if (e.target.value) {
                    input.classList.add('filled');
                    // Move to next input
                    if (index < inputs.length - 1) {
                        inputs[index + 1].focus();
                    }
                } else {
                    input.classList.remove('filled');
                }

                // Update hidden input
                updatePinValue(inputs, hiddenInput);
            });

            // Handle backspace
            input.addEventListener('keydown', (e) => {
                if (e.key === 'Backspace' && !e.target.value && index > 0) {
                    inputs[index - 1].focus();
                    inputs[index - 1].value = '';
                    inputs[index - 1].classList.remove('filled');
                    updatePinValue(inputs, hiddenInput);
                }
            });

            // Handle paste
            input.addEventListener('paste', (e) => {
                e.preventDefault();
                const pastedData = e.clipboardData.getData('text').replace(/[^0-9]/g, '').slice(0, 4);

                pastedData.split('').forEach((char, i) => {
                    if (inputs[i]) {
                        inputs[i].value = char;
                        inputs[i].classList.add('filled');
                    }
                });

                if (pastedData.length > 0) {
                    inputs[Math.min(pastedData.length, inputs.length - 1)].focus();
                }

                updatePinValue(inputs, hiddenInput);
            });
        });
    }

    function updatePinValue(inputs, hiddenInput) {
        let pin = '';
        inputs.forEach(input => {
            pin += input.value;
        });
        hiddenInput.value = pin;
    }

    setupPinInputs(pinInputs, pinValue);
    setupPinInputs(confirmPinInputs, confirmPinValue);

    // Language Toggle
    document.querySelectorAll('.lang-option').forEach(opt => {
        opt.addEventListener('click', () => {
            document.querySelectorAll('.lang-option').forEach(o => o.classList.remove('active'));
            opt.classList.add('active');
        });
    });

    // Form Validation
    document.getElementById('signup-form').addEventListener('submit', function (e) {
        const pin = pinValue.value;
        const confirmPin = confirmPinValue.value;

        if (pin.length !== 4) {
            e.preventDefault();
            alert(registerI18n.enterPin);
            pinInputs[0].focus();
            return;
        }

        if (pin !== confirmPin) {
            e.preventDefault();
            alert(registerI18n.pinsMismatch);
            confirmPinInputs[0].focus();
            return;
        }
    });
</script>
{% endblock %}