@php
    use App\Support\Ui\EnterpriseDetail\FactPresentation;

    $items = $items ?? [];
    $items = is_array($items) ? array_values(array_filter($items, 'is_array')) : [];
    $action = $action ?? null;
    $action = is_array($action) ? $action : null;
    $variant = is_string($variant ?? null) && trim($variant) !== '' ? trim($variant) : 'default';
    $gridClasses = match ($variant) {
        'header' => 'grid gap-3 sm:grid-cols-2 xl:grid-cols-4',
        'summary' => 'grid gap-3 lg:grid-cols-2',
        'supporting' => 'grid gap-3 sm:grid-cols-2',
        'diagnostic' => 'grid gap-3 sm:grid-cols-2 xl:grid-cols-4',
        'technical' => 'grid gap-3 sm:grid-cols-2 xl:grid-cols-3',
        default => 'grid gap-3 sm:grid-cols-2',
    };
    $cardClasses = match ($variant) {
        'summary' => 'rounded-2xl border border-gray-200 bg-white px-4 py-4 shadow-sm dark:border-gray-800 dark:bg-gray-900',
        default => 'rounded-xl border border-gray-200 bg-gray-50/70 px-4 py-3 dark:border-gray-800 dark:bg-gray-950/30',
    };
@endphp

<div class="space-y-4">
    <div class="{{ $gridClasses }}">
        @foreach ($items as $item)
            @php
                $displayValue = FactPresentation::value($item);
                $badge = is_array($item['badge'] ?? null) ? $item['badge'] : null;
                $tone = is_string($item['tone'] ?? null) ? $item['tone'] : null;
                $mono = (bool) ($item['mono'] ?? false);
                $toneValueClasses = match ($tone) {
                    'danger' => 'text-danger-600 dark:text-danger-400',
                    'success' => 'text-success-600 dark:text-success-400',
                    'warning' => 'text-warning-600 dark:text-warning-400',
                    default => 'text-gray-900 dark:text-white',
                };
            @endphp

            <div class="{{ $cardClasses }}">
                <div class="text-xs font-semibold uppercase tracking-[0.16em] text-gray-500 dark:text-gray-400">
                    {{ $item['label'] ?? 'Detail' }}
                </div>
                <div class="mt-2 flex min-w-0 flex-wrap items-center gap-2 text-sm font-medium {{ $toneValueClasses }}">
                    @if ($displayValue !== null)
                        <span class="min-w-0 break-all whitespace-normal {{ $mono ? 'font-mono text-xs' : '' }}">{{ $displayValue }}</span>
                    @endif

                    @if ($badge !== null)
                        <x-filament::badge
                            :color="$badge['color'] ?? 'gray'"
                            :icon="$badge['icon'] ?? null"
                            :icon-color="$badge['iconColor'] ?? null"
                            size="sm"
                        >
                            {{ $badge['label'] ?? 'State' }}
                        </x-filament::badge>
                    @endif
                </div>

                @if (filled($item['hint'] ?? null))
                    <div class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                        {{ $item['hint'] }}
                    </div>
                @endif
            </div>
        @endforeach
    </div>

    @if ($action !== null && filled($action['url'] ?? null))
        <div>
            @if (($action['openInNewTab'] ?? false) === true)
                <x-filament::link
                    :href="$action['url']"
                    :icon="$action['icon'] ?? null"
                    size="sm"
                    target="_blank"
                    rel="noreferrer noopener"
                >
                    {{ $action['label'] }}
                </x-filament::link>
            @else
                <x-filament::link
                    :href="$action['url']"
                    :icon="$action['icon'] ?? null"
                    size="sm"
                >
                    {{ $action['label'] }}
                </x-filament::link>
            @endif
        </div>
    @endif
</div>