@php
    $statusDot = [
        'success'    => 'bg-green-500',
        'failed'     => 'bg-red-500',
        'conflict'   => 'bg-amber-400',
        'duplicate'  => 'bg-blue-400',
        'processing' => 'bg-purple-400',
    ];
    $typeBadges = [
        'event'        => ['#', t('agent.type.event'),          '#4F46E5', '#EEF2FF'],
        'event_update' => ['✎', t('agent.type.event_update'),   '#4F46E5', '#EEF2FF'],
        'note'         => ['#', t('agent.type.note'),           '#B45309', '#FFFBEB'],
        'note_update'  => ['✎', t('agent.type.note_update'),    '#B45309', '#FFFBEB'],
        'task'         => ['#', t('agent.type.task'),           '#065F46', '#ECFDF5'],
        'task_update'  => ['✎', t('agent.type.task_update'),    '#065F46', '#ECFDF5'],
        'contact'      => ['#', t('agent.type.contact'),        '#1E40AF', '#EFF6FF'],
        'email'        => ['#', t('agent.type.email'),          '#6B21A8', '#FAF5FF'],
        'chat'         => ['#', t('agent.type.chat'),           '#374151', '#F3F4F6'],
        'multi'        => ['#', t('agent.type.multi'),          '#9D174D', '#FDF2F8'],
    ];
@endphp

<div class="space-y-1">

    @forelse($history as $item)
        @php
            $badge = $typeBadges[$item->type] ?? ['#', ucfirst($item->type ?? ''), '#374151', '#F9FAFB'];
        @endphp
        <div class="flex items-start gap-2.5 py-2 group">

            {{-- Status-Dot --}}
            <span class="mt-1.5 w-1.5 h-1.5 rounded-full shrink-0 {{ $statusDot[$item->status] ?? 'bg-gray-300' }}"></span>

            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-1.5">
                    <span style="display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:20px;font-size:9px;font-weight:500;background:{{ $badge[3] }};color:{{ $badge[2] }};border:1px solid {{ $badge[2] }}22;flex-shrink:0;">
                        <span style="width:4px;height:4px;border-radius:50%;background:{{ $badge[2] }};display:inline-block;flex-shrink:0;"></span>
                        {{ $badge[1] }}{{ $badge[0] === '✎' ? ' ✎' : '' }}
                    </span>
                    <p class="text-xs text-gray-700 truncate leading-snug">{{ $item->output['title'] ?? $item->input }}</p>
                </div>
                <div class="flex items-center gap-2 mt-0.5">
                    <span class="text-[10px] text-gray-400">
                        {{ $item->created_at->diffForHumans() }}
                    </span>
                    @if($item->credits > 0)
                        <span class="text-[10px] text-amber-500 flex items-center gap-0.5">
                            <x-heroicon-o-bolt class="w-2.5 h-2.5"/>
                            {{ $item->credits }}
                        </span>
                    @endif
                    @if($item->duration_ms)
                        <span class="text-[10px] text-gray-300">
                            {{ $item->duration_ms >= 1000 ? round($item->duration_ms / 1000, 1) . 's' : $item->duration_ms . 'ms' }}
                        </span>
                    @endif
                </div>
            </div>

        </div>
    @empty
        <div class="flex flex-col items-center gap-2 py-6">
            <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center">
                <x-heroicon-o-sparkles class="w-4 h-4 text-gray-300"/>
            </div>
            <p class="text-xs text-gray-400">{{ t('agent.no_requests') }}</p>
        </div>
    @endforelse

</div>
