<div>
    <div class="flex items-center justify-between mb-6">
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center">
                <svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/></svg>
            </div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إرسال رسالة واتساب') }}</h1>
        </div>
    </div>

    @if(!$isConfigured)
    <div class="mb-6 p-4 bg-amber-50 border border-amber-200 rounded-lg">
        <div class="flex items-start gap-3">
            <svg class="w-5 h-5 text-amber-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
            <div>
                <p class="font-medium text-amber-800">{{ __('خدمة الواتساب غير مفعلة') }}</p>
                <p class="text-sm text-amber-600 mt-1">{{ __('أضف WHATSAPP_PHONE_NUMBER_ID و WHATSAPP_ACCESS_TOKEN في متغيرات البيئة') }}</p>
            </div>
        </div>
    </div>
    @endif

    @if(session('success'))
    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-700 text-sm">{{ session('success') }}</div>
    @endif
    @if(session('error'))
    <div class="mb-4 p-4 bg-red-50 border border-red-200 rounded-lg text-red-700 text-sm">{{ session('error') }}</div>
    @endif
    @if(session('warning'))
    <div class="mb-4 p-4 bg-amber-50 border border-amber-200 rounded-lg text-amber-700 text-sm">{{ session('warning') }}</div>
    @endif

    <form wire:submit="send" class="space-y-6">
        {{-- Recipient Selection --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('المستلمون') }}</h2>

            <div class="flex flex-wrap gap-2 mb-4">
                @foreach([
                    'single' => 'رقم محدد',
                    'group' => 'مجموعة تدريب',
                    'status' => 'حسب الحالة',
                    'custom' => 'اختيار يدوي',
                ] as $mode => $label)
                    <button type="button"
                            wire:click="$set('sendMode', '{{ $mode }}')"
                            class="px-4 py-2 rounded-lg text-sm font-medium transition {{ $sendMode === $mode ? 'bg-green-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' }}">
                        {{ __($label) }}
                    </button>
                @endforeach
            </div>

            @if($sendMode === 'single')
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('رقم الواتساب') }}</label>
                    <input type="text" wire:model="phone" dir="ltr"
                           class="w-full max-w-sm px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                           placeholder="01060929653">
                    @error('phone') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
            @elseif($sendMode === 'group')
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('المجموعة') }}</label>
                    <select wire:model="selectedGroup" class="w-full max-w-md px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500">
                        <option value="">{{ __('اختر المجموعة') }}</option>
                        @foreach($groups as $group)
                            <option value="{{ $group->id }}">{{ $group->name_ar }} ({{ $group->current_count }} مشترك)</option>
                        @endforeach
                    </select>
                    @error('selectedGroup') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
            @elseif($sendMode === 'status')
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('الحالة') }}</label>
                    <select wire:model="selectedStatus" class="w-full max-w-md px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500">
                        <option value="">{{ __('اختر الحالة') }}</option>
                        @foreach($statuses as $statusOption)
                            <option value="{{ $statusOption->value }}">{{ $statusOption->label() }}</option>
                        @endforeach
                    </select>
                    @error('selectedStatus') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
            @elseif($sendMode === 'custom')
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('اختر المشتركين') }}</label>
                    <div class="max-h-48 overflow-y-auto border border-gray-200 rounded-lg p-2 space-y-1">
                        @foreach($allParticipants as $participant)
                            @if($participant->person?->phone)
                            <label class="flex items-center gap-2 px-3 py-1.5 rounded hover:bg-gray-50 cursor-pointer">
                                <input type="checkbox" wire:model="selectedParticipants" value="{{ $participant->id }}"
                                       class="rounded text-green-600 focus:ring-green-500">
                                <span class="text-sm text-gray-700">{{ $participant->person->name_ar ?? $participant->person->name }}</span>
                                <span class="text-xs text-gray-400 ms-auto" dir="ltr">{{ $participant->person->phone }}</span>
                            </label>
                            @endif
                        @endforeach
                    </div>
                    @error('selectedParticipants') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
            @endif
        </div>

        {{-- Message Body --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
            <h2 class="text-lg font-semibold text-gray-700 mb-4">{{ __('نص الرسالة') }}</h2>
            <textarea wire:model="messageBody" rows="6"
                      class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500 resize-none"
                      placeholder="{{ __('اكتب رسالتك هنا...') }}"></textarea>
            <div class="flex items-center justify-between mt-2">
                <span class="text-xs text-gray-400">{{ __('الحد الأقصى 4096 حرف') }}</span>
                <span class="text-xs {{ strlen($messageBody) > 4096 ? 'text-red-500' : 'text-gray-400' }}">{{ strlen($messageBody) }}/4096</span>
            </div>
            @error('messageBody') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
        </div>

        {{-- Submit --}}
        <div class="flex items-center justify-between">
            @if($sendComplete)
                <button type="button" wire:click="resetForm"
                        class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 text-sm">
                    {{ __('رسالة جديدة') }}
                </button>
            @else
                <div></div>
            @endif

            <button type="submit"
                    wire:loading.attr="disabled"
                    wire:target="send"
                    {{ !$isConfigured ? 'disabled' : '' }}
                    class="px-6 py-2.5 bg-green-600 text-white rounded-lg hover:bg-green-700 text-sm font-medium disabled:opacity-50 flex items-center gap-2">
                <span wire:loading.remove wire:target="send">
                    <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
                </span>
                <span wire:loading wire:target="send">
                    <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/></svg>
                </span>
                <span wire:loading.remove wire:target="send">{{ __('إرسال') }}</span>
                <span wire:loading wire:target="send">{{ __('جارٍ الإرسال...') }}</span>
            </button>
        </div>
    </form>
</div>
