@extends('layouts.app')
@section('title', 'Histórico de OS & Importação')
@section('page_title', 'Histórico de OS')

@section('content')
@php
    $auditLabels = [
        'sem_os' => 'OS não informada',
        'sem_cliente' => 'Cliente não informado',
        'cliente_nao_vinculado' => 'Cliente sem vínculo cadastral',
        'sem_origem' => 'Origem não informada',
        'origem_nao_vinculada' => 'Origem sem vínculo cadastral',
        'sem_destino' => 'Destino não informado',
        'destino_nao_vinculado' => 'Destino sem vínculo cadastral',
        'sem_motorista' => 'Motorista não informado',
        'motorista_nao_vinculado' => 'Motorista sem vínculo cadastral',
        'sem_cavalo' => 'Cavalo não informado',
        'cavalo_nao_vinculado' => 'Cavalo sem vínculo cadastral',
        'sem_carreta' => 'Carreta não informada',
        'carreta_nao_vinculada' => 'Carreta sem vínculo cadastral',
    ];
    $activeAudit = request('auditoria');
    $hasFilters = collect(request()->except(['page', 'sort', 'direction', 'per_page']))
        ->filter(fn($v) => $v !== null && $v !== '')
        ->isNotEmpty();
    $sortUrl = function (string $column) use ($sort, $dir) {
        $newDir = $sort === $column && $dir === 'asc' ? 'desc' : 'asc';
        return route('admin.historico.index', array_merge(request()->except('page'), [
            'sort' => $column,
            'direction' => $newDir,
        ]));
    };
    $sortMark = fn(string $column) => $sort === $column ? ($dir === 'asc' ? '↑' : '↓') : '';
@endphp

<div class="py-6 max-w-full space-y-6" x-data="importacaoManager()" x-init="init()">

    {{-- Progresso da importação --}}
    <div id="progress-panel" class="bg-white rounded-xl border-2 border-orange-300 shadow-sm overflow-hidden" x-show="showProgress">
        <div class="px-6 py-4 border-b border-orange-100 flex items-center gap-3" style="background:rgba(242,101,34,0.06);">
            <div class="w-1 h-5 rounded-full" style="background:#F26522;"></div>
            <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide" x-text="error ? 'Importação interrompida' : (done ? 'Importação concluída' : 'Importação em andamento')"></h3>
            <span class="ml-auto text-xs text-gray-500" x-text="elapsed + 's decorridos'"></span>
        </div>
        <div class="p-6 space-y-4">
            <div class="flex items-center gap-3">
                <svg class="w-5 h-5 animate-spin shrink-0" style="color:#F26522" fill="none" viewBox="0 0 24 24" x-show="!done && !error">
                    <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 018-8v4a4 4 0 00-4 4H4z"/>
                </svg>
                <svg class="w-5 h-5 shrink-0 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" x-show="done && !error" x-cloak><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
                <svg class="w-5 h-5 shrink-0 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" x-show="error" x-cloak><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                <span class="text-sm font-medium text-gray-800" x-text="fase"></span>
            </div>
            <div>
                <div class="flex justify-between text-xs text-gray-500 mb-1">
                    <span x-text="'Etapa ' + atual + ' de ' + total" x-show="total > 0"></span>
                    <span x-show="total == 0" class="text-gray-400">Preparando...</span>
                    <span x-text="pct + '%'" x-show="total > 0"></span>
                </div>
                <div class="w-full bg-gray-100 rounded-full h-3 overflow-hidden"><div class="h-3 rounded-full transition-all duration-300" :style="'width:' + pct + '%; background: ' + (error ? '#ef4444' : (done ? '#10b981' : '#F26522'))"></div></div>
            </div>
            <div class="flex gap-6 text-sm" x-show="atual > 0">
                <div><span class="text-gray-500 text-xs">Inseridos</span><p class="font-bold text-gray-900" x-text="inseridos.toLocaleString('pt-BR')"></p></div>
                <div x-show="done && !error"><span class="text-gray-500 text-xs">Sheets puladas</span><p class="font-bold text-gray-900" x-text="pulados"></p></div>
            </div>
            <div x-show="done && !error" x-cloak class="p-3 rounded-lg bg-green-50 border border-green-200 text-sm text-green-700">✓ Importação concluída com sucesso! <a href="{{ route('admin.historico.index') }}" class="ml-2 underline font-medium">Recarregar página</a></div>
            <div x-show="error" x-cloak class="p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700">✗ <span x-text="mensagem || 'Ocorreu um erro durante a importação.'"></span><br><span class="text-xs">Consulte também <code>storage/logs/laravel.log</code>.</span></div>
        </div>
    </div>

    @if(session('success'))
        <div class="p-3 rounded-lg bg-green-50 border border-green-200 text-sm text-green-700">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="p-3 rounded-lg bg-red-50 border border-red-200 text-sm text-red-700">{{ session('error') }}</div>
    @endif

    {{-- Totais globais --}}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5 flex items-center gap-4">
            <div class="w-10 h-10 rounded-lg flex items-center justify-center text-white text-xl font-bold shrink-0" style="background:#0A1E3D;">Σ</div>
            <div><p class="text-xs text-gray-500 uppercase tracking-wide">Total no histórico</p><p class="text-2xl font-bold text-gray-900">{{ number_format($total, 0, ',', '.') }}</p></div>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5 flex items-center gap-4">
            <div class="w-10 h-10 rounded-lg flex items-center justify-center text-white text-xl font-bold shrink-0" style="background:#F26522;">↓</div>
            <div><p class="text-xs text-gray-500 uppercase tracking-wide">Importados (XLSX)</p><p class="text-2xl font-bold text-gray-900">{{ number_format($importados, 0, ',', '.') }}</p></div>
        </div>
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-5 flex items-center gap-4">
            <div class="w-10 h-10 rounded-lg flex items-center justify-center text-white text-xl font-bold bg-teal-600 shrink-0">S</div>
            <div><p class="text-xs text-gray-500 uppercase tracking-wide">Gerados pelo sistema</p><p class="text-2xl font-bold text-gray-900">{{ number_format($sistema, 0, ',', '.') }}</p></div>
        </div>
    </div>

    {{-- Qualidade dos dados --}}
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex flex-wrap items-center gap-3">
            <div class="w-1 h-5 rounded-full" style="background:#F26522;"></div>
            <div>
                <h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide">Qualidade dos dados</h3>
                <p class="text-xs text-gray-500 mt-0.5">Indicadores calculados sobre os registros atualmente filtrados.</p>
            </div>
            <div class="ml-auto text-right"><p class="text-xs text-gray-500">Registros analisados</p><p class="text-xl font-bold text-gray-900">{{ number_format($qualidade['total'], 0, ',', '.') }}</p></div>
        </div>
        <div class="p-5 grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4">
            @php
                $qualityCards = [
                    ['label' => 'Número da OS', 'data' => $qualidade['os'], 'type' => 'field'],
                    ['label' => 'Cliente', 'data' => $qualidade['cliente'], 'type' => 'link'],
                    ['label' => 'Motorista', 'data' => $qualidade['motorista'], 'type' => 'link'],
                    ['label' => 'Origem', 'data' => $qualidade['origem'], 'type' => 'link'],
                    ['label' => 'Destino', 'data' => $qualidade['destino'], 'type' => 'link'],
                    ['label' => 'Cavalo', 'data' => $qualidade['cavalo'], 'type' => 'link'],
                    ['label' => 'Carreta', 'data' => $qualidade['carreta'], 'type' => 'link'],
                ];
            @endphp
            @foreach($qualityCards as $card)
                <div class="rounded-lg border border-gray-200 p-4">
                    <div class="flex justify-between gap-3"><p class="text-xs font-semibold text-gray-600 uppercase tracking-wide">{{ $card['label'] }}</p><span class="text-xs font-bold text-gray-800">{{ $card['data']['percentual_preenchimento'] ?? $card['data']['percentual'] }}%</span></div>
                    <div class="mt-2 h-2 bg-gray-100 rounded-full overflow-hidden"><div class="h-full rounded-full" style="background:#0A1E3D; width:{{ $card['data']['percentual_preenchimento'] ?? $card['data']['percentual'] }}%"></div></div>
                    <p class="mt-2 text-xs text-gray-500"><strong class="text-gray-800">{{ number_format($card['data']['informados'], 0, ',', '.') }}</strong> preenchidos de {{ number_format($qualidade['total'], 0, ',', '.') }}</p>
                    @if($card['type'] === 'link')
                        <p class="mt-1 text-xs text-gray-500"><strong class="text-green-700">{{ number_format($card['data']['vinculados'], 0, ',', '.') }}</strong> vinculados ao cadastro · {{ $card['data']['percentual_vinculo'] }}%</p>
                    @else
                        <p class="mt-1 text-xs text-gray-500"><strong class="text-red-600">{{ number_format($card['data']['sem_info'], 0, ',', '.') }}</strong> sem informação</p>
                    @endif
                </div>
            @endforeach
            @php
                $rotaInformadaPct = $qualidade['total'] > 0 ? round(($qualidade['rota']['informados'] / $qualidade['total']) * 100, 1) : 0;
                $rotaVinculoPct = $qualidade['rota']['informados'] > 0 ? round(($qualidade['rota']['vinculados'] / $qualidade['rota']['informados']) * 100, 1) : 0;
            @endphp
            <div class="rounded-lg border border-gray-200 p-4">
                <div class="flex justify-between gap-3"><p class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Rota completa</p><span class="text-xs font-bold text-gray-800">{{ $rotaInformadaPct }}%</span></div>
                <div class="mt-2 h-2 bg-gray-100 rounded-full overflow-hidden"><div class="h-full rounded-full" style="background:#0A1E3D; width:{{ $rotaInformadaPct }}%"></div></div>
                <p class="mt-2 text-xs text-gray-500"><strong class="text-gray-800">{{ number_format($qualidade['rota']['informados'], 0, ',', '.') }}</strong> com origem + destino</p>
                <p class="mt-1 text-xs text-gray-500"><strong class="text-green-700">{{ number_format($qualidade['rota']['vinculados'], 0, ',', '.') }}</strong> rotas totalmente vinculadas · {{ $rotaVinculoPct }}%</p>
            </div>
        </div>
        <div class="px-5 pb-5 text-xs text-gray-500">“Preenchido” significa que o XLSX trouxe texto para o campo. “Vinculado” significa que esse texto também encontrou correspondência no respectivo cadastro do Sistema MD.</div>
    </div>

    {{-- Filtros --}}
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex flex-wrap items-center gap-3">
            <div class="w-1 h-5 rounded-full" style="background:#F26522;"></div>
            <div><h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide">Filtros e auditoria</h3><p class="text-xs text-gray-500 mt-0.5">Use os filtros para conferir grupos específicos de registros importados.</p></div>
            @if($periodo?->inicio && $periodo?->fim)<span class="ml-auto text-xs text-gray-500">Período disponível: {{ \Carbon\Carbon::parse($periodo->inicio)->format('d/m/Y') }} a {{ \Carbon\Carbon::parse($periodo->fim)->format('d/m/Y') }}</span>@endif
        </div>
        <form method="GET" action="{{ route('admin.historico.index') }}" class="p-5 space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
                <div class="xl:col-span-2"><label class="block text-xs font-semibold text-gray-600 mb-1">Busca geral</label><input type="text" name="q" value="{{ request('q') }}" placeholder="OS, cliente, rota, motorista, placa..." class="w-full rounded-lg border-gray-300 text-sm focus:border-orange-400 focus:ring-orange-400"></div>
                <div><label class="block text-xs font-semibold text-gray-600 mb-1">Data de</label><input type="date" name="data_de" value="{{ request('data_de') }}" class="w-full rounded-lg border-gray-300 text-sm focus:border-orange-400 focus:ring-orange-400"></div>
                <div><label class="block text-xs font-semibold text-gray-600 mb-1">Data até</label><input type="date" name="data_ate" value="{{ request('data_ate') }}" class="w-full rounded-lg border-gray-300 text-sm focus:border-orange-400 focus:ring-orange-400"></div>
                <div><label class="block text-xs font-semibold text-gray-600 mb-1">Número OS</label><input type="text" name="numero_os" value="{{ request('numero_os') }}" class="w-full rounded-lg border-gray-300 text-sm"></div>
                <div><label class="block text-xs font-semibold text-gray-600 mb-1">Cliente</label><input type="text" name="cliente" value="{{ request('cliente') }}" class="w-full rounded-lg border-gray-300 text-sm"></div>
                <div><label class="block text-xs font-semibold text-gray-600 mb-1">Origem</label><input type="text" name="origem" value="{{ request('origem') }}" class="w-full rounded-lg border-gray-300 text-sm"></div>
                <div><label class="block text-xs font-semibold text-gray-600 mb-1">Destino</label><input type="text" name="destino" value="{{ request('destino') }}" class="w-full rounded-lg border-gray-300 text-sm"></div>
                <div><label class="block text-xs font-semibold text-gray-600 mb-1">Motorista</label><input type="text" name="motorista" value="{{ request('motorista') }}" class="w-full rounded-lg border-gray-300 text-sm"></div>
                <div><label class="block text-xs font-semibold text-gray-600 mb-1">Cavalo</label><input type="text" name="cavalo" value="{{ request('cavalo') }}" class="w-full rounded-lg border-gray-300 text-sm"></div>
                <div><label class="block text-xs font-semibold text-gray-600 mb-1">Carreta</label><input type="text" name="carreta" value="{{ request('carreta') }}" class="w-full rounded-lg border-gray-300 text-sm"></div>
                <div><label class="block text-xs font-semibold text-gray-600 mb-1">Tipo de veículo</label><input type="text" name="tipo_veiculo" value="{{ request('tipo_veiculo') }}" class="w-full rounded-lg border-gray-300 text-sm"></div>
                <div><label class="block text-xs font-semibold text-gray-600 mb-1">Status</label><select name="status" class="w-full rounded-lg border-gray-300 text-sm"><option value="">Todos</option>@foreach($statusList as $st)<option value="{{ $st }}" @selected(request('status') === $st)>{{ $st }}</option>@endforeach</select></div>
                <div><label class="block text-xs font-semibold text-gray-600 mb-1">Fonte</label><select name="fonte" class="w-full rounded-lg border-gray-300 text-sm"><option value="">Todas</option><option value="importacao" @selected(request('fonte') === 'importacao')>Importação XLSX</option><option value="sistema" @selected(request('fonte') === 'sistema')>Sistema</option></select></div>
                <div><label class="block text-xs font-semibold text-gray-600 mb-1">Registros por página</label><select name="per_page" class="w-full rounded-lg border-gray-300 text-sm">@foreach([25,50,100] as $n)<option value="{{ $n }}" @selected($perPage === $n)>{{ $n }}</option>@endforeach</select></div>
            </div>
            @if($activeAudit)<input type="hidden" name="auditoria" value="{{ $activeAudit }}">@endif
            <input type="hidden" name="sort" value="{{ $sort }}"><input type="hidden" name="direction" value="{{ $dir }}">
            <div class="flex flex-wrap gap-2">
                <button type="submit" class="px-4 py-2 rounded-lg text-white text-sm font-medium" style="background:#F26522;">Aplicar filtros</button>
                @if($hasFilters)<a href="{{ route('admin.historico.index') }}" class="px-4 py-2 rounded-lg border border-gray-300 text-sm text-gray-700 hover:bg-gray-50">Limpar filtros</a>@endif
                <a href="{{ route('admin.historico.exportar', request()->query()) }}" class="px-4 py-2 rounded-lg border border-green-600 text-green-700 text-sm font-medium hover:bg-green-50">Exportar XLSX filtrado</a>
            </div>
        </form>

        <div class="border-t border-gray-100 px-5 py-4">
            <div class="flex flex-wrap items-center gap-2">
                <span class="text-xs font-semibold text-gray-600 uppercase tracking-wide mr-1">Auditoria rápida:</span>
                @foreach($auditLabels as $key => $label)
                    @php $active = $activeAudit === $key; @endphp
                    <a href="{{ route('admin.historico.index', array_merge(request()->except(['page','auditoria']), ['auditoria' => $key])) }}"
                       class="inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-full border text-xs {{ $active ? 'border-orange-400 bg-orange-50 text-orange-800 font-semibold' : 'border-gray-200 text-gray-600 hover:bg-gray-50' }}">
                        {{ $label }} <span class="font-bold">{{ number_format($auditoriaContagens[$key] ?? 0, 0, ',', '.') }}</span>
                    </a>
                @endforeach
                @if($activeAudit)<a href="{{ route('admin.historico.index', request()->except(['page','auditoria'])) }}" class="text-xs text-red-600 underline ml-1">remover auditoria</a>@endif
            </div>
        </div>
    </div>

    {{-- Grade do histórico --}}
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex flex-wrap gap-3 items-center">
            <div><h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide">Registros do histórico</h3><p class="text-xs text-gray-500 mt-0.5">Exibindo {{ number_format($registros->firstItem() ?? 0, 0, ',', '.') }}–{{ number_format($registros->lastItem() ?? 0, 0, ',', '.') }} de {{ number_format($registros->total(), 0, ',', '.') }} registros encontrados.</p></div>
            @if($activeAudit)<span class="ml-auto px-3 py-1 rounded-full bg-orange-50 border border-orange-200 text-xs text-orange-800">Auditoria: {{ $auditLabels[$activeAudit] ?? $activeAudit }}</span>@endif
        </div>
        <div class="overflow-x-auto">
            <table class="min-w-[1500px] w-full divide-y divide-gray-200 text-xs">
                <thead class="bg-gray-50">
                    <tr>
                        @foreach([
                            'data_servico'=>'Data','hora_coleta'=>'Hora','numero_os'=>'OS','cliente_nome'=>'Cliente',
                            'origem_texto'=>'Origem','destino_texto'=>'Destino','tipo_veiculo_solicitado'=>'Tipo veículo',
                            'cavalo_placa'=>'Cavalo','carreta_placa'=>'Carreta','motorista_nome'=>'Motorista','status'=>'Status','fonte'=>'Fonte'
                        ] as $col => $label)
                            <th class="px-3 py-3 text-left font-semibold text-gray-500 uppercase whitespace-nowrap"><a href="{{ $sortUrl($col) }}" class="hover:text-gray-900">{{ $label }} {{ $sortMark($col) }}</a></th>
                        @endforeach
                        <th class="px-3 py-3 text-right font-semibold text-gray-500 uppercase">Detalhe</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($registros as $h)
                        <tr class="hover:bg-gray-50 align-top">
                            <td class="px-3 py-3 whitespace-nowrap font-medium text-gray-800">{{ $h->data_servico?->format('d/m/Y') ?? '—' }}</td>
                            <td class="px-3 py-3 whitespace-nowrap text-gray-600">{{ $h->hora_coleta ?: '—' }}</td>
                            <td class="px-3 py-3 whitespace-nowrap font-mono text-gray-700">{{ $h->numero_os ?: '—' }}</td>
                            <td class="px-3 py-3 max-w-[190px]"><div class="text-gray-800 break-words">{{ $h->cliente_nome ?: '—' }}</div>@if($h->cliente_nome)<span class="mt-1 inline-block text-[10px] {{ $h->cliente_id ? 'text-green-700' : 'text-amber-700' }}">{{ $h->cliente_id ? '✓ vinculado' : '• sem vínculo' }}</span>@endif</td>
                            <td class="px-3 py-3 max-w-[220px]"><div class="text-gray-700 break-words">{{ $h->origem_texto ?: '—' }}</div>@if($h->origem_texto)<span class="mt-1 inline-block text-[10px] {{ $h->origem_id ? 'text-green-700' : 'text-amber-700' }}">{{ $h->origem_id ? '✓ vinculada' : '• sem vínculo' }}</span>@endif</td>
                            <td class="px-3 py-3 max-w-[220px]"><div class="text-gray-700 break-words">{{ $h->destino_texto ?: '—' }}</div>@if($h->destino_texto)<span class="mt-1 inline-block text-[10px] {{ $h->destino_id ? 'text-green-700' : 'text-amber-700' }}">{{ $h->destino_id ? '✓ vinculado' : '• sem vínculo' }}</span>@endif</td>
                            <td class="px-3 py-3 max-w-[160px] text-gray-600 break-words">{{ $h->tipo_veiculo_solicitado ?: '—' }}</td>
                            <td class="px-3 py-3 max-w-[140px]"><div class="font-mono text-gray-700 break-words">{{ $h->cavalo_placa ?: '—' }}</div>@if($h->cavalo_placa)<span class="text-[10px] {{ $h->veiculo_id ? 'text-green-700' : 'text-amber-700' }}">{{ $h->veiculo_id ? '✓ vinculado' : '• sem vínculo' }}</span>@endif</td>
                            <td class="px-3 py-3 max-w-[140px]"><div class="font-mono text-gray-700 break-words">{{ $h->carreta_placa ?: '—' }}</div>@if($h->carreta_placa)<span class="text-[10px] {{ $h->carreta_id ? 'text-green-700' : 'text-amber-700' }}">{{ $h->carreta_id ? '✓ vinculada' : '• sem vínculo' }}</span>@endif</td>
                            <td class="px-3 py-3 max-w-[180px]"><div class="font-medium text-gray-800 break-words">{{ $h->motorista_nome ?: '—' }}</div>@if($h->motorista_nome)<span class="text-[10px] {{ $h->motorista_id ? 'text-green-700' : 'text-amber-700' }}">{{ $h->motorista_id ? '✓ vinculado' : '• sem vínculo' }}</span>@endif</td>
                            <td class="px-3 py-3 whitespace-nowrap text-gray-700">{{ $h->status ?: '—' }}</td>
                            <td class="px-3 py-3 whitespace-nowrap"><span class="px-2 py-1 rounded-full text-[10px] font-semibold {{ $h->fonte === 'importacao' ? 'bg-orange-50 text-orange-700' : 'bg-teal-50 text-teal-700' }}">{{ $h->fonte === 'importacao' ? 'XLSX' : 'Sistema' }}</span></td>
                            <td class="px-3 py-3 text-right">
                                @php
                                    $temPendenciaVinculo =
                                        ($h->cliente_nome && !$h->cliente_id) ||
                                        ($h->origem_texto && !$h->origem_id) ||
                                        ($h->destino_texto && !$h->destino_id) ||
                                        ($h->motorista_nome && !$h->motorista_id) ||
                                        ($h->cavalo_placa && !$h->veiculo_id) ||
                                        ($h->carreta_placa && !$h->carreta_id);
                                @endphp
                                <a href="{{ route('admin.historico.show', $h) }}" class="inline-flex items-center px-3 py-1.5 rounded-lg border whitespace-nowrap {{ $temPendenciaVinculo ? 'border-orange-300 text-orange-700 bg-orange-50 hover:bg-orange-100' : 'border-gray-300 text-gray-700 hover:bg-gray-50' }}">{{ $temPendenciaVinculo ? 'Vincular' : 'Ver' }}</a>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="13" class="px-6 py-12 text-center text-gray-500">Nenhum registro encontrado com os filtros selecionados.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if($registros->hasPages())<div class="px-5 py-4 border-t border-gray-100">{{ $registros->links() }}</div>@endif
    </div>

    {{-- Importação, recolhida por padrão para priorizar a auditoria --}}
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
        <button type="button" @click="showImport = !showImport" class="w-full px-6 py-4 flex items-center gap-3 text-left hover:bg-gray-50">
            <div class="w-1 h-5 rounded-full" style="background:#F26522;"></div>
            <div><h3 class="text-sm font-bold text-gray-800 uppercase tracking-wide">Importar / Reimportar histórico</h3><p class="text-xs text-gray-500 mt-0.5">A rotina de importação V4 permanece disponível e inalterada.</p></div>
            <span class="ml-auto text-sm text-gray-500" x-text="showImport ? '▲' : '▼'"></span>
        </button>
        <form x-show="showImport" x-cloak method="POST" action="{{ route('admin.historico.importar') }}" enctype="multipart/form-data" class="p-6 border-t border-gray-100 space-y-5" x-on:submit.prevent="submitImport($event)">
            @csrf
            <p class="text-sm text-gray-600">Selecione o arquivo <code class="bg-gray-100 px-1 rounded text-xs font-mono">Programacao_Operacao_XXXX.xlsx</code>. Cada sheet <span class="font-mono text-xs bg-gray-100 px-1 rounded">DDMMAAAA</span> representa um dia de operação.</p>
            <div>
                <label class="block text-xs font-semibold text-gray-600 uppercase tracking-wide mb-2">Arquivo XLSX <span class="font-normal normal-case text-gray-400">(opcional — máx. 150 MB)</span></label>
                <div class="flex items-center gap-3 flex-wrap">
                    <label class="cursor-pointer inline-flex items-center gap-2 px-4 py-2 rounded-lg border border-gray-300 text-sm text-gray-700 hover:bg-gray-50"><span x-text="hasFile ? fileName : 'Escolher arquivo…'"></span><input type="file" class="hidden" id="xlsx_file_preview" name="xlsx_file" accept=".xlsx,.xls" x-on:change="const f=$event.target.files[0]; hasFile=!!f; fileName=f?f.name:''; fileSize=f?(f.size>1048576?(f.size/1048576).toFixed(1)+' MB':(f.size/1024).toFixed(0)+' KB'):'';"></label>
                    <span x-show="hasFile" class="text-xs text-green-600 font-medium" x-cloak>✓ <span x-text="fileName"></span> (<span x-text="fileSize"></span>)</span>
                    <button x-show="hasFile" type="button" x-cloak x-on:click="hasFile=false; fileName=''; fileSize=''; document.getElementById('xlsx_file_preview').value=''" class="text-xs text-gray-400 hover:text-red-500">✕ Remover</button>
                </div>
            </div>
            <div class="flex flex-wrap gap-3">
                <button type="submit" name="force" value="0" :disabled="busy" class="px-4 py-2 rounded-lg text-white text-sm font-medium disabled:opacity-50" style="background:#F26522;">Importar (acumula)</button>
                <button type="submit" name="force" value="1" :disabled="busy" class="px-4 py-2 rounded-lg border border-red-400 text-red-700 text-sm font-medium hover:bg-red-50 disabled:opacity-50">Reimportar (sobrescreve)</button>
            </div>
            <p class="text-xs text-gray-400">Na reimportação, os dados anteriores são substituídos somente após a conclusão bem-sucedida. Registros com <em>fonte = sistema</em> não são afetados.</p>
        </form>
    </div>
</div>

<script>
function importacaoManager() {
    return {
        showProgress: false,
        showImport: false,
        done: false,
        error: false,
        busy: false,
        status: 'idle',
        fase: 'Aguardando...',
        mensagem: '',
        atual: 0,
        total: 0,
        pct: 0,
        inseridos: 0,
        pulados: 0,
        elapsed: 0,
        hasFile: false,
        fileName: '',
        fileSize: '',
        jobId: '',
        initialProgress: @json($jobAtivo ?? null),
        _pollTimer: null,
        _elapsedTimer: null,
        _reloadScheduled: false,
        _pollFailures: 0,

        init() {
            // Só retoma automaticamente um processo que esteja realmente ativo.
            if (this.initialProgress && ['starting', 'converting', 'running'].includes(this.initialProgress.status)) {
                this.jobId = this.initialProgress.job_id ?? '';
                this.applyProgress(this.initialProgress, false);
                this.showProgress = !!this.jobId;
                this.busy = this.showProgress;
                if (this.showProgress) {
                    this.startElapsedTimer(this.initialProgress.started_at ?? null);
                    this.startPolling();
                }
            }
        },

        makeJobId() {
            if (window.crypto && crypto.randomUUID) {
                return 'import_' + crypto.randomUUID().replaceAll('-', '');
            }
            return 'import_' + Date.now() + '_' + Math.random().toString(36).slice(2, 12);
        },

        async submitImport(event) {
            if (this.busy) return;

            const form = event.currentTarget;
            const submitter = event.submitter;
            const force = submitter && submitter.value === '1';
            const question = force
                ? 'ATENÇÃO: os registros importados atuais serão substituídos somente se a nova importação terminar com sucesso. Continuar?'
                : 'Iniciar importação? Registros anteriores NÃO serão apagados.';

            if (!confirm(question)) return;

            this.resetForNewJob();
            this.jobId = this.makeJobId();
            this.busy = true;
            this.showProgress = true;
            this.status = 'starting';
            this.fase = 'Enviando arquivo e iniciando importação...';

            const data = new FormData(form);
            data.set('force', force ? '1' : '0');
            data.set('job_id', this.jobId);

            this.startElapsedTimer();
            this.startPolling();

            try {
                const response = await fetch(form.action, {
                    method: 'POST',
                    body: data,
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    cache: 'no-store'
                });

                let payload = null;
                try {
                    payload = await response.json();
                } catch (_) {
                    payload = null;
                }

                if (payload) {
                    this.applyProgress(payload, true);
                }

                if (!response.ok) {
                    // Em erro fatal do PHP a resposta pode não ser JSON. Antes de
                    // exibir apenas "HTTP 500", consulta o arquivo de progresso, que
                    // também é atualizado pelo shutdown handler do backend.
                    if (!payload && this.jobId) {
                        try {
                            const statusUrl = '{{ route("admin.historico.status") }}?job_id=' + encodeURIComponent(this.jobId) + '&_=' + Date.now();
                            const statusResponse = await fetch(statusUrl, {
                                headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                                cache: 'no-store'
                            });
                            if (statusResponse.ok) {
                                const statusPayload = await statusResponse.json();
                                if (statusPayload && statusPayload.status !== 'idle') {
                                    this.applyProgress(statusPayload, false);
                                    payload = statusPayload;
                                }
                            }
                        } catch (_) {}
                    }
                    throw new Error(payload?.mensagem || payload?.message || ('Erro HTTP ' + response.status));
                }

                // Caso a resposta tenha chegado antes do último polling.
                if (!this.done && !this.error) {
                    await this.pollStatus();
                }
            } catch (e) {
                if (!this.done) {
                    this.error = true;
                    this.status = 'error';
                    this.fase = 'Erro durante a importação';
                    this.mensagem = e?.message || 'Não foi possível executar a importação.';
                    this.busy = false;
                    this.stopTimers();
                }
            }
        },

        resetForNewJob() {
            this.stopTimers();
            this.done = false;
            this.error = false;
            this.status = 'idle';
            this.fase = 'Aguardando...';
            this.mensagem = '';
            this.atual = 0;
            this.total = 0;
            this.pct = 0;
            this.inseridos = 0;
            this.pulados = 0;
            this.elapsed = 0;
            this._reloadScheduled = false;
            this._pollFailures = 0;
        },

        startElapsedTimer(startedAt = null) {
            if (startedAt) {
                const started = new Date(startedAt).getTime();
                if (!Number.isNaN(started)) {
                    this.elapsed = Math.max(0, Math.floor((Date.now() - started) / 1000));
                }
            }
            if (this._elapsedTimer) clearInterval(this._elapsedTimer);
            this._elapsedTimer = setInterval(() => {
                if (!this.done && !this.error) this.elapsed++;
            }, 1000);
        },

        startPolling() {
            if (this._pollTimer) clearInterval(this._pollTimer);
            this._pollTimer = setInterval(() => this.pollStatus(), 1000);
            setTimeout(() => this.pollStatus(), 300);
        },

        async pollStatus() {
            if (!this.jobId || this.done || this.error) return;

            try {
                const url = '{{ route("admin.historico.status") }}?job_id=' + encodeURIComponent(this.jobId) + '&_=' + Date.now();
                const response = await fetch(url, {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    cache: 'no-store'
                });
                if (!response.ok) throw new Error('HTTP ' + response.status);

                const data = await response.json();
                this._pollFailures = 0;

                // É normal o primeiro polling chegar antes de o POST criar o arquivo de progresso.
                if (data.status !== 'idle') {
                    this.applyProgress(data, true);
                }
            } catch (_) {
                this._pollFailures++;
                // O POST principal continua sendo a fonte definitiva do erro.
                // Só desistimos do polling após uma sequência longa de falhas.
                if (this._pollFailures >= 30) {
                    this.fase = 'Importação em execução; aguardando resposta do servidor...';
                }
            }
        },

        applyProgress(d, allowReload = true) {
            if (!d) return;

            this.status = d.status ?? this.status;
            this.fase = d.fase ?? this.fase;
            this.mensagem = d.mensagem ?? '';
            this.atual = Number(d.atual ?? this.atual ?? 0);
            this.total = Number(d.total ?? this.total ?? 0);
            this.inseridos = Number(d.inseridos ?? this.inseridos ?? 0);
            this.pulados = Number(d.pulados ?? this.pulados ?? 0);
            this.pct = d.percentual !== undefined && d.percentual !== null
                ? Math.min(100, Math.max(0, Number(d.percentual)))
                : (this.total > 0 ? Math.min(100, Math.round((this.atual / this.total) * 100)) : 0);

            this.done = this.status === 'done';
            this.error = this.status === 'error';

            if (this.done) {
                this.pct = 100;
                this.busy = false;
                this.showProgress = true;
                this.stopTimers();

                if (allowReload && !this._reloadScheduled) {
                    this._reloadScheduled = true;
                    setTimeout(() => window.location.href = '{{ route("admin.historico.index") }}', 1800);
                }
            } else if (this.error) {
                this.busy = false;
                this.showProgress = true;
                this.stopTimers();
            } else if (['starting', 'converting', 'running'].includes(this.status)) {
                this.busy = true;
                this.showProgress = true;
            }
        },

        stopTimers() {
            if (this._pollTimer) clearInterval(this._pollTimer);
            if (this._elapsedTimer) clearInterval(this._elapsedTimer);
            this._pollTimer = null;
            this._elapsedTimer = null;
        }
    };
}
</script>
@endsection