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

@section('content')
<div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-5 gap-4">
    <div class="rounded-2xl bg-slate-900 text-white p-5"><div class="text-sm text-slate-300">Total Routers</div><div class="text-3xl font-bold mt-2">{{ $stats['routers_total'] }}</div></div>
    <div class="rounded-2xl bg-emerald-600 text-white p-5"><div class="text-sm text-emerald-100">Online</div><div class="text-3xl font-bold mt-2">{{ $stats['routers_online'] }}</div></div>
    <div class="rounded-2xl bg-rose-600 text-white p-5"><div class="text-sm text-rose-100">Offline</div><div class="text-3xl font-bold mt-2">{{ $stats['routers_offline'] }}</div></div>
    <div class="rounded-2xl bg-amber-500 text-white p-5"><div class="text-sm text-amber-50">Open Alerts</div><div class="text-3xl font-bold mt-2">{{ $stats['alerts_open'] }}</div></div>
    <div class="rounded-2xl bg-sky-600 text-white p-5"><div class="text-sm text-sky-100">Backups Today</div><div class="text-3xl font-bold mt-2">{{ $stats['backups_today'] }}</div></div>
</div>

<div class="grid grid-cols-1 xl:grid-cols-3 gap-6 mt-6">
    <div class="xl:col-span-2 rounded-3xl border border-slate-200 p-6">
        <h2 class="font-bold text-lg mb-4">Recent Router Activity</h2>
        <div class="space-y-3">
            @forelse($routers as $router)
                <div class="flex items-center justify-between rounded-2xl bg-slate-50 border border-slate-200 p-4">
                    <div>
                        <div class="font-semibold">{{ $router->name }}</div>
                        <div class="text-sm text-slate-500">{{ $router->location }} • {{ $router->model }}</div>
                    </div>
                    <span class="px-3 py-1 rounded-full text-xs font-semibold {{ $router->status === 'online' ? 'bg-emerald-100 text-emerald-700' : ($router->status === 'offline' ? 'bg-rose-100 text-rose-700' : 'bg-amber-100 text-amber-700') }}">
                        {{ strtoupper($router->status) }}
                    </span>
                </div>
            @empty
                <div class="text-slate-500">No routers yet.</div>
            @endforelse
        </div>
    </div>

    <div class="rounded-3xl border border-slate-200 p-6">
        <h2 class="font-bold text-lg mb-4">Latest Alerts</h2>
        <div class="space-y-3">
            @forelse($recentAlerts as $alert)
                <div class="rounded-2xl border border-slate-200 p-4">
                    <div class="font-semibold">{{ $alert->title }}</div>
                    <div class="text-sm text-slate-500 mt-1">{{ $alert->message }}</div>
                    <div class="text-xs text-slate-400 mt-2">{{ $alert->triggered_at?->diffForHumans() }}</div>
                </div>
            @empty
                <div class="text-slate-500">No active alerts.</div>
            @endforelse
        </div>
    </div>
</div>

<div class="mt-6 rounded-3xl border border-slate-200 p-6">
    <h2 class="font-bold text-lg mb-4">Traffic Samples</h2>
    <div class="overflow-x-auto">
        <table class="min-w-full text-sm">
            <thead>
                <tr class="text-left text-slate-500">
                    <th class="pb-3">Recorded</th>
                    <th class="pb-3">RX (bps)</th>
                    <th class="pb-3">TX (bps)</th>
                    <th class="pb-3">CPU</th>
                    <th class="pb-3">Memory</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @foreach($traffic as $metric)
                <tr>
                    <td class="py-3">{{ $metric->recorded_at }}</td>
                    <td class="py-3">{{ number_format($metric->rx_bps) }}</td>
                    <td class="py-3">{{ number_format($metric->tx_bps) }}</td>
                    <td class="py-3">{{ $metric->cpu_usage }}%</td>
                    <td class="py-3">{{ $metric->memory_usage }}%</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endsection