@extends('layouts.monitor')

@section('title', 'Network Dashboard')
@section('refresh', '60')

@section('content')
<div class="mb-8">
    <p class="text-cyan-400 font-semibold tracking-wide uppercase text-sm">Network Operations</p>
    <h1 class="text-3xl font-bold mt-1">Device health dashboard</h1>
    <p class="text-slate-400 mt-2">Auto-refreshes every 60 seconds.</p>
</div>

<div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
    @php
        $cards = [
            ['Total', $counts->total ?? 0, 'text-white'],
            ['Online', $counts->online ?? 0, 'text-emerald-400'],
            ['Offline', $counts->offline ?? 0, 'text-rose-400'],
            ['Warning', $counts->warning ?? 0, 'text-amber-400'],
            ['Unknown', $counts->unknown ?? 0, 'text-slate-400'],
        ];
    @endphp
    @foreach($cards as [$label, $value, $color])
        <div class="rounded-2xl border border-slate-800 bg-slate-900 p-5">
            <div class="text-slate-400 text-sm">{{ $label }}</div>
            <div class="text-3xl font-bold mt-2 {{ $color }}">{{ $value }}</div>
        </div>
    @endforeach
</div>

<div class="grid lg:grid-cols-3 gap-6">
    <section class="lg:col-span-2 rounded-2xl border border-slate-800 bg-slate-900 overflow-hidden">
        <div class="px-5 py-4 border-b border-slate-800 flex justify-between">
            <h2 class="font-semibold">Device status</h2>
            <a href="{{ route('monitor.devices.index') }}" class="text-cyan-400 text-sm">Manage devices</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="text-slate-400 bg-slate-900">
                    <tr>
                        <th class="text-left px-5 py-3">Device</th>
                        <th class="text-left px-5 py-3">Location</th>
                        <th class="text-left px-5 py-3">Status</th>
                        <th class="text-left px-5 py-3">Response</th>
                        <th class="text-left px-5 py-3">Last check</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-800">
                @forelse($devices as $device)
                    @php
                        $statusClasses = match($device->status) {
                            'online' => 'bg-emerald-950 text-emerald-300 border-emerald-800',
                            'offline' => 'bg-rose-950 text-rose-300 border-rose-800',
                            'warning' => 'bg-amber-950 text-amber-300 border-amber-800',
                            default => 'bg-slate-800 text-slate-300 border-slate-700',
                        };
                    @endphp
                    <tr class="hover:bg-slate-800/50">
                        <td class="px-5 py-4">
                            <div class="font-semibold">{{ $device->name }}</div>
                            <div class="text-slate-500">{{ $device->host }}{{ $device->port ? ':'.$device->port : '' }}</div>
                        </td>
                        <td class="px-5 py-4 text-slate-300">{{ $device->location ?: '—' }}</td>
                        <td class="px-5 py-4">
                            <span class="inline-flex px-2.5 py-1 rounded-full border text-xs font-semibold {{ $statusClasses }}">
                                {{ strtoupper($device->status) }}
                            </span>
                        </td>
                        <td class="px-5 py-4">{{ $device->last_response_ms ? $device->last_response_ms.' ms' : '—' }}</td>
                        <td class="px-5 py-4 text-slate-400">{{ $device->last_checked_at?->diffForHumans() ?: 'Never' }}</td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-5 py-10 text-center text-slate-500">No devices added yet.</td></tr>
                @endforelse
                </tbody>
            </table>
        </div>
        <div class="p-4">{{ $devices->links() }}</div>
    </section>

    <section class="rounded-2xl border border-slate-800 bg-slate-900">
        <div class="px-5 py-4 border-b border-slate-800"><h2 class="font-semibold">Recent incidents</h2></div>
        <div class="divide-y divide-slate-800">
        @forelse($incidents as $incident)
            <div class="p-5">
                <div class="flex items-start justify-between gap-3">
                    <div>
                        <div class="font-semibold">{{ $incident->device->name }}</div>
                        <div class="text-sm text-slate-500 mt-1">{{ $incident->started_at->format('d M, h:i A') }}</div>
                    </div>
                    @if($incident->resolved_at)
                        <span class="text-xs text-emerald-400">RESOLVED</span>
                    @else
                        <span class="text-xs text-rose-400">ACTIVE</span>
                    @endif
                </div>
                <p class="text-sm text-slate-400 mt-3 line-clamp-2">{{ $incident->last_error }}</p>
            </div>
        @empty
            <div class="p-8 text-center text-slate-500">No incidents.</div>
        @endforelse
        </div>
    </section>
</div>
@endsection