@extends('layouts.app')

@section('title', 'Dashboard')
@section('heading', 'Dashboard')

@section('content')
<div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
    @foreach([
        ['label' => 'VMs gesamt', 'value' => $stats['vms_total'], 'color' => 'text-white'],
        ['label' => 'Aktiv', 'value' => $stats['vms_active'], 'color' => 'text-emerald-400'],
        ['label' => 'In Bereitstellung', 'value' => $stats['vms_pending'], 'color' => 'text-amber-400'],
        ['label' => 'Fehlgeschlagen', 'value' => $stats['vms_failed'], 'color' => 'text-red-400'],
    ] as $card)
    <div class="rounded-xl border border-slate-800 bg-slate-900/60 p-5">
        <p class="text-sm text-slate-400">{{ $card['label'] }}</p>
        <p class="mt-2 text-3xl font-bold {{ $card['color'] }}">{{ $card['value'] }}</p>
    </div>
    @endforeach
</div>

@if($usersCount !== null)
<div class="mt-4 rounded-xl border border-slate-800 bg-slate-900/60 p-4 text-sm text-slate-400">
    Registrierte Benutzer: <span class="font-medium text-white">{{ $usersCount }}</span>
</div>
@endif

<div class="mt-8 grid gap-6 lg:grid-cols-2">
    <section class="rounded-xl border border-slate-800 bg-slate-900/60 p-6">
        <h2 class="mb-4 text-lg font-semibold">IP-Pools</h2>
        <div class="space-y-3">
            @forelse($pools as $pool)
            <div>
                <div class="flex justify-between text-sm">
                    <span>{{ $pool->name }} <span class="text-slate-500">({{ $pool->type->label() }})</span></span>
                    <span class="text-slate-400">{{ $pool->usedIpsCount() }}/{{ $pool->totalIps() }}</span>
                </div>
                <div class="mt-1 h-2 overflow-hidden rounded-full bg-slate-800">
                    @php $pct = $pool->totalIps() > 0 ? ($pool->usedIpsCount() / $pool->totalIps()) * 100 : 0; @endphp
                    <div class="h-full rounded-full {{ $pool->type->value === 'public' ? 'bg-violet-500' : 'bg-cyan-500' }}" style="width: {{ min(100, $pct) }}%"></div>
                </div>
            </div>
            @empty
            <p class="text-sm text-slate-500">Keine IP-Pools konfiguriert.</p>
            @endforelse
        </div>
        <a href="{{ route('ip-pools.index') }}" class="mt-4 inline-block text-sm text-cyan-400 hover:underline">Alle Pools anzeigen →</a>
    </section>

    <section class="rounded-xl border border-slate-800 bg-slate-900/60 p-6">
        <div class="mb-4 flex items-center justify-between">
            <h2 class="text-lg font-semibold">Letzte VMs</h2>
            <a href="{{ route('vms.create') }}" class="rounded-lg bg-cyan-600 px-3 py-1.5 text-sm font-medium hover:bg-cyan-500">+ Neue VM</a>
        </div>
        <div class="divide-y divide-slate-800">
            @forelse($recentVms as $vm)
            <a href="{{ route('vms.show', $vm) }}" class="flex items-center justify-between py-3 hover:bg-slate-800/30 -mx-2 px-2 rounded-lg transition">
                <div>
                    <p class="font-medium">{{ $vm->name }}</p>
                    <p class="text-xs text-slate-500">{{ $vm->domain ?? 'Kein Traefik' }} · {{ $vm->ip_address ?? '—' }}</p>
                </div>
                @include('partials.status-badge', ['status' => $vm->status])
            </a>
            @empty
            <p class="py-4 text-sm text-slate-500">Noch keine VMs.</p>
            @endforelse
        </div>
    </section>
</div>
@endsection