{{--
    Activity Timeline Widget
    Props:
      $activities – array of { user, action, target?, time, icon?, color? }
      $title      – widget title
      $limit      – max items to show (0 = all)

    Usage:
      <x-widgets.activity-timeline title="Recent Activity" :activities="$logs" :limit="5" />
--}}
@props([
    'activities' => [],
    'title'      => 'Recent Activity',
    'limit'      => 0,
])

@php
    $items = $limit > 0 ? array_slice((array)$activities, 0, $limit) : (array)$activities;
    $colorMap = [
        'create' => 'bg-green-100 text-green-600 dark:bg-green-950 dark:text-green-400',
        'update' => 'bg-blue-100 text-blue-600 dark:bg-blue-950 dark:text-blue-400',
        'delete' => 'bg-red-100 text-red-600 dark:bg-red-950 dark:text-red-400',
        'login'  => 'bg-primary-100 text-primary-600 dark:bg-primary-950 dark:text-primary-400',
        'default'=> 'bg-surface-100 text-surface-600 dark:bg-surface-800 dark:text-surface-400',
    ];
@endphp

<div class="rounded-xl border border-border bg-card text-card-foreground shadow-card">
    <div class="border-b border-border px-6 py-4">
        <h3 class="text-base font-semibold text-foreground">{{ $title }}</h3>
    </div>
    <div class="p-0">
        @if(empty($items))
            <x-tables.empty-state message="No activity yet." description="" />
        @else
            <ol class="divide-y divide-surface-100 dark:divide-surface-700">
                @foreach($items as $activity)
                @php
                    $colorKey  = $activity['color'] ?? 'default';
                    $iconClass = $colorMap[$colorKey] ?? $colorMap['default'];
                @endphp
                <li class="flex items-start gap-4 px-6 py-4">
                    <div class="mt-0.5 flex-shrink-0 h-8 w-8 rounded-full {{ $iconClass }} flex items-center justify-center text-sm">
                        @if(isset($activity['icon']))
                            {!! $activity['icon'] !!}
                        @else
                            <span class="font-semibold text-xs">
                                {{ strtoupper(substr($activity['user'] ?? '?', 0, 1)) }}
                            </span>
                        @endif
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm text-surface-700 dark:text-surface-300">
                            <span class="font-medium text-surface-900 dark:text-surface-100">{{ $activity['user'] ?? 'System' }}</span>
                            {{ $activity['action'] ?? '' }}
                            @if(isset($activity['target']))
                                <span class="font-medium text-primary-600 dark:text-primary-400">{{ $activity['target'] }}</span>
                            @endif
                        </p>
                        <p class="text-xs text-surface-400 dark:text-surface-500 mt-0.5">{{ $activity['time'] ?? '' }}</p>
                    </div>
                </li>
                @endforeach
            </ol>
        @endif
    </div>
    @if(isset($footer))
        <div class="border-t border-border px-6 py-4 text-sm text-muted-foreground">{{ $footer }}</div>
    @endif
</div>