{{-- Seguimiento RIM V2 (rim/seguimiento-v2), kit ui-ctc. Funcionalidad: specs/SPEC_SeguimientoRIM_V2.MD sección 7.
     Indicadores por urgencia (filtran), búsqueda con filtros y etiquetas, lista agrupada (pestañas Vencimiento /
     Cliente) con las líneas de producto anidadas, y el panel de detalle de solo lectura. --}}
@php
    $grupoKpi = [
        'vencido' => ['Vencidos', 'últimos ' . $ventana . ' días, sin reemplazo'],
        'critico' => ['Críticos ≤ 7 días', 'con saldo disponible'],
        'proximo' => ['Próximos ≤ 30 días', 'con saldo disponible'],
        'vigente' => ['Vigentes', 'con saldo disponible'],
        'agotado' => ['Sin saldo', $alertas['agotado'] > 0 ? $alertas['agotado'] . ' sin reemplazo' : 'listos para cierre'],
    ];
    $hex = ['vencido' => '#c92f33', 'critico' => '#e54533', 'proximo' => '#e7b643', 'vigente' => '#57bc80', 'agotado' => '#8a847f'];
    $sumaKpi = array_sum(array_intersect_key($conteos, $grupoKpi));
    $consumos = ['sin_usar' => 'Sin usar', 'parcial' => 'Consumido en parte', 'agotado' => 'Agotado'];
    $chips = [];
    if ($busqueda !== '') { $chips[] = ['Búsqueda', $busqueda, 'limpiarBusqueda']; }
    if ($filtroGrupo !== null) { $chips[] = ['Urgencia', $etiquetas[$filtroGrupo]['titulo'], "filtrarGrupo('" . $filtroGrupo . "')"]; }
    if ($filtroCompania !== null && $filtroCompania !== '') { $chips[] = ['Compañía', $companias[$filtroCompania] ?? $filtroCompania, "\$set('filtroCompania', null)"]; }
    if ($filtroConsumo !== null && $filtroConsumo !== '') { $chips[] = ['Consumo', $consumos[$filtroConsumo] ?? $filtroConsumo, "\$set('filtroConsumo', null)"]; }
    $titular = ($estado === 'ok' || $estado === 'vacio_filtro')
        ? ($accionSemana > 0
            ? number_format($accionSemana, 0, ',', '.') . ($accionSemana == 1 ? ' registro exige' : ' registros exigen') . ' acción esta semana'
            : 'Ningún registro exige acción esta semana')
        : 'Seguimiento de registros de importación';
    if ($alertas['agotado'] > 0) {
        $titular .= ', y ' . number_format($alertas['agotado'], 0, ',', '.') . ' sin saldo cuyos productos no tienen reemplazo vigente';
    }
    $columnas = 6;
@endphp
<div x-on:keydown.escape.window="$wire.detalleId && $wire.cerrarDetalle()">
<x-pagina>
    <x-encabezado-pagina ruta="Importaciones · Operaciones" titulo="Seguimiento RIM" :descripcion="$titular . '.'">
        @if ($puedeExportar)
            <x-slot name="acciones">
                <x-secondary-button wire:click="exportar" wire:loading.attr="disabled" wire:target="exportar">
                    <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
                    <span wire:loading.remove wire:target="exportar">Exportar</span>
                    <span wire:loading wire:target="exportar">Generando…</span>
                </x-secondary-button>
            </x-slot>
        @endif
    </x-encabezado-pagina>

    {{-- Indicadores por urgencia: clic filtra; otro clic en el activo quita el filtro --}}
    <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))]">
        @foreach ($grupoKpi as $grupo => [$titulo, $detalleKpi])
            <x-indicador :titulo="$titulo" :valor="$conteos[$grupo]" :ayuda="$detalleKpi" :ayuda-aviso="$grupo === 'vencido' && $conteos['vencido'] > 0"
                         :porcentaje="$sumaKpi ? $conteos[$grupo] * 100 / $sumaKpi : null" :insignia="false" :color="$hex[$grupo]"
                         :activo="$filtroGrupo === $grupo" wire:click="filtrarGrupo('{{ $grupo }}')" wire:key="kpi-{{ $grupo }}"
                         title="{{ $filtroGrupo === $grupo ? 'Quitar este filtro' : 'Filtrar por ' . $titulo }}" />
        @endforeach
    </div>

    <x-barra-busqueda modelo="search" accion="buscar" placeholder="Buscar por DO, aprobación, cliente o producto" :activos="count($chips)">
        <x-slot name="filtros">
            @if (count($companias) > 1)
                <x-campo etiqueta="Compañía" para="filtroCompania">
                    <x-select id="filtroCompania" wire:model.live="filtroCompania">
                        <option value="">Todas ({{ count($companias) }})</option>
                        @foreach ($companias as $idWebsimex => $razonSocial)<option value="{{ $idWebsimex }}">{{ $razonSocial }}</option>@endforeach
                    </x-select>
                </x-campo>
            @endif
            <x-campo etiqueta="Estado de consumo" para="filtroConsumo">
                <x-select id="filtroConsumo" wire:model.live="filtroConsumo">
                    <option value="">Cualquiera</option>
                    <option value="sin_usar">Sin usar (100% disponible)</option>
                    <option value="parcial">Consumido en parte</option>
                    <option value="agotado">Agotado (sin saldo)</option>
                </x-select>
            </x-campo>
        </x-slot>
        @if (count($chips))
            <x-slot name="chips">
                @foreach ($chips as [$etiqueta, $valor, $accion])
                    <x-chip-filtro :etiqueta="$etiqueta" :valor="$valor" wire:click="{{ $accion }}" />
                @endforeach
                <button type="button" wire:click="quitarFiltros" class="text-[12px] text-[var(--texto-suave)] underline hover:text-[var(--texto)]">Limpiar todo</button>
            </x-slot>
        @endif
    </x-barra-busqueda>

    <section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
        <div class="flex flex-wrap items-center justify-between gap-4 border-b border-[var(--borde)] px-5">
            <div class="flex items-center gap-4">
                <div role="tablist" class="flex gap-1">
                    @foreach ($agrupaciones as $modo)
                        <x-pestana :etiqueta="'Por ' . $modo" :activa="$agrupacion === $modo" icono="queue-list"
                                   wire:click="agruparPor('{{ $modo }}')" wire:loading.attr="disabled" />
                    @endforeach
                </div>
                <span class="hidden text-[12px] text-[var(--texto-suave)] sm:inline">
                    <b class="font-bold text-[var(--texto)]">{{ number_format($totalRegistros, 0, ',', '.') }}</b> {{ $totalRegistros == 1 ? 'registro' : 'registros' }}
                </span>
            </div>
            <div class="flex flex-wrap items-center gap-3 py-2 text-[12px] text-[var(--texto-suave)]">
                @foreach (['vencido' => 'Vencido', 'critico' => 'Crítico ≤ 7 d', 'proximo' => 'Próximo ≤ 30 d', 'vigente' => 'Vigente', 'agotado' => 'Sin saldo'] as $g => $t)
                    <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-full" style="background: {{ $hex[$g] }}"></span>{{ $t }}</span>
                @endforeach
                <span wire:loading.delay class="flex items-center gap-1.5 whitespace-nowrap text-[var(--acento-texto)]" role="status"><x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando…</span>
            </div>
        </div>

        @if (in_array($estado, ['sin_companias', 'error', 'vacio', 'vacio_filtro'], true))
            <div class="px-5 py-12 text-center">
                <x-icono :nombre="$estado === 'error' ? 'exclamation-triangle' : 'magnifying-glass'" class="mx-auto h-7 w-7 {{ $estado === 'error' ? 'text-red-500' : 'text-[var(--texto-tenue)]' }}" />
                @if ($estado === 'sin_companias')
                    <p class="mt-2 text-[14px] font-semibold text-[var(--texto)]">No hay compañías activas asociadas a este usuario.</p>
                    <p class="mt-1 text-[13px] text-[var(--texto-suave)]">Sin compañías no se puede consultar el ERP. Comuníquese con su ejecutivo de cuenta.</p>
                @elseif ($estado === 'error')
                    <p class="mt-2 text-[14px] font-semibold text-[var(--texto)]">No se pudo consultar Websimex.</p>
                    <p class="mt-1 text-[13px] text-[var(--texto-suave)]">El ERP no respondió. Puede reintentar la consulta.</p>
                    <x-button type="button" wire:click="$refresh" class="mt-4"><x-icono nombre="arrow-path" /> Reintentar</x-button>
                @elseif ($estado === 'vacio')
                    <p class="mt-2 text-[14px] font-semibold text-[var(--texto)]">Este cliente no tiene registros de importación aprobados en Websimex.</p>
                    <p class="mt-1 text-[13px] text-[var(--texto-suave)]">Cuando el ERP apruebe un RIM aparecerá aquí automáticamente.</p>
                @else
                    <p class="mt-2 text-[14px] font-semibold text-[var(--texto)]">Ningún registro coincide con la búsqueda.</p>
                    <x-secondary-button wire:click="quitarFiltros" class="mt-4">Quitar filtros</x-secondary-button>
                @endif
            </div>
        @else
            <div class="ctc-tabla-caja">
                <table class="ctc-tabla">
                    <thead>
                        <tr>
                            <th class="ctc-fija w-11 min-w-11" style="left: 0"><span class="sr-only">Líneas</span></th>
                            <th>Registro</th>
                            <th>Saldo disponible</th>
                            <th>Vencimiento</th>
                            <th>Prórrogas</th>
                            <th><span class="sr-only">Acción</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($grupos as $datosGrupo)
                            @include('livewire.rim.partials._grupo', ['datos' => $datosGrupo, 'columnas' => $columnas])
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>
</x-pagina>

    {{-- Panel de detalle (solo lectura) --}}
    @if ($detalle)
        @include('livewire.rim.partials._panel-detalle')
    @endif
</div>