{{-- Shared "Send WhatsApp / SMS" compose panel. Expects the SendsMessages trait
     on the host component. Outbound only; every send is logged as an Interaction. --}}
<x-dialog-modal wire:model.live="showCompose" maxWidth="lg">
    <x-slot name="title">
        {{ __('Send message') }}
        @if ($composeSubjectLabel)
            <span class="text-slate-400">— {{ $composeSubjectLabel }}</span>
        @endif
    </x-slot>

    <x-slot name="content">
        <div class="space-y-4">
            <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
                <div>
                    <x-label for="compose-channel" value="{{ __('Channel') }}" />
                    <select id="compose-channel" wire:model="composeChannel" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        <option value="whatsapp">{{ __('WhatsApp') }}</option>
                        <option value="sms">{{ __('SMS') }}</option>
                    </select>
                    <x-input-error for="composeChannel" class="mt-2" />
                </div>
                <div>
                    <x-label for="compose-to" value="{{ __('To (phone)') }}" />
                    <x-input id="compose-to" type="text" class="mt-1 block w-full" wire:model="composeTo" placeholder="+263…" />
                    <x-input-error for="composeTo" class="mt-2" />
                </div>
            </div>
            <div>
                <x-label for="compose-body" value="{{ __('Message') }}" />
                <textarea id="compose-body" rows="4" wire:model="composeBody" placeholder="{{ __('Type your message…') }}" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                <x-input-error for="composeBody" class="mt-2" />
            </div>

            @if ($composeWaLink)
                <div class="rounded-xl border border-emerald-200 bg-emerald-50/70 p-3">
                    <p class="text-xs font-medium text-emerald-700">{{ __('WhatsApp is in click-to-chat mode. Open the link to send from your own WhatsApp:') }}</p>
                    <a href="{{ $composeWaLink }}" target="_blank" rel="noopener"
                       class="mt-2 inline-flex items-center gap-1.5 text-sm font-semibold text-emerald-700 underline hover:text-emerald-900">
                        <x-icon name="whatsapp" class="h-4 w-4" />
                        {{ __('Open WhatsApp chat') }}
                    </a>
                </div>
            @endif
        </div>
    </x-slot>

    <x-slot name="footer">
        <x-secondary-button wire:click="closeCompose" wire:loading.attr="disabled">
            {{ __('Close') }}
        </x-secondary-button>
        <x-button class="ms-3" wire:click="sendMessage" wire:loading.attr="disabled">
            <x-icon name="paper-airplane" class="-ms-1 me-1.5 h-4 w-4" />
            {{ __('Send') }}
        </x-button>
    </x-slot>
</x-dialog-modal>