@php
    $summary = is_array($summary ?? null) ? $summary : [];
    $buckets = is_array($buckets ?? null) ? $buckets : [];
    $detailState = is_string($summary['detail_state'] ?? null) ? $summary['detail_state'] : 'no_gaps';
    $tableContext = is_string($searchId ?? null) && $searchId !== '' ? $searchId : 'evidence-gap-search';
@endphp

@if ($detailState === 'details_not_recorded' && $buckets === [])
    <div class="rounded-xl border border-warning-300 bg-warning-50/80 p-4 dark:border-warning-800 dark:bg-warning-950/30">
        <div class="space-y-1">
            <div class="text-sm font-semibold text-warning-950 dark:text-warning-100">
                {{ __('baseline-compare.evidence_gap_missing_details_title') }}
            </div>
            <p class="text-sm text-warning-900 dark:text-warning-200">
                {{ __('baseline-compare.evidence_gap_missing_details_body') }}
            </p>
        </div>
    </div>
@elseif ($buckets !== [])
    <div class="space-y-4">
        @if ($detailState === 'details_not_recorded')
            <div class="rounded-xl border border-warning-300 bg-warning-50/80 p-4 dark:border-warning-800 dark:bg-warning-950/30">
                <div class="space-y-1">
                    <div class="text-sm font-semibold text-warning-950 dark:text-warning-100">
                        {{ __('baseline-compare.evidence_gap_missing_details_title') }}
                    </div>
                    <p class="text-sm text-warning-900 dark:text-warning-200">
                        {{ __('baseline-compare.evidence_gap_missing_details_body') }}
                    </p>
                </div>
            </div>
        @endif

        <div class="grid gap-4 lg:grid-cols-2 xl:grid-cols-3">
            @foreach ($buckets as $bucket)
                @php
                    $reasonLabel = is_string($bucket['reason_label'] ?? null) ? $bucket['reason_label'] : 'Evidence gap';
                    $count = is_numeric($bucket['count'] ?? null) ? (int) $bucket['count'] : 0;
                    $recordedCount = is_numeric($bucket['recorded_count'] ?? null) ? (int) $bucket['recorded_count'] : 0;
                    $missingDetailCount = is_numeric($bucket['missing_detail_count'] ?? null) ? (int) $bucket['missing_detail_count'] : 0;
                @endphp

                <section class="rounded-xl border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-800 dark:bg-gray-900/70">
                    <div class="space-y-3">
                        <div class="space-y-1">
                            <h4 class="text-sm font-semibold text-gray-950 dark:text-white">
                                {{ $reasonLabel }}
                            </h4>
                            <p class="text-xs text-gray-500 dark:text-gray-400">
                                {{ __('baseline-compare.evidence_gap_bucket_help') }}
                            </p>
                        </div>

                        <div class="flex flex-wrap gap-2">
                            <span class="inline-flex items-center rounded-full bg-warning-100 px-2.5 py-1 text-xs font-medium text-warning-900 dark:bg-warning-900/40 dark:text-warning-100">
                                {{ __('baseline-compare.evidence_gap_reason_affected', ['count' => $count]) }}
                            </span>
                            <span class="inline-flex items-center rounded-full bg-primary-100 px-2.5 py-1 text-xs font-medium text-primary-900 dark:bg-primary-900/40 dark:text-primary-100">
                                {{ __('baseline-compare.evidence_gap_reason_recorded', ['count' => $recordedCount]) }}
                            </span>
                            @if ($missingDetailCount > 0)
                                <span class="inline-flex items-center rounded-full bg-gray-100 px-2.5 py-1 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-200">
                                    {{ __('baseline-compare.evidence_gap_reason_missing_detail', ['count' => $missingDetailCount]) }}
                                </span>
                            @endif
                        </div>

                        @if ($missingDetailCount > 0)
                            <div class="rounded-lg border border-gray-200 bg-gray-50 px-3 py-3 text-sm text-gray-700 dark:border-gray-800 dark:bg-gray-950/60 dark:text-gray-200">
                                {{ __('baseline-compare.evidence_gap_missing_reason_body', ['count' => $missingDetailCount]) }}
                            </div>
                        @endif
                    </div>
                </section>
            @endforeach
        </div>

        <div class="space-y-2">
            <div class="space-y-1">
                <h4 class="text-sm font-semibold text-gray-950 dark:text-white">
                    {{ __('baseline-compare.evidence_gap_search_label') }}
                </h4>
                <p class="text-xs text-gray-500 dark:text-gray-400">
                    {{ __('baseline-compare.evidence_gap_search_help') }}
                </p>
            </div>

            @livewire(
                \App\Livewire\BaselineCompareEvidenceGapTable::class,
                [
                    'buckets' => $buckets,
                    'context' => $tableContext,
                ],
                key('baseline-compare-evidence-gap-table-'.$tableContext)
            )
        </div>
    </div>
@endif