{% extends 'base.html' %}

{% block title %}{{ _('Login') }} - 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: 420px;
        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;
    }

    .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: 65px;
        height: 75px;
        text-align: center;
        font-size: 2rem;
        font-weight: 700;
        background: var(--bg-tertiary);
        border: 2px solid var(--border-color);
        border-radius: var(--radius-lg);
        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.08);
    }

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

    .pin-input.error {
        border-color: var(--danger);
        animation: shake 0.5s ease;
    }

    @keyframes shake {

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

        25% {
            transform: translateX(-5px);
        }

        75% {
            transform: translateX(5px);
        }
    }

    /* Hidden real input for form submission */
    .pin-hidden {
        position: absolute;
        opacity: 0;
        pointer-events: 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);
        margin-top: var(--spacing-lg);
    }

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

    .submit-btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

    /* 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;
    }

    .auth-alert-info {
        background: rgba(59, 130, 246, 0.15);
        border: 1px solid rgba(59, 130, 246, 0.3);
        color: #60a5fa;
    }

    /* Remember Me */
    .remember-row {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: var(--spacing-lg);
    }

    .remember-label {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        cursor: pointer;
        color: var(--text-secondary);
        font-size: 0.9rem;
    }

    .remember-label input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: var(--accent-primary);
    }

    /* Divider */
    .auth-divider {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        margin: var(--spacing-xl) 0;
        color: var(--text-muted);
        font-size: 0.85rem;
    }

    .auth-divider::before,
    .auth-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--border-color);
    }

    /* Quick Login Section */
    .quick-info {
        background: var(--bg-tertiary);
        border-radius: var(--radius-md);
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }

    .quick-info-icon {
        width: 40px;
        height: 40px;
        background: rgba(255, 107, 53, 0.15);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent-primary);
    }

    .quick-info-text {
        flex: 1;
    }

    .quick-info-text h4 {
        margin: 0 0 2px 0;
        font-size: 0.9rem;
    }

    .quick-info-text p {
        margin: 0;
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    @media (max-width: 480px) {
        .pin-input {
            width: 55px;
            height: 65px;
            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">{{ _('Welcome Back') }}</h1>
            <p class="auth-subtitle">{{ _('Enter your phone and PIN to continue') }}</p>
        </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' if category == 'success' else 'info-circle' }}"></i>
            {{ message }}
        </div>
        {% endfor %}
        {% endif %}
        {% endwith %}

        <div class="quick-info">
            <div class="quick-info-icon">
                <i class="fas fa-bolt"></i>
            </div>
            <div class="quick-info-text">
                <h4>{{ _('Quick & Secure') }}</h4>
                <p>{{ _('Login with your phone number and 4-digit PIN') }}</p>
            </div>
        </div>

        <form method="POST" action="{{ url_for('auth.login') }}" id="login-form">
            <!-- 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" id="phone-input" placeholder="6XX XXX XXX"
                        required pattern="[0-9]{9}" title="{{ _('Enter 9 digit phone number') }}" maxlength="9" inputmode="numeric"
                        autocomplete="tel">
                </div>
            </div>

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

            <!-- Remember Me -->
            <div class="remember-row">
                <label class="remember-label">
                    <input type="checkbox" name="remember" value="1">
                    {{ _('Remember this device') }}
                </label>
            </div>

            <button type="submit" class="submit-btn" id="login-btn">
                <i class="fas fa-sign-in-alt"></i>
                {{ _('Sign In') }}
            </button>
        </form>

        <div class="auth-footer">
            <p>{{ _("Don't have an account?") }} <a href="{{ url_for('auth.register') }}">{{ _('Create one') }}</a></p>
        </div>
    </div>
</div>

<script>
    const loginI18n = {
        invalidPhone: {{ _('Please enter a valid 9-digit phone number')|tojson }}
    };

    // PIN Input Handling
    const pinInputs = document.querySelectorAll('.pin-input');
    const pinValue = document.getElementById('pin-value');
    const loginBtn = document.getElementById('login-btn');
    const phoneInput = document.getElementById('phone-input');

    // Only allow numbers in phone input
    phoneInput.addEventListener('input', (e) => {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
    });

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

            // Remove error state
            input.classList.remove('error');

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

            // Update hidden input
            updatePinValue();
        });

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

            // Handle Enter to submit
            if (e.key === 'Enter' && pinValue.value.length === 4) {
                document.getElementById('login-form').submit();
            }
        });

        // 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 (pinInputs[i]) {
                    pinInputs[i].value = char;
                    pinInputs[i].classList.add('filled');
                }
            });

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

            updatePinValue();
        });

        // Focus first empty input on click
        input.addEventListener('focus', () => {
            // Find first empty input and focus it instead
            for (let i = 0; i < pinInputs.length; i++) {
                if (!pinInputs[i].value) {
                    if (i !== index) {
                        pinInputs[i].focus();
                    }
                    break;
                }
            }
        });
    });

    function updatePinValue() {
        let pin = '';
        pinInputs.forEach(input => {
            pin += input.value;
        });
        pinValue.value = pin;
    }

    // Form Validation
    document.getElementById('login-form').addEventListener('submit', function (e) {
        const pin = pinValue.value;
        const phone = phoneInput.value;

        if (phone.length !== 9) {
            e.preventDefault();
            phoneInput.focus();
            alert(loginI18n.invalidPhone);
            return;
        }

        if (pin.length !== 4) {
            e.preventDefault();
            pinInputs.forEach(input => input.classList.add('error'));
            pinInputs[0].focus();
            return;
        }
    });

    // Auto-focus phone input on load
    window.addEventListener('load', () => {
        phoneInput.focus();
    });
</script>
{% endblock %}