@php
    $typeIcons = [
        'call' => 'phone', 'email' => 'envelope', 'whatsapp' => 'whatsapp', 'sms' => 'chat-bubble-left-right',
        'meeting' => 'users', 'note' => 'pencil-square',
    ];
@endphp

<div class="space-y-4">
    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div>
            <h3 class="text-base font-semibold text-slate-900">{{ __('Activity') }}</h3>
            <p class="text-xs text-slate-400">{{ trans_choice('{0}Nothing logged yet|{1}:count entry, newest first|[2,*]:count entries, newest first', $total, ['count' => $total]) }}</p>
        </div>
        <select wire:model.live="type" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
            <option value="">{{ __('Every channel') }}</option>
            @foreach ($types as $key => $label)
                <option value="{{ $key }}">{{ __($label) }}</option>
            @endforeach
        </select>
    </div>

    @if ($entries->isEmpty())
        <x-empty-state icon="chat-bubble-left-right"
            :title="$type === '' ? __('Nothing logged yet') : __('Nothing on this channel')"
            :message="$type === '' ? __('Calls, emails, messages and meetings logged with this organisation or its opportunities appear here.') : __('Choose another channel or every channel.')"
            class="border-0" />
    @else
        <ol class="space-y-3">
            @foreach ($entries as $entry)
                <li wire:key="activity-{{ $entry->id }}" class="flex gap-3 rounded-2xl border border-slate-200 bg-white p-4">
                    <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-slate-100 text-slate-500">
                        <x-icon :name="$typeIcons[$entry->type] ?? 'chat-bubble-left-right'" class="h-4 w-4" />
                    </span>
                    <div class="min-w-0 flex-1">
                        <div class="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm">
                            <span class="font-semibold text-slate-900">{{ __($types[$entry->type] ?? \App\Models\Interaction::TYPES[$entry->type] ?? ucfirst((string) $entry->type)) }}</span>
                            @if ($entry->direction)
                                <x-badge color="slate">{{ __($directions[$entry->direction] ?? $entry->direction) }}</x-badge>
                            @endif
                            @if ($entry->contact)
                                <span class="text-slate-500">{{ __('with :name', ['name' => $entry->contact->name]) }}</span>
                            @endif
                            @if ($entry->subject_type === $opportunityClass && $entry->subject)
                                <a href="{{ route('crm.opportunities.show', $entry->subject_id) }}" wire:navigate class="text-indigo-600 hover:text-indigo-800">{{ $entry->subject->title }}</a>
                            @endif
                        </div>
                        @if ($entry->body)
                            <p class="mt-1 whitespace-pre-line break-words text-sm text-slate-600">{{ $entry->body }}</p>
                        @endif
                        @if ($entry->outcome)
                            <p class="mt-1 text-sm text-slate-600"><span class="font-medium text-slate-700">{{ __('Outcome:') }}</span> {{ $entry->outcome }}</p>
                        @endif
                        <p class="mt-1 text-xs text-slate-400">
                            {{ $entry->occurred_at?->timezone(config('app.display_timezone'))->format('j M Y, H:i') ?? __('Date not recorded') }}
                            · {{ $entry->user?->name ?? __('System') }}
                        </p>
                    </div>
                </li>
            @endforeach
        </ol>

        @if ($entries->count() < $total)
            <div class="text-center">
                <x-secondary-button type="button" wire:click="showMore">{{ __('Show more') }}</x-secondary-button>
            </div>
        @endif
    @endif
</div>