@php
    $displayName = $event->name ?: ($event->after_data['name'] ?? $event->before_data['name'] ?? __('devices.contacts.no_name'));
    $label = match ($event->action) {
        'added' => __('devices.contacts.event_added'),
        'updated' => __('devices.contacts.event_updated'),
        'deleted' => __('devices.contacts.event_deleted'),
        default => __('devices.contacts.event_changed'),
    };
    $badgeStyle = match ($event->action) {
        'added' => 'background-color:#059669;color:#fff;border-color:#059669;margin-right:0.5rem',
        'updated' => 'background-color:#d97706;color:#fff;border-color:#d97706;margin-right:0.5rem',
        'deleted' => 'background-color:#dc2626;color:#fff;border-color:#dc2626;margin-right:0.5rem',
        default => 'background-color:#64748b;color:#fff;border-color:#64748b;margin-right:0.5rem',
    };
    $displayPhone = match ($event->action) {
        'deleted' => $event->before_data['phoneNo'] ?? $event->phone_no,
        default => $event->after_data['phoneNo'] ?? $event->phone_no,
    };
    $displayPhone = $displayPhone ? trim((string) $displayPhone) : null;
    $beforeName = $event->before_data['name'] ?? null;
    $afterName = $event->after_data['name'] ?? null;
    $beforePhone = $event->before_data['phoneNo'] ?? null;
    $afterPhone = $event->after_data['phoneNo'] ?? null;
    $nameChanged = $event->action === 'updated' && trim((string) $beforeName) !== trim((string) $afterName);
    $phoneChanged = $event->action === 'updated' && trim((string) $beforePhone) !== trim((string) $afterPhone);
@endphp

<div class="flex-1 min-w-0">
    <div class="flex flex-wrap items-center" style="row-gap:0.25rem">
        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-semibold border shrink-0"
              style="{{ $badgeStyle }}">
            {{ $event->actionLabel() }}
        </span>
        <p class="text-sm text-gray-900 inline flex flex-wrap items-center min-w-0" style="column-gap:0.375rem;row-gap:0.125rem">
            <span>{{ $label }}:</span>
            @if(isset($device))
                <x-contact-link
                    :device="$device"
                    :contact="$linkedContact ?? null"
                    :name="$displayName"
                    :phone="$displayPhone"
                    :contact-index="$contactIndex ?? []"
                    class="font-semibold text-indigo-700 hover:text-indigo-900 hover:underline"
                />
            @else
                <span class="font-semibold text-indigo-700">{{ $displayName }}</span>
            @endif
            @if($displayPhone)
                @php $phoneUrl = isset($device) ? \App\Support\ContactResolver::profileUrl($device, $displayPhone, $linkedContact ?? null) : null; @endphp
                @if($phoneUrl)
                    <a href="{{ $phoneUrl }}"
                       class="inline-flex items-center px-2 py-0.5 rounded text-xs font-mono font-medium border border-gray-300 bg-gray-100 text-gray-800 hover:bg-gray-200"
                       style="margin-left:0.25rem">
                        {{ $displayPhone }}
                    </a>
                @else
                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-mono font-medium border border-gray-300 bg-gray-100 text-gray-800"
                          style="margin-left:0.25rem">
                        {{ $displayPhone }}
                    </span>
                @endif
            @endif
        </p>
        <time class="text-xs text-gray-500 whitespace-nowrap shrink-0 ml-auto"
              datetime="{{ $event->occurred_at->toIso8601String() }}"
              title="{{ $event->occurred_at->format('d/m/Y H:i:s') }}">
            {{ $event->occurred_at->format('d/m/Y H:i') }}
        </time>
    </div>

    @if($event->action === 'updated' && ($nameChanged || $phoneChanged))
        <div class="mt-3 grid md:grid-cols-2 gap-3">
            <div class="rounded-md bg-red-50 border border-red-100 p-3">
                <p class="text-xs font-semibold text-red-800 mb-1">{{ __('devices.contacts.before') }}</p>
                <p class="text-xs text-red-900"><strong>{{ __('devices.contacts.field_name') }}:</strong> {{ $event->before_data['name'] ?? '—' }}</p>
                <p class="text-xs text-red-900"><strong>{{ __('devices.contacts.field_phone') }}:</strong> {{ $event->before_data['phoneNo'] ?? '—' }}</p>
            </div>
            <div class="rounded-md bg-green-50 border border-green-100 p-3">
                <p class="text-xs font-semibold text-green-800 mb-1">{{ __('devices.contacts.after') }}</p>
                <p class="text-xs text-green-900"><strong>{{ __('devices.contacts.field_name') }}:</strong> {{ $event->after_data['name'] ?? '—' }}</p>
                <p class="text-xs text-green-900"><strong>{{ __('devices.contacts.field_phone') }}:</strong> {{ $event->after_data['phoneNo'] ?? '—' }}</p>
            </div>
        </div>
    @endif
</div>