<div class="card shadow-sm border-0">
    <div class="card-body p-4">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="card-title fw-bold text-dark mb-0">Interactions Timeline</h5>
            <button wire:click="initiateCall" wire:loading.attr="disabled" class="btn btn-primary btn-sm shadow-sm">
                <span wire:loading.remove wire:target="initiateCall">+ New Outbound Call</span>
                <span wire:loading wire:target="initiateCall">
                    <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Connecting...
                </span>
            </button>
        </div>

        @if (session()->has('success'))
            <div class="alert alert-success py-2 px-3 small mb-4">
                {{ session('success') }}
            </div>
        @endif

        @if (session()->has('error'))
            <div class="alert alert-danger py-2 px-3 small mb-4">
                {{ session('error') }}
            </div>
        @endif

        <div class="position-relative border-start ms-2" style="border-color: #dee2e6 !important;">
            @forelse($history as $item)
                <div class="mb-4 ms-4 position-relative">
                    <!-- Timeline dot -->
                    <span class="position-absolute d-flex align-items-center justify-content-center rounded-circle border border-white border-4
                        {{ $item->channel === 'voice' ? 'bg-primary text-white' : 'bg-success text-white' }}"
                          style="width: 28px; height: 28px; left: -30px; top: 0; margin-left: -1px;">
                        <svg style="width: 12px; height: 12px;" fill="currentColor" viewBox="0 0 20 20"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
                    </span>

                    <div class="card bg-light border-0 shadow-sm">
                        <div class="card-body p-3">
                            <div class="d-flex justify-content-between align-items-start mb-2">
                                <h6 class="fw-bold text-dark text-capitalize mb-0">
                                    {{ $item->direction }} {{ $item->channel }}
                                    <span class="text-muted fw-normal small ms-1">({{ $item->status }})</span>
                                </h6>
                                <small class="text-muted">{{ \Carbon\Carbon::parse($item->timestamp)->diffForHumans() }}</small>
                            </div>

                            <p class="small text-secondary mb-2">
                                Handled by: {{ $item->agent ? $item->agent->name : 'System/Queue' }}
                                @if($item->duration) | Duration: {{ gmdate("i:s", $item->duration) }} @endif
                            </p>

                            @if($item->recording_url)
                                <div class="mt-2 bg-white p-2 rounded border d-inline-block">
                                    <audio controls style="height: 32px; max-width: 250px;">
                                        <source src="{{ $item->recording_url }}.mp3" type="audio/mpeg">
                                        Your browser does not support the audio element.
                                    </audio>
                                </div>
                            @endif

                            @if($item->notes)
                                <p class="small mt-3 bg-warning bg-opacity-10 p-2 rounded border border-warning-subtle text-dark fst-italic mb-0">
                                    "{{ $item->notes }}"
                                </p>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="ms-4 text-muted small fst-italic">
                    No interactions logged for this contact yet.
                </div>
            @endforelse
        </div>
    </div>
</div>