{{-- ============================================================
     Crecimiento del parque — adonde llevan los rankings del Dashboard.

     Una tabla y no tarjetas: lo que se viene a hacer aquí es comparar sitios entre sí,
     y eso pide columnas alineadas y poder ordenar por cualquiera de ellas.
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    <x-cabecera
        rotulo="Entornos"
        titulo="Crecimiento del parque"
        descripcion="Usuarios, cursos y matriculaciones de cada sitio, y cuánto han subido en el periodo elegido."
        :volver="['ruta' => route('dashboard'), 'texto' => 'Dashboard']">

        <x-slot:icono>
            <x-nav-icon name="server-04" tint="orange" />
        </x-slot:icono>
    </x-cabecera>

    <section class="overflow-hidden rounded-xl border"
             style="background:var(--surface-card); border-color:var(--border-subtle);">

        <div class="flex flex-wrap items-center gap-2 px-5 py-3.5">
            {{-- El periodo manda sobre todas las columnas de incremento: va primero y como
                 botones, no en un desplegable, porque son tres y se cambia a menudo. --}}
            <div class="flex overflow-hidden rounded-lg border" style="border-color:var(--border-subtle);">
                @foreach ($periodos as $dias => $etiqueta)
                    <button type="button" wire:click="$set('periodo', {{ $dias }})"
                            class="px-3 py-1.5 text-[12.5px] font-semibold"
                            style="{{ $periodo === $dias
                                ? 'background:var(--orange-500); color:#fff;'
                                : 'background:var(--surface-card); color:var(--text-muted);' }}">
                        {{ $etiqueta }}
                    </button>
                @endforeach
            </div>

            <input type="text" wire:model.live.debounce.300ms="busqueda"
                   placeholder="Buscar sitio o cliente"
                   class="rounded-lg border px-3 py-1.5 text-[13px]"
                   style="width:340px; max-width:100%; border-color:var(--border-subtle); background:var(--surface-card); color:var(--text-strong);">

            <select wire:model.live="uso" class="rounded-lg border px-3 py-1.5 text-[13px]"
                    style="border-color:var(--border-subtle); background:var(--surface-card); color:var(--text-strong);">
                <option value="">Todos los usos</option>
                @foreach (\App\Livewire\Environments\Crecimiento::USOS as $valor)
                    <option value="{{ $valor }}">{{ $valor }}</option>
                @endforeach
            </select>

            @if ($tipos->isNotEmpty())
                <select wire:model.live="tipo" class="rounded-lg border px-3 py-1.5 text-[13px]"
                        style="border-color:var(--border-subtle); background:var(--surface-card); color:var(--text-strong);">
                    <option value="">Todos los tipos</option>
                    @foreach ($tipos as $t)
                        <option value="{{ $t->id }}">{{ $t->name }}</option>
                    @endforeach
                </select>
            @endif

            <label class="flex items-center gap-1.5 text-[12.5px]" style="color:var(--text-muted);">
                <input type="checkbox" wire:model.live="soloConHistorico"> Solo con histórico
            </label>

            <label class="flex items-center gap-1.5 text-[12.5px]" style="color:var(--text-muted);">
                <input type="checkbox" wire:model.live="incluirApagados"> Incluir apagados
            </label>

            @if ($hayFiltro)
                <button type="button" wire:click="limpiarFiltros"
                        class="text-[12.5px] font-semibold" style="color:var(--text-link);">Quitar filtros</button>
            @endif

            <span class="ml-auto text-[12.5px]" style="color:var(--text-muted);">
                {{ $filas->count() }} de {{ $total }} {{ $total === 1 ? 'sitio' : 'sitios' }}
            </span>
        </div>

        {{-- Con scroll horizontal propio: son diez columnas y en pantalla estrecha no caben,
             pero la página no debe desplazarse de lado por una tabla. --}}
        <div style="overflow-x:auto;">
            @php
                $cabecera = function (string $columna, string $texto, string $alinear = 'right') use ($orden, $direccion) {
                    $activa = $orden === $columna;
                    $flecha = $activa ? ($direccion === 'desc' ? ' ↓' : ' ↑') : '';

                    return compact('columna', 'texto', 'alinear', 'activa', 'flecha');
                };

                $columnas = [$cabecera('site', 'Sitio', 'left')];
                foreach ($metricas as $clave => $nombre) {
                    $columnas[] = $cabecera($clave, $nombre);
                    $columnas[] = $cabecera($clave . '_pct', 'Incr. %');
                    $columnas[] = $cabecera($clave . '_total', 'Incr. total');
                }

                $numero = fn (?int $n) => $n === null ? '—' : number_format($n, 0, ',', '.');
            @endphp

            <table style="width:100%; border-collapse:collapse; font-size:12.5px;">
                <thead>
                    <tr style="background:var(--neutral-50);">
                        @foreach ($columnas as $c)
                            {{-- Cada métrica abre un grupo: el borde izquierdo separa usuarios,
                                 cursos y matriculaciones sin necesitar una fila de cabecera más. --}}
                            <th style="padding:7px 12px; text-align:{{ $c['alinear'] }}; white-space:nowrap;
                                       border-top:1px solid var(--border-subtle); border-bottom:1px solid var(--border-subtle);
                                       {{ isset($metricas[$c['columna']]) ? 'border-left:1px solid var(--border-subtle);' : '' }}">
                                <button type="button" wire:click="ordenarPor('{{ $c['columna'] }}')"
                                        style="font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
                                               color:{{ $c['activa'] ? 'var(--text-strong)' : 'var(--text-subtle)' }};">
                                    {{ $c['texto'] }}{{ $c['flecha'] }}
                                </button>
                            </th>
                        @endforeach
                    </tr>
                </thead>

                <tbody>
                    @forelse ($filas as $fila)
                        <tr wire:key="crec-{{ $fila['entorno']->id }}" style="border-top:1px solid var(--divider);">
                            <td style="padding:7px 12px; max-width:280px;">
                                <a href="{{ route('environments.show', $fila['entorno']) }}" wire:navigate
                                   class="block truncate font-semibold" style="color:var(--text-link);">{{ $fila['dominio'] }}</a>
                                <div class="truncate text-[11.5px]" style="color:var(--text-muted);">
                                    {{ $fila['entorno']->client?->name ?? '—' }}
                                    <span style="color:var(--border-strong);">·</span> {{ $fila['entorno']->env }}
                                    @unless ($fila['entorno']->active)
                                        <span style="color:var(--border-strong);">·</span> apagado
                                    @endunless
                                </div>
                            </td>

                            @foreach ($metricas as $clave => $nombre)
                                @php
                                    $m = $fila['metricas'][$clave];
                                    $color = $m['total'] === null || $m['total'] === 0
                                        ? 'var(--text-muted)'
                                        : ($m['total'] > 0 ? 'var(--success-500)' : 'var(--danger-500)');
                                    $signo = $m['total'] !== null && $m['total'] > 0 ? '+' : '';
                                @endphp

                                <td style="padding:7px 12px; text-align:right; font-family:ui-monospace,monospace; font-weight:700;
                                           color:var(--text-strong); border-left:1px solid var(--border-subtle);">
                                    {{ $numero($m['ahora']) }}
                                </td>

                                {{-- Un incremento sin foto de referencia sale «—», no 0: no
                                     sabemos cuánto ha crecido. El `title` dice contra qué se
                                     compara cuando sí la hay. --}}
                                <td style="padding:7px 12px; text-align:right; font-family:ui-monospace,monospace; color:{{ $color }};"
                                    @if ($m['antes'] !== null) title="Antes: {{ $numero($m['antes']) }}" @endif>
                                    @if ($m['pct'] === null)
                                        —
                                    @else
                                        {{ $signo }}{{ number_format($m['pct'], 1, ',', '.') }} %
                                    @endif
                                </td>

                                <td style="padding:7px 12px; text-align:right; font-family:ui-monospace,monospace; font-weight:600; color:{{ $color }};"
                                    @if ($m['antes'] !== null) title="Antes: {{ $numero($m['antes']) }}" @endif>
                                    {{ $m['total'] === null ? '—' : $signo . $numero($m['total']) }}
                                </td>
                            @endforeach
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ count($columnas) }}" class="px-5 py-8 text-center text-[13px]" style="color:var(--text-muted);">
                                @if ($hayFiltro)
                                    Ningún sitio encaja con este filtro.
                                    <button type="button" wire:click="limpiarFiltros" class="font-semibold" style="color:var(--text-link);">Quitarlo</button>
                                @else
                                    Ningún sitio ha enviado todavía su telemetría.
                                @endif
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </section>
</div>