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

{% block title %}Confirme ton compte – Bluesy{% endblock %}
{% block navbar %}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        @keyframes zoomIn { 0%{transform:scale(.92);opacity:0;} 100%{transform:scale(1);opacity:1;} }
        .otp-card { animation: zoomIn .4s ease-out; }

        .otp-input{
            width:3.2rem;height:3.2rem;border-radius:.75rem;font-weight:600;
            transition:border .2s,box-shadow .2s;
        }
        .otp-input:focus{
            border-color:#6f42c1;
            box-shadow:0 0 0 .25rem rgba(111,66,193,.25);
        }
    </style>
{% endblock %}

{% block main_content %}
    {% set error = error|default(null) %}

    <section class="d-flex align-items-center justify-content-center py-5 min-vh-100"
             style="background:linear-gradient(135deg,#7b61ff 0%,#009dff 100%);">
        <div class="card shadow-lg rounded-4 otp-card px-4 px-md-5 py-5 mx-3"
             style="max-width:500px;width:100%;background:#fff;">
            <div class="text-center mb-4">
                <div class="d-inline-flex align-items-center justify-content-center rounded-circle mb-3"
                     style="width:72px;height:72px;background:#f0efff">
                    <i class="fas fa-shield-alt fa-2x text-primary"></i>
                </div>
                <h1 class="h4 fw-bold mb-2">Entre ton code de vérification</h1>
                <p class="text-muted mb-0">Nous venons d’envoyer un code à&nbsp;6 chiffres sur ton e-mail.</p>
            </div>

            {% if error %}
                <div class="alert alert-danger small">{{ error|raw }}</div>
            {% endif %}

            <form method="post" action="{{ path('app_verify_otp') }}" novalidate>
                <input type="hidden" name="_csrf_token" value="{{ csrf_token('verify-otp') }}">

                <div class="d-flex justify-content-center gap-3 mb-4">
                    {% for i in 0..5 %}
                        <input type="text"
                               name="digit{{ i+1 }}"
                               maxlength="1"
                               pattern="\d"
                               inputmode="numeric"
                               autocomplete="{{ i==0 ? 'one-time-code' : 'off' }}"
                               data-index="{{ i }}"
                               required
                               class="form-control text-center fs-4 otp-input">
                    {% endfor %}
                </div>

                <button class="btn btn-primary btn-lg w-100 mb-3">Valider le code</button>

                <p class="text-center small mb-0">
                    Pas reçu ? <a href="{{ path('app_resend_otp') }}" class="fw-semibold">Renvoyer un code</a>
                </p>
            </form>
        </div>
    </section>

    {# -------- JS copier-coller & navigation ----------------------------- #}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const inputs = [...document.querySelectorAll('.otp-input')];
            if (!inputs.length) return;

            inputs[0].focus();

            /* Déplace le focus et limite à 1 chiffre */
            function handleInput(e){
                e.target.value = e.target.value.replace(/\\D/g,'').slice(0,1);
                const idx = +e.target.dataset.index;
                if(e.target.value && idx < 5) inputs[idx+1].focus();
            }

            /* Gestion BACKSPACE */
            function handleKey(e){
                const idx = +e.target.dataset.index;
                if(e.key==='Backspace' && !e.target.value && idx>0){
                    inputs[idx-1].focus();
                }
            }

            /* Coller ou saisir 6 chiffres d’un coup */
            function handlePaste(e){
                e.preventDefault();
                const data = (e.clipboardData || window.clipboardData).getData('text').replace(/\\D/g,'').slice(0,6);
                if(!data) return;
                [...data].forEach((ch,i)=>{ if(inputs[i]) inputs[i].value = ch; });
                const next = data.length < 6 ? inputs[data.length] : inputs[5];
                next && next.focus();
            }

            inputs.forEach(inp => {
                inp.addEventListener('input', handleInput);
                inp.addEventListener('keydown', handleKey);
                inp.addEventListener('paste', handlePaste);
            });
        });
    </script>
{% endblock %}