<div>
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('رسائل جماعية') }}</h1>
    </div>

    {{-- Flash Messages --}}
    @if(session('success'))
    <div class="mb-4 p-4 bg-green-50 border border-green-200 rounded-lg text-green-800 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-800 text-sm">
        {{ session('error') }}
    </div>
    @endif
    @if(session('warning'))
    <div class="mb-4 p-4 bg-yellow-50 border border-yellow-200 rounded-lg text-yellow-800 text-sm">
        {{ session('warning') }}
    </div>
    @endif

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
        {{-- Selection Panel --}}
        <div class="lg:col-span-2">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6">
                <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('اختيار المستلمين') }}</h2>

                {{-- Selection Mode Tabs --}}
                <div class="grid grid-cols-2 sm:flex sm:flex-wrap gap-2 mb-6" x-data="{ mode: @entangle('selectionMode') }">
                    <button type="button" wire:click="$set('selectionMode', 'group')"
                            class="px-3 sm:px-4 py-2.5 rounded-lg text-sm font-medium transition-colors"
                            :class="mode === 'group' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
                        {{ __('حسب المجموعة') }}
                    </button>
                    <button type="button" wire:click="$set('selectionMode', 'status')"
                            class="px-3 sm:px-4 py-2.5 rounded-lg text-sm font-medium transition-colors"
                            :class="mode === 'status' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
                        {{ __('حسب الحالة') }}
                    </button>
                    <button type="button" wire:click="$set('selectionMode', 'membership')"
                            class="px-3 sm:px-4 py-2.5 rounded-lg text-sm font-medium transition-colors"
                            :class="mode === 'membership' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
                        {{ __('حسب العضوية') }}
                    </button>
                    <button type="button" wire:click="$set('selectionMode', 'custom')"
                            class="px-3 sm:px-4 py-2.5 rounded-lg text-sm font-medium transition-colors"
                            :class="mode === 'custom' ? 'bg-blue-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'">
                        {{ __('اختيار يدوي') }}
                    </button>
                </div>

                {{-- Group Selection --}}
                @if($selectionMode === 'group')
                <div>
                    <label for="selectedGroup" class="block text-sm font-medium text-gray-700 mb-1">{{ __('المجموعة التدريبية') }} <span class="text-red-500">*</span></label>
                    <select wire:model.live="selectedGroup" id="selectedGroup"
                            class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        <option value="">{{ __('اختر مجموعة') }}</option>
                        @foreach($groups as $group)
                        <option value="{{ $group->id }}">{{ $group->name_ar ?: $group->name }} ({{ $group->current_count }} {{ __('مشترك') }})</option>
                        @endforeach
                    </select>
                    @error('selectedGroup') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif

                {{-- Status Selection --}}
                @if($selectionMode === 'status')
                <div>
                    <label for="selectedStatus" class="block text-sm font-medium text-gray-700 mb-1">{{ __('حالة المشترك') }} <span class="text-red-500">*</span></label>
                    <select wire:model.live="selectedStatus" id="selectedStatus"
                            class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        <option value="">{{ __('اختر حالة') }}</option>
                        @foreach($statuses as $status)
                        <option value="{{ $status->value }}">{{ __($status->value) }}</option>
                        @endforeach
                    </select>
                    @error('selectedStatus') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif

                {{-- Membership Selection --}}
                @if($selectionMode === 'membership')
                <div>
                    <label for="selectedMembership" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع العضوية') }} <span class="text-red-500">*</span></label>
                    <select wire:model.live="selectedMembership" id="selectedMembership"
                            class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                        <option value="">{{ __('اختر نوع العضوية') }}</option>
                        @foreach($membershipTypes as $type)
                        <option value="{{ $type->value }}">{{ $type->label() }}</option>
                        @endforeach
                    </select>
                    @error('selectedMembership') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif

                {{-- Custom Selection --}}
                @if($selectionMode === 'custom')
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('اختر المشتركين') }} <span class="text-red-500">*</span></label>
                    <div class="max-h-64 overflow-y-auto border border-gray-200 rounded-lg p-3 space-y-2">
                        @forelse($allParticipants as $participant)
                        <label class="flex items-center gap-3 p-2 rounded-lg hover:bg-gray-50 cursor-pointer">
                            <input type="checkbox" wire:model.live="selectedParticipants" value="{{ $participant->id }}"
                                   class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                            <span class="text-sm text-gray-700">{{ $participant->person?->name_ar ?? $participant->person?->name ?? __('بدون اسم') }}</span>
                        </label>
                        @empty
                        <p class="text-sm text-gray-500 text-center py-4">{{ __('لا يوجد مشتركين') }}</p>
                        @endforelse
                    </div>
                    @if(count($selectedParticipants) > 0)
                    <p class="mt-2 text-xs text-gray-500">{{ __('تم اختيار :count مشترك', ['count' => count($selectedParticipants)]) }}</p>
                    @endif
                    @error('selectedParticipants') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
                @endif

                {{-- Preview Button --}}
                <div class="mt-6">
                    <button type="button" wire:click="preview" wire:loading.attr="disabled" wire:target="preview"
                            class="w-full sm:w-auto inline-flex items-center justify-center gap-2 px-4 py-2.5 bg-gray-600 text-white rounded-lg hover:bg-gray-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
                        <span wire:loading.remove wire:target="preview">{{ __('معاينة عدد المستلمين') }}</span>
                        <span wire:loading wire:target="preview">{{ __('جارٍ الحساب...') }}</span>
                    </button>
                </div>

                {{-- Recipient Count Preview --}}
                @if($showPreview)
                <div class="mt-4 p-4 bg-blue-50 border border-blue-200 rounded-lg">
                    <div class="flex items-center gap-2">
                        <svg class="w-5 h-5 text-blue-600 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/>
                        </svg>
                        <span class="text-sm font-medium text-blue-800">
                            {{ __('عدد المستلمين: :count', ['count' => $recipientCount]) }}
                        </span>
                    </div>
                    @if($recipientCount === 0)
                    <p class="mt-2 text-xs text-blue-600">{{ __('لا يوجد مشتركين مطابقين للمعايير المحددة') }}</p>
                    @endif
                </div>
                @endif
            </div>
        </div>

        {{-- Message Compose Panel --}}
        <div class="lg:col-span-1">
            <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-4 sm:p-6 lg:sticky lg:top-6">
                <h2 class="text-base sm:text-lg font-semibold text-gray-700 mb-4">{{ __('كتابة الرسالة') }}</h2>

                {{-- Message Body --}}
                <div class="mb-4">
                    <label for="messageBody" class="block text-sm font-medium text-gray-700 mb-1">{{ __('نص الرسالة') }} <span class="text-red-500">*</span></label>
                    <textarea wire:model="messageBody" id="messageBody" rows="6"
                              placeholder="{{ __('اكتب رسالتك هنا...') }}"
                              maxlength="640"
                              class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 resize-none text-sm"></textarea>
                    <div class="flex justify-between mt-1">
                        @error('messageBody') <p class="text-xs text-red-600">{{ $message }}</p> @enderror
                        <span class="text-xs text-gray-400 ms-auto" dir="ltr">{{ mb_strlen($messageBody) }}/640</span>
                    </div>
                    <p class="mt-1 text-xs text-gray-500">{{ __('الحد الأقصى 640 حرف (حد الرسائل القصيرة)') }}</p>
                </div>

                {{-- Channel Selection --}}
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">{{ __('قنوات الإرسال') }}</label>
                    <div class="space-y-2">
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" wire:model="sendSms"
                                   class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                            <span class="text-sm text-gray-700">{{ __('رسالة قصيرة (SMS)') }}</span>
                        </label>
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" wire:model="sendEmail"
                                   class="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                            <span class="text-sm text-gray-700">{{ __('بريد إلكتروني') }}</span>
                        </label>
                    </div>
                </div>

                {{-- Send Button --}}
                <button type="button" wire:click="send" wire:loading.attr="disabled" wire:target="send"
                        @if(!$showPreview || $recipientCount === 0 || mb_strlen($messageBody) === 0) disabled @endif
                        class="w-full inline-flex items-center justify-center gap-2 px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed">
                    <span wire:loading.remove wire:target="send">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                        </svg>
                        {{ __('إرسال الرسالة') }}
                    </span>
                    <span wire:loading wire:target="send">{{ __('جارٍ الإرسال...') }}</span>
                </button>

                {{-- Send Results --}}
                @if($sendComplete)
                <div class="mt-4 p-4 bg-gray-50 border border-gray-200 rounded-lg">
                    <h3 class="text-sm font-medium text-gray-700 mb-2">{{ __('نتائج الإرسال') }}</h3>
                    <div class="space-y-1 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">{{ __('ناجح') }}</span>
                            <span class="font-medium text-green-600">{{ $sentCount }}</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">{{ __('فشل') }}</span>
                            <span class="font-medium text-red-600">{{ $failedCount }}</span>
                        </div>
                    </div>
                </div>

                <button type="button" wire:click="resetForm"
                        class="w-full mt-3 px-4 py-2.5 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 text-sm font-medium">
                    {{ __('رسالة جديدة') }}
                </button>
                @endif
            </div>
        </div>
    </div>
</div>
