{% extends 'base.html' %}

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

{% block extra_css %}
<style>
    .profile-page {
        max-width: 700px;
        margin: 0 auto;
        padding: var(--spacing-2xl);
    }

    .profile-header {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        padding: var(--spacing-xl);
        margin-bottom: var(--spacing-lg);
        text-align: center;
        position: relative;
        overflow: hidden;
    }

    .profile-header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: linear-gradient(135deg, rgba(255, 107, 53, 0.2), rgba(255, 140, 66, 0.1));
    }

    .profile-avatar {
        position: relative;
        z-index: 1;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        border: 4px solid var(--accent-primary);
        margin: 0 auto var(--spacing-md);
        background: var(--bg-tertiary);
    }

    .profile-name {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: var(--spacing-xs);
    }

    .profile-phone {
        color: var(--text-secondary);
        font-size: 0.95rem;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
    }

    .profile-phone i {
        color: var(--accent-primary);
    }

    .profile-member {
        color: var(--text-muted);
        font-size: 0.85rem;
        margin-top: var(--spacing-sm);
    }

    .profile-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-md);
        margin-top: var(--spacing-xl);
        padding-top: var(--spacing-xl);
        border-top: 1px solid var(--border-color);
    }

    .stat-item {
        text-align: center;
    }

    .stat-value {
        font-family: var(--font-display);
        font-size: 1.5rem;
        font-weight: 700;
    }

    .stat-value.success {
        color: var(--success);
    }

    .stat-value.accent {
        color: var(--accent-primary);
    }

    .stat-label {
        color: var(--text-muted);
        font-size: 0.8rem;
        margin-top: 4px;
    }

    .profile-card {
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-xl);
        margin-bottom: var(--spacing-lg);
        overflow: hidden;
    }

    .card-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
        background: rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid var(--border-color);
    }

    .card-header i {
        color: var(--accent-primary);
        font-size: 1.25rem;
    }

    .card-header h3 {
        margin: 0;
        font-size: 1.1rem;
    }

    .card-body {
        padding: var(--spacing-lg);
    }

    .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.85rem;
    }

    .form-input {
        width: 100%;
        padding: 0.875rem 1rem;
        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:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }

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

    .pin-input {
        width: 50px;
        height: 55px;
        text-align: center;
        font-size: 1.5rem;
        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);
    }

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

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

    .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;
    }

    .btn-save {
        background: var(--accent-gradient);
        color: white;
        border: none;
        padding: 0.875rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        transition: all 0.3s ease;
    }

    .btn-save:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(255, 107, 53, 0.4);
    }

    .btn-secondary {
        background: var(--bg-tertiary);
        color: var(--text-primary);
        border: 1px solid var(--border-color);
        padding: 0.875rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 600;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: var(--spacing-sm);
        transition: all 0.3s ease;
    }

    .btn-secondary:hover {
        border-color: var(--accent-primary);
    }

    @media (max-width: 600px) {
        .profile-stats {
            grid-template-columns: 1fr;
            gap: var(--spacing-lg);
        }

        .lang-select {
            flex-direction: column;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="profile-page">
    <h1 style="display: flex; align-items: center; gap: var(--spacing-md); margin-bottom: var(--spacing-xl);">
        <i class="fas fa-user text-accent"></i> {{ _('My Profile') }}
    </h1>

    <!-- Profile Header -->
    <div class="profile-header">
        <img src="https://api.dicebear.com/7.x/identicon/svg?seed={{ current_user.avatar_seed }}" alt="Avatar"
            class="profile-avatar">
        <h2 class="profile-name">{{ current_user.username }}</h2>
        <p class="profile-phone">
            <i class="fas fa-phone"></i>
            +237 {{ current_user.phone[:3] if current_user.phone else '---' }} {{ current_user.phone[3:6] if
            current_user.phone else '---' }} {{ current_user.phone[6:] if current_user.phone else '---' }}
        </p>
        <p class="profile-member">
            <i class="fas fa-calendar"></i>
            {{ _('Member since') }} {{ current_user.created_at.strftime('%B %Y') }}
        </p>

        <div class="profile-stats">
            <div class="stat-item">
                <div class="stat-value success">{{ "{:,.0f}".format(current_user.total_won) }}</div>
                <div class="stat-label">{{ _('XAF Won') }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-value">{{ current_user.total_games }}</div>
                <div class="stat-label">{{ _('Games Played') }}</div>
            </div>
            <div class="stat-item">
                <div class="stat-value accent">{{ "%.2f"|format(current_user.highest_win_multiplier) }}x</div>
                <div class="stat-label">{{ _('Best Multiplier') }}</div>
            </div>
        </div>
    </div>

    <!-- Edit Profile -->
    <div class="profile-card">
        <div class="card-header">
            <i class="fas fa-edit"></i>
            <h3>{{ _('Edit Profile') }}</h3>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('auth.profile') }}">
                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-user"></i>
                        {{ _('Username') }}
                    </label>
                    <input type="text" class="form-input" value="{{ current_user.username }}" disabled>
                    <small style="color: var(--text-muted); margin-top: 4px; display: block;">
                        {{ _('Username cannot be changed') }}
                    </small>
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-phone"></i>
                        {{ _('Phone Number') }}
                    </label>
                    <input type="tel" name="phone" class="form-input" value="{{ current_user.phone or '' }}"
                        placeholder="6XX XXX XXX" maxlength="9" pattern="[0-9]{9}" title="{{ _('Enter 9 digit phone number') }}">
                </div>

                <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 current_user.language == 'en' }}" id="langEn">
                            <input type="radio" name="language" value="en" {{ 'checked' if current_user.language=='en'
                                }}>
                            {{ _('English') }}
                        </label>
                        <label class="lang-option {{ 'active' if current_user.language == 'fr' }}" id="langFr">
                            <input type="radio" name="language" value="fr" {{ 'checked' if current_user.language=='fr'
                                }}>
                            {{ _('French') }}
                        </label>
                    </div>
                </div>

                <button type="submit" class="btn-save">
                    <i class="fas fa-save"></i>
                    {{ _('Save Changes') }}
                </button>
            </form>
        </div>
    </div>

    <!-- Change PIN -->
    <div class="profile-card">
        <div class="card-header">
            <i class="fas fa-lock"></i>
            <h3>{{ _('Change PIN') }}</h3>
        </div>
        <div class="card-body">
            <form method="POST" action="{{ url_for('auth.change_pin') }}" id="change-pin-form">
                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-key"></i>
                        {{ _('Current PIN') }}
                    </label>
                    <div class="pin-container">
                        <input type="password" class="pin-input current-pin" maxlength="1" inputmode="numeric"
                            data-pin="1">
                        <input type="password" class="pin-input current-pin" maxlength="1" inputmode="numeric"
                            data-pin="2">
                        <input type="password" class="pin-input current-pin" maxlength="1" inputmode="numeric"
                            data-pin="3">
                        <input type="password" class="pin-input current-pin" maxlength="1" inputmode="numeric"
                            data-pin="4">
                    </div>
                    <input type="hidden" name="current_pin" id="current-pin-value" required>
                </div>

                <div class="form-group">
                    <label class="form-label">
                        <i class="fas fa-lock"></i>
                        {{ _('New PIN') }}
                    </label>
                    <div class="pin-container">
                        <input type="password" class="pin-input new-pin" maxlength="1" inputmode="numeric" data-pin="1">
                        <input type="password" class="pin-input new-pin" maxlength="1" inputmode="numeric" data-pin="2">
                        <input type="password" class="pin-input new-pin" maxlength="1" inputmode="numeric" data-pin="3">
                        <input type="password" class="pin-input new-pin" maxlength="1" inputmode="numeric" data-pin="4">
                    </div>
                    <input type="hidden" name="new_pin" id="new-pin-value" required>
                </div>

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

                <button type="submit" class="btn-secondary">
                    <i class="fas fa-key"></i>
                    {{ _('Change PIN') }}
                </button>
            </form>
        </div>
    </div>
</div>

<script>
    const profileI18n = {
        currentPinRequired: {{ _('Please enter your current 4-digit PIN')|tojson }},
        newPinRequired: {{ _('Please enter a new 4-digit PIN')|tojson }},
        pinsMismatch: {{ _('New PINs do not match')|tojson }}
    };

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

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

                updatePinValue(inputs, hiddenInput);
            });

            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);
                }
            });

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

    const currentPinInputs = document.querySelectorAll('.current-pin');
    const newPinInputs = document.querySelectorAll('.new-pin');
    const confirmPinInputs = document.querySelectorAll('.confirm-pin');

    setupPinInputs(currentPinInputs, document.getElementById('current-pin-value'));
    setupPinInputs(newPinInputs, document.getElementById('new-pin-value'));
    setupPinInputs(confirmPinInputs, document.getElementById('confirm-pin-value'));

    // 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('change-pin-form').addEventListener('submit', function (e) {
        const currentPin = document.getElementById('current-pin-value').value;
        const newPin = document.getElementById('new-pin-value').value;
        const confirmPin = document.getElementById('confirm-pin-value').value;

        if (currentPin.length !== 4) {
            e.preventDefault();
            alert(profileI18n.currentPinRequired);
            return;
        }

        if (newPin.length !== 4) {
            e.preventDefault();
            alert(profileI18n.newPinRequired);
            return;
        }

        if (newPin !== confirmPin) {
            e.preventDefault();
            alert(profileI18n.pinsMismatch);
            return;
        }
    });
</script>
{% endblock %}