@extends('layouts.app-layout')

@section('title', 'Verificar inicio de sesión')

@section('content')
    @php
        $codeLength = (int) config('auth_verification.code_length', 6);
        $codePattern = '[0-9]{' . $codeLength . '}';
    @endphp
    <div class="container py-4">
        <div class="row justify-content-center">
            <div class="col-lg-7">
                <div class="card border-0 shadow-sm">
                    <div class="card-body p-4 p-md-5">
                        <div class="d-flex align-items-center mb-4">
                            <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center me-3"
                                style="width:44px;height:44px;">🔐</div>
                            <div>
                                <p class="text-muted mb-0 small text-uppercase" style="letter-spacing:0.08em;">Verificación
                                </p>
                                <h2 class="h5 fw-bold mb-0">Ingresá el código de verificación</h2>
                                <p class="text-muted mb-0">Te enviamos un código a {{ $email }}.</p>
                            </div>
                        </div>

                        @if (session('status'))
                            <div class="alert alert-success" role="alert">
                                {{ session('status') }}
                            </div>
                        @endif

                        @if ($errors->any())
                            <div class="alert alert-danger" role="alert">
                                {{ $errors->first() }}
                            </div>
                        @endif

                        <form action="{{ route('login.verificar.store') }}" method="POST" novalidate>
                            @csrf

                            <div class="mb-3">
                                <label for="codigo" class="form-label small text-muted mb-1">Código</label>
                                <input type="text" id="codigo" name="codigo"
                                    class="form-control @error('codigo') is-invalid @enderror" value="{{ old('codigo') }}"
                                    maxlength="{{ $codeLength }}" pattern="{{ $codePattern }}" inputmode="numeric"
                                    placeholder="000000" required>
                                @error('codigo')
                                    <div class="invalid-feedback">{{ $message }}</div>
                                @enderror
                            </div>

                            <div class="d-flex justify-content-between align-items-center pt-2">
                                <a href="{{ route('login') }}" class="btn btn-link text-decoration-none">Volver</a>
                                <button type="submit" class="btn btn-primary px-4">Verificar e ingresar</button>
                            </div>
                        </form>

                        <hr class="my-4">

                        <form action="{{ route('login.verificar.reenviar') }}" method="POST">
                            @csrf
                            <button type="submit" class="btn btn-outline-secondary btn-sm" id="btn-reenviar-codigo"
                                @disabled(($segundosRestantesReenvio ?? 0) > 0)>
                                Reenviar código
                            </button>
                            <p class="text-muted small mt-2 mb-0" id="texto-reenvio"
                                data-segundos="{{ $segundosRestantesReenvio ?? 0 }}"></p>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        (function() {
            const texto = document.getElementById('texto-reenvio');
            const boton = document.getElementById('btn-reenviar-codigo');
            if (!texto || !boton) return;

            let segundos = Number(texto.dataset.segundos || 0);

            const pad = (n) => String(n).padStart(2, '0');
            const render = () => {
                if (segundos > 0) {
                    const mm = Math.floor(segundos / 60);
                    const ss = segundos % 60;
                    texto.textContent = `Podés reenviar en ${pad(mm)}:${pad(ss)}`;
                    boton.disabled = true;
                } else {
                    texto.textContent = 'Ya podés reenviar el código.';
                    boton.disabled = false;
                }
            };

            render();

            if (segundos > 0) {
                const timer = setInterval(() => {
                    segundos -= 1;
                    render();

                    if (segundos <= 0) {
                        clearInterval(timer);
                    }
                }, 1000);
            }
        })();
    </script>
@endpush