@php
    $items = $items ?? collect();
    $showDevice = $showDevice ?? false;
@endphp
<div class="space-y-0">
    @forelse($items as $item)
        <a href="{{ $item['url'] }}" class="flex gap-4 py-3 px-4 -mx-4 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800/50 transition group" target="_blank">
            <div class="flex-shrink-0 w-10 flex flex-col items-center">
                <span class="inline-flex items-center justify-center w-8 h-8 rounded-full text-sm font-medium
                    {{ $item['type'] === 'service' ? 'bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-400' : ($item['type'] === 'delivery' ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400' : ($item['type'] === 'quotation' ? 'bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400' : 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400')) }}">
                    {{ $item['type'] === 'service' ? '🔧' : ($item['type'] === 'delivery' ? '📦' : ($item['type'] === 'quotation' ? '📄' : '📋')) }}
                </span>
                @if(!$loop->last)
                    <div class="w-0.5 flex-1 min-h-[20px] bg-gray-200 dark:bg-gray-700 mt-1"></div>
                @endif
            </div>
            <div class="flex-1 min-w-0 pb-4">
                <div class="flex items-start justify-between gap-2">
                    <div>
                        <p class="text-sm font-medium text-gray-900 dark:text-white group-hover:text-primary-600">
                            @if($item['type'] === 'service')
                                Servicio #{{ $item['model']->id }}
                            @elseif($item['type'] === 'delivery')
                                Remito {{ $item['model']->number }}
                            @elseif($item['type'] === 'quotation')
                                Presupuesto {{ $item['model']->number }}
                            @else
                                {{ $item['model']->title }}
                            @endif
                        </p>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                            {{ $item['date']->format('d/m/Y H:i') }}
                            @if($showDevice)
                                @php
                                    $deviceLabel = $item['model']->device ?? $item['model']->service?->device ?? null;
                                @endphp
                                @if($deviceLabel)
                                    · {{ $deviceLabel->model_and_serial ?? 'Equipo' }}
                                @endif
                            @endif
                            @if($item['type'] === 'service')
                                — {{ ucfirst(str_replace('_', ' ', $item['model']->status ?? '')) }}
                            @elseif($item['type'] === 'quotation')
                                — {{ ucfirst($item['model']->status ?? '') }}
                            @elseif($item['type'] === 'delivery')
                                @if($item['model']->delivered_to)
                                    — Entregado a {{ $item['model']->delivered_to }}
                                @endif
                            @else
                                — {{ ucfirst($item['model']->priority ?? '') }}
                            @endif
                        </p>
                        @if($item['type'] === 'service' && !empty($item['model']->summary))
                            <p class="text-xs text-gray-600 dark:text-gray-300 mt-1 line-clamp-2">{{ \Str::limit($item['model']->summary, 80) }}</p>
                        @elseif($item['type'] === 'delivery' && ($item['model']->service ?? null))
                            <p class="text-xs text-gray-600 dark:text-gray-300 mt-1">Vinculado a Servicio #{{ $item['model']->service_id }}</p>
                        @endif
                    </div>
                    <span class="text-gray-400 group-hover:text-primary-500 flex-shrink-0">↗</span>
                </div>
            </div>
        </a>
    @empty
        <p class="text-sm text-gray-500 dark:text-gray-400 py-4">Sin servicios, envíos, presupuestos ni reclamos registrados.</p>
    @endforelse
</div>