{# templates/frontend/choose_username.html.twig #}
{% extends 'frontend/base_front.html.twig' %}

{% block title %}Choisir mon slug – Bluesy{% endblock %}
{% block navbar %}{% endblock %}

{% set prefix = 'bluesy.com/' %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .feedback { display: none; }

        .input-group .form-control.is-valid,
        .input-group .form-control.is-invalid {
            border-left-width: 1px;
        }

        .form-control.is-valid:focus   { box-shadow: 0 0 0 .25rem rgba(25,135,84,.25); }
        .form-control.is-invalid:focus { box-shadow: 0 0 0 .25rem rgba(220,53,69,.25); }

        .progress {
            height: 4px;
        }

        #slug-too-short {
            font-size: 0.875rem;
        }
    </style>
{% endblock %}

{% block main_content %}
    <section class="d-flex align-items-center justify-content-center py-5 py-md-6 min-vh-100"
             style="background:linear-gradient(135deg,#f0f4ff,#ffffff);">
        <div class="card shadow-lg rounded-4 overflow-hidden mx-3" style="max-width:440px;width:100%">

            <div class="text-center py-4 px-4"
                 style="background:linear-gradient(135deg,#0d6efd 0%,#4c8dff 100%)">
                <div class="d-inline-flex align-items-center justify-content-center bg-white bg-opacity-25 rounded-circle mb-3"
                     style="width:64px;height:64px">
                    <i class="fas fa-link fa-xl text-white"></i>
                </div>
                <h2 class="fw-bold text-white fs-4 mb-0">Choisis l’adresse de ta page</h2>
                <p class="text-white-50 small mb-0">Elle sera visible publiquement</p>
            </div>

            <div class="p-4 p-md-5">
                {{ form_start(form, { attr:{ novalidate:true } }) }}

                <label class="form-label mb-1 fw-semibold">Ton adresse Bluesy</label>
                <small class="text-muted d-block mb-2">Sans accents, ni espaces, ni caractères spéciaux</small>

                <div class="input-group" id="slug-group">
                    <span class="input-group-text bg-light">{{ prefix }}</span>
                    {{ form_widget(form.slug, {
                        attr: {
                            class: 'form-control',
                            placeholder: 'mon-nom',
                            autocomplete: 'off',
                            'data-slug-input': true
                        }
                    }) }}
                </div>

                <div class="small text-muted mt-1 d-flex justify-content-between">
                    <span id="slug-char-count">0/20</span>
                    <span id="slug-too-short" class="text-danger" style="display:none;">Trop court</span>
                </div>
                <div class="progress my-2">
                    <div id="slug-progress" class="progress-bar bg-primary" style="width: 0%;"></div>
                </div>

                <div class="feedback ok valid-feedback">✅ Disponible&nbsp;!</div>
                <div class="feedback ko invalid-feedback" data-msg="format">❌ Format invalide.</div>
                <div class="feedback ko invalid-feedback" data-msg="taken">⛔️ Déjà utilisé.</div>
                <div class="feedback ko invalid-feedback" data-msg="forbidden">❌ Ce nom n’est pas autorisé.</div>

                {{ form_errors(form.slug) }}

                <button class="btn btn-primary btn-lg w-100 my-4" id="submit-btn" disabled>Continuer</button>

                <div class="text-center">
                    <a href="{{ path('app_logout') }}" class="small text-muted text-decoration-none">← Retour</a>
                </div>

                {{ form_end(form) }}
            </div>
        </div>
    </section>
<style>
    .feedback-wrapper {
        position: relative;
        height: 24px; /* espace réservé pour les messages */
        margin-top: 0.25rem;
    }

    .feedback {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .feedback.show {
        opacity: 1;
    }

    .input-group .form-control.is-valid,
    .input-group .form-control.is-invalid {
        border-left-width: 1px;
    }

    .form-control.is-valid:focus   { box-shadow: 0 0 0 .25rem rgba(25,135,84,.25); }
    .form-control.is-invalid:focus { box-shadow: 0 0 0 .25rem rgba(220,53,69,.25); }
</style>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const input     = document.querySelector('[data-slug-input]');
            const group     = document.getElementById('slug-group');
            const okBox     = document.querySelector('.feedback.ok');
            const msgFmt    = document.querySelector('.feedback[data-msg="format"]');
            const msgTak    = document.querySelector('.feedback[data-msg="taken"]');
            const msgFor    = document.querySelector('.feedback[data-msg="forbidden"]');
            const charCount = document.getElementById('slug-char-count');
            const tooShort  = document.getElementById('slug-too-short');
            const progress  = document.getElementById('slug-progress');
            const submit    = document.getElementById('submit-btn');
            if (!input) return;

            const RX = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
            const URL = '{{ path('api_username_check') }}';
            const MAX_LENGTH = 20;
            const MIN_LENGTH = 3;
            let timer;

            input.addEventListener('input', (e) => {
                const pos = input.selectionStart;

                // Conversion en minuscules et limitation
                input.value = input.value.toLowerCase().slice(0, MAX_LENGTH);
                input.setSelectionRange(pos, pos);

                const val = input.value.trim();
                const len = val.length;

                // Met à jour compteur & barre
                charCount.textContent = `${len}/${MAX_LENGTH}`;
                progress.style.width = `${(len / MAX_LENGTH) * 100}%`;

                tooShort.style.display = len > 0 && len < MIN_LENGTH ? 'inline' : 'none';

                clearTimeout(timer);
                hideAll();

                if (!val) return;

                if (!RX.test(val)) {
                    setInvalid(msgFmt);
                    return;
                }

                timer = setTimeout(() => {
                    fetch(`${URL}?username=${encodeURIComponent(val)}`, { credentials: 'same-origin' })
                        .then(r => r.ok ? r.json() : { available: false, forbidden: false })
                        .then(({ available, forbidden }) => {
                            if (forbidden) {
                                setInvalid(msgFor);
                            } else if (available) {
                                group.classList.add('is-valid');
                                input.classList.add('is-valid');
                                okBox.style.display = 'block';
                                submit.disabled = false;
                            } else {
                                setInvalid(msgTak);
                            }
                        })
                        .catch(() => setInvalid(msgTak));
                }, 300);
            });

            function hideAll() {
                group.classList.remove('is-valid','is-invalid');
                input.classList.remove('is-valid','is-invalid');
                [okBox, msgFmt, msgTak, msgFor].forEach(e => e.style.display = 'none');
                submit.disabled = true;
            }

            function setInvalid(el) {
                group.classList.add('is-invalid');
                input.classList.add('is-invalid');
                el.style.display = 'block';
                input.focus();
            }
        });
    </script>
{% endblock %}