{{-- ============================================================
     Uso del entorno — implementado desde `Data.dc.html`.

     Cuánta gente y cuánto contenido tiene el Moodle de un cliente, y cómo evoluciona.
     Ver el docblock del componente, incluido por qué el estado normal de hoy es «sin
     datos».
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    <div>
        <a href="{{ route('environments.index') }}" wire:navigate
           class="inline-flex items-center gap-1.5 text-[13px] font-semibold" style="color:var(--text-link);">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            Entornos
        </a>
    </div>

    {{-- ============ Cabecera del entorno ============ --}}
    <section class="overflow-hidden rounded-xl border"
             style="background:var(--surface-card); border-color:var(--border-subtle);">
        <div class="flex flex-wrap items-center justify-between gap-6 px-6 py-5">
            <div class="flex min-w-0 flex-1 items-center gap-4">
                <span class="flex h-[52px] w-[52px] flex-none items-center justify-center rounded-xl"
                      style="background:var(--teal-100); color:var(--teal-700);">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="7" rx="2"/><rect x="2" y="14" width="20" height="7" rx="2"/><path d="M6 6.5h.01"/><path d="M6 17.5h.01"/></svg>
                </span>
                <div class="min-w-0">
                    <div class="text-[10.5px] font-semibold uppercase tracking-[0.08em]" style="color:var(--orange-600);">
                        Uso del entorno
                    </div>
                    <div class="mt-0.5 flex flex-wrap items-center gap-2.5">
                        <h1 class="truncate" style="font-family:'Plus Jakarta Sans',sans-serif; font-size:21px; font-weight:700; letter-spacing:-0.02em; color:var(--text-strong); margin:0;">
                            {{ $environment->name }}
                        </h1>
                        @if ($environment->env)
                            <span class="flex-none rounded px-1.5 py-px text-[10.5px] font-semibold"
                                  style="color:var(--info-500); background:var(--info-50);">
                                {{ $environment->env }}
                            </span>
                        @endif
                        @if ($environment->trashed())
                            <span class="flex-none rounded-full px-2.5 py-px text-[11px] font-semibold"
                                  style="color:var(--danger-500); background:var(--danger-50);">De baja</span>
                        @elseif ($environment->active)
                            <span class="flex-none rounded-full px-2.5 py-px text-[11px] font-semibold"
                                  style="color:var(--success-500); background:var(--success-50);">Activo</span>
                        @else
                            <span class="flex-none rounded-full px-2.5 py-px text-[11px] font-semibold"
                                  style="color:var(--warning-500); background:var(--warning-50);">Desactivado</span>
                        @endif
                    </div>
                    <div class="mt-1.5 flex flex-wrap items-center gap-2 text-[12.5px]" style="color:var(--text-muted);">
                        <a href="{{ $environment->domain }}" target="_blank" rel="noopener"
                           class="inline-flex items-center gap-1 font-semibold" style="color:var(--text-link);">
                            {{ preg_replace('#^https?://#', '', (string) $environment->domain) }}
                            <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M10 14 21 3"/><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/></svg>
                        </a>
                        @if ($environment->client)
                            <span style="color:var(--border-strong);">·</span>
                            @can('admin.clients.index')
                                <a href="{{ route('clients.index') }}" wire:navigate
                                   class="font-semibold" style="color:var(--text-link);">{{ $environment->client->name }}</a>
                            @else
                                <span>{{ $environment->client->name }}</span>
                            @endcan
                        @endif
                        @if ($foto?->moodlerelease)
                            <span style="color:var(--border-strong);">·</span>
                            <span>Moodle {{ $foto->moodlerelease }}</span>
                        @elseif ($environment->version)
                            <span style="color:var(--border-strong);">·</span>
                            <span>Moodle {{ $environment->version }}</span>
                        @endif
                    </div>
                </div>
            </div>

            {{-- **Lo primero que hay que ver.** Unas cifras de hace un mes presentadas
                 como actuales son peores que no tener cifras. --}}
            <div class="flex flex-none items-center gap-3 rounded-[10px] border px-4 py-2.5"
                 style="border-color:var(--border-subtle); background:var(--surface-alt);">
                <span class="h-2.5 w-2.5 flex-none rounded-full" style="background:{{ $frescura['punto'] }};"></span>
                <div>
                    <div class="text-[10.5px] font-semibold uppercase tracking-[0.06em]" style="color:var(--text-muted);">
                        Último dato recibido
                    </div>
                    <div class="mt-px text-[14px] font-bold" style="color:{{ $frescura['color'] }};">
                        {{ $frescura['texto'] }}
                    </div>
                    <div class="text-[11px]" style="color:var(--text-subtle);">{{ $frescura['nota'] }}</div>
                </div>

                {{-- Y aquí también, no solo en el estado vacío: el caso más frecuente no es
                     «nunca ha enviado» sino «la foto es de hace días», y ahí la pregunta es
                     la misma —«tráemela ahora»— sin tener que esperar a la madrugada. --}}
                @if ($this->puedePedirDatos())
                    <button type="button" wire:click="abrirPedirDatos"
                            title="Pedirle a este Moodle que envíe su foto de uso ahora"
                            class="flex-none rounded-lg border px-2.5 py-1.5 text-[12px] font-semibold"
                            style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                        Pedir ahora
                    </button>
                @endif
            </div>
        </div>

        <div class="flex flex-wrap items-center justify-between gap-4 border-t px-6 py-2.5"
             style="border-color:var(--divider); background:var(--surface-alt);">
            <span class="text-[12px]" style="color:var(--text-muted);">
                Cuánta gente y cuánto contenido tiene este Moodle, y cómo evoluciona.
                @canany(['admin.environments.index', 'admin.plugins.environment'])
                    Los plugins instalados están en
                    <a href="{{ route('environments.plugins.index', $environment) }}" wire:navigate
                       class="font-semibold" style="color:var(--text-link);">su inventario</a>;
                @endcanany
                @can('admin.api-logs.index')
                    las peticiones a la API, en
                    <a href="{{ route('api-logs.index') }}" wire:navigate
                       class="font-semibold" style="color:var(--text-link);">Monitorización</a>.
                @endcan
            </span>

            {{-- El rango vive en la cabecera porque **manda sobre toda la pantalla**: los
                 deltas de las tres familias y las cuatro series se calculan contra él.
                 Suelto entre bloques parecía que solo afectaba a lo de debajo. --}}
            @unless ($nuncaHaEnviado)
                <div class="flex flex-none flex-wrap items-center gap-2">
                    <span class="text-[11px] font-semibold uppercase tracking-[0.04em]" style="color:var(--text-subtle);">
                        Comparar con
                    </span>
                    <div class="flex flex-wrap gap-0.5 rounded-lg border p-[3px]"
                         style="background:var(--surface-page); border-color:var(--border-default);">
                        @foreach (\App\Livewire\Environments\Uso::RANGOS as $dias => $etiqueta)
                            <button type="button" wire:click="cambiarRango({{ $dias }})"
                                    class="rounded-md px-2.5 py-[5px] text-[12px] font-semibold transition-colors"
                                    @style([
                                        'background:var(--neutral-800); color:#fff' => $rango === $dias,
                                        'background:transparent; color:var(--text-muted)' => $rango !== $dias,
                                    ])>
                                {{ $etiqueta }}
                            </button>
                        @endforeach
                    </div>
                </div>
            @endunless
        </div>
    </section>

    {{-- ============ Avisos por estado ============ --}}
    @if ($environment->trashed())
        <div class="flex items-center gap-3 rounded-xl border px-[18px] py-3 text-[13px]"
             style="background:var(--surface-sunken); border-color:var(--border-default); color:var(--text-body);">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="var(--text-subtle)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-none"><circle cx="12" cy="12" r="10"/><path d="m4.9 4.9 14.2 14.2"/></svg>
            <span>
                Entorno dado de baja{{ $environment->deleted_at ? ' el ' . $environment->deleted_at->format('d/m/Y') : '' }}.
                <strong class="font-semibold">Los datos históricos se conservan</strong>: lo que ves es
                la última foto y la serie hasta ese día.
            </span>
        </div>
    @elseif ($frescura['viejo'])
        {{-- No es un error: es que el Moodle dejó de hablar. Y la diferencia importa,
             porque lo que hay que revisar está en el otro lado. --}}
        <div class="flex items-center gap-3 rounded-xl border px-[18px] py-3 text-[13px]"
             style="background:var(--warning-50); border-color:var(--warning-500); color:var(--text-body);">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="var(--warning-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="flex-none"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
            <span>
                <strong class="font-semibold">Estas cifras son del
                    {{ $fechaDeLaFoto->format('d/m/Y') }}.</strong>
                El Moodle no ha vuelto a enviar desde entonces, así que
                <strong class="font-semibold">no son datos de hoy</strong>. Comprueba la
                sincronización en la ficha del entorno.
            </span>
        </div>
    @endif

    {{-- ============ Nunca ha enviado nada ============ --}}
    @if ($nuncaHaEnviado)
        <section class="rounded-xl border px-6 py-10 text-center"
                 style="background:var(--surface-card); border-color:var(--border-subtle);">
            <div class="inline-flex h-[52px] w-[52px] items-center justify-center rounded-full"
                 style="background:var(--surface-teal-subtle);">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--teal-600)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="m7 14 4-4 4 3 5-6"/></svg>
            </div>
            <div class="mt-3.5" style="font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:700; color:var(--text-strong);">
                Este Moodle todavía no ha enviado ningún dato de uso
            </div>
            {{-- **Se dice de quién es el problema.** No es del Manager, y quien mire esta
                 pantalla tiene que saber dónde ir a arreglarlo. --}}
            <div class="mx-auto mt-1.5 max-w-xl text-[13px] leading-relaxed" style="color:var(--text-muted);">
                No es un fallo del Manager: la foto diaria la envía una tarea programada del
                plugin del entorno, y de este no ha llegado ninguna. Suele ser que el plugin
                instalado es anterior a esa tarea, que el cron del Moodle no se está
                ejecutando, o que el entorno no ha sincronizado nunca.
            </div>
            <div class="mt-4 flex flex-wrap justify-center gap-2.5">
                {{-- **La acción que faltaba.** Hasta ahora esta pantalla explicaba el
                     problema y no ofrecía nada que hacer: la foto la manda una tarea del
                     plugin de madrugada, así que había que esperar o entrar al Moodle del
                     cliente. Ahora se le puede pedir. --}}
                @if ($this->puedePedirDatos())
                    <button type="button" wire:click="abrirPedirDatos"
                            class="rounded-lg border-none px-4 py-2 text-[13px] font-semibold text-white"
                            style="background:var(--orange-500);"
                            onmouseover="this.style.background='var(--orange-600)'"
                            onmouseout="this.style.background='var(--orange-500)'">
                        Pedirle los datos ahora
                    </button>
                @endif
                @can('admin.environments.index')
                    <a href="{{ route('environments.index') }}" wire:navigate
                       class="rounded-lg border px-3.5 py-2 text-[13px] font-semibold"
                       style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                        Ver la ficha del entorno
                    </a>
                @endcan
                @can('admin.plugins.environment')
                    <a href="{{ route('environments.plugins.index', $environment) }}" wire:navigate
                       class="rounded-lg border px-3.5 py-2 text-[13px] font-semibold"
                       style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                        Ver qué plugins tiene
                    </a>
                @endcan
            </div>
        </section>
    @else

        {{-- **Todo lo que depende del rango, atenuado mientras se recalcula.**
             Cambiar de «1 mes» a «1 año» son cuatro series de 366 puntos y tres
             deltas: sin señal, las cifras viejas se quedan un instante como si
             fueran las nuevas. `wire:target` lo limita al botón del rango, para que
             no se atenúe la pantalla entera por cualquier otra interacción. --}}
        <div wire:loading.class="opacity-40" wire:target="cambiarRango"
             class="flex flex-col gap-3.5 transition-opacity duration-200">

        {{-- ============ Las tres familias ============ --}}
        {{-- Agrupadas y sin mezclar: en el Manager antiguo la tarjeta de «Cursos» llevaba
             dentro dos cifras de analítica. --}}
        <div class="uso-familias-grid">
            @foreach ($familias as $familia)
                <section class="flex flex-col rounded-xl border px-5 pb-3.5 pt-4"
                         style="background:var(--surface-card); border-color:var(--border-subtle);">
                    <div class="flex items-center justify-between gap-2.5">
                        <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:13px; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-muted); margin:0;">
                            {{ $familia['nombre'] }}
                        </h2>
                        {{-- El delta **a la vista, no en un tooltip**: en el Manager antiguo
                             estaba en un `title`, invisible en móvil y en una captura. --}}
                        <span class="whitespace-nowrap rounded-full px-2.5 py-0.5 text-[11px] font-bold"
                              style="color:{{ $familia['delta']['fg'] }}; background:{{ $familia['delta']['bg'] }};">
                            {{ $familia['delta']['texto'] }}
                        </span>
                    </div>

                    <div class="py-4 text-center">
                        <div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:40px; font-weight:800; letter-spacing:-0.02em; color:var(--text-strong); line-height:1;">
                            {{ $familia['valor'] === null ? '—' : number_format($familia['valor'], 0, ',', '.') }}
                        </div>
                        <div class="mt-1.5 text-[12px]" style="color:var(--text-muted);">{{ $familia['label'] }}</div>
                    </div>

                    <div class="grid grid-cols-3 gap-2.5 border-t pt-3" style="border-color:var(--divider);">
                        @foreach ($familia['secundarias'] as $secundaria)
                            <div class="min-w-0 text-center" title="{{ $secundaria['tip'] }}">
                                <div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:16px; font-weight:700; color:var(--text-strong);">
                                    {{ $secundaria['valor'] }}
                                </div>
                                <div class="mt-px text-[10.5px] leading-tight" style="color:var(--text-subtle);">
                                    {{ $secundaria['label'] }}
                                </div>
                            </div>
                        @endforeach
                    </div>
                </section>
            @endforeach
        </div>

        {{-- ============ Lo que no es uso de la plataforma ============ --}}
        {{-- Analítica y móviles van aparte: no son gente ni contenido, y en el Manager
             antiguo estaban metidos dentro de la tarjeta de cursos. --}}
        @if ($foto)
            <div class="flex flex-wrap items-center gap-4 rounded-xl border px-5 py-2.5"
                 style="background:var(--surface-card); border-color:var(--border-subtle);">
                <span class="flex-none text-[11px] font-semibold uppercase tracking-[0.05em]" style="color:var(--text-subtle);">
                    Además
                </span>
                <div class="flex flex-wrap gap-x-5 gap-y-1 text-[12px]" style="color:var(--text-muted);">
                    <span>
                        <strong class="font-bold" style="color:var(--text-body);">{{ number_format((int) $foto->analyticspredictions, 0, ',', '.') }}</strong>
                        predicciones de analítica ·
                        <strong class="font-bold" style="color:var(--text-body);">{{ number_format((int) $foto->analyticsactions, 0, ',', '.') }}</strong>
                        acciones
                    </span>
                    <span>
                        <strong class="font-bold" style="color:var(--text-body);">{{ number_format((int) $foto->registereduserdevices, 0, ',', '.') }}</strong>
                        móviles registrados
                    </span>
                    <span>
                        <strong class="font-bold" style="color:var(--text-body);">{{ number_format((int) $foto->registeredactiveuserdevices, 0, ',', '.') }}</strong>
                        móviles activos
                    </span>
                </div>
            </div>
        @endif

        {{-- ============ Evolución ============ --}}
        <section class="overflow-hidden rounded-xl border"
                 style="background:var(--surface-card); border-color:var(--border-subtle);">
            <div class="flex flex-wrap items-center justify-between gap-4 px-5 pb-2.5 pt-3.5">
                <div>
                    <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                        Evolución
                    </h2>
                    <div class="mt-0.5 text-[12px]" style="color:var(--text-muted);">
                        Últimos {{ \App\Livewire\Environments\Uso::RANGOS[$rango] }} — una foto al día,
                        con la fecha del Moodle. Si un día llegan dos envíos, gana el último; no hay
                        datos por hora.
                    </div>
                </div>
            </div>

            @if ($sinSerie)
                {{-- **Este es el estado de partida de todos los entornos**, no un caso
                     raro: hace falta más de un día para que exista una línea. Una gráfica
                     con ejes y sin datos parecería una avería. --}}
                <div class="mx-5 mb-[18px] flex items-center gap-4 rounded-[10px] border-[1.5px] border-dashed px-5 py-4"
                     style="border-color:var(--border-default);">
                    <div class="flex h-[42px] w-[42px] flex-none items-center justify-center rounded-full"
                         style="background:var(--surface-teal-subtle);">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="var(--teal-600)" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3v16a2 2 0 0 0 2 2h16"/><path d="m7 14 4-4 4 3 5-6"/></svg>
                    </div>
                    <div>
                        <div class="text-[13.5px] font-semibold" style="color:var(--text-strong);">
                            La serie empieza ahora
                        </div>
                        <div class="mt-0.5 text-[12.5px]" style="color:var(--text-muted);">
                            Ya hay una primera foto, pero hace falta más de un día para dibujar una
                            evolución. Mañana habrá dos puntos; en una semana, una línea.
                            <strong class="font-semibold">No es una avería.</strong>
                        </div>
                    </div>
                </div>
            @else
                <div class="uso-series-grid px-5 pb-[18px] pt-1">
                    @foreach ($series as $serie)
                        <div class="rounded-[10px] border px-4 pb-3 pt-3.5" style="border-color:var(--border-subtle);">
                            <div class="flex items-start justify-between gap-2.5">
                                <div>
                                    <div class="text-[12px] font-semibold" style="color:var(--text-muted);">
                                        {{ $serie['nombre'] }}
                                    </div>
                                    @unless ($serie['vacia'])
                                        <div class="flex items-baseline gap-2">
                                            <span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:800; letter-spacing:-0.01em; color:var(--text-strong);">
                                                {{ $serie['valorActual'] }}
                                            </span>
                                            <span class="text-[11.5px] font-semibold" style="color:{{ $serie['delta']['fg'] }};">
                                                {{ $serie['delta']['texto'] }}
                                            </span>
                                        </div>
                                    @endunless
                                </div>
                                <span class="mt-1 h-2.5 w-2.5 flex-none rounded-full" style="background:{{ $serie['color'] }};"></span>
                            </div>

                            @if ($serie['vacia'])
                                <div class="py-8 text-center text-[12.5px]" style="color:var(--text-subtle);">
                                    El Moodle no envía esta medida.
                                </div>
                            @else
                                <x-grafica :id="$serie['metrica']" :opciones="$serie['opciones']" :alto="170"
                                           :aria-label="'Evolución de ' . $serie['nombre']" />

                                <div class="mt-1 flex items-center justify-between text-[10px]" style="color:var(--text-subtle);">
                                    <span>{{ $serie['desde'] }}</span>
                                    {{-- **Cuántos días faltan.** La línea se une por encima de
                                         los huecos para que la tendencia se lea, así que este
                                         número es lo único que dice si la serie está completa
                                         o hecha de cuatro puntos. --}}
                                    @if ($serie['huecos'] > 0)
                                        <span style="color:var(--warning-500);">
                                            {{ $serie['huecos'] }} de {{ $serie['total'] }} días sin dato
                                        </span>
                                    @endif
                                    <span>{{ $serie['hasta'] }}</span>
                                </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </section>

        </div>
    @endif
</div>
