@php
    $servers = $panoramica['servers'] ?? [];
    $nomiServer = array_column($servers, 'name', 'hostname');
    $onlinePerServer = $this->onlinePerServer;
    $onlineTotale = count($onlineUsers);
    $onlineSconosciuti = $onlineTotale - array_sum(array_intersect_key($onlinePerServer, $nomiServer));
    $ideale = (float) ($panoramica['carico_ideale_percentuale'] ?? 0);
    $percento = fn (float|int $valore): string => number_format((float) $valore, 0, ',', '.') . '%';
    $piuCarico = collect($servers)->sortByDesc('quota_carico')->first();
    $sbilanciato = ($panoramica['sbilanciamento'] ?? 0) > 10;
    $senzaDati = collect($servers)->sum('richieste_7g') === 0;

    $passaFiltro = fn (?string $server): bool => match ($filtroServer) {
        '' => true,
        '__sconosciuto__' => $server === null || !isset($nomiServer[$server]),
        default => $server === $filtroServer,
    };
    $onlineFiltrati = array_filter($onlineUsers, fn (array $utente): bool => $passaFiltro($utente['current_server']));
    $topFiltrati = array_filter($panoramica['top_utenti'] ?? [], fn (array $utente): bool => $passaFiltro($utente['server_effettivo']));
@endphp

<div wire:poll.{{ $refreshInterval }}s="loadOnlineUsers">
    <style>
        .uo-numero { font-size: 2.25rem; font-weight: 700; line-height: 1.1; }
        .uo-quota { position: relative; }
        .uo-quota .progress { height: 1rem; margin: 0; }
        .uo-ideale { position: absolute; top: -3px; bottom: -3px; width: 3px; margin-left: -1px; background: #343a40; }
        .uo-grafico { position: relative; height: 300px; }
    </style>

    @if(session()->has('message'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            <i class="fas fa-check-circle mr-2"></i>
            {{ session('message') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Chiudi">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    @if(session()->has('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-circle mr-2"></i>
            {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Chiudi">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
    @endif

    @if(empty($servers))
        <div class="alert alert-warning">
            <i class="fas fa-exclamation-triangle mr-2"></i>
            Panoramica dei server non disponibile. Utenti online adesso: <strong>{{ $onlineTotale }}</strong>.
        </div>
    @else
        {{-- 1. Verdetto --}}
        @if($senzaDati)
            <div class="alert alert-info">
                <i class="fas fa-hourglass-half mr-2"></i>
                <strong>Dati di carico in raccolta: la finestra è affidabile dopo 7 giorni dal deploy</strong>
            </div>
        @elseif($sbilanciato)
            <div class="alert alert-warning">
                <i class="fas fa-balance-scale-right mr-2"></i>
                <strong>Sbilanciato: {{ $piuCarico['name'] }} ha il {{ $percento($piuCarico['quota_carico']) }} del carico, la quota ideale è {{ $percento($ideale) }}</strong>
            </div>
        @else
            <div class="alert alert-success">
                <i class="fas fa-check-circle mr-2"></i>
                <strong>Distribuzione equilibrata</strong>
            </div>
        @endif

        {{-- 2. Card per server --}}
        <div class="row">
            @foreach($servers as $server)
                <div class="col-12 col-md-6 col-xl-3" wire:key="server-{{ $server['hostname'] }}">
                    <div class="card">
                        <div class="card-body">
                            <h3 class="h5 mb-0"><i class="fas fa-server mr-1" aria-hidden="true"></i> {{ $server['name'] }}</h3>
                            <small class="text-muted text-break">{{ $server['hostname'] }}</small>

                            <div class="mt-2"><span class="uo-numero">{{ $onlinePerServer[$server['hostname']] ?? 0 }}</span> online adesso</div>

                            <dl class="row small mt-2 mb-2">
                                <dt class="col-8 font-weight-normal">Assegnati</dt>
                                <dd class="col-4 text-right mb-0">{{ $server['assegnati'] }}</dd>
                                <dt class="col-8 font-weight-normal">Attivi 7 giorni</dt>
                                <dd class="col-4 text-right mb-0">{{ $server['attivi_7g'] }}</dd>
                                <dt class="col-8 font-weight-normal">Picco orario</dt>
                                <dd class="col-4 text-right mb-0">{{ $server['picco_orario'] }}</dd>
                            </dl>

                            <div class="uo-quota">
                                <div class="progress">
                                    <div class="progress-bar {{ $server['quota_carico'] > $ideale ? 'bg-warning' : 'bg-info' }}"
                                         role="progressbar"
                                         style="width: {{ min(100, (float) $server['quota_carico']) }}%"
                                         aria-valuenow="{{ $server['quota_carico'] }}" aria-valuemin="0" aria-valuemax="100"
                                         aria-label="Quota di carico di {{ $server['name'] }}"></div>
                                </div>
                                <span class="uo-ideale" style="left: {{ $ideale }}%" title="Quota ideale: {{ $percento($ideale) }}"></span>
                            </div>
                            <small>
                                <strong>{{ $percento($server['quota_carico']) }}</strong> del carico,
                                {{ $server['quota_carico'] > $ideale ? 'sopra' : 'non sopra' }} l'ideale ({{ $percento($ideale) }}, tacca nera)
                            </small>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <p class="small">
            <i class="fas fa-users mr-1" aria-hidden="true"></i>
            Online in totale: <strong>{{ $onlineTotale }}</strong>.
            Senza restrizione di server: <strong>{{ $panoramica['senza_restrizione']['totale'] }}</strong> utenti, {{ $panoramica['senza_restrizione']['attivi_7g'] }} attivi negli ultimi 7 giorni.
            @if($onlineSconosciuti > 0)
                Online su server sconosciuto: <strong>{{ $onlineSconosciuti }}</strong>.
            @endif
        </p>

        {{-- 3. Andamento: i dati si aggiornano al reload della pagina --}}
        <div class="card">
            <div class="card-header"><h3 class="card-title">Utenti unici per ora, ultime 48 ore</h3></div>
            <div class="card-body">
                <div class="uo-grafico" wire:ignore wire:key="grafico-andamento">
                    <canvas id="uo-andamento" role="img" aria-label="Grafico a linee degli utenti unici per ora su ciascun server nelle ultime 48 ore"></canvas>
                    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.9/dist/chart.umd.js"></script>
                    <script>
                        (function () {
                            const canvas = document.getElementById('uo-andamento');
                            if (!canvas || !window.Chart) return;

                            const serie = @json(array_map(fn (array $server): array => ['nome' => $server['name'], 'dati' => array_values($server['andamento'])], $servers));
                            const colori = ['#2a78d6', '#eb6834', '#1baf7a', '#eda100', '#e87ba4', '#008300', '#6250d6', '#e34948'];
                            // Il tratteggio distingue le serie anche senza percepire il colore.
                            const tratti = [[], [8, 4], [2, 3], [10, 3, 2, 3]];

                            new Chart(canvas, {
                                type: 'line',
                                data: {
                                    labels: @json(array_keys($servers[0]['andamento'])),
                                    datasets: serie.map((s, i) => ({
                                        label: s.nome,
                                        data: s.dati,
                                        borderColor: colori[i % colori.length],
                                        backgroundColor: colori[i % colori.length],
                                        borderDash: tratti[i % tratti.length],
                                        borderWidth: 2,
                                        pointRadius: 0,
                                        pointHoverRadius: 4,
                                        tension: 0,
                                    })),
                                },
                                options: {
                                    responsive: true,
                                    maintainAspectRatio: false,
                                    interaction: { mode: 'index', intersect: false },
                                    plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, pointStyle: 'line' } } },
                                    scales: {
                                        x: { grid: { display: false }, ticks: { maxTicksLimit: 8, maxRotation: 0 } },
                                        y: { beginAtZero: true, ticks: { precision: 0 }, grid: { color: '#e1e0d9' } },
                                    },
                                },
                            });
                        })();
                    </script>
                </div>
            </div>
        </div>

        {{-- 4. Spostamenti suggeriti --}}
        <div class="card">
            <div class="card-header"><h3 class="card-title">Spostamenti suggeriti</h3></div>
            <div class="card-body">
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Lo spostamento vale dal prossimo login. I file in storage sono per nodo: il comportamento dei file di un utente spostato non è verificato.
                </div>

                @if(empty($panoramica['suggerimenti']))
                    <p class="text-muted mb-0">Nessuno spostamento suggerito.</p>
                @else
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped table-hover table-sm mb-0">
                            <thead>
                                <tr>
                                    <th scope="col">Utente</th>
                                    <th scope="col">Richieste 7 giorni</th>
                                    <th scope="col">Da → a</th>
                                    @can('edit-users')
                                        <th scope="col">Azione</th>
                                    @endcan
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($panoramica['suggerimenti'] as $mossa)
                                    <tr wire:key="suggerimento-{{ $mossa['user_id'] }}">
                                        <td>
                                            <strong>{{ $mossa['name'] }}</strong><br>
                                            <small>{{ $mossa['email'] }}</small>
                                        </td>
                                        <td>{{ number_format($mossa['richieste'], 0, ',', '.') }}</td>
                                        <td>{{ $nomiServer[$mossa['da']] ?? $mossa['da'] }} → {{ $nomiServer[$mossa['a']] ?? $mossa['a'] }}</td>
                                        @can('edit-users')
                                            <td>
                                                <button type="button" class="btn btn-primary btn-xs"
                                                        wire:click="spostaUtente({{ $mossa['user_id'] }}, {{ Js::from($mossa['a']) }})"
                                                        wire:confirm="Spostare l'utente su {{ $nomiServer[$mossa['a']] ?? $mossa['a'] }}? Lo spostamento vale dal prossimo login.">
                                                    Sposta
                                                </button>
                                            </td>
                                        @endcan
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>

        {{-- 5. Filtro per le due tabelle seguenti --}}
        <div class="form-group">
            <label for="uo-filtro-server">Filtra le tabelle per server</label>
            <select id="uo-filtro-server" class="form-control form-control-sm w-auto" wire:model.live="filtroServer">
                <option value="">Tutti i server</option>
                @foreach($nomiServer as $hostname => $nome)
                    <option value="{{ $hostname }}">{{ $nome }}</option>
                @endforeach
                <option value="__sconosciuto__">Server sconosciuto</option>
            </select>
        </div>
    @endif

    {{-- 6. Online adesso --}}
    <div class="card">
        <div class="card-header"><h3 class="card-title">Online adesso ({{ count($onlineFiltrati) }})</h3></div>
        <div class="card-body">
            @if(empty($onlineFiltrati))
                <p class="text-muted mb-0">Nessun utente online.</p>
            @else
                <div class="table-responsive">
                    <table class="table table-bordered table-striped table-hover table-sm mb-0">
                        <thead>
                            <tr>
                                <th scope="col">Utente</th>
                                <th scope="col">Su quale server è</th>
                                <th scope="col">Server assegnato</th>
                                <th scope="col">IP</th>
                                <th scope="col">Ultima attività</th>
                                <th scope="col">Azioni</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($onlineFiltrati as $utente)
                                <tr wire:key="online-{{ $utente['id'] }}">
                                    <td>
                                        <strong>{{ $utente['name'] }}</strong><br>
                                        <small>{{ $utente['email'] }}</small>
                                    </td>
                                    <td>{{ $utente['current_server_name'] ?? 'Sconosciuto' }}</td>
                                    <td>
                                        {{ $utente['server_name'] }}
                                        @if($utente['fuori_posto'])
                                            <span class="badge badge-warning" title="L'utente lavora su un server diverso da quello assegnato: l'assegnazione vale dal prossimo login.">
                                                <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> fuori posto
                                            </span>
                                        @endif
                                    </td>
                                    <td><code class="small">{{ $utente['ip_address'] }}</code></td>
                                    <td>
                                        <small>{{ $utente['last_activity']->diffForHumans() }}</small><br>
                                        <small class="text-muted">{{ $utente['last_activity']->format('H:i:s') }}</small>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-danger btn-xs"
                                                wire:click="invalidateSessions({{ $utente['id'] }})"
                                                wire:confirm="Sei sicuro di voler invalidare tutte le sessioni di questo utente?\n\nL'utente verrà disconnesso e dovrà effettuare nuovamente il login."
                                                title="Invalida tutte le sessioni di questo utente"
                                                aria-label="Invalida tutte le sessioni di questo utente">
                                            <i class="fas fa-ban" aria-hidden="true"></i>
                                        </button>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>
    </div>

    {{-- 7. Utenti più pesanti --}}
    @if(!empty($servers))
        <div class="card">
            <div class="card-header"><h3 class="card-title">Utenti più pesanti (7 giorni)</h3></div>
            <div class="card-body">
                @if(empty($topFiltrati))
                    <p class="text-muted mb-0">Nessun utente da mostrare.</p>
                @else
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped table-hover table-sm mb-0">
                            <thead>
                                <tr>
                                    <th scope="col">Utente</th>
                                    <th scope="col">Richieste</th>
                                    <th scope="col">Server effettivo</th>
                                    <th scope="col">Server assegnato</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($topFiltrati as $utente)
                                    <tr wire:key="top-{{ $utente['id'] }}-{{ $utente['assigned_server'] }}">
                                        <td>
                                            <strong>{{ $utente['name'] }}</strong><br>
                                            <small>{{ $utente['email'] }}</small>
                                        </td>
                                        <td>{{ number_format($utente['richieste'], 0, ',', '.') }}</td>
                                        <td>{{ $nomiServer[$utente['server_effettivo']] ?? $utente['server_effettivo'] ?? 'Sconosciuto' }}</td>
                                        <td>
                                            @can('edit-users')
                                                <select wire:change="spostaUtente({{ $utente['id'] }}, $event.target.value)"
                                                        class="form-control form-control-sm"
                                                        aria-label="Server assegnato a {{ $utente['name'] }}">
                                                    <option value="" {{ $utente['assigned_server'] === null ? 'selected' : '' }}>Nessuna restrizione</option>
                                                    @foreach($nomiServer as $hostname => $nome)
                                                        <option value="{{ $hostname }}" {{ $utente['assigned_server'] === $hostname ? 'selected' : '' }}>{{ $nome }}</option>
                                                    @endforeach
                                                </select>
                                            @else
                                                {{ $utente['assigned_server'] === null ? 'Nessuna restrizione' : ($nomiServer[$utente['assigned_server']] ?? $utente['assigned_server']) }}
                                            @endcan
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @endif
            </div>
        </div>
    @endif

    <p class="small text-muted">
        <i class="fas fa-sync-alt mr-1" aria-hidden="true"></i>
        Aggiornamento automatico ogni {{ $refreshInterval }} secondi
    </p>
</div>