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

{% block title %}Modifier mon profil - Na+{% endblock %}

{% block body %}
<style>
  main#contenu { text-align: left !important; }
</style>
<main id="contenu" style="padding: 2rem; box-sizing: border-box;">

    <form method="post" enctype="multipart/form-data"
          action="{{ path('app_profile_edit', {'_locale': app.request.locale}) }}">

    {# ===== HEADER ===== #}
    <div class="card" style="padding: 1rem 1.5rem; display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem;">
        <div style="flex-shrink: 0; text-align: center;">
            <label for="avatar" style="cursor: pointer; display: block;">
                {% if user.avatarPath %}
                    <img src="/uploads/avatars/{{ user.avatarPath }}" alt="Avatar"
                         style="width: 75px; height: 75px; border-radius: 50%; object-fit: cover; border: 3px solid #f5c400;">
                {% else %}
                    <div style="width: 75px; height: 75px; border-radius: 50%; background: var(--royal, #1a2e5a); color: #f5c400; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: bold; border: 3px solid #f5c400;">
                        {{ user.firstName|first|upper }}{{ user.lastName|first|upper }}
                    </div>
                {% endif %}
                <div style="font-size: 0.7rem; color: #aaa; margin-top: 0.2rem;">Changer</div>
            </label>
            <input type="file" id="avatar" name="avatar" accept="image/*" style="display: none;">
        </div>
        <div style="flex: 1; text-align: center;">
            <h1 class="hero-title" style="margin: 0; font-size: 1.6rem; text-align: center;">{{ user.displayName }}</h1>
            {% if user.moodStatus %}
                <div style="color: #888; font-style: italic; margin-top: 0.2rem; font-size: 0.9rem; text-align: center;">{{ user.moodStatus }}</div>
            {% endif %}
        </div>
        <div style="flex-shrink: 0; display: flex; gap: 0.75rem;">
            <button type="submit" class="btn btn-primary btn-sm">Enregistrer</button>
            <a href="{{ path('app_profile_view', {'_locale': app.request.locale}) }}" class="btn btn-secondary btn-sm">Annuler</a>
        </div>
    </div>

    {# ===== BLOC 1 — Identité ===== #}
    <div class="card" style="padding: 1.5rem; margin-bottom: 1.5rem;">
        <h2 class="pst">Identité</h2>
        <div class="egrid">

            <div class="fgroup">
                <label class="flabel">Nom complet <span class="rh">non modifiable</span></label>
                <div class="freadonly">{{ user.firstName }} {{ user.lastName }}</div>
            </div>

            <div class="fgroup">
                <label class="flabel">Pseudo <span style="color:#e74c3c;">*</span></label>
                <input type="text" name="pseudo" value="{{ user.pseudo }}" required class="finput">
            </div>

            <div class="fgroup">
                <label class="flabel">Affiché en public</label>
                <div class="tg-wrap" style="margin-top: 0.3rem;">
                    <span class="tl">Nom complet</span>
                    <label class="na-toggle na-toggle--sm">
                        <input type="checkbox" name="is_anonymous" value="1" {% if user.isAnonymous %}checked{% endif %}>
                        <span class="na-toggle__track"><span class="na-toggle__thumb"></span></span>
                    </label>
                    <span class="tl">Pseudonyme</span>
                </div>
            </div>

            <div class="fgroup">
                <label class="flabel">Email <span class="rh">non modifiable</span></label>
                <div class="freadonly">{{ user.email }}</div>
            </div>

            <div class="fgroup">
                <label class="flabel">Téléphone</label>
                <input type="tel" name="phone" value="{{ user.phone }}" placeholder="06 00 00 00 00" class="finput">
            </div>

            <div class="fgroup">
                <label class="flabel">Naissance <span class="rh">non modifiable</span></label>
                <div class="freadonly">{{ user.birthDate ? user.birthDate|date('d/m/Y') : '—' }}</div>
            </div>

        </div>
    </div>

    {# ===== BLOC 2 — Adresse ===== #}
    <div class="card" style="padding: 1.5rem; margin-bottom: 1.5rem;">
        <h2 class="pst">Adresse</h2>
        <div class="egrid">

            <div class="fgroup" style="grid-column: span 2;">
                <label class="flabel">Rue</label>
                <input type="text" name="address_line1" value="{{ user.addressLine1 }}" placeholder="Numéro et rue" class="finput">
            </div>

            <div class="fgroup" style="grid-column: span 2;">
                <label class="flabel">Complément</label>
                <input type="text" name="address_line2" value="{{ user.addressLine2 }}" placeholder="Appartement, bâtiment..." class="finput">
            </div>

            <div class="fgroup">
                <label class="flabel">Code postal</label>
                <input type="text" name="postal_code" value="{{ user.postalCode }}" placeholder="27000" class="finput">
            </div>

            <div class="fgroup">
                <label class="flabel">Ville</label>
                <input type="text" name="city" value="{{ user.city }}" placeholder="Évreux" class="finput">
            </div>

            <div class="fgroup">
                <label class="flabel">Pays</label>
                <input type="text" name="country" value="{{ user.country == 'FR' ? 'France' : (user.country ?? 'France') }}" placeholder="France" class="finput">
            </div>

        </div>
        <div style="font-size: 0.82rem; color: #aaa; text-align: center; padding-top: 0.75rem; margin-top: 0.75rem; border-top: 1px solid #eee;">
            Membre depuis le {{ user.createdAt|date('d/m/Y') }}
        </div>
    </div>

    {# ===== BLOC 3 — Parle-nous de toi ===== #}
    <div class="card" style="padding: 1.5rem; margin-bottom: 1.5rem;">
        <h2 class="pst">Parle-nous de toi</h2>

        <div class="fgroup" style="margin-bottom: 1.25rem;">
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem;">
                <label class="flabel">Pourquoi je suis neuro-atypique</label>
                <div class="tg-wrap">
                    <span class="tl">Privé</span>
                    <label class="na-toggle na-toggle--sm">
                        <input type="checkbox" name="neuro_profile_visibility" value="public"
                               {% if user.neuroProfileVisibility != 'private' %}checked{% endif %}>
                        <span class="na-toggle__track"><span class="na-toggle__thumb"></span></span>
                    </label>
                    <span class="tl">Public</span>
                </div>
            </div>
            <textarea name="neuro_profile" rows="4" placeholder="Décris ton profil neuro-atypique..." class="finput" style="resize: vertical;">{{ user.neuroProfile }}</textarea>
        </div>

        <div class="fgroup">
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem;">
                <label class="flabel">Mes centres d'intérêts</label>
                <div class="tg-wrap">
                    <span class="tl">Privé</span>
                    <label class="na-toggle na-toggle--sm">
                        <input type="checkbox" name="special_interests_visibility" value="public"
                               {% if user.specialInterestsVisibility != 'private' %}checked{% endif %}>
                        <span class="na-toggle__track"><span class="na-toggle__thumb"></span></span>
                    </label>
                    <span class="tl">Public</span>
                </div>
            </div>
            <textarea name="special_interests" rows="5" placeholder="Tes passions, hobbies, sujets favoris..." class="finput" style="resize: vertical;">{{ user.specialInterests }}</textarea>
        </div>

    </div>

    {# ===== BLOC 4 — Géolocalisation ===== #}
    <div class="card" style="padding: 1.5rem; margin-bottom: 1.5rem;">
        <h2 class="pst">Géolocalisation ?</h2>
        <div class="egrid">

            <div class="fgroup">
                <label class="flabel">Département</label>
                <input type="text" name="geo_department" value="{{ user.geoDepartment }}" placeholder="Ex : Eure" class="finput">
            </div>

            <div class="fgroup">
                <label class="flabel">Département affiché ?</label>
                <div class="tg-wrap" style="margin-top: 0.3rem;">
                    <span class="tl">Non</span>
                    <label class="na-toggle na-toggle--sm">
                        <input type="checkbox" name="geo_department_visible" value="1" {% if user.geoDepartment %}checked{% endif %}>
                        <span class="na-toggle__track"><span class="na-toggle__thumb"></span></span>
                    </label>
                    <span class="tl">Oui</span>
                </div>
            </div>

            <div class="fgroup">
                <label class="flabel">Région</label>
                <input type="text" name="geo_region" value="{{ user.geoRegion }}" placeholder="Ex : Normandie" class="finput">
            </div>

            <div class="fgroup">
                <label class="flabel">Région affichée ?</label>
                <div class="tg-wrap" style="margin-top: 0.3rem;">
                    <span class="tl">Non</span>
                    <label class="na-toggle na-toggle--sm">
                        <input type="checkbox" name="geo_region_visible" value="1" {% if user.geoRegion %}checked{% endif %}>
                        <span class="na-toggle__track"><span class="na-toggle__thumb"></span></span>
                    </label>
                    <span class="tl">Oui</span>
                </div>
            </div>

            <div class="fgroup">
                <label class="flabel">Visible par</label>
                <div class="tg-wrap" style="margin-top: 0.3rem;">
                    <span class="tl">Privé</span>
                    <label class="na-toggle na-toggle--sm">
                        <input type="checkbox" name="geo_visibility" value="public" {% if user.geoVisibility != 'private' %}checked{% endif %}>
                        <span class="na-toggle__track"><span class="na-toggle__thumb"></span></span>
                    </label>
                    <span class="tl">Public</span>
                </div>
            </div>

        </div>
    </div>

    {# ===== BLOC 5 — Accessibilité ===== #}
    <div class="card" style="padding: 1.5rem; margin-bottom: 1.5rem;">
        <h2 class="pst">Accessibilité par défaut</h2>
        <div class="egrid">

            <div class="fgroup">
                <label class="flabel">Thème</label>
                <div class="tg-wrap" style="margin-top: 0.3rem;">
                    <span class="tl">Jour</span>
                    <label class="na-toggle na-toggle--sm">
                        <input type="checkbox" name="display_theme" value="dark" {% if user.displayTheme == 'dark' %}checked{% endif %}>
                        <span class="na-toggle__track"><span class="na-toggle__thumb"></span></span>
                    </label>
                    <span class="tl">Nuit</span>
                </div>
            </div>

            <div class="fgroup">
                <label class="flabel">Contraste élevé</label>
                <div class="tg-wrap" style="margin-top: 0.3rem;">
                    <span class="tl">Non</span>
                    <label class="na-toggle na-toggle--sm">
                        <input type="checkbox" name="high_contrast" value="1" {% if user.highContrast %}checked{% endif %}>
                        <span class="na-toggle__track"><span class="na-toggle__thumb"></span></span>
                    </label>
                    <span class="tl">Oui</span>
                </div>
            </div>

            <div class="fgroup">
                <label class="flabel">Police OpenDyslexic</label>
                <div class="tg-wrap" style="margin-top: 0.3rem;">
                    <span class="tl">Non</span>
                    <label class="na-toggle na-toggle--sm">
                        <input type="checkbox" name="dyslexia_font" value="1" {% if user.dyslexiaFont %}checked{% endif %}>
                        <span class="na-toggle__track"><span class="na-toggle__thumb"></span></span>
                    </label>
                    <span class="tl">Oui</span>
                </div>
            </div>

            <div class="fgroup">
                <label class="flabel">Réduire les animations</label>
                <div class="tg-wrap" style="margin-top: 0.3rem;">
                    <span class="tl">Non</span>
                    <label class="na-toggle na-toggle--sm">
                        <input type="checkbox" name="reduce_animations" value="1" {% if user.reduceAnimations %}checked{% endif %}>
                        <span class="na-toggle__track"><span class="na-toggle__thumb"></span></span>
                    </label>
                    <span class="tl">Oui</span>
                </div>
            </div>

            <div class="fgroup">
                <label class="flabel">Mise en page simplifiée</label>
                <div class="tg-wrap" style="margin-top: 0.3rem;">
                    <span class="tl">Non</span>
                    <label class="na-toggle na-toggle--sm">
                        <input type="checkbox" name="simple_layout" value="1" {% if user.simpleLayout %}checked{% endif %}>
                        <span class="na-toggle__track"><span class="na-toggle__thumb"></span></span>
                    </label>
                    <span class="tl">Oui</span>
                </div>
            </div>

            <div class="fgroup" style="grid-column: span 2;">
                <label class="flabel">Taille des caractères</label>
                <div style="text-align: center; font-size: 1rem; font-weight: 700; color: var(--royal, #1a2e5a); margin: 0.3rem 0;" id="font-size-label">
                    {% if user.fontSize == 'small' %}Petite
                    {% elseif user.fontSize == 'large' %}Grande
                    {% elseif user.fontSize == 'xlarge' %}Très grande
                    {% else %}Normale{% endif %}
                </div>
                <input type="range" id="font-size-slider" min="0" max="3"
                       value="{% if user.fontSize == 'small' %}0{% elseif user.fontSize == 'large' %}2{% elseif user.fontSize == 'xlarge' %}3{% else %}1{% endif %}"
                       style="width: 100%; accent-color: var(--royal, #1a2e5a); cursor: pointer;"
                       oninput="applyFontSize(this.value)">
                <input type="hidden" name="font_size" id="font-size-value" value="{{ user.fontSize ?? 'normal' }}">
            </div>

        </div>
    </div>

    {# ===== BOUTON BAS ===== #}
    <div style="text-align: center; padding-bottom: 1rem;">
        <button type="submit" class="btn btn-primary" style="padding: 0.75rem 3rem; font-size: 1rem;">Enregistrer les modifications</button>
        <a href="{{ path('app_profile_view', {'_locale': app.request.locale}) }}" class="btn btn-secondary" style="padding: 0.75rem 2rem; font-size: 1rem; margin-left: 1rem;">Annuler</a>
    </div>

    </form>

</main>

<style>
.pst {
    margin: 0 0 1.1rem 0;
    font-size: 1.05rem;
    color: var(--royal, #1a2e5a);
    border-bottom: 2px solid var(--royal, #1a2e5a);
    padding-bottom: 0.5rem;
    text-align: center;
}
.egrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
}
@media (max-width: 700px) {
    .egrid { grid-template-columns: 1fr; }
}
.fgroup {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.flabel {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--royal, #1a2e5a);
}
.finput {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 0.9rem;
    box-sizing: border-box;
    font-family: inherit;
}
.freadonly {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: #f8f9fa;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #555;
    box-sizing: border-box;
    overflow-wrap: break-word;
}
.rh { font-size: 0.72rem; color: #bbb; margin-left: 0.4rem; }
.tg-wrap { display: flex; align-items: center; gap: 0.4rem; flex-shrink: 0; }
.tl { font-size: 0.8rem; color: var(--royal, #1a2e5a); font-weight: 600; white-space: nowrap; }

/* ===== TOGGLES ===== */
.na-toggle { display: inline-flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.na-toggle input { display: none; }
.na-toggle__track {
    position: relative;
    width: 40px; height: 22px;
    border-radius: 11px;
    background: white;
    box-shadow: inset 0 0 0 2px var(--royal, #1a2e5a);
}
.na-toggle__thumb {
    position: absolute;
    top: 3px; left: 3px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--royal, #1a2e5a);
    transition: left 0.18s;
}
.na-toggle input:checked + .na-toggle__track .na-toggle__thumb { left: 21px; }
.na-toggle--sm .na-toggle__track { width: 32px; height: 18px; }
.na-toggle--sm .na-toggle__thumb { width: 10px; height: 10px; top: 3px; left: 3px; }
.na-toggle--sm input:checked + .na-toggle__track .na-toggle__thumb { left: 17px; }
</style>

<script>
var fontLabels = ['Petite', 'Normale', 'Grande', 'Très grande'];
var fontValues = ['small', 'normal', 'large', 'xlarge'];
var fontSizes  = ['13px', '16px', '19px', '22px'];
function applyFontSize(val) {
    val = parseInt(val);
    document.getElementById('font-size-label').textContent = fontLabels[val];
    document.getElementById('font-size-value').value = fontValues[val];
    document.documentElement.style.fontSize = fontSizes[val];
}
applyFontSize(document.getElementById('font-size-slider').value);
</script>
{% endblock %}