{% extends 'base.html.twig' %}

{% block title %}Compléter mon profil - Na+{% endblock %}

{% block body %}
<main id="contenu">
    <img src="/Logo.png" alt="Logo n-atypik" class="logo-central" />
    <h1 class="hero-title" style="margin-bottom: 0.5rem;">Mon profil</h1>

    <div class="content" style="max-width: 700px; margin: 0 auto;">

        {# BARRE DE PROGRESSION — 4 étapes #}
        <div style="margin-bottom: 2rem;">
            <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
                {% set labels = ['Bienvenue', 'Identité', 'Coordonnées', 'Validation'] %}
                {% for i in 1..4 %}
                    <div style="text-align: center; flex: 1;">
                        <div style="
                            width: 32px; height: 32px; border-radius: 50%; margin: 0 auto 4px auto;
                            display: flex; align-items: center; justify-content: center;
                            font-weight: bold; font-size: 0.85rem;
                            background: {{ step >= i ? 'var(--royal, #1a2e5a)' : '#ddd' }};
                            color: {{ step >= i ? '#f5c400' : '#999' }};
                        ">{{ i }}</div>
                        <div style="font-size: 0.75rem; color: {{ step >= i ? 'var(--royal, #1a2e5a)' : '#999' }};">{{ labels[i-1] }}</div>
                    </div>
                {% endfor %}
            </div>
            <div style="background: #ddd; height: 6px; border-radius: 3px; overflow: hidden;">
                <div style="background: var(--royal, #1a2e5a); height: 100%; width: {{ ((step-1)/3*100)|round }}%; transition: width 0.3s;"></div>
            </div>
            <p style="text-align: center; color: #666; font-size: 0.85rem; margin-top: 0.5rem;">Étape {{ step }} sur 4 — {{ labels[step-1] }}</p>
        </div>

        <div class="card" style="padding: 2rem;">

        {# ==================== ÉTAPE 1 : BIENVENUE ==================== #}
        {% if step == 1 %}
            <div style="text-align: center;">
                <h2 style="color: var(--royal, #1a2e5a); margin-bottom: 1rem;">Bienvenue {{ user.firstName }} !</h2>
                <p style="color: #555; line-height: 1.7; margin-bottom: 1rem;">
                    Tu vas bientôt faire partie de la communauté <strong>Na+</strong>, un espace bienveillant pensé pour les personnes neuro-atypiques.
                </p>
                <p style="color: #555; line-height: 1.7; margin-bottom: 1.5rem;">
                    Avant d'accéder à la plateforme, nous allons compléter ton profil ensemble. Cela prend environ <strong>3 minutes</strong> et tu pourras modifier tout ça plus tard.
                </p>
                <div style="background: #f0f4ff; border-radius: 8px; padding: 1rem; margin-bottom: 2rem; text-align: left;">
                    <p style="margin: 0; color: #555; font-size: 0.9rem;">
                        🔒 <strong>Tes données sont en sécurité.</strong> Tu choisis ce que tu rends public, visible aux membres, ou gardé privé.
                    </p>
                </div>
                <form method="post">
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('wizard') }}">
                    <div style="text-align: right;">
                        <button type="submit" style="font-size: 1.1rem; padding: 0.8rem 2.5rem;">
                            C'est parti !
                        </button>
                    </div>
                </form>
            </div>

        {# ==================== ÉTAPE 2 : IDENTITÉ ==================== #}
        {% elseif step == 2 %}
            <h2 style="color: var(--royal, #1a2e5a); margin-top: 0;">Ton identité</h2>
            <form method="post" enctype="multipart/form-data">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('wizard') }}">

                <div class="form-group">
                    <label>Pseudo <span class="req">*</span></label>
                    <input type="text" name="pseudo" maxlength="40" required
                           value="{{ wizardData.pseudo ?? user.pseudo ?? '' }}"
                           placeholder="Le nom que tu veux utiliser sur Na+">
                </div>

                <div class="form-group">
                    <label>Photo de profil (avatar)</label>
                    {% if user.avatarPath %}
                        <div style="margin-bottom: 0.5rem;">
                            <img src="/uploads/avatars/{{ user.avatarPath }}" alt="Avatar" style="width: 80px; height: 80px; border-radius: 50%; object-fit: cover;">
                        </div>
                    {% endif %}
                    <input type="file" name="avatar" accept="image/jpeg,image/png,image/gif,image/webp">
                    <p class="form-note">JPG, PNG, GIF ou WebP — max 5 Mo</p>
                </div>

                <div class="consent-checkboxes" style="margin-bottom: 0.75rem;">
                    <label class="checkbox-label">
                        <input type="checkbox" name="is_anonymous" value="1" {{ (wizardData.is_anonymous ?? false) ? 'checked' : '' }}>
                        <span>Afficher mon <strong>pseudonyme</strong> à la place de mon nom complet</span>
                    </label>
                </div>

                <div class="consent-checkboxes" style="margin-bottom: 1.5rem;">
                    <label class="checkbox-label">
                        <input type="checkbox" name="dyslexia_font" value="1" {{ (wizardData.dyslexia_font ?? false) ? 'checked' : '' }}>
                        <span>Police dyslexie-friendly (OpenDyslexic)</span>
                    </label>
                </div>

                {% include 'profile/_wizard_nav.html.twig' with {'step': step} %}
            </form>

        {# ==================== ÉTAPE 3 : COORDONNÉES ==================== #}
        {% elseif step == 3 %}
            <h2 style="color: var(--royal, #1a2e5a); margin-top: 0;">
                Tes coordonnées : <span style="color: #dc3545;">Elles resteront toujours privées !</span>
            </h2>
            <form method="post" enctype="multipart/form-data">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('wizard') }}">

                <div class="form-group">
                    <label>Téléphone <span class="req">*</span></label>
                    <input type="tel" name="phone" id="phone-input" value="{{ wizardData.phone ?? '' }}" placeholder="06 00 00 00 00" required>
                </div>

                <div class="form-group">
                    <label>Adresse <span class="req">*</span></label>
                    <input type="text" name="address_line1" value="{{ wizardData.address_line1 ?? '' }}" placeholder="Numéro et rue" required>
                </div>
                <div class="form-group">
                    <label>Complément d'adresse</label>
                    <input type="text" name="address_line2" value="{{ wizardData.address_line2 ?? '' }}" placeholder="Appartement, bâtiment...">
                </div>
                <div class="form-row">
                    <div class="form-group">
                        <label>Code postal <span class="req">*</span></label>
                        <input type="text" name="postal_code" value="{{ wizardData.postal_code ?? '' }}" required>
                    </div>
                    <div class="form-group">
                        <label>Ville <span class="req">*</span></label>
                        <input type="text" name="city" value="{{ wizardData.city ?? '' }}" required>
                    </div>
                </div>
                <div class="form-group">
                    <label>Pays</label>
                    <input type="text" name="country" value="{{ wizardData.country ?? 'France' }}" placeholder="France">
                </div>

                <hr style="margin: 1.5rem 0; border-color: #eee;">

                <div class="form-group">
                    <label>Carte d'identité <span class="req">*</span></label>
                    <div style="background: #fff3cd; border: 1px solid #ffc107; border-radius: 8px; padding: 1rem; margin-bottom: 0.8rem; font-size: 0.9rem;">
                        <p style="margin: 0 0 0.5rem 0;"><strong>Uniquement pour vérifier que tu as +18 ans</strong></p>
                        <p style="margin: 0 0 0.5rem 0;"><strong>Non conservée</strong> après vérification par l'équipe Na+</p>
                        <p style="margin: 0;">Transmise de façon sécurisée</p>
                    </div>
                    {% if wizardData.id_card_path is defined %}
                        <p style="color: green; margin-bottom: 0.5rem;">Carte déjà uploadée</p>
                    {% endif %}
                    <input type="file" name="id_card" accept="image/jpeg,image/png,application/pdf" {{ wizardData.id_card_path is not defined ? 'required' : '' }}>
                    <p class="form-note">JPG, PNG ou PDF — max 5 Mo</p>
                </div>

                {% include 'profile/_wizard_nav.html.twig' with {'step': step} %}
            </form>

        {# ==================== ÉTAPE 4 : RÉCAPITULATIF ==================== #}
        {% elseif step == 4 %}
            <h2 style="color: var(--royal, #1a2e5a); margin-top: 0;">Récapitulatif</h2>
            <p style="color: #555; margin-bottom: 1.5rem;">Vérifie tes informations avant de valider. Tu pourras tout modifier après validation.</p>

            <div style="display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem;">

                <div style="background: #f8f9fa; border-radius: 8px; padding: 1rem;">
                    <strong>Identité</strong><br>
                    Pseudo : <em>{{ wizardData.pseudo ?? '—' }}</em><br>
                    Affichage : {{ (wizardData.is_anonymous ?? false) ? 'Pseudonyme uniquement' : 'Nom complet affiché' }}<br>
                    Police OpenDyslexic : {{ (wizardData.dyslexia_font ?? false) ? 'Activée' : 'Non' }}
                </div>

                <div style="background: #f8f9fa; border-radius: 8px; padding: 1rem;">
                    <strong>Coordonnées</strong> <span style="font-size: 0.85rem; color: #dc3545;">(toujours privées)</span><br>
                    {{ wizardData.address_line1 ?? '—' }}{% if wizardData.address_line2 %}, {{ wizardData.address_line2 }}{% endif %}<br>
                    {{ wizardData.postal_code ?? '' }} {{ wizardData.city ?? '' }}<br>
                    {{ wizardData.country ?? 'France' }}<br>
                    Téléphone : {{ wizardData.phone ?? '—' }}
                </div>

                <div style="background: #f8f9fa; border-radius: 8px; padding: 1rem;">
                    <strong>Carte d'identité</strong><br>
                    {{ (wizardData.id_card_path ?? '') ? 'Téléchargée' : 'Manquante' }}
                </div>

            </div>

            <form method="post">
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('wizard') }}">
                <div style="display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap;">
                    <a href="{{ path('app_profile_wizard', {'_locale': app.request.locale, 'step': 3}) }}"
                       class="btn-secondary"
                       style="width: 220px; min-width: 220px; text-align: center; padding: 0.75rem 1.5rem; box-sizing: border-box;">
                        Modifier mes infos
                    </a>
                    <button type="submit" style="width: 220px; min-width: 220px; background: #28a745; padding: 0.75rem 1.5rem; box-sizing: border-box;">
                        Valider mon profil
                    </button>
                </div>
            </form>
        {% endif %}

        </div>
    </div>
</main>

<style>
.radio-card {
    cursor: pointer;
    flex: 1;
    text-align: center;
    padding: 1rem 0.5rem;
    border: 2px solid #ddd;
    border-radius: 8px;
    transition: border-color 0.2s;
}
.radio-card input { display: none; }
.radio-card--active { border-color: var(--royal, #1a2e5a); background: #f0f4ff; }
.radio-card:hover { border-color: #aab8d4; }
</style>

<script>
// Formatage automatique du téléphone
const phoneInput = document.getElementById('phone-input');
if (phoneInput) {
    phoneInput.addEventListener('input', function() {
        let val = this.value.replace(/\D/g, '').substring(0, 10);
        let formatted = '';
        for (let i = 0; i < val.length; i++) {
            if (i > 0 && i % 2 === 0) formatted += ' ';
            formatted += val[i];
        }
        this.value = formatted;
    });
}
</script>
{% endblock %}