<x-filament-widgets::widget>
    <x-filament::section heading="Infra Status (Dokploy)">
        <div class="grid gap-4 md:grid-cols-2">
            @forelse($composes as $compose)
                <div class="rounded-2xl border border-slate-200/70 bg-white/80 p-4 shadow-sm dark:border-white/10 dark:bg-slate-900/60">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-sm font-semibold text-slate-600 dark:text-slate-200">{{ $compose['label'] }}</p>
                            <p class="text-xs text-slate-500 dark:text-slate-400">{{ $compose['name'] ?? '–' }}</p>
                            <p class="text-[11px] text-slate-400 dark:text-slate-500">{{ $compose['compose_id'] }}</p>
                        </div>
                        <span @class([
                            'rounded-full px-3 py-1 text-xs font-semibold',
                            'bg-emerald-100 text-emerald-800' => $compose['status'] === 'done',
                            'bg-amber-100 text-amber-800' => in_array($compose['status'], ['deploying', 'pending']),
                            'bg-rose-100 text-rose-800' => in_array($compose['status'], ['unreachable', 'error', 'failed']),
                            'bg-slate-100 text-slate-600' => ! in_array($compose['status'], ['done', 'deploying', 'pending', 'unreachable', 'error', 'failed']),
                        ])>
                            {{ ucfirst($compose['status']) }}
                        </span>
                    </div>

                    @if(isset($compose['error']))
                        <p class="mt-3 text-xs text-rose-600 dark:text-rose-400">{{ $compose['error'] }}</p>
                    @else
                        <div class="mt-3 space-y-1">
                            <p class="text-xs font-semibold text-slate-500 dark:text-slate-400">Services</p>
                            @forelse($compose['services'] as $service)
                                <div class="flex items-center justify-between rounded-lg bg-slate-50 px-3 py-1 text-[11px] font-medium text-slate-700 dark:bg-slate-800 dark:text-slate-200">
                                    <span>{{ $service['name'] }}</span>
                                    <span @class([
                                        'rounded-full px-2 py-0.5 text-[10px] uppercase tracking-wide',
                                        'bg-emerald-200/70 text-emerald-900' => in_array($service['status'], ['running', 'done']),
                                        'bg-amber-200/70 text-amber-900' => in_array($service['status'], ['starting', 'deploying']),
                                        'bg-rose-200/70 text-rose-900' => in_array($service['status'], ['error', 'failed', 'unhealthy']),
                                        'bg-slate-200/70 text-slate-900' => ! in_array($service['status'], ['running', 'done', 'starting', 'deploying', 'error', 'failed', 'unhealthy']),
                                    ])>
                                        {{ strtoupper($service['status'] ?? 'N/A') }}
                                    </span>
                                </div>
                            @empty
                                <p class="text-xs text-slate-500 dark:text-slate-400">No services reported.</p>
                            @endforelse
                        </div>
                        <p class="mt-3 text-xs text-slate-500 dark:text-slate-400">
                            Last deploy: {{ $compose['last_deploy'] ? \Illuminate\Support\Carbon::parse($compose['last_deploy'])->diffForHumans() : '—' }}
                        </p>
                    @endif
                </div>
            @empty
                <p class="text-sm text-slate-500 dark:text-slate-300">No Dokploy compose stacks configured.</p>
            @endforelse
        </div>
    </x-filament::section>
</x-filament-widgets::widget>
