@section('title', __('Revisão de documentos'))
<div>
    <x-baseview title="{{ __('Revisão de documentos') }}">

        {{-- cartões-resumo (padrão Deel): a situação da fila antes de qualquer clique --}}
        <div class="grid gap-4 mt-6 md:grid-cols-4">
            <div class="p-4 bg-white border rounded-lg">
                <p class="text-2xl font-bold">{{ $contadores['pendentes'] }}</p>
                <p class="text-xs text-gray-500">{{ __('Aguardando revisão') }}</p>
            </div>
            <div class="p-4 bg-white border rounded-lg">
                <p class="text-2xl font-bold text-yellow-600">{{ $contadores['comAviso'] }}</p>
                <p class="text-xs text-gray-500">{{ __('Com aviso da análise') }}</p>
            </div>
            <div class="p-4 bg-white border rounded-lg">
                <p class="text-2xl font-bold text-green-600">{{ $contadores['aprovados30'] }}</p>
                <p class="text-xs text-gray-500">{{ __('Aprovados (30 dias)') }}</p>
            </div>
            <div class="p-4 bg-white border rounded-lg">
                <p class="text-2xl font-bold text-red-600">{{ $contadores['recusados30'] }}</p>
                <p class="text-xs text-gray-500">{{ __('Recusados (30 dias)') }}</p>
            </div>
        </div>

        @if (!$modulosComMotorista)
            <div class="p-8 mt-6 text-center bg-white border rounded-lg">
                <p class="font-semibold text-gray-600">{{ __('Nenhum módulo com motoristas está ativo.') }}</p>
                <p class="mt-1 text-sm text-gray-400">{{ __('Ative um módulo com motoristas na tela Módulos para usar esta fila.') }}</p>
            </div>
        @elseif (!$req)
            <div class="p-10 mt-6 text-center bg-white border rounded-lg">
                <p class="text-lg font-bold text-green-700">{{ __('Fila limpa!') }}</p>
                <p class="mt-1 text-sm text-gray-500">{{ __('Nenhum documento aguardando revisão.') }}</p>
            </div>
        @else
            {{-- ===================== o item em revisão ===================== --}}
            <div class="p-4 mt-6 bg-white border rounded-lg">
                <div class="flex items-center justify-between flex-wrap gap-2">
                    <div>
                        <p class="text-lg font-bold">{{ $driver->name }}</p>
                        <p class="text-xs text-gray-500">
                            {{ $driver->email }} · {{ $driver->phone }}
                            @if ($driver->cpf) · CPF {{ substr(preg_replace('/\D/', '', $driver->cpf), 0, 3) }}.***.***-{{ substr(preg_replace('/\D/', '', $driver->cpf), -2) }} @endif
                            @if ($veiculo) · {{ $veiculo->reg_no }} @if($veiculo->year)({{ $veiculo->year }})@endif @endif
                        </p>
                    </div>
                    <div class="flex items-center gap-2">
                        <a href="{{ route('drivers.profile', $driver->id) }}" target="_blank"
                            style="padding:7px 14px;border-radius:8px" class="text-xs font-semibold text-primary-700 border border-primary-300 hover:bg-primary-50">
                            {{ __('Ficha completa') }}
                        </a>
                        <span class="px-2 py-1 text-xs rounded-full {{ $req->status === 'pending' ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-600' }}">
                            {{ ['pending' => __('em análise'), 'approved' => __('aprovada'), 'rejected' => __('recusada')][$req->status] ?? $req->status }}
                            · #{{ $req->id }}
                        </span>
                    </div>
                </div>

                <div class="grid gap-4 mt-4 lg:grid-cols-3">
                    {{-- ============ documentos (2/3) ============ --}}
                    <div class="lg:col-span-2 grid gap-3 md:grid-cols-2">
                        @forelse ($docs as $doc)
                            @php $a = $analises[$doc->id] ?? null; @endphp
                            <div class="border rounded-lg overflow-hidden">
                                <div class="flex items-center justify-between px-3 py-2 bg-gray-50">
                                    <span class="text-xs font-bold uppercase text-gray-600">
                                        {{ in_array($doc->name, ['cnh', 'crlv']) ? strtoupper($doc->name) : $doc->file_name }}
                                    </span>
                                    @if ($a)
                                        <span class="px-2 py-0.5 text-[11px] rounded-full {{ $a['status'] === 'approved' ? 'bg-green-100 text-green-700' : ($a['status'] === 'rejected' ? 'bg-red-100 text-red-700' : 'bg-yellow-100 text-yellow-700') }}">
                                            {{ ['approved' => __('OCR ok'), 'rejected' => __('OCR reprovou'), 'review' => __('OCR pede revisão')][$a['status']] ?? $a['status'] }}
                                        </span>
                                    @endif
                                </div>
                                <a href="{{ route('secure.media', $doc->id) }}" target="_blank">
                                    <img src="{{ route('secure.media', $doc->id) }}" alt="{{ $doc->name }}"
                                        style="width:100%;max-height:20rem;object-fit:contain;background:#111827">
                                </a>
                                @if ($a && count($a['motivos']))
                                    <div class="px-3 py-2 text-xs text-gray-600 space-y-1">
                                        @foreach ($a['motivos'] as $m)
                                            <p>· {{ $m }}</p>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        @empty
                            <p class="text-sm text-gray-400">{{ __('Nenhum documento enviado.') }}</p>
                        @endforelse

                        @if ($selfie)
                            <div class="border rounded-lg overflow-hidden">
                                <div class="px-3 py-2 bg-gray-50">
                                    <span class="text-xs font-bold uppercase text-gray-600">{{ __('Selfie') }}</span>
                                </div>
                                <a href="{{ route('secure.media', $selfie->id) }}" target="_blank">
                                    <img src="{{ route('secure.media', $selfie->id) }}" alt="selfie"
                                        style="width:100%;max-height:20rem;object-fit:contain;background:#111827">
                                </a>
                            </div>
                        @endif
                    </div>

                    {{-- ============ o que a automação sabe (1/3) ============ --}}
                    <div class="space-y-3">
                        @if ($rosto)
                            @php
                                $corRosto = ($rosto['decisao'] ?? '') === 'aprova' ? '#059669' : ((($rosto['decisao'] ?? '') === 'recusa') ? '#dc2626' : '#d97706');
                            @endphp
                            <div class="p-3 border rounded-lg" style="border-color:{{ $corRosto }}55;background:{{ $corRosto }}0d">
                                <p class="text-xs font-bold text-gray-600">{{ __('Comparação facial') }}</p>
                                <p class="text-2xl font-bold" style="color:{{ $corRosto }}">
                                    {{ isset($rosto['percentual']) && $rosto['percentual'] !== null ? $rosto['percentual'] . '%' : '·' }}
                                </p>
                                <p class="text-xs text-gray-600">{{ $rosto['motivo'] ?? '' }}</p>
                            </div>
                        @endif

                        @if ($consultas->count())
                            <div class="p-3 border rounded-lg">
                                <p class="text-xs font-bold text-gray-600">{{ __('Consultas na base oficial') }}</p>
                                @foreach ($consultas as $c)
                                    <p class="mt-1 text-xs {{ $c->success ? 'text-gray-600' : 'text-red-600' }}">
                                        {{ $c->service }} · {{ $c->success ? __('respondeu') : __('não respondeu') }}
                                    </p>
                                @endforeach
                            </div>
                        @endif

                        @if ($req->note)
                            <div class="p-3 border rounded-lg bg-yellow-50 border-yellow-300">
                                <p class="text-xs font-bold text-yellow-800">{{ __('Nota atual (o motorista vê isto)') }}</p>
                                <p class="mt-1 text-xs text-yellow-900">{{ $req->note }}</p>
                            </div>
                        @endif
                    </div>
                </div>

                {{-- ===================== a decisão ===================== --}}
                <div class="pt-4 mt-4 border-t">
                    <textarea wire:model.defer="nota" rows="2"
                        placeholder="{{ __('Nota para o motorista (obrigatória ao pedir nova foto ou recusar; ele lê exatamente o que você escrever)') }}"
                        class="w-full text-sm border-gray-300 rounded-md"></textarea>
                    <div class="flex flex-wrap items-center gap-2 mt-3">
                        <button wire:click="aprovar({{ $req->id }})" wire:loading.attr="disabled"
                            style="padding:10px 20px;border-radius:8px" class="text-sm font-bold text-white bg-green-600 hover:bg-green-700">
                            {{ __('Aprovar e liberar') }}
                        </button>
                        <button wire:click="pedirNovaFoto({{ $req->id }})" wire:loading.attr="disabled"
                            style="padding:10px 20px;border-radius:8px" class="text-sm font-bold text-yellow-900 hover:opacity-80" style="padding:10px 20px;border-radius:8px;background:#fcd34d">
                            {{ __('Pedir nova foto') }}
                        </button>
                        <button wire:click="recusar({{ $req->id }})" wire:loading.attr="disabled"
                            style="padding:10px 20px;border-radius:8px" class="text-sm font-bold text-white bg-red-600 hover:bg-red-700">
                            {{ __('Recusar') }}
                        </button>
                        <span class="ml-auto text-xs text-gray-400">
                            {{ __('Ao decidir, o próximo da fila abre sozinho') }} · {{ $contadores['pendentes'] }} {{ __('na fila') }}
                        </span>
                    </div>
                </div>
            </div>
        @endif
    </x-baseview>
</div>