@extends('layouts.app')
@section('title', 'Segurança')
@section('content')
    <div class="page-header">
        <h1 class="page-title">Segurança da Conta</h1>
    </div>

    <div class="card" style="max-width:560px;">
        <h2 class="page-title" style="font-size:1.05rem;">Autenticação de dois fatores</h2>
        <p class="muted" style="margin-top:-0.5rem;">
            Opcional. Depois de ativada, é pedido um código de 6 dígitos da tua aplicação de autenticação
            (ex.: Google Authenticator, Authy) sempre que iniciares sessão.
        </p>

        @if ($state === 'enabled')
            <div class="opportunity-card type-success" style="margin-top:1rem;">
                <x-icon name="shield" />
                <span>A autenticação de dois fatores está <strong>ativa</strong> nesta conta.</span>
            </div>

            <form method="POST" action="{{ route('admin.security.disable') }}" style="margin-top:1rem;max-width:320px;">
                @csrf
                <label>Confirma a tua palavra-passe para desativar
                    <input type="password" name="password" required autocomplete="current-password">
                </label>
                @if ($errors->any())
                    <p class="error">{{ $errors->first() }}</p>
                @endif
                <button type="submit" class="danger">Desativar 2FA</button>
            </form>
        @elseif ($state === 'pending')
            <div class="form-grid" style="margin-top:1rem;">
                <div class="full" style="text-align:center;">
                    <img src="{{ $qrDataUri }}" alt="QR code 2FA" style="border-radius:var(--radius-md);border:1px solid var(--color-border-soft);">
                </div>
                <label class="full">Ou introduz manualmente esta chave na app de autenticação
                    <input type="text" value="{{ $secret }}" readonly onclick="this.select();">
                </label>
            </div>

            <form method="POST" action="{{ route('admin.security.confirm') }}" id="confirm-2fa-form" style="margin-top:0.75rem;max-width:320px;">
                @csrf
                <label>Código da app (6 dígitos)
                    <input type="text" name="code" inputmode="numeric" maxlength="6" pattern="[0-9]*" required autofocus>
                </label>
                @if ($errors->any())
                    <p class="error">{{ $errors->first() }}</p>
                @endif
            </form>
            <div class="form-actions">
                <button type="submit" form="confirm-2fa-form">Confirmar e ativar</button>
                <form method="POST" action="{{ route('admin.security.cancel') }}" style="display:inline;">
                    @csrf
                    <button type="submit" class="secondary">Cancelar</button>
                </form>
            </div>
        @else
            <div class="opportunity-card type-info" style="margin-top:1rem;">
                <x-icon name="smartphone" />
                <span>A autenticação de dois fatores está <strong>desativada</strong> nesta conta.</span>
            </div>
            <form method="POST" action="{{ route('admin.security.enable') }}" style="margin-top:1rem;">
                @csrf
                <button type="submit">Ativar autenticação de dois fatores</button>
            </form>
        @endif
    </div>
@endsection