@extends('layouts.app')
@section('title', 'Network performance')

@section('content')
    <div class="page-head">
        <div><h1>Network performance</h1><p>{{ $from->format('d M Y') }} – {{ $to->format('d M Y') }}</p></div>
    </div>

    <div class="grid grid-6 mb-2">
        @include('components.kpi', ['label' => 'Availability', 'value' => percent($summary['availability']),
            'variant' => $summary['availability'] >= 99.5 ? 'good' : 'warn', 'href' => '#'])
        @include('components.kpi', ['label' => 'Devices monitored', 'value' => number_format($summary['devices']), 'variant' => 'info', 'href' => '#'])
        @include('components.kpi', ['label' => 'Alerts raised', 'value' => number_format($summary['alerts']),
            'variant' => $summary['alerts'] > 0 ? 'warn' : 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'Critical alerts', 'value' => number_format($summary['critical']),
            'variant' => $summary['critical'] > 0 ? 'bad' : 'good', 'href' => '#'])
        @include('components.kpi', ['label' => 'Avg latency', 'value' => $summary['avg_latency'] ? number_format($summary['avg_latency'], 1).' ms' : '—', 'href' => '#'])
        @include('components.kpi', ['label' => 'Peak throughput', 'value' => human_bytes($summary['peak_throughput']).'/s', 'variant' => 'info', 'href' => '#'])
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Aggregate throughput</h3></div>
            <div class="card-body">
                @include('components.chart', [
                    'series' => collect($bandwidth)->map(fn ($b) => [
                        'label' => \Carbon\Carbon::parse($b['date'])->format('d M'),
                        'value' => $b['peak_bps'],
                    ])->all(),
                    'type' => 'line', 'format' => 'bytes', 'height' => 210,
                ])
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Alert volume</h3></div>
            <div class="card-body">
                @include('components.chart', [
                    'series' => collect($alertTrend)->map(fn ($a) => [
                        'label' => \Carbon\Carbon::parse($a['date'])->format('d M'),
                        'value' => $a['total'],
                    ])->all(),
                    'type' => 'bar', 'format' => 'number', 'height' => 210,
                ])
            </div>
        </div>
    </div>

    <div class="grid grid-2">
        <div class="card">
            <div class="card-head"><h3>Alert types</h3></div>
            <div class="card-body">
                @php $maxAlert = collect($alertTypes)->max('total') ?: 1; @endphp
                @forelse ($alertTypes as $type)
                    <div class="bar-row">
                        <span class="bar-label">{{ title_case_words($type['type']) }}</span>
                        <span class="bar-track">
                            <span class="bar-fill {{ $type['severity'] === 'critical' ? 'danger' : 'warn' }}"
                                  style="width: {{ ($type['total'] / $maxAlert) * 100 }}%"></span>
                        </span>
                        <span class="bar-value">{{ $type['total'] }}</span>
                    </div>
                @empty
                    <p class="small muted">No alerts raised in this period.</p>
                @endforelse
            </div>
        </div>

        <div class="card">
            <div class="card-head"><h3>Least reliable devices</h3></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Device</th><th class="num">Downtime</th><th class="num">Alerts</th><th class="num">Availability</th></tr></thead>
                        <tbody>
                        @forelse ($worstDevices as $device)
                            <tr>
                                <td class="small"><a href="{{ route('devices.show', $device['id']) }}">{{ $device['name'] }}</a></td>
                                <td class="num">{{ $device['downtime_minutes'] }} min</td>
                                <td class="num">{{ $device['alerts'] }}</td>
                                <td class="num">
                                    <span class="badge {{ $device['availability'] >= 99 ? 'success' : ($device['availability'] >= 95 ? 'warning' : 'danger') }}">
                                        {{ percent($device['availability']) }}
                                    </span>
                                </td>
                            </tr>
                        @empty
                            <tr><td colspan="4">@include('components.empty-state', ['icon' => '&#10003;', 'title' => 'All devices reliable'])</td></tr>
                        @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection