@extends('layout.backend')

@section('title', 'Gerenciar Passkeys')

@section('styles')
@parent
<style>
    .passkey-item:last-child { border-bottom: none !important; }
</style>
@endsection

@section('content')
<div class="card shadow mb-4">
    <div class="card-header py-3 d-flex justify-content-between align-items-center">
        <h6 class="m-0 font-weight-bold text-primary">
            <i class="fas fa-key mr-1"></i> Minhas Passkeys
        </h6>
        <button type="button" class="btn btn-primary btn-sm" id="btnRegisterPasskey">
            <i class="fas fa-plus"></i> Cadastrar nova Passkey
        </button>
    </div>
    <div class="card-body">
        @if($passkeys->isEmpty())
        <div class="text-center text-muted py-5">
            <i class="fas fa-key fa-3x mb-3"></i>
            <p>Você ainda não cadastrou nenhuma Passkey.</p>
            <p class="small">Use uma Passkey para entrar no site sem precisar digitar senha, usando biometria, PIN ou dispositivo de segurança.</p>
            <button type="button" class="btn btn-primary" id="btnRegisterPasskeyEmpty">
                <i class="fas fa-plus"></i> Cadastrar Passkey
            </button>
        </div>
        @else
        <div class="list-group">
            @foreach($passkeys as $passkey)
            <div class="list-group-item list-group-item-action passkey-item d-flex justify-content-between align-items-center">
                <div>
                    <i class="fas fa-key text-muted mr-2"></i>
                    <strong>{{ $passkey->name ?? 'Passkey' }}</strong>
                    <br><small class="text-muted">Criada em {{ $passkey->created_at->format('d/m/Y H:i') }}</small>
                </div>
                <button type="button" class="btn btn-danger btn-sm btn-delete-passkey" data-id="{{ $passkey->id }}">
                    <i class="fas fa-trash"></i> Remover
                </button>
            </div>
            @endforeach
        </div>
        @endif
    </div>
</div>

<form id="formDeletePasskey" method="POST" style="display:none">
    @csrf
    @method('DELETE')
</form>

<form id="formRegisterPasskey" method="POST" style="display:none">
    @csrf
    <input type="hidden" name="credential" id="credentialData">
    <input type="hidden" name="name" id="credentialName">
</form>
@endsection

@section('scripts')
@parent
<script>
    var registering = false;

    document.getElementById('btnRegisterPasskey')?.addEventListener('click', startRegister);
    document.getElementById('btnRegisterPasskeyEmpty')?.addEventListener('click', startRegister);

    async function startRegister() {
        if (registering) return;
        registering = true;
        try {
            var name = prompt('Dê um nome para esta Passkey (opcional):', 'Passkey ' + new Date().toLocaleString('pt-BR'));
            if (name === null) { registering = false; return; }
            var result = await registerPasskey(name || undefined);
            if (result) location.reload();
        } finally {
            registering = false;
        }
    }

    document.querySelectorAll('.btn-delete-passkey').forEach(function(btn) {
        btn.addEventListener('click', function() {
            if (!confirm('Remover esta Passkey?')) return;
            var id = this.dataset.id;
            var form = document.getElementById('formDeletePasskey');
            form.action = '/auth/webauthn/passkey/' + id;
            form.submit();
        });
    });
</script>
@vite(['resources/js/webauthn.js'])
@endsection