@php
    use App\Automation\Support\EventLabels;

    $canOpenCampaign = auth()->user()->can('viewAny', \App\Models\Campaign::class);
    $tone = fn (string $type) => match (true) {
        str_starts_with($type, 'sms_sent'), $type === 'sms_already_sent', $type === 'completed' => 'bg-emerald-500',
        in_array($type, ['sms_failed', 'sms_rejected', 'failed', 'blacklisted', 'invalid_number'], true) => 'bg-rose-500',
        in_array($type, ['sms_unknown', 'retry_scheduled', 'paused', 'unknown_outcome'], true), str_starts_with($type, 'deferred') => 'bg-amber-500',
        in_array($type, ['cancelled', 'removed'], true) => 'bg-zinc-400',
        default => 'bg-indigo-400',
    };
@endphp

<section class="rounded-lg border border-gray-200 bg-white">
    <h2 class="border-b border-gray-100 px-4 py-3 text-sm font-bold text-gray-800">اتوماسیون پیامکی</h2>

    @if ($live->isNotEmpty())
        <div class="border-b border-gray-100 px-4 py-3">
            <p class="mb-2 text-xs font-medium text-gray-500">هم‌اکنون در این کمپین‌ها فعال است</p>
            <ul class="space-y-2">
                @foreach ($live as $execution)
                    <li wire:key="live-{{ $execution->id }}" class="flex flex-col gap-1 rounded-md bg-gray-50 px-3 py-2 text-sm sm:flex-row sm:items-center sm:justify-between">
                        <div>
                            @if ($canOpenCampaign && $execution->campaign)
                                <a href="{{ route('automation.campaigns.show', $execution->campaign) }}" wire:navigate class="font-medium text-indigo-700 hover:underline">{{ $execution->campaign->name }}</a>
                            @else
                                <span class="font-medium text-gray-800">{{ $execution->campaign?->name ?? '—' }}</span>
                            @endif
                            <span class="text-xs text-gray-500">· {{ $execution->workflow?->name }} · مرحله: {{ $execution->currentNode?->name ?? '—' }}</span>
                        </div>
                        <div class="flex items-center gap-2 text-xs">
                            <span class="rounded-full px-2 py-0.5 {{ $execution->status->badge() }}">{{ $execution->status->label() }}</span>
                            @if ($execution->next_run_at && $execution->next_run_at->isFuture())
                                <span class="text-gray-500">ارسال بعدی: <span class="ltr-numerals">@ldatetime($execution->next_run_at)</span></span>
                            @endif
                        </div>
                    </li>
                @endforeach
            </ul>
        </div>
    @endif

    @if ($events->isEmpty())
        <p class="px-4 py-6 text-center text-sm text-gray-400">این تارگت هنوز در هیچ کمپین پیامکی نبوده است.</p>
    @else
        <ol class="px-4 py-3">
            @foreach ($events as $event)
                @php
                    $log = isset($event->data['sms_log_id']) ? ($logs[$event->data['sms_log_id']] ?? null) : null;
                @endphp
                <li wire:key="tl-{{ $event->id }}" class="relative border-s border-gray-200 pb-4 ps-4 last:pb-0">
                    <span class="absolute -start-1.5 top-1.5 h-3 w-3 rounded-full ring-2 ring-white {{ $tone($event->type) }}"></span>
                    <div class="flex flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-gray-500">
                        <span class="font-medium text-gray-800">{{ EventLabels::label($event->type) }}</span>
                        <span class="ltr-numerals">@ldatetime($event->occurred_at)</span>
                        <span>· {{ $campaigns[$event->campaign_id] ?? '—' }}</span>
                        @if ($event->actor_user_id)
                            <span>· {{ $actors[$event->actor_user_id] ?? '—' }}</span>
                        @endif
                    </div>
                    @if ($event->message)
                        <p class="mt-0.5 text-sm text-gray-600">{{ $event->message }}</p>
                    @endif
                    @if ($log)
                        <div class="mt-1.5 rounded-md border border-gray-100 bg-gray-50 px-3 py-2 text-xs text-gray-600">
                            <div class="mb-1 flex flex-wrap items-center gap-2">
                                <span class="rounded-full px-2 py-0.5 {{ $log->status->badge() }}">{{ $log->status->label() }}</span>
                                <span>تلاش <span class="ltr-numerals">{{ $log->attempt_number }}</span></span>
                                <span class="ltr-numerals">{{ $log->phone_number }}</span>
                                @if ($log->provider_message_id)<span>شناسه نزد پنل: <span class="ltr-numerals">{{ $log->provider_message_id }}</span></span>@endif
                            </div>
                            @if ($log->final_message)<p class="whitespace-pre-line text-gray-800">{{ $log->final_message }}</p>@endif
                            @if ($log->error_message)<p class="mt-1 text-rose-600">{{ $log->error_message }}</p>@endif
                            @if ($log->retry_scheduled_at)<p class="mt-1 text-amber-700">تلاش مجدد: <span class="ltr-numerals">@ldatetime($log->retry_scheduled_at)</span></p>@endif
                        </div>
                    @endif
                </li>
            @endforeach
        </ol>

        @if ($hasMore)
            <div class="border-t border-gray-100 px-4 py-2 text-center">
                <button type="button" wire:click="more" class="text-xs text-indigo-600 hover:underline">نمایش رویدادهای قدیمی‌تر</button>
            </div>
        @endif
    @endif
</section>