{{-- resources/views/admin/security/twofactor.blade.php --}}
@extends('admin.layouts.app')

@section('content')
    <div class="azp-page">
        {{-- Cabeçalho --}}
        <div class="azp-page-header">
            <div class="azp-page-title-wrap">
                <div class="azp-page-title">Autenticação de dois fatores</div>
                <div class="azp-page-subtitle">
                    Protege o acesso ao backoffice com um segundo passo de verificação (Google Authenticator, etc.).
                </div>
            </div>

            <div>
                @if($admin->two_factor_enabled)
                    <span class="azp-badge-pill" style="background:#e2f7eb;color:#137b3f;border-radius:999px;padding:4px 10px;font-size:11px;">
                        ● 2FA ativo
                    </span>
                @else
                    <span class="azp-badge-pill" style="background:#fff3cd;color:#8a6d1f;border-radius:999px;padding:4px 10px;font-size:11px;">
                        ● 2FA desativado
                    </span>
                @endif
            </div>
        </div>

        {{-- Alerts --}}
        @if(session('success'))
            <div class="flash" style="margin-bottom:14px">
                {{ session('success') }}
            </div>
        @endif

        @if($errors->any())
            <div class="flash" style="border-color:#ffd3d3;background:#fff5f5;margin-bottom:14px">
                <strong>Revê os campos:</strong>
                <ul class="small" style="margin:6px 0 0 18px">
                    @foreach($errors->all() as $error) <li>{{ $error }}</li> @endforeach
                </ul>
            </div>
        @endif

        <div class="card">
            <div class="card-body" style="display:grid;grid-template-columns: minmax(0,1.4fr) minmax(0,1fr);gap:24px;align-items:flex-start;">
                {{-- Coluna esquerda: explicação / estado --}}
                <div>
                    <h3 style="margin:0 0 8px;font-size:16px;font-weight:600;">
                        @if($admin->two_factor_enabled)
                            2FA está ativo nesta conta
                        @else
                            Ativar autenticação de dois fatores
                        @endif
                    </h3>

                    @if($admin->two_factor_enabled)
                        <p class="small" style="margin:0 0 10px;color:#555;line-height:1.5;">
                            Sempre que fizeres login no backoffice, será pedido um código de 6 dígitos gerado pela tua app
                            de autenticação (Google Authenticator, Microsoft Authenticator, etc.).
                        </p>

                        <p class="small" style="margin:0 0 14px;color:#777;line-height:1.5;">
                            Se perderes acesso ao telemóvel, contacta o administrador principal para te ajudar a recuperar o acesso.
                        </p>

                        <form action="{{ route('admin.twofactor.disable') }}" method="POST"
                              onsubmit="return confirm('Tens a certeza que queres desativar o 2FA nesta conta?');">
                            @csrf
                            <button type="submit" class="btn outline">
                                Desativar 2FA
                            </button>
                        </form>
                    @else
                        <p class="small" style="margin:0 0 10px;color:#555;line-height:1.5;">
                            A autenticação de dois fatores adiciona uma camada extra de segurança: além da password, é
                            necessário introduzir um código de 6 dígitos gerado no teu telemóvel.
                        </p>

                        <ol class="small" style="margin:8px 0 14px 18px;color:#555;line-height:1.5;">
                            <li>Instala a app <strong>Google Authenticator</strong> ou app equivalente.</li>
                            <li>Abre a app e toca em <strong>+</strong> &rarr; <strong>Ler código QR</strong>.</li>
                            <li>Aponta a câmara para o QR que está nesta página.</li>
                            <li>Introduz abaixo o código de 6 dígitos gerado pela app para confirmar a ativação.</li>
                        </ol>

                        <div class="azp-note small" style="font-size:12px;color:#777;background:#fafafa;border:1px solid #eee;border-radius:8px;padding:8px 10px;margin-bottom:10px;">
                            <strong>Dica:</strong> se não conseguires ler o QR, podes introduzir a chave manualmente na app:
                            <br>
                            <code style="font-size:12px">{{ $secret }}</code>
                        </div>
                    @endif
                </div>

                {{-- Coluna direita: QR + formulário de ativação (apenas se não estiver ativo) --}}
                @if(!$admin->two_factor_enabled)
                    <div style="border-left:1px solid #f0f0f0;padding-left:20px;">
                        <div style="display:flex;flex-direction:column;align-items:center;gap:10px;">
                            <div id="qrcode"
                                 style="width:220px;height:220px;display:flex;align-items:center;justify-content:center;border:1px dashed #ddd;border-radius:12px;background:#fcfcfc;">
                                {{-- QR será desenhado por JS --}}
                            </div>

                            <div class="small" style="color:#777;text-align:center;">
                                Se o QR não aparecer, faz refresh à página. Em alternativa, usa a chave manual.
                            </div>
                        </div>

                        <form action="{{ route('admin.twofactor.enable') }}" method="POST" style="margin-top:16px;">
                            @csrf
                            <div class="field">
                                <label class="label">Código de 6 dígitos</label>
                                <input type="text"
                                       name="code"
                                       inputmode="numeric"
                                       pattern="[0-9]*"
                                       autocomplete="one-time-code"
                                       placeholder="000000">
                                <div class="small" style="margin-top:4px;color:#777;">
                                    Introduz o código atual que vês na app (ele muda de 30 em 30 segundos).
                                </div>
                            </div>

                            <button type="submit" class="btn primary" style="margin-top:10px;">
                                Confirmar e ativar 2FA
                            </button>
                        </form>
                    </div>
                @else
                    {{-- Quando já está ativo, mostramos só um bloco informativo do lado direito --}}
                    <div style="border-left:1px solid #f0f0f0;padding-left:20px;">
                        <div class="small" style="color:#555;line-height:1.5;">
                            <strong>Estado atual:</strong><br>
                            Esta conta já está protegida com autenticação de dois fatores.<br>
                            No login será sempre pedido um código da tua app de autenticação.
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
    <script src="{{ asset('js/qrcode.min.js') }}"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var qrData = @json($qrData ?? null);

            if (qrData && document.getElementById('qrcode') && window.QRCode) {
                new QRCode(document.getElementById('qrcode'), {
                    text: qrData,
                    width: 220,
                    height: 220
                });
            }
        });
    </script>
@endsection