@extends('layouts.public')
@section('title', 'Backup Codes · Cavendral Beta')
@section('content')
<div class="bg-[#161b22] border border-[#30363d] rounded-md p-8 shadow-2xl">
    <div class="text-center mb-6">
        <div class="inline-flex items-center gap-2 font-mono text-lg">
            <span class="px-2 py-1 rounded bg-[#1f6c92]/20 text-[#80b9d5]">[B]</span>
            <span class="font-bold">CAVENDRAL BETA</span>
        </div>
        <p class="text-xs text-[#7d8590] mt-2 font-mono">BACKUP CODES</p>
    </div>

    <div class="bg-[#d29922]/10 border-l-4 border-[#d29922] p-3 mb-6 text-sm rounded-r">
        <p class="font-bold text-[#d29922]">⚠ Atenção</p>
        <p class="text-[#7d8590] mt-1">Salve estes códigos em local seguro. Cada um é utilizável uma única vez. Se você perder o dispositivo MFA, eles são sua única forma de recuperação.</p>
    </div>

    <div class="bg-[#0d1117] border border-[#30363d] rounded p-4 mb-6">
        <div class="grid grid-cols-2 gap-2 font-mono text-sm">
            @foreach($backupCodes as $code)
            <div class="px-2 py-1 bg-[#21262d] rounded text-center tracking-wider">
                @if($code['used'] ?? false)
                <s class="text-[#6e7681]">{{ strtoupper($code['hash'] ? 'USADO' : '') }}</s>
                @else
                <span class="text-[#3fb950]">[disponível]</span>
                @endif
            </div>
            @endforeach
        </div>
        <p class="mt-3 text-xs text-[#6e7681] text-center">
            Os códigos estão armazenados como hash SHA-256 — exibição única.
        </p>
    </div>

    <div class="bg-[#21262d] border border-[#30363d] rounded p-3 mb-4">
        <p class="text-xs text-[#7d8590] mb-2">Códigos exibidos em texto (anote!):</p>
        <p class="text-xs text-[#6e7681]">⚠ Por segurança, exibimos apenas os hashes. Se perdeu a janela de visualização, faça reset MFA via admin.</p>
    </div>

    <a href="{{ route('dashboard') }}"
       class="block w-full text-center bg-[#1f6c92] hover:bg-[#80b9d5] text-white font-bold py-2 rounded transition-colors">
        CONTINUAR PARA O DASHBOARD
    </a>
</div>
@endsection