@extends('layouts.app')
@section('title', 'NOC')

@section('content')
    <div class="page-head">
        <div>
            <h1>Network Operations Centre</h1>
            <p id="noc-wall" data-refresh="{{ $refreshSeconds }}">
                Auto-refreshes every {{ $refreshSeconds }}s &middot; last poll {{ $lastPoll?->diffForHumans() ?? 'never' }}
            </p>
        </div>
        <div class="page-actions">
            <form method="POST" action="{{ route('noc.sweep') }}">@csrf
                <button type="submit" class="btn secondary">Poll all devices now</button>
            </form>
            <a href="{{ route('maintenance.index') }}" class="btn secondary">Open maintenance window</a>
            <a href="{{ route('devices.index') }}" class="btn">Device inventory</a>
        </div>
    </div>

    <div class="grid grid-6 mb-2">
        @include('components.kpi', ['label' => 'Devices up', 'value' => $counts['up'].' / '.$counts['total'],
            'variant' => $counts['down'] > 0 ? 'bad' : 'good', 'href' => route('devices.index', ['status' => 'up'])])
        @include('components.kpi', ['label' => 'Availability 30d', 'value' => percent($counts['availability']),
            'variant' => $counts['availability'] >= 99.5 ? 'good' : 'warn', 'href' => route('reports.network')])
        @include('components.kpi', ['label' => 'Active alerts', 'value' => $counts['alerts'],
            'variant' => $counts['alerts'] > 0 ? ($counts['critical'] > 0 ? 'bad' : 'warn') : 'good',
            'delta' => $counts['critical'].' critical', 'href' => route('alerts.index')])
        @include('components.kpi', ['label' => 'Online subscribers', 'value' => number_format($counts['online']),
            'variant' => 'good', 'href' => route('radius.sessions', ['online' => 1])])
        @include('components.kpi', ['label' => 'Aggregate throughput', 'value' => human_bytes($counts['throughput']).'/s',
            'variant' => 'info', 'href' => route('reports.network')])
        @include('components.kpi', ['label' => 'Sites', 'value' => $counts['sites'].' / '.$counts['sites_total'],
            'delta' => $counts['sites_total'] - $counts['sites'].' offline', 'href' => route('sites.index')])
    </div>

    <div class="grid grid-2">
        {{-- Alert feed --}}
        <div class="card">
            <div class="card-head">
                <h3>Alert feed</h3>
                <div class="btn-group">
                    <a href="{{ route('alerts.index', ['severity' => 'critical']) }}" class="btn ghost sm">Critical</a>
                    <a href="{{ route('alerts.index') }}" class="btn ghost sm">All</a>
                </div>
            </div>
            <div class="card-body">
                @if ($alerts->isNotEmpty())
                    <div class="timeline">
                        @foreach ($alerts as $alert)
                            <div class="timeline-item {{ $alert->severity === 'critical' ? 'bad' : ($alert->severity === 'warning' ? '' : '') }}">
                                <div class="t-head">
                                    <span class="badge {{ status_color($alert->severity === 'critical' ? 'terminated' : ($alert->severity === 'warning' ? 'grace' : 'pending')) }}">
                                        {{ $alert->severity }}
                                    </span>
                                    <a href="{{ route('alerts.index') }}">{{ $alert->title }}</a>
                                    @if ($alert->occurrences > 1)
                                        <span class="badge muted">&times;{{ $alert->occurrences }}</span>
                                    @endif
                                </div>
                                <div class="t-meta">
                                    {{ $alert->device?->name ?? $alert->site?->name ?? 'Network' }}
                                    &middot; <span data-time-ago="{{ $alert->created_at->toIso8601String() }}"></span>
                                    @if ($alert->first_triggered_at && $alert->first_triggered_at->ne($alert->created_at))
                                        &middot; first seen {{ $alert->first_triggered_at->diffForHumans() }}
                                    @endif
                                </div>
                                <div class="t-body">{{ $alert->description }}</div>
                                @if ($alert->ticket_id)
                                    <div class="t-body tiny muted">Ticket raised &middot; linked</div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @else
                    @include('components.empty-state', ['icon' => '&#10003;', 'title' => 'All clear',
                        'message' => 'No active alerts across the estate.'])
                @endif
            </div>
        </div>

        {{-- Bandwidth --}}
        <div class="card">
            <div class="card-head">
                <h3>Aggregate bandwidth — 24h</h3>
                <span class="sub">All monitored interfaces</span>
            </div>
            <div class="card-body">
                @include('components.chart', [
                    'series' => collect($bandwidth)->map(fn ($p) => [
                        'label' => \Carbon\Carbon::parse($p['sampled_at'])->format('H:i'),
                        'value' => $p['total_bps'],
                    ])->all(),
                    'type' => 'line', 'format' => 'bytes', 'height' => 210,
                ])
            </div>
        </div>
    </div>

    {{-- Sites --}}
    <div class="card">
        <div class="card-head">
            <h3>Sites</h3>
            <a href="{{ route('sites.index') }}" class="btn ghost sm">Manage &rarr;</a>
        </div>
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr><th>Site</th><th>Location</th><th>Type</th><th class="num">Devices</th><th class="num">Up</th><th>Status</th><th>Last poll</th></tr>
                    </thead>
                    <tbody>
                    @forelse ($sites as $site)
                        @php
                            $total = $site->devices->count();
                            $up = $site->devices->where('status', 'up')->count();
                        @endphp
                        <tr>
                            <td><a href="{{ route('sites.show', $site) }}" class="strong">{{ $site->name }}</a>
                                <div class="tiny muted mono">{{ $site->site_code }}</div></td>
                            <td class="small">{{ $site->city }}<div class="tiny muted">{{ $site->region }}</div></td>
                            <td><span class="badge muted">{{ title_case_words($site->type) }}</span></td>
                            <td class="num">{{ $total }}</td>
                            <td class="num {{ $up === $total ? '' : 'strong' }}">{{ $up }}</td>
                            <td><span class="badge {{ status_color($site->status) }}"><span class="dot"></span>{{ $site->status }}</span></td>
                            <td class="small muted">{{ $site->last_poll_at?->diffForHumans() ?? 'never' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="7">
                            @include('components.empty-state', ['icon' => '&#9873;', 'title' => 'No sites registered',
                                'action' => '<a href="'.route('sites.index').'" class="btn sm">Add a site</a>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Devices --}}
    <div class="card">
        <div class="card-head">
            <h3>Network devices</h3>
            <div class="btn-group">
                <a href="{{ route('devices.index', ['status' => 'down']) }}" class="btn ghost sm danger-text">Down only</a>
                <a href="{{ route('devices.index') }}" class="btn ghost sm">All &rarr;</a>
            </div>
        </div>
        <div class="card-body tight">
            <div class="table-wrap">
                <table class="data">
                    <thead>
                    <tr>
                        <th>Device</th><th>Role</th><th>Site</th><th>Management IP</th>
                        <th class="num">Latency</th><th class="num">Uptime</th><th>Status</th><th>Last poll</th><th></th>
                    </tr>
                    </thead>
                    <tbody>
                    @forelse ($devices as $device)
                        <tr>
                            <td>
                                <a href="{{ route('devices.show', $device) }}" class="strong">{{ $device->name }}</a>
                                <div class="tiny muted mono">{{ $device->model }} &middot; {{ $device->firmware_version }}</div>
                            </td>
                            <td><span class="badge info">{{ $device->role }}</span></td>
                            <td class="small">{{ $device->site?->name ?: '—' }}</td>
                            <td class="mono tiny">
                                <a href="#" data-copy="{{ $device->management_ip }}">{{ $device->management_ip }}</a>
                            </td>
                            <td class="num">
                                @if ($device->status === 'up' && $device->last_ping_ms !== null)
                                    <span class="badge {{ $device->last_ping_ms < 50 ? 'success' : ($device->last_ping_ms < 150 ? 'warning' : 'danger') }}">
                                        {{ number_format($device->last_ping_ms, 1) }} ms
                                    </span>
                                @else
                                    <span class="tiny muted">—</span>
                                @endif
                            </td>
                            <td class="num small">{{ $device->uptime_label }}</td>
                            <td><span class="badge {{ status_color($device->status) }}">
                                <span class="dot"></span>{{ $device->status }}</span></td>
                            <td class="small muted">{{ $device->last_polled_at?->diffForHumans() ?? 'never' }}</td>
                            <td class="right"><a href="{{ route('devices.show', $device) }}" class="btn xs secondary">Open</a></td>
                        </tr>
                    @empty
                        <tr><td colspan="9">
                            @include('components.empty-state', ['icon' => '&#9881;', 'title' => 'No devices registered',
                                'message' => 'Add your routers, OLTs, switches and APs to start monitoring.',
                                'action' => '<a href="'.route('devices.create').'" class="btn sm">+ Add device</a>'])
                        </td></tr>
                    @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {{-- Maintenance windows --}}
    @if ($maintenance->isNotEmpty())
        <div class="card">
            <div class="card-head"><h3>Maintenance windows</h3></div>
            <div class="card-body tight">
                <div class="table-wrap">
                    <table class="data">
                        <thead><tr><th>Title</th><th>Window</th><th>Scope</th><th>Owner</th><th>Status</th><th></th></tr></thead>
                        <tbody>
                        @foreach ($maintenance as $window)
                            <tr>
                                <td><strong>{{ $window->title }}</strong></td>
                                <td class="small nowrap">{{ $window->starts_at->format('d M H:i') }} – {{ $window->ends_at->format('d M H:i') }}</td>
                                <td class="small">{{ $window->scope_description }}</td>
                                <td class="small">{{ $window->createdBy?->name ?? '—' }}</td>
                                <td><span class="badge {{ status_color($window->status === 'completed' ? 'active' : $window->status) }}">{{ $window->status }}</span></td>
                                <td class="right">
                                    @if ($window->status === 'scheduled')
                                        <form method="POST" action="{{ route('maintenance.update', $window) }}">
                                            @csrf @method('PUT')
                                            <input type="hidden" name="status" value="in_progress">
                                            <button type="submit" class="btn xs secondary">Start</button>
                                        </form>
                                    @elseif ($window->status === 'in_progress')
                                        <form method="POST" action="{{ route('maintenance.update', $window) }}">
                                            @csrf @method('PUT')
                                            <input type="hidden" name="status" value="completed">
                                            <button type="submit" class="btn xs success">Complete</button>
                                        </form>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    @endif
@endsection