@use('Illuminate\Support\Number')

{{-- A formatação da chave fica só na exibição do resultado. No campo, o valor
     cru é gerenciado pelo Livewire: máscara e wire:model disputariam o mesmo
     input e o cursor saltaria a cada tecla. --}}
<div class="space-y-6"
     x-data="{ foco() { this.$nextTick(() => this.$refs.chave?.focus()) } }"
     x-init="foco()"
     @focar-chave.window="foco()">

    @php
        // No painel master os links apontam para as rotas do próprio master:
        // as do painel exigem vínculo com empresa.
        $rotaXml = $global ? 'master.notas.download' : 'painel.notas.download';
        $rotaDanfe = $global ? 'master.notas.danfe' : 'painel.notas.danfe';
        $rotaDetalhe = $global ? 'master.notas.show' : 'painel.notas.show';
    @endphp

    {{-- Campo de leitura --}}
    <div class="card card-pad">
        <div class="flex flex-wrap items-start justify-between gap-4">
            <div>
                <h2 class="text-sm font-semibold text-slate-900">Chave de acesso da NF-e</h2>
                <p class="mt-1 text-sm text-slate-500">
                    Digite os 44 dígitos ou aponte o leitor de código de barras para o DANFE.
                </p>
            </div>
            <span class="badge bg-slate-100 text-slate-600">
                <span class="tabular">{{ strlen(preg_replace('/\D/', '', $chave)) }}</span>/44
            </span>
        </div>

        @if ($global)
            <div class="mt-5 max-w-md">
                <label for="empresa" class="label">Consultar em nome de</label>
                <select id="empresa" wire:model.live="companyId" class="input">
                    <option value="">Selecione a empresa</option>
                    @foreach ($empresas as $empresa)
                        <option value="{{ $empresa->id }}" @disabled(! $empresa->cert_path)>
                            {{ $empresa->razao_social }} — {{ \App\Models\Company::formatCnpj($empresa->cnpj) }}
                            {{ $empresa->cert_path ? '' : '(sem certificado)' }}
                        </option>
                    @endforeach
                </select>
                <p class="mt-1.5 text-xs text-slate-500">
                    A consulta usa o certificado digital da empresa escolhida e consome a cota dela na SEFAZ.
                </p>
            </div>
        @endif

        <div class="mt-5">
            <label for="chave" class="sr-only">Chave de acesso</label>

            <div class="relative">
                <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4 text-slate-400">
                    <svg class="size-5" fill="none" stroke="currentColor" stroke-width="1.7" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 4.5v15m3-15v15m3-15v15m4.5-15v15m3-15v15m3-15v15"/>
                    </svg>
                </span>

                <input id="chave" type="text" inputmode="numeric" autocomplete="off" spellcheck="false"
                       maxlength="60"
                       x-ref="chave"
                       wire:model.live.debounce.200ms="chave"
                       wire:keydown.enter.prevent="consultar"
                       placeholder="35240611222333000181550010000012341000012347"
                       class="input tabular py-3.5 pl-12 text-base tracking-[0.08em] @error('chave') input-error @enderror">
            </div>

            @error('chave')
                <p class="mt-2 flex items-start gap-2 text-sm text-rose-700">
                    <svg class="mt-0.5 size-4 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/>
                    </svg>
                    {{ $message }}
                </p>
            @enderror

            <div class="mt-5 flex flex-wrap gap-3">
                <button type="button" wire:click="consultar" wire:loading.attr="disabled" class="btn-primary">
                    <svg wire:loading.remove wire:target="consultar" class="size-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"/>
                    </svg>
                    <svg wire:loading wire:target="consultar" class="size-4 animate-spin" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.373 0 0 5.373 0 12h4Z"/>
                    </svg>
                    <span wire:loading.remove wire:target="consultar">Consultar Nota</span>
                    <span wire:loading wire:target="consultar">Consultando a SEFAZ…</span>
                </button>

                <button type="button" wire:click="novaConsulta" class="btn-secondary">
                    <svg class="size-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992V4.356m-.001 0-3.181 3.183a8.25 8.25 0 0 0-13.803 3.7M4.031 9.865v4.992m0 0h4.99m-4.99 0 3.181-3.183a8.25 8.25 0 0 0 13.803-3.7"/>
                    </svg>
                    Nova Consulta
                </button>
            </div>

            <p class="mt-4 text-xs text-slate-500">
                O leitor de código de barras funciona como teclado: com o cursor no campo, a leitura
                preenche a chave e a consulta dispara sozinha ao completar os 44 dígitos.
            </p>
        </div>
    </div>

    {{-- Resultado --}}
    @if ($nota)
        <div class="card overflow-hidden">
            <div class="flex flex-wrap items-start justify-between gap-4 border-b border-slate-100 px-5 py-4 sm:px-6">
                <div>
                    <div class="flex flex-wrap items-center gap-2">
                        <h2 class="text-sm font-semibold text-slate-900">
                            NF-e {{ $nota->numero }}/{{ $nota->serie }}
                        </h2>
                        <x-situacao-badge :situacao="$nota->situacao" />
                        @if ($nota->tem_xml_completo)
                            <span class="badge bg-brand-50 text-brand-700 ring-1 ring-brand-200">XML completo</span>
                        @else
                            <span class="badge bg-amber-50 text-amber-800 ring-1 ring-amber-200">Somente resumo</span>
                        @endif
                        <span class="badge bg-slate-100 text-slate-600">
                            {{ $origem === 'sefaz' ? 'Obtida da SEFAZ agora' : 'Do acervo da empresa' }}
                        </span>
                    </div>
                    <p class="mt-1.5 text-sm text-slate-600">{{ $nota->emit_nome ?: 'Emitente não informado' }}</p>
                </div>

                {{-- Ações --}}
                <div class="flex flex-wrap gap-2">
                    @if ($nota->tem_xml_completo)
                        <a href="{{ route($rotaXml, $nota) }}" class="btn-primary btn-sm">
                            <svg class="size-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"/>
                            </svg>
                            Baixar XML
                        </a>

                        <a href="{{ route($rotaDanfe, $nota) }}" target="_blank" rel="noopener" class="btn-secondary btn-sm">
                            <svg class="size-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0 1 10.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0 .229 2.523a1.125 1.125 0 0 1-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.318 0h1.091A2.25 2.25 0 0 0 21 15.75V9.456c0-1.081-.768-2.015-1.837-2.175a48.055 48.055 0 0 0-1.913-.247M6.34 18H5.25A2.25 2.25 0 0 1 3 15.75V9.456c0-1.081.768-2.015 1.837-2.175a48.041 48.041 0 0 1 1.913-.247m10.5 0a48.536 48.536 0 0 0-10.5 0m10.5 0V3.375c0-.621-.504-1.125-1.125-1.125h-8.25c-.621 0-1.125.504-1.125 1.125v3.659"/>
                            </svg>
                            Imprimir PDF da NF-e
                        </a>
                    @endif

                    <a href="{{ route($rotaDetalhe, $nota) }}" class="btn-secondary btn-sm">Detalhes</a>
                </div>
            </div>

            @if ($aviso)
                <p class="border-b border-slate-100 bg-slate-50 px-5 py-3 text-sm text-slate-600 sm:px-6">{{ $aviso }}</p>
            @endif

            <dl class="grid gap-x-8 gap-y-5 px-5 py-5 sm:grid-cols-2 sm:px-6 lg:grid-cols-4">
                @foreach ([
                    ['Fornecedor', $nota->emit_nome ?: '—'],
                    ['CNPJ', $nota->emit_cnpj_formatado],
                    ['Emissão', $nota->data_emissao?->format('d/m/Y H:i') ?: '—'],
                    ['Valor total', Number::currency((float) $nota->valor_total, 'BRL', 'pt_BR')],
                    ['Protocolo', $nota->protocolo ?: '—'],
                    ['Autorização', $nota->data_autorizacao?->format('d/m/Y H:i') ?: '—'],
                    ['Manifestação', $nota->manifestacaoLabel()],
                    ['UF do emitente', $nota->emit_uf ?: '—'],
                ] as [$rotulo, $valor])
                    <div>
                        <dt class="text-xs font-semibold tracking-wide text-slate-500 uppercase">{{ $rotulo }}</dt>
                        <dd class="tabular mt-1 text-sm text-slate-900">{{ $valor }}</dd>
                    </div>
                @endforeach

                <div class="sm:col-span-2 lg:col-span-4">
                    <dt class="text-xs font-semibold tracking-wide text-slate-500 uppercase">Chave de acesso</dt>
                    <dd class="tabular mt-1 text-sm break-all text-slate-900">{{ $nota->chave_formatada }}</dd>
                </div>
            </dl>

            @unless ($nota->tem_xml_completo)
                <div class="border-t border-amber-200 bg-amber-50 px-5 py-4 text-sm text-amber-900 sm:px-6">
                    <p class="font-medium">XML completo indisponível</p>
                    <p class="mt-1">
                        A SEFAZ só libera o arquivo integral — e, com ele, o DANFE — depois que o destinatário
                        registra a <strong>Ciência da Operação</strong>.
                        <a href="{{ route($rotaDetalhe, $nota) }}" class="font-semibold underline">
                            Manifestar agora
                        </a>
                    </p>
                </div>
            @endunless

            @if ($nota->eventos->isNotEmpty())
                <div class="border-t border-slate-100">
                    <p class="px-5 pt-4 text-xs font-semibold tracking-wide text-slate-500 uppercase sm:px-6">Eventos</p>
                    @foreach ($nota->eventos as $evento)
                        <div class="flex items-center justify-between gap-4 px-5 py-3 sm:px-6">
                            <p class="text-sm text-slate-800">{{ $evento->descricao }}</p>
                            <p class="tabular text-xs text-slate-500">{{ $evento->data_evento?->format('d/m/Y H:i') }}</p>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>
    @elseif ($consultado && ! $errors->any())
        <div class="card card-pad text-center">
            <p class="text-sm font-medium text-slate-700">Nenhuma nota localizada para esta chave</p>
            <p class="mt-1 text-sm text-slate-500">{{ $aviso ?: 'Confira se a nota foi emitida contra o CNPJ da sua empresa.' }}</p>
        </div>
    @else
        {{-- Estado inicial --}}
        <div class="card card-pad">
            <h2 class="text-sm font-semibold text-slate-900">Como usar</h2>
            <ol class="mt-4 space-y-3 text-sm text-slate-600">
                @foreach ([
                    'Posicione o cursor no campo acima — ele já abre focado.',
                    'Dispare o leitor sobre o código de barras do DANFE, ou digite os 44 dígitos.',
                    'A consulta busca primeiro no acervo da empresa; se não achar, vai à SEFAZ.',
                    'Com o XML completo em mãos, aparecem os botões de download e de impressão do DANFE.',
                ] as $i => $passo)
                    <li class="flex gap-3">
                        <span class="tabular flex size-6 shrink-0 items-center justify-center rounded-full bg-brand-50 text-xs font-semibold text-brand-700">
                            {{ $i + 1 }}
                        </span>
                        {{ $passo }}
                    </li>
                @endforeach
            </ol>

            <p class="mt-5 rounded-lg bg-slate-50 px-4 py-3 text-xs text-slate-500">
                A consulta por chave usa o mesmo serviço do monitor e consome a cota de requisições
                da SEFAZ. Consultas repetidas do mesmo CNPJ podem gerar bloqueio temporário.
            </p>
        </div>
    @endif
</div>