@section('title', __('Document Validation Settings'))
<div>
    <x-baseview title="{{ __('Document Validation Settings') }}">
        <div class="w-full p-8 space-y-6 bg-white rounded">

            {{-- status --}}
            <div class="grid grid-cols-2 gap-4 lg:grid-cols-5">
                <div class="p-3 border rounded">
                    <p style="font-size:.7rem;color:#6b7280">{{ __('Provider') }}</p>
                    <p style="font-weight:700">Infosimples</p>
                </div>
                <div class="p-3 border rounded">
                    <p style="font-size:.7rem;color:#6b7280">{{ __('API token') }}</p>
                    <p style="font-weight:700;color:{{ $tokenSet ? '#16a34a' : '#dc2626' }}">{{ $tokenSet ? __('Configured') : __('Not configured') }}</p>
                </div>
                <div class="p-3 border rounded">
                    <p style="font-size:.7rem;color:#6b7280">{{ __('Mode') }}</p>
                    <p style="font-weight:700;color:{{ $testMode ? '#d97706' : '#16a34a' }}">{{ $testMode ? __('TEST (simulated)') : __('REAL (uses credits)') }}</p>
                </div>
                <div class="p-3 border rounded">
                    <p style="font-size:.7rem;color:#6b7280">{{ __('Queries made') }}</p>
                    <p style="font-weight:700">{{ $totalCount }} @if($lastRun) <span style="font-weight:400;font-size:.7rem;color:#9ca3af">({{ __('last') }}: {{ $lastRun->format('d/m H:i') }})</span> @endif</p>
                </div>
                <div class="p-3 border rounded">
                    <p style="font-size:.7rem;color:#6b7280">{{ __('Total spent') }}</p>
                    <p style="font-weight:700;color:#b45309">R$ {{ number_format($totalSpent, 2, ',', '.') }}</p>
                </div>
            </div>

            {{-- config --}}
            <div class="md:w-1/2 space-y-4">
                <div>
                    <label class="text-sm">{{ __('Infosimples API token') }}</label>
                    <input type="password" wire:model.defer="token" autocomplete="new-password"
                        placeholder="{{ $tokenSet ? __('Already configured — fill only to replace') : __('Paste the token from the Infosimples dashboard') }}"
                        class="w-full px-3 py-2 border rounded" />
                    @error('token')<p class="text-xs" style="color:#dc2626">{{ $message }}</p>@enderror
                    <p class="text-xs text-gray-500">{{ __('Find it at') }} <a href="https://api.infosimples.com/" target="_blank" style="color:#1d4ed8;text-decoration:underline">api.infosimples.com</a> — {{ __('the token is stored encrypted') }}.</p>
                </div>
                <div>
                    <label class="text-sm">{{ __('Default state (UF) for Detran queries') }}</label>
                    <select wire:model.defer="uf" class="w-32 px-3 py-2 border rounded">
                        @foreach ($ufs as $u)
                            <option value="{{ strtolower($u) }}">{{ $u }}</option>
                        @endforeach
                    </select>
                    @error('uf')<p class="text-xs" style="color:#dc2626">{{ $message }}</p>@enderror
                </div>
                <div>
                    <label class="inline-flex items-center gap-2 text-sm">
                        <input type="checkbox" wire:model.defer="testMode" />
                        {{ __('Test mode (simulated responses — no credits consumed)') }}
                    </label>
                    <p class="text-xs text-gray-500">{{ __('Use it to explore the whole flow; turn off to run real queries.') }}</p>
                </div>
                <div class="flex gap-2">
                    <button wire:click="save" wire:loading.attr="disabled"
                        style="padding:.6rem 1.2rem;color:#fff;border-radius:8px;background:#1a4531;font-weight:600;border:none">{{ __('Save') }}</button>
                    <button wire:click="testConnection" wire:loading.attr="disabled"
                        style="padding:.6rem 1.2rem;color:#1a4531;border-radius:8px;background:#fff;font-weight:600;border:1px solid #1a4531">{{ __('Test connection (free)') }}</button>
                </div>
                <div wire:loading wire:target="testConnection" style="font-size:.8rem;color:#6b7280">{{ __('Checking token...') }}</div>
                @if ($connResult)
                    <div style="border:1px solid {{ $connResult['ok'] ? '#bbf7d0' : '#fecaca' }};background:{{ $connResult['ok'] ? '#f0fdf4' : '#fef2f2' }};border-radius:10px;padding:.6rem .8rem">
                        <p style="font-weight:700;color:{{ $connResult['ok'] ? '#16a34a' : '#dc2626' }};font-size:.85rem">
                            {{ $connResult['ok'] ? '✔ ' . __('Connection OK') : '✖ ' . __('Connection failed') }}
                        </p>
                        <p style="font-size:.78rem">{{ $connResult['label'] }}</p>
                        @if (!empty($connResult['raw']))
                            <details style="margin-top:.3rem"><summary style="cursor:pointer;font-size:.72rem;color:#1d4ed8">{{ __('view') }}</summary>
                                <pre style="max-height:200px;overflow:auto;background:#fff;border:1px solid #e5e7eb;border-radius:8px;padding:.5rem;font-size:.66rem;white-space:pre-wrap;word-break:break-all">{{ json_encode($connResult['raw'], JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES) }}</pre>
                            </details>
                        @endif
                    </div>
                @endif
            </div>

            {{-- helper --}}
            <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:1rem">
                <p class="font-bold" style="margin-bottom:.4rem">{{ __('Available queries') }}</p>
                <ul style="list-style:disc;padding-left:1.2rem;font-size:.85rem;line-height:1.7;margin:0">
                    <li><b>CPF (Receita Federal)</b> — {{ __('requires CPF + birth date') }}</li>
                    <li><b>CNH (Detran/UF)</b> — {{ __('required fields vary by state (e.g. CPF, CNH number)') }} — <a href="https://infosimples.com/consultas/" target="_blank" style="color:#1d4ed8;text-decoration:underline">{{ __('see per-state docs') }}</a></li>
                    <li><b>{{ __('Vehicle') }} (Detran/UF)</b> — {{ __('usually plate + Renavam') }}</li>
                    <li><b>OCR CNH</b> (R$ 0,10) · <b>OCR CRLV</b> (R$ 0,10) · <b>QR Code</b> (R$ 0,02) — {{ __('image analysis of the uploaded documents') }}</li>
                </ul>
                <p style="font-size:.8rem;margin-top:.5rem">{{ __('Every query is recorded with result, receipt and cost in the validation history.') }}
                    <b>{{ __('Heads-up: some error responses are also billed (e.g. 612 "not found", 702 "document not identified").') }}</b></p>
            </div>

            {{-- ===== análise automática (camada gratuita) ===== --}}
            <div style="background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;padding:1rem">
                <p class="font-bold">{{ __('Automatic analysis (free)') }}</p>
                <p style="font-size:.82rem;color:#374151;margin:.3rem 0 .6rem">
                    {{ __('As soon as the driver signs up, the platform reads the documents on its own (OCR) and checks CPF, name, expiry date, category and plate against what was declared. The human operator only steps in when the automation cannot conclude — and already receives the exact reason.') }}
                </p>
                <div class="flex flex-wrap items-end gap-5">
                    <label style="display:flex;align-items:center;gap:.4rem;font-size:.85rem">
                        <input type="checkbox" wire:model.defer="autoAnalyze" />
                        {{ __('Analyse automatically on sign-up') }}
                    </label>
                    <label style="display:flex;align-items:center;gap:.4rem;font-size:.85rem">
                        <input type="checkbox" wire:model.defer="autoApprove" />
                        {{ __('Approve without a human when nothing diverges') }}
                    </label>
                    <div>
                        <label class="text-xs text-gray-500">{{ __('Minimum name match (%)') }}</label><br />
                        <input type="number" min="0" max="100" wire:model.defer="nameThreshold" class="w-24 px-2 py-1 border rounded" />
                    </div>
                </div>
                <ul style="list-style:disc;padding-left:1.2rem;font-size:.78rem;color:#374151;line-height:1.6;margin-top:.6rem">
                    <li><b>{{ __('Rejected automatically') }}</b>: {{ __('expired licence, invalid CPF.') }}</li>
                    <li><b>{{ __('Sent to the operator') }}</b>: {{ __('unreadable photo, CPF/name that does not match the sign-up, unrecognised document, plate different from the registered one.') }}</li>
                    <li><b>{{ __('Approved') }}</b>: {{ __('everything matches (only when the option above is on).') }}</li>
                    <li>{{ __('Costs nothing: it runs on the server itself. The paid check (Infosimples) is only worth it as a final confirmation against the official database.') }}</li>
                </ul>
            </div>
            <div>
                <a href="{{ route('docval.drivers') }}" style="display:inline-block;padding:.5rem .9rem;color:#fff;border-radius:8px;background:#1a4531;font-weight:600">{{ __('Open validation management') }}</a>
            </div>

        </div>
    </x-baseview>
</div>