@extends('layouts.admin')
@section('content')
<div class="max-w-5xl">
    <p class="hms-kicker">Account</p>
    <h1 class="font-serif text-4xl">My Account</h1>
    <p class="mt-3 max-w-3xl text-black/60">Review your signed-in account and manage the security controls that protect access to the HMS administration portal.</p>

    <section class="mt-8 rounded-2xl border border-black/10 bg-white p-6">
        <div class="flex flex-col justify-between gap-5 sm:flex-row sm:items-center">
            <div>
                <p class="text-xs font-bold uppercase tracking-[.14em] text-black/40">Signed in as</p>
                <h2 class="mt-2 font-serif text-2xl">{{ $user->name }}</h2>
                <p class="mt-1 text-sm text-black/55">{{ $user->email }}</p>
            </div>
            <div class="rounded-xl bg-black/[.035] px-4 py-3 text-sm text-black/60">
                <strong class="block text-black/75">Account security</strong>
                <span>{{ $user->two_factor_confirmed_at ? 'Two-factor authentication is enabled.' : 'Two-factor authentication is not yet enabled.' }}</span>
            </div>
        </div>
    </section>

    <section class="mt-6 rounded-2xl border border-black/10 bg-white p-6">
        <h2 class="font-serif text-2xl">Change password</h2>
        <p class="mt-2 text-sm text-black/55">Changing your password revokes other active sessions so old sign-ins cannot continue using the account.</p>
        <form class="mt-5 grid max-w-xl gap-4" method="POST" action="{{ route('admin.security.password') }}">
            @csrf @method('PUT')
            <label class="grid gap-1.5 text-sm font-semibold">Current password<input class="rounded-xl border border-black/15 px-4 py-3" type="password" name="current_password" autocomplete="current-password" required></label>
            <label class="grid gap-1.5 text-sm font-semibold">New password<span class="text-xs font-normal text-black/45">Use at least 12 characters and avoid reusing a password from another service.</span><input class="rounded-xl border border-black/15 px-4 py-3" type="password" name="password" autocomplete="new-password" required></label>
            <label class="grid gap-1.5 text-sm font-semibold">Confirm new password<input class="rounded-xl border border-black/15 px-4 py-3" type="password" name="password_confirmation" autocomplete="new-password" required></label>
            <button class="hms-button hms-button-primary justify-self-start">Update password</button>
        </form>
    </section>

    <section class="mt-6 rounded-2xl border border-black/10 bg-white p-6">
        <h2 class="font-serif text-2xl">Two-factor authentication</h2>
        <p class="mt-2 text-sm text-black/55">2FA requires a current code from an authenticator app in addition to your password.</p>
        @if($user->two_factor_confirmed_at)
            <div class="mt-5 rounded-xl border border-green-200 bg-green-50 p-4 text-sm text-green-900">Enabled {{ $user->two_factor_confirmed_at->diffForHumans() }}.</div>
            <form class="mt-5 grid max-w-xl gap-3" method="POST" action="{{ route('admin.security.2fa.disable') }}">
                @csrf @method('DELETE')
                <label class="grid gap-1.5 text-sm font-semibold">Confirm current password<input class="rounded-xl border border-black/15 px-4 py-3" type="password" name="current_password" autocomplete="current-password" required></label>
                <button class="hms-button border border-black/15 justify-self-start">Disable 2FA</button>
            </form>
        @elseif($setupSecret)
            <p class="mt-5 text-sm text-black/60">Add this secret to an authenticator app, then enter a current six-digit code to finish setup.</p>
            <div class="mt-4 rounded-xl bg-black/[.04] p-4 font-mono break-all">{{ $setupSecret }}</div>
            <details class="mt-3 text-sm"><summary class="cursor-pointer font-semibold">Show provisioning URI</summary><code class="mt-2 block break-all rounded-lg bg-black/[.03] p-3">{{ $provisioningUri }}</code></details>
            <form class="mt-5 flex flex-wrap gap-3" method="POST" action="{{ route('admin.security.2fa.confirm') }}">
                @csrf
                <input class="rounded-xl border border-black/15 px-4 py-3" inputmode="numeric" autocomplete="one-time-code" name="code" placeholder="123456" required>
                <button class="hms-button hms-button-primary">Confirm 2FA</button>
            </form>
        @else
            <form class="mt-5" method="POST" action="{{ route('admin.security.2fa.begin') }}">
                @csrf
                <button class="hms-button hms-button-primary">Set up 2FA</button>
            </form>
        @endif

        @if($recoveryCodes)
            <div class="mt-6 rounded-xl border border-amber-200 bg-amber-50 p-5">
                <strong>Save these recovery codes now.</strong>
                <p class="mt-1 text-sm text-amber-900/70">Store them somewhere secure. Each code can be used if your authenticator is unavailable.</p>
                <div class="mt-3 grid grid-cols-2 gap-2 font-mono">@foreach($recoveryCodes as $code)<span>{{ $code }}</span>@endforeach</div>
            </div>
        @endif
    </section>
</div>
@endsection