@php
    $summary = $this->diagnosticSummary();
    $blockers = $summary['blockers'];
@endphp

<x-filament-panels::page>
    <div class="space-y-6">
        <x-filament::section
            :heading="$summary['headline']"
            :description="$summary['body']"
        >
            <x-slot name="afterHeader">
                <x-filament::badge :color="$summary['color']" size="sm">
                    {{ $summary['status'] }}
                </x-filament::badge>
            </x-slot>

            <div class="space-y-4">
                <dl class="grid grid-cols-1 gap-4 text-sm md:grid-cols-2">
                    <div class="space-y-1">
                        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                            Impact
                        </dt>
                        <dd class="leading-6 text-gray-950 dark:text-white">
                            {{ $summary['impact'] }}
                        </dd>
                    </div>
                    <div class="space-y-1">
                        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                            Recommended first check
                        </dt>
                        <dd class="leading-6 text-gray-950 dark:text-white">
                            {{ $summary['next_check'] }}
                        </dd>
                    </div>
                </dl>

                @if ($summary['primary_action_label'] !== null)
                    <div class="flex flex-wrap items-center gap-2 text-sm">
                        <x-filament::badge color="warning" size="sm">
                            Primary repair path
                        </x-filament::badge>
                        <span class="font-medium text-gray-950 dark:text-white">
                            {{ $summary['primary_action_label'] }}
                        </span>

                        @if ($summary['secondary_action_label'] !== null)
                            <x-filament::badge color="gray" size="sm">
                                Secondary repair path
                            </x-filament::badge>
                            <span class="font-medium text-gray-700 dark:text-gray-200">
                                {{ $summary['secondary_action_label'] }}
                            </span>
                        @endif
                    </div>
                @endif
            </div>
        </x-filament::section>

        @foreach ($blockers as $blocker)
            <x-filament::section
                :heading="$blocker['label']"
                :description="$blocker['failed_condition']"
                compact
            >
                <x-slot name="afterHeader">
                    <x-filament::badge
                        :color="$blocker['action_role'] === 'Primary repair path' ? 'warning' : 'gray'"
                        size="sm"
                    >
                        {{ $blocker['action_role'] }}
                    </x-filament::badge>
                </x-slot>

                <dl class="grid grid-cols-1 gap-3 text-sm md:grid-cols-3">
                    <div class="space-y-1 md:col-span-1">
                        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                            Repair action
                        </dt>
                        <dd class="font-medium text-gray-950 dark:text-white">
                            {{ $blocker['action_label'] }}
                        </dd>
                    </div>
                    <div class="space-y-1 md:col-span-1">
                        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                            Impact
                        </dt>
                        <dd class="leading-6 text-gray-700 dark:text-gray-200">
                            {{ $blocker['impact'] }}
                        </dd>
                    </div>
                    <div class="space-y-1 md:col-span-1">
                        <dt class="text-xs font-medium uppercase tracking-wide text-gray-500 dark:text-gray-400">
                            Next check
                        </dt>
                        <dd class="leading-6 text-gray-700 dark:text-gray-200">
                            {{ $blocker['next_check'] }}
                        </dd>
                    </div>
                </dl>
            </x-filament::section>
        @endforeach
    </div>
</x-filament-panels::page>