<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="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></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">
        {{-- Template Config --}}
        <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="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('اسم القالب') }} <span class="text-red-500">*</span></label>
                    <input type="text" wire:model="templateName" dir="ltr"
                           class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-green-500"
                           placeholder="hello_world">
                    <p class="text-xs text-gray-400 mt-1">{{ __('اسم القالب المعتمد من Meta') }}</p>
                    @error('templateName') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('لغة القالب') }}</label>
                    <select wire:model="languageCode" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500">
                        <option value="en_US">English (US)</option>
                        <option value="ar">العربية</option>
                        <option value="en">English</option>
                    </select>
                </div>
            </div>
        </div>

        {{-- Recipients --}}
        <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"
                           placeholder="01060929653">
                    @error('phone') <span class="text-red-500 text-xs mt-1">{{ $message }}</span> @enderror
                </div>
            @elseif($sendMode === 'group')
                <div>
                    <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>
                    <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 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
            @endif
        </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">{{ __('إرسال القالب') }}</span>
                <span wire:loading wire:target="send">{{ __('جارٍ الإرسال...') }}</span>
            </button>
        </div>
    </form>
</div>
