@if(! $isReadyToLoad)
    <div class="d-flex justify-content-center py-4">
        <div class="spinner-border spinner-border-sm text-primary" role="status">
            <span class="visually-hidden">{{ __('Loading...') }}</span>
        </div>
    </div>
@else
<div class="model-activity-viewer" x-data="{ expandedItem: null }">
    {{-- Compact Header --}}
    <div class="activity-header d-flex align-items-center justify-content-between mb-3 pb-2 border-bottom">
        <div class="d-flex align-items-center gap-2">
            <span class="icon-circle bg-primary-dim" style="width: 32px; height: 32px;">
                <x-ui.nicon name="activity" class="text-primary"/>
            </span>
            <div>
                <h6 class="fw-semibold text-dark mb-0" style="font-size: 14px;">{{ __($title) }}</h6>
                <span class="text-muted" style="font-size: 11px;">{{ __('Recent activity and communications') }}</span>
            </div>
        </div>
        <div class="d-flex align-items-center gap-2">
            @if($this->isClientModel && false)
                <button 
                    type="button"
                    wire:click="$emit('showModal', 'modals.events.save-event-modal', null, '{{ $modelType }}', {{ $modelId }})"
                    class="btn btn-dim btn-outline-light btn-xs"
                    x-data="tooltip"
                    data-bs-title="{{ __('Add event') }}"
                >
                    <x-ui.nicon name="plus" class="me-1"/>
                    {{ __('Add event') }}
                </button>
                <button 
                    type="button"
                    wire:click="$emit('showModal', 'modals.notes.save-note-modal', null, '{{ $modelType }}', {{ $modelId }})"
                    class="btn btn-dim btn-outline-light btn-xs"
                    x-data="tooltip"
                    data-bs-title="{{ __('Add note') }}"
                >
                    <x-ui.nicon name="plus" class="me-1"/>
                    {{ __('Add note') }}
                </button>
            @endif
            <button 
                type="button"
                wire:click="$refresh"
                class="btn-action"
                x-data="tooltip"
                data-bs-title="{{ __('Refresh') }}"
            >
                <x-ui.nicon name="reload"/>
            </button>
        </div>
    </div>

    {{-- Compact Tab Pills --}}
    <div class="activity-tabs mb-3">
        <div class="d-flex gap-1 flex-wrap">
            <button 
                type="button"
                wire:click="setTab('all')"
                class="tab-pill {{ $activeTab === 'all' ? 'active' : '' }}"
            >
                <x-ui.nicon name="list"/>
                {{ __('All') }}
                <span class="tab-count">{{ $this->stats['all'] }}</span>
            </button>
            <button 
                type="button"
                wire:click="setTab('activities')"
                class="tab-pill {{ $activeTab === 'activities' ? 'active' : '' }}"
            >
                <x-ui.nicon name="histroy"/>
                {{ __('Progress') }}
                <span class="tab-count">{{ $this->stats['activities'] }}</span>
            </button>
            <button 
                type="button"
                wire:click="setTab('emails')"
                class="tab-pill {{ $activeTab === 'emails' ? 'active active-info' : '' }}"
            >
                <x-ui.nicon name="mail"/>
                {{ __('Emails') }}
                <span class="tab-count">{{ $this->stats['emails'] }}</span>
            </button>
            <button 
                type="button"
                wire:click="setTab('sms')"
                class="tab-pill {{ $activeTab === 'sms' ? 'active active-success' : '' }}"
            >
                <x-ui.nicon name="chat"/>
                {{ __('SMS') }}
                <span class="tab-count">{{ $this->stats['sms'] }}</span>
            </button>
            @if($this->isClientModel)
            <button 
                type="button"
                wire:click="setTab('events')"
                class="tab-pill {{ $activeTab === 'events' ? 'active active-primary' : '' }}"
            >
                <x-ui.nicon name="calendar"/>
                {{ __('Events') }}
                <span class="tab-count">{{ $this->stats['events'] }}</span>
            </button>
            @endif
            <button 
                type="button"
                wire:click="setTab('notes')"
                class="tab-pill {{ $activeTab === 'notes' ? 'active active-warning' : '' }}"
            >
                <x-ui.nicon name="note-add"/>
                {{ __('Notes') }}
                <span class="tab-count">{{ $this->stats['notes'] }}</span>
            </button>
            @if($this->hasRelatedActivities && $this->stats['related'] > 0)
            <button 
                type="button"
                wire:click="setTab('related')"
                class="tab-pill {{ $activeTab === 'related' ? 'active active-secondary' : '' }}"
            >
                <x-ui.nicon name="link-group"/>
                {{ $this->relatedActivitiesLabel }}
                <span class="tab-count">{{ $this->stats['related'] }}</span>
            </button>
            @endif
        </div>
    </div>

    {{-- Timeline Items --}}
    <div class="activity-timeline">
        @forelse($this->filteredItems as $item)
            @switch($item['type'])
                @case('activity')
                    @include('livewire.activity.partials.activity-item', ['activity' => $item['data']])
                    @break
                @case('email')
                    @include('livewire.activity.partials.notification-item', ['email' => $item['data']])
                    @break
                @case('notification')
                    @include('livewire.activity.partials.notification-item', ['notification' => $item['data']])
                    @break
                @case('sms')
                    @include('livewire.activity.partials.notification-item', ['notification' => $item['data']])
                    @break
                @case('event')
                    @include('livewire.activity.partials.event-item', ['event' => $item['data']])
                    @break
                @case('note')
                    @include('livewire.activity.partials.note-item', ['note' => $item['data']])
                    @break
            @endswitch
        @empty
            <div class="activity-empty">
                <div class="empty-icon">
                    <x-ui.nicon name="inbox"/>
                </div>
                <div class="empty-title">{{ __('No activity found') }}</div>
                <div class="empty-text">{{ __('Activity will appear here when actions are performed.') }}</div>
            </div>
        @endforelse
    </div>

    {{-- Load More --}}
    @if($this->filteredItems->count() >= $perPage)
        <div class="text-center mt-3">
            <x-ui.button 
                :label="__('Load more')" 
                click="loadMore" 
                color="outline-light" 
                size="xs"
                icon="chevron-down"
            />
        </div>
    @endif
</div>
@endif