<div class="geofence-events-panel flex flex-col h-full" ...attributes>
    <div class="flex items-center justify-between px-4 py-2.5 border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center space-x-2">
            <FaIcon @icon="map-pin" class="text-blue-500 w-4 h-4" />
            <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Geofence Events</h3>
            {{#if this.events.length}}
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">
                    {{this.events.length}}
                </span>
            {{/if}}
        </div>
        <button
            type="button"
            class="text-[11px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
            {{on "click" this.clearFeed}}
        >
            Clear
        </button>
    </div>

    {{#if this.isLoading}}
        <div class="flex items-center justify-center py-8">
            <Spinner class="w-5 h-5 text-blue-500" />
            <span class="ml-2 text-sm text-gray-500">Loading events…</span>
        </div>
    {{else if (eq this.events.length 0)}}
        <div class="flex flex-col items-center justify-center py-10 px-4 text-center">
            <FaIcon @icon="map-pin" class="w-8 h-8 text-gray-300 dark:text-gray-600 mb-3" />
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">No geofence events yet</p>
            <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
                Events will appear here in real time as drivers and vehicles cross zone and service area boundaries.
            </p>
        </div>
    {{else}}
        <div class="flex-1 overflow-y-auto divide-y divide-gray-100 dark:divide-gray-800">
            {{#each this.events as |event|}}
                <div class="px-4 py-2.5 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors {{if event.isNew 'bg-blue-50 dark:bg-blue-900/10'}}">
                    <div class="flex items-start gap-2.5">
                        <div class="flex h-7 w-7 flex-shrink-0 items-center justify-center rounded-md bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-300">
                            <FaIcon @icon={{this.iconFor event.eventType}} @size="xs" />
                        </div>

                        <div class="min-w-0 flex-1">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0 flex-1">
                                    <div class="flex items-center gap-2 text-[11px] leading-4">
                                        <span class="inline-flex items-center rounded px-1.5 py-0.5 font-medium {{this.badgeColorFor event.eventType}}">
                                            {{this.labelFor event.eventType}}
                                        </span>
                                        <span class="inline-flex items-center gap-1 text-gray-400 dark:text-gray-500">
                                            <FaIcon @icon={{this.subjectIconFor event.subjectType}} @size="xs" />
                                            <span class="capitalize">{{event.subjectType}}</span>
                                        </span>
                                        <span class="text-gray-300 dark:text-gray-600">•</span>
                                        <span class="text-gray-500 dark:text-gray-400">{{this.geofenceTypeLabel event.geofenceType}}</span>
                                    </div>

                                    <div class="mt-1 flex items-center gap-1.5 text-sm leading-5">
                                        <span class="truncate font-medium text-gray-900 dark:text-white">{{event.subjectName}}</span>
                                        <FaIcon @icon="arrow-right" @size="xs" class="text-gray-300 dark:text-gray-600" />
                                        <span class="truncate text-gray-600 dark:text-gray-300">{{event.geofenceName}}</span>
                                    </div>

                                    <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-[11px] leading-4 text-gray-500 dark:text-gray-400">
                                        {{#if event.driverName}}
                                            {{#unless (eq event.subjectType "driver")}}
                                                <span class="inline-flex items-center gap-1">
                                                    <FaIcon @icon="id-card" @size="xs" class="text-gray-400" />
                                                    {{event.driverName}}
                                                </span>
                                            {{/unless}}
                                        {{/if}}

                                        {{#if event.vehiclePlate}}
                                            <span class="inline-flex items-center gap-1">
                                                <FaIcon @icon="car" @size="xs" class="text-gray-400" />
                                                {{event.vehiclePlate}}
                                            </span>
                                        {{/if}}

                                        {{#if event.orderPublicId}}
                                            <span class="inline-flex items-center gap-1">
                                                <FaIcon @icon="hashtag" @size="xs" class="text-gray-400" />
                                                {{event.orderPublicId}}
                                            </span>
                                        {{/if}}

                                        {{#if event.dwellMinutes}}
                                            <span class="inline-flex items-center gap-1">
                                                <FaIcon @icon="clock" @size="xs" class="text-gray-400" />
                                                {{event.dwellMinutes}} min
                                            </span>
                                        {{/if}}

                                        {{#if event.latitude}}
                                            {{#if event.longitude}}
                                                <span class="inline-flex items-center gap-1">
                                                    <FaIcon @icon="location-dot" @size="xs" class="text-gray-400" />
                                                    {{event.latitude}}, {{event.longitude}}
                                                </span>
                                            {{/if}}
                                        {{/if}}
                                    </div>
                                </div>

                                <div class="flex-shrink-0 text-right">
                                    <div class="text-[11px] leading-4 text-gray-500 dark:text-gray-400">
                                        {{format-date-fns event.occurredAt "dd MMM, HH:mm"}}
                                    </div>
                                    {{#if event.isNew}}
                                        <div class="mt-1 text-[10px] font-medium uppercase tracking-wide text-blue-500 dark:text-blue-300">
                                            Live
                                        </div>
                                    {{/if}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            {{/each}}
        </div>
    {{/if}}
</div>
