{{--
    CallManager — call channel card (embedded inside the unified ContactHub)

    Renders as a single channel card fitting a col-md-4 column. Device state
    is tracked here via Livewire event listeners; all in-call UI (ringing,
    connected, mute, hang-up, disposition) is handled by the global
    CallOverlay mounted in the layout header.
--}}
<div x-data="{
    init() {
        const s = window.__twilioDeviceState ?? 'unregistered';
        if (s === 'registered')  this.$wire.call('handleDeviceRegistered');
        else if (s === 'registering') this.$wire.call('handleDeviceRegistering');
    }
}">
    <div class="border rounded-3 p-3 h-100 d-flex flex-column">

        {{-- ── Header: icon + label + device badge ──────────────────────── --}}
        <div class="d-flex align-items-center gap-2 mb-2">
            <div class="d-flex align-items-center justify-content-center rounded-circle bg-success bg-opacity-10 text-success flex-shrink-0"
                 style="width:36px;height:36px">
                <i class="mdi mdi-phone fs-5"></i>
            </div>
            <span class="fw-semibold">Call</span>
            <div class="ms-auto">
                @if($deviceRegistering)
                    <span class="badge text-bg-warning d-flex align-items-center gap-1">
                        <span class="spinner-border" style="width:.4rem;height:.4rem;border-width:1.5px"></span>
                        Connecting
                    </span>
                @elseif($deviceReady)
                    <span class="badge text-bg-success">
                        <i class="mdi mdi-circle" style="font-size:.4rem;vertical-align:middle"></i>
                        Ready
                    </span>
                @else
                    <span class="badge text-bg-secondary">
                        <i class="mdi mdi-circle-off-outline" style="font-size:.4rem;vertical-align:middle"></i>
                        Offline
                    </span>
                @endif
            </div>
        </div>

        {{-- ── Phone number ───────────────────────────────────────────────── --}}
        @if($this->callableNumber)
            <div class="text-muted small mb-3">{{ $this->callableNumber }}</div>
        @else
            <div class="text-danger small mb-3">No phone number on record</div>
        @endif

        {{-- ── Error ──────────────────────────────────────────────────────── --}}
        @if($errorMessage)
            <div class="alert alert-danger py-1 px-2 mb-2 small d-flex align-items-center gap-1">
                <i class="mdi mdi-alert-circle-outline flex-shrink-0"></i>
                <span>{{ $errorMessage }}</span>
            </div>
        @endif

        {{-- ── Dial button (pushed to bottom of card) ─────────────────────── --}}
        <div class="mt-auto">
            <button wire:click="startCall"
                    wire:loading.attr="disabled"
                    @class([
                        'btn btn-sm w-100',
                        'btn-success'            => $deviceReady && $this->callableNumber,
                        'btn-secondary disabled' => !$deviceReady || !$this->callableNumber,
                    ])
                    title="{{ $this->callableNumber ? 'Call ' . $this->callableLabel : 'No phone number' }}">
                <span wire:loading.remove wire:target="startCall">
                    <i class="mdi mdi-phone me-1"></i>
                    {{ $this->callableNumber ? 'Call ' . $this->callableLabel : 'No number' }}
                </span>
                <span wire:loading wire:target="startCall">
                    <span class="spinner-border spinner-border-sm me-1"></span>
                    Calling…
                </span>
            </button>
        </div>

    </div>
</div>