@extends('layouts.auth-public')

@section('title', 'Restablecer contraseña - Ley de Lobby')

@section('minimal-chrome')
@endsection

@push('head')
    <style>
        .reset-expired-wrap {
            max-width: 560px;
            margin: 20px auto 8px;
        }

        .reset-expired-card {
            background: #f4f7fb;
            border: 1px solid #d9e3f0;
            border-radius: 12px;
            padding: 28px 24px;
            text-align: center;
        }

        .reset-expired-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 14px;
            border-radius: 50%;
            background: #e8eff9;
            color: #1f4f8f;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .reset-expired-title {
            margin: 0 0 10px;
            color: #1f4f8f;
            font-size: 28px;
            font-weight: 700;
            line-height: 1.2;
        }

        .reset-expired-main {
            color: #23384f;
            font-size: 17px;
            margin: 0 0 10px;
        }

        .reset-expired-sub {
            color: #4a6077;
            margin: 0 0 20px;
        }

        .reset-expired-btn {
            width: 100%;
            min-height: 52px;
            font-size: 17px;
            font-weight: 600;
            transition: background-color .2s ease, opacity .2s ease;
        }

        .reset-expired-btn:hover,
        .reset-expired-btn:focus {
            background-color: #123e78;
        }

        .reset-expired-btn:disabled {
            opacity: .75;
            cursor: not-allowed;
        }

        .reset-expired-btn:focus-visible,
        .reset-expired-login-link:focus-visible {
            outline: 3px solid #84b0e6;
            outline-offset: 2px;
        }

        .reset-expired-help {
            margin-top: 12px;
            font-size: 13px;
            color: #5c6f83;
        }

        .reset-expired-login-link {
            display: inline-block;
            margin-top: 10px;
            color: #1f4f8f;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        @media (max-width: 767px) {
            .reset-expired-wrap {
                margin-top: 10px;
            }

            .reset-expired-card {
                padding: 22px 16px;
            }

            .reset-expired-title {
                font-size: 24px;
            }
        }
    </style>
@endpush

@section('content')
    <main class="container" style="max-width: 36rem;">
        <x-auth-session-status class="mb-4" :status="session('status')" />
        <x-auth-validation-errors class="mb-4" :errors="$errors" />

        @if (!empty($invalidResetLink))
            <section class="reset-expired-wrap" aria-labelledby="expired-link-title">
                <article class="reset-expired-card" role="status" aria-live="polite">
                    <div class="reset-expired-icon" aria-hidden="true">
                        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M12 6V12L15.5 14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/>
                            <path d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="1.8"/>
                        </svg>
                    </div>
                    <h3 id="expired-link-title" class="reset-expired-title">Enlace expirado</h3>
                    <p class="reset-expired-main">El enlace de recuperación expiró por seguridad o ya fue utilizado.</p>
                    <p class="reset-expired-sub">Solicita un nuevo enlace para restablecer tu contraseña.</p>

                    <a id="expiredLinkCta"
                        href="{{ route('password.request') }}"
                        class="btn btn-primary btn-lg reset-expired-btn"
                        aria-label="Enviar nuevo enlace de recuperación">
                        Enviar nuevo enlace
                    </a>

                    <p class="reset-expired-help">
                        Los enlaces de recuperación tienen una duración limitada por seguridad.
                    </p>
                    <a href="{{ route('login') }}" class="reset-expired-login-link">
                        Volver al inicio de sesión
                    </a>
                </article>
            </section>
        @else
            <h1 class="h3 mb-4 text-center" style="color: var(--primario-base, #3962A3);">
                Restablecer contraseña
            </h1>

            <div class="alert alert-warning text-center" role="alert">
                Este enlace de recuperación expira en {{ config('auth.passwords.'.config('auth.defaults.passwords').'.expire') }} minutos desde su emisión.
            </div>

            <form name="resetForm" class="form-horizontal" method="POST" action="{{ route('password.update') }}">
                @csrf

                <input type="hidden" name="token" value="{{ request()->route('token') }}">

                <div class="mb-3">
                    <label for="email" class="form-label">Correo electrónico</label>
                    <input type="email" class="form-control" id="email"
                        value="{{ old('email', $resetEmail ?? '') }}"
                        placeholder="usuario@dominio.cl"
                        autocomplete="email"
                        disabled
                        readonly
                        aria-disabled="true">
                    <input type="hidden" name="email" value="{{ old('email', $resetEmail ?? '') }}">
                    @error('email')
                        <div class="invalid-feedback d-block my-3">
                            {{ $message }}
                        </div>
                    @enderror
                </div>

                <x-auth.password-fields
                    password-label="Nueva Contraseña"
                    confirmation-label="Repetir Contraseña"
                    field-wrapper-class="mb-3 mt-4"
                    label-class="form-label"
                />

                <div class="text-center mt-4">
                    <button type="submit" class="btn btn-primary btn-lg w-100">Restablecer contraseña</button>
                </div>
            </form>
        @endif
    </main>
@endsection