@extends('layouts.auth-public')

@section('title', 'Verificar correo - Ley de Lobby')

@section('minimal-chrome')
@endsection

@php
    $pageConfig = $registerVerifyPageConfig ?? [];
    $viewMode = $pageConfig['viewMode'] ?? 'form';
    $terminalReason = $pageConfig['terminalReason'] ?? null;
    $maskedEmail = $pageConfig['maskedEmail'] ?? '';
    $attemptsRemaining = (int) ($pageConfig['attemptsRemaining'] ?? 0);
    $codeLength = (int) ($pageConfig['codeLength'] ?? 6);
    $expiresAtLabel = $pageConfig['expiresAtLabel'] ?? '';
    $urls = $pageConfig['urls'] ?? [];
@endphp

@push('head')
    <style>
        .verify-card {
            background: #f8fbff;
            border: 1px solid #dce7f5;
            border-radius: 12px;
            padding: 22px 20px;
        }

        .verify-muted {
            color: #5a6f85;
            font-size: 14px;
        }

        .otp-input {
            letter-spacing: 0.35em;
            font-size: 1.25rem;
            text-align: center;
        }
    </style>
@endpush

@section('content')
    <main id="register-verify-page" class="container" style="max-width: 36rem;">
        <script type="application/json" id="register-verify-page-config">@json($pageConfig)</script>
        <h1 class="h3 mb-4 text-center" style="color: var(--primario-base, #3962A3);">
            Verificar correo electrónico
        </h1>

        <div id="register-verify-alerts" class="mb-4" role="alert" aria-live="polite"></div>

        <section data-role="success-panel" class="verify-card mb-4 text-center @if ($viewMode !== 'success') d-none @endif" aria-live="polite">
            <h2 class="h5 mb-3" style="color: #1f4f8f;">Correo verificado correctamente</h2>
            <p class="verify-muted mb-3">
                Su correo <strong data-role="masked-email">{{ $maskedEmail }}</strong> quedó verificado.
            </p>
            <p class="verify-muted mb-3" data-role="auto-complete-hint">
                Estamos creando su cuenta. Será redirigido en unos segundos…
            </p>
            <div class="spinner-border text-primary" role="status" data-role="complete-spinner" aria-hidden="true">
                <span class="visually-hidden">Creando cuenta…</span>
            </div>
        </section>

        <section data-role="terminal-panel" class="verify-card mb-4 @if ($viewMode !== 'terminal') d-none @endif" role="alert">
            <p class="verify-muted mb-3" data-role="terminal-message">
                @if ($terminalReason === 'expired')
                    El código expiró. Solicite uno nuevo o vuelva a registrarse.
                @elseif ($terminalReason === 'blocked')
                    Superó los intentos permitidos. Solicite un nuevo código.
                @elseif ($terminalReason === 'invalidated')
                    Este código ya no es válido. Solicite uno nuevo.
                @elseif ($terminalReason === 'consumed')
                    Este código ya fue utilizado. Si ya verificó su correo, espere el siguiente paso del registro.
                @else
                    No es posible usar este enlace de verificación.
                @endif
            </p>

            <form
                method="POST"
                action="{{ $urls['resend'] ?? '#' }}"
                class="mb-2 @unless (in_array($terminalReason, ['expired', 'blocked', 'invalidated'], true)) d-none @endunless"
                data-role="resend-otp"
                onsubmit="return false;">
                @csrf
                @method('PATCH')
                <button type="submit" class="btn btn-primary w-100">Solicitar nuevo código</button>
            </form>
        </section>

        <p data-role="terminal-panel" class="text-center mb-3 @if ($viewMode !== 'terminal') d-none @endif">
            <a href="{{ $urls['register'] ?? route('register.create') }}">Volver al formulario de registro</a>
        </p>

        <div data-role="verify-panel" class="@if ($viewMode !== 'form') d-none @endif">
            <p class="verify-muted text-center mb-4">
                Enviamos un código de <span data-role="code-length">{{ $codeLength }}</span> dígitos a
                <strong data-role="masked-email">{{ $maskedEmail }}</strong>.
                Vence el <span data-role="expires-at">{{ $expiresAtLabel }}</span>.
            </p>

            <form
                id="register-verify-form"
                method="POST"
                action="{{ $urls['verify'] ?? '#' }}"
                class="verify-card mb-3"
                onsubmit="return false;">
                @csrf
                <div class="mb-3">
                    <label for="code" class="form-label">Código de verificación</label>
                    <input
                        type="text"
                        class="form-control otp-input"
                        id="code"
                        name="code"
                        value="{{ old('code') }}"
                        inputmode="numeric"
                        autocomplete="one-time-code"
                        pattern="[0-9]*"
                        maxlength="{{ $codeLength }}"
                        minlength="{{ $codeLength }}"
                        required
                        aria-describedby="codeHelp"
                        autofocus>
                    <div id="codeHelp" class="form-text" data-role="attempts-help">
                        @if ($attemptsRemaining > 0)
                            Le quedan {{ $attemptsRemaining }} intento(s).
                        @else
                            Sin intentos restantes; solicite un nuevo código.
                        @endif
                    </div>
                    <div class="invalid-feedback d-block" data-role="code-error"></div>
                </div>
                <button type="submit" class="btn btn-primary w-100" data-role="verify-submit" @disabled($attemptsRemaining === 0)>
                    Verificar código
                </button>
            </form>

            <form
                method="POST"
                action="{{ $urls['resend'] ?? '#' }}"
                class="text-center mb-3"
                data-role="resend-otp"
                onsubmit="return false;">
                @csrf
                @method('PATCH')
                <button type="submit" class="btn btn-link">Reenviar código</button>
            </form>
        </div>

        <p data-role="verify-panel" class="text-center mb-0 @if ($viewMode !== 'form') d-none @endif">
            <a href="{{ $urls['register'] ?? route('register.create') }}">Volver al registro</a>
        </p>
    </main>
@endsection