@php
    $numero = fn ($v): string => number_format((int) $v, 0, ',', '.');
    $mes = fn (string $m): string => substr($m, 5, 2).'/'.substr($m, 0, 4);
    $tipos = ['financeiro' => 'Lançamentos', 'veiculos' => 'Veículos', 'estoque' => 'Estoque'];
    $botaoPrincipal = 'inline-flex h-[2.125rem] items-center gap-2 rounded-md bg-marca-700 px-4 text-sm font-medium text-white shadow-xs transition-colors hover:bg-marca-800 disabled:opacity-60';
@endphp

<x-pagina grupo="Cadastros" titulo="Importar arquivos"
          descricao="Lançamentos financeiros e veículos vendidos (.csv) e o estoque atual (.xls da Lista Gerencial de Estoque com Margem), exatamente como saem da Revenda Mais. São dois passos: conferir mostra o que entraria, sem gravar; importar grava.">

    <x-quadro titulo="Enviar arquivo" nota="O tipo e o layout são reconhecidos pelo conteúdo.">
        <form wire:submit="conferir" class="flex flex-wrap items-end gap-4 px-5 py-5">
            {{-- O seletor nativo fala inglês ("Choose File") e ignora o desenho do
                 sistema: o campo real fica escondido e o rótulo vira o botão. --}}
            <div class="min-w-72 flex-1" x-data="{ nome: '' }">
                <span class="block text-sm font-medium text-tinta">Arquivo .csv ou .xls</span>
                <div @class([
                    'mt-1 flex items-center gap-3 rounded-md border bg-superficie p-1 pr-3 shadow-xs',
                    'border-rose-300' => $errors->has('arquivo'),
                    'border-fio' => ! $errors->has('arquivo'),
                ])>
                    <input wire:model="arquivo" id="arquivo" type="file" accept=".csv,text/csv,.xls,.xml" class="sr-only"
                           x-on:change="nome = $event.target.files[0]?.name ?? ''">
                    <label for="arquivo" class="cursor-pointer rounded-md bg-chao px-3 py-1.5 text-sm font-medium text-marca-700 transition-colors hover:bg-marca-50">
                        Escolher arquivo
                    </label>
                    <span class="min-w-0 flex-1 truncate text-sm" :class="nome ? 'text-tinta' : 'text-suave'"
                          x-text="nome || 'Nenhum arquivo escolhido'">Nenhum arquivo escolhido</span>
                    <span wire:loading wire:target="arquivo" class="shrink-0 text-xs text-suave">enviando…</span>
                </div>
            </div>

            <button type="submit" wire:loading.attr="disabled" wire:target="conferir,arquivo" class="{{ $botaoPrincipal }}">
                <span wire:loading.remove wire:target="conferir">Conferir</span>
                <span wire:loading wire:target="conferir" class="inline-flex items-center gap-2">
                    <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"/>
                        <path class="opacity-90" d="M22 12a10 10 0 0 0-10-10" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
                    </svg>
                    Conferindo…
                </span>
            </button>
        </form>

        @error('arquivo')
            <p class="mx-5 mb-5 rounded-md border border-rose-200 bg-rose-50 px-4 py-2.5 text-sm text-rose-700">{{ $message }}</p>
        @enderror

        {{-- O que acontece com cada linha, no rodapé do próprio passo. --}}
        <dl class="flex flex-wrap gap-x-8 gap-y-2 border-t border-fio bg-chao/40 px-5 py-3 text-xs text-suave">
            @foreach ([
                ['Nova', 'entra; linhas iguais no mesmo arquivo entram todas', 'bg-emerald-500'],
                ['Já importada', 'outro arquivo já trouxe a mesma linha', 'bg-slate-400'],
                ['Recusada', 'data inválida, loja desconhecida, coluna faltando: vai para a quarentena', 'bg-rose-500'],
            ] as [$rotulo, $explicacao, $cor])
                <div class="flex items-baseline gap-2">
                    <span class="{{ $cor }} relative top-px size-2 shrink-0 rounded-full" aria-hidden="true"></span>
                    <dt class="font-semibold text-tinta">{{ $rotulo }}</dt>
                    <dd>{{ $explicacao }}</dd>
                </div>
            @endforeach
        </dl>
    </x-quadro>

    @if ($conferencia)
        <x-quadro :titulo="$conferencia['arquivo']" :nota="$conferencia['descricao']" class="mt-6">
            <div class="px-5 py-5">
                <p class="inline-flex items-center gap-1.5 rounded-sm bg-amber-50 px-2.5 py-0.5 text-xs font-semibold text-amber-800 ring-1 ring-amber-200">
                    Conferido, nada gravado ainda
                </p>

                <dl class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-4">
                    @foreach ([
                        ['Linhas lidas', $conferencia['lidas'], 'text-tinta'],
                        ['Novas', $conferencia['importadas'], 'text-emerald-700'],
                        ['Já importadas', $conferencia['repetidas'], 'text-suave'],
                        ['Recusadas', $conferencia['total_recusadas'], $conferencia['total_recusadas'] > 0 ? 'text-rose-700' : 'text-suave'],
                    ] as [$rotulo, $valor, $cor])
                        <div class="rounded-lg border border-fio bg-chao/50 px-4 py-3">
                            <dt class="text-[0.7rem] font-semibold uppercase tracking-[0.08em] text-suave">{{ $rotulo }}</dt>
                            <dd class="mt-1 font-display text-2xl font-semibold tabular-nums {{ $cor }}">{{ $numero($valor) }}</dd>
                        </div>
                    @endforeach
                </dl>

                @if (count($conferencia['meses']) > 1)
                    <p class="mt-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-2.5 text-sm text-amber-900">
                        O arquivo tem linhas de {{ count($conferencia['meses']) }} meses:
                        @foreach ($conferencia['meses'] as $m => $linhas)
                            {{ $mes((string) $m) }} ({{ $numero($linhas) }}){{ $loop->last ? '.' : ',' }}
                        @endforeach
                        Confira se é o arquivo certo.
                    </p>
                @elseif ($conferencia['tipo'] === 'estoque')
                    {{-- O estoque não é de um mês: é a fotografia de um momento. --}}
                    <p class="mt-4 text-sm text-suave">Fotografia do estoque: <span class="font-medium text-tinta">{{ $conferencia['arquivo'] }}</span>. Ela passa a ser a mais recente se for mais nova que a que já está no painel.</p>
                @elseif (count($conferencia['meses']) === 1)
                    <p class="mt-4 text-sm text-suave">Mês: <span class="font-medium text-tinta">{{ $mes((string) array_key_first($conferencia['meses'])) }}</span></p>
                @endif

                @if ($conferencia['total_parecidas'] > 0)
                    <div class="mt-4 rounded-md border border-amber-200 bg-amber-50 px-4 py-2.5 text-sm text-amber-900">
                        <p>
                            {{ $numero($conferencia['total_parecidas']) }} linhas novas se parecem com lançamentos de outro
                            arquivo: mesmo favorecido, datas e valor, com descrição diferente. Elas entram — confira se não
                            são o mesmo título editado no sistema de gestão.
                        </p>
                        <p class="mt-1 text-xs tabular-nums">
                            Linhas {{ implode(', ', $conferencia['parecidas']) }}{{ $conferencia['total_parecidas'] > count($conferencia['parecidas']) ? '…' : '' }}
                        </p>
                    </div>
                @endif

                @if ($conferencia['total_recusadas'] > 0)
                    <div class="mt-4 overflow-hidden rounded-md border border-rose-200">
                        <h3 class="border-b border-rose-200 bg-rose-50 px-4 py-2 text-sm font-semibold text-rose-800">
                            Recusadas, que irão para a quarentena
                        </h3>
                        <ul class="max-h-64 divide-y divide-fio overflow-y-auto text-sm">
                            @foreach ($conferencia['recusadas'] as $recusada)
                                <li class="flex gap-2 px-4 py-1.5">
                                    <span class="w-16 shrink-0 tabular-nums text-suave">linha {{ $recusada['linha'] }}</span>
                                    <span class="text-tinta">{{ $recusada['motivo'] }}</span>
                                </li>
                            @endforeach
                        </ul>
                        @if ($conferencia['total_recusadas'] > count($conferencia['recusadas']))
                            <p class="border-t border-fio px-4 py-1.5 text-xs text-suave">
                                e mais {{ $numero($conferencia['total_recusadas'] - count($conferencia['recusadas'])) }}
                            </p>
                        @endif
                    </div>
                @endif
            </div>

            <div class="flex flex-wrap items-center justify-end gap-2 border-t border-fio bg-chao/40 px-5 py-3">
                <button type="button" wire:click="cancelar" class="rounded-md px-4 py-2 text-sm font-medium text-suave transition-colors hover:bg-chao hover:text-tinta">
                    Cancelar
                </button>
                @if ($conferencia['importadas'] > 0)
                    <button type="button" wire:click="importar" wire:loading.attr="disabled" wire:target="importar" class="{{ $botaoPrincipal }}">
                        <span wire:loading.remove wire:target="importar">Importar {{ $numero($conferencia['importadas']) }} novas</span>
                        <span wire:loading wire:target="importar" class="inline-flex items-center gap-2">
                            <svg class="size-4 animate-spin" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="3"/>
                                <path class="opacity-90" d="M22 12a10 10 0 0 0-10-10" stroke="currentColor" stroke-width="3" stroke-linecap="round"/>
                            </svg>
                            Importando…
                        </span>
                    </button>
                @else
                    <p class="text-sm text-suave">Nenhuma linha nova: não há o que importar.</p>
                @endif
            </div>
        </x-quadro>
    @elseif ($concluida)
        <div @class([
            'mt-6 rounded-lg border px-5 py-4 text-sm',
            'border-emerald-200 bg-emerald-50 text-emerald-900' => $concluida['gravada'] && $concluida['total_recusadas'] === 0,
            'border-amber-200 bg-amber-50 text-amber-900' => $concluida['gravada'] && $concluida['total_recusadas'] > 0,
            'border-fio bg-superficie text-tinta' => ! $concluida['gravada'],
        ])>
            @if ($concluida['gravada'])
                <h2 class="font-display font-semibold">Importado: {{ $concluida['arquivo'] }}</h2>
                <p class="mt-1 tabular-nums">
                    {{ $numero($concluida['importadas']) }} novas,
                    {{ $numero($concluida['repetidas']) }} já importadas,
                    {{ $numero($concluida['total_recusadas']) }} recusadas.
                </p>
                @if ($concluida['total_recusadas'] > 0)
                    <p class="mt-1">As recusadas estão na quarentena. Reveja antes de usar os números do mês.</p>
                @endif
            @else
                <h2 class="font-display font-semibold">Nada foi gravado: {{ $concluida['arquivo'] }}</h2>
                <p class="mt-1">Nenhuma linha nova passou.</p>
            @endif
        </div>
    @endif

    <x-quadro titulo="Últimas importações" nota="as 30 mais recentes; a carga do legado não entra aqui" class="mt-6">
        <table class="min-w-full text-sm">
            <thead class="border-b border-fio bg-chao/70 text-[0.7rem] uppercase tracking-[0.06em] text-suave">
                <tr>
                    <th scope="col" class="px-4 py-2.5 text-left font-semibold">Quando</th>
                    <th scope="col" class="min-w-56 px-3 py-2.5 text-left font-semibold">Arquivo</th>
                    <th scope="col" class="px-3 py-2.5 text-left font-semibold">Tipo</th>
                    <th scope="col" class="px-3 py-2.5 text-center font-semibold">Mês</th>
                    <th scope="col" class="px-3 py-2.5 text-center font-semibold">Novas</th>
                    <th scope="col" class="px-3 py-2.5 text-center font-semibold">Já importadas</th>
                    <th scope="col" class="px-3 py-2.5 text-center font-semibold">Recusadas</th>
                    <th scope="col" class="px-3 py-2.5 text-left font-semibold">Por</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-fio">
                @forelse ($historico as $importacao)
                    <tr wire:key="importacao-{{ $importacao->id }}" class="hover:bg-chao/50">
                        <td class="px-4 py-2.5 tabular-nums whitespace-nowrap">{{ date('d/m/Y H:i', (int) strtotime((string) $importacao->created_at)) }}</td>
                        <td class="max-w-72 truncate px-3 py-2.5 text-tinta" title="{{ $importacao->arquivo }}">{{ $importacao->arquivo }}</td>
                        <td class="px-3 py-2.5">
                            <span class="rounded-sm bg-marca-50 px-2 py-0.5 text-[0.65rem] font-semibold uppercase tracking-[0.05em] text-marca-700 ring-1 ring-marca-100">
                                {{ $tipos[$importacao->tipo] ?? $importacao->tipo }}
                            </span>
                        </td>
                        <td class="px-3 py-2.5 text-center tabular-nums">{{ $importacao->competencia ? $mes(substr((string) $importacao->competencia, 0, 7)) : '—' }}</td>
                        <td class="px-3 py-2.5 text-center font-semibold tabular-nums text-tinta">{{ $numero($importacao->linhas_importadas) }}</td>
                        <td class="px-3 py-2.5 text-center tabular-nums text-suave">{{ $numero($importacao->linhas_repetidas) }}</td>
                        <td class="px-3 py-2.5 text-center tabular-nums">
                            @if ($importacao->linhas_recusadas > 0)
                                <span class="rounded-sm bg-amber-50 px-2 py-0.5 text-xs font-semibold text-amber-800 ring-1 ring-amber-200">{{ $numero($importacao->linhas_recusadas) }}</span>
                            @else
                                <span class="text-suave">0</span>
                            @endif
                        </td>
                        <td class="px-3 py-2.5 whitespace-nowrap text-suave">{{ $importacao->usuario ?? 'linha de comando' }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="px-4 py-8 text-center text-suave">Nenhum arquivo importado pelo sistema novo ainda.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </x-quadro>
</x-pagina>