@php
    $diff = $getState() ?? ['summary' => [], 'added' => [], 'removed' => [], 'changed' => []];
    $summary = $diff['summary'] ?? [];
@endphp

<div class="space-y-3">
    <div class="text-sm font-semibold text-gray-800">Normalized diff</div>
    <div class="text-xs text-gray-600">
        {{ $summary['message'] ?? sprintf('%d added, %d removed, %d changed', $summary['added'] ?? 0, $summary['removed'] ?? 0, $summary['changed'] ?? 0) }}
    </div>

    @foreach (['added' => 'Added', 'removed' => 'Removed', 'changed' => 'Changed'] as $key => $label)
        @php
            $items = $diff[$key] ?? [];
        @endphp

        @if (! empty($items))
            <div>
                <div class="text-xs font-semibold uppercase tracking-wide text-gray-500">{{ $label }}</div>
                <ul class="mt-1 space-y-1">
                    @foreach ($items as $name => $value)
                        <li class="rounded border border-gray-100 bg-gray-50 p-2 text-sm text-gray-800">
                            <span class="font-medium">{{ $name }}</span>:
                            @if (is_array($value))
                                <pre class="mt-1 overflow-x-auto text-xs">{{ json_encode($value, JSON_PRETTY_PRINT) }}</pre>
                            @else
                                <span>{{ is_bool($value) ? ($value ? 'true' : 'false') : (string) $value }}</span>
                            @endif
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    @endforeach
</div>