<div>
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-xl sm:text-2xl font-bold text-gray-800">{{ __('إنشاء خصم') }}</h1>
            <p class="text-sm text-gray-500 mt-1">{{ __('ابدأ من وصفة جاهزة وعدّل عليها') }}</p>
        </div>
        <a href="{{ route('pricing.rules') }}" wire:navigate
           class="text-sm text-gray-500 hover:text-gray-700">{{ __('العودة للقائمة') }}</a>
    </div>

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

    {{-- ─────────── Stage: done ─────────── --}}
    @if($stage === 'done')
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
            <div class="w-16 h-16 mx-auto mb-4 bg-green-100 rounded-full flex items-center justify-center">
                <svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                </svg>
            </div>
            <h2 class="text-xl font-bold text-gray-800 mb-2">{{ __('تم إنشاء الخصم') }}</h2>
            <p class="text-gray-500 mb-6">{{ $this->sentence }}</p>
            <div class="flex items-center justify-center gap-3">
                <a href="{{ route('pricing.rules') }}" wire:navigate
                   class="px-6 py-3 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-medium">
                    {{ __('قائمة الخصومات') }}
                </a>
                <button type="button" wire:click="backToRecipes"
                        class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium">
                    {{ __('إنشاء خصم آخر') }}
                </button>
            </div>
        </div>

    {{-- ─────────── Stage: recipes ─────────── --}}
    @elseif($stage === 'recipes')
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
            <h2 class="text-base font-bold text-gray-800 mb-1">{{ __('اختر وصفة خصم') }}</h2>
            <p class="text-sm text-gray-500 mb-5">{{ __('كل وصفة جاهزة — غيّر رقمين واحفظ') }}</p>

            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3">
                @foreach($recipes as $key => $recipe)
                    <button type="button" wire:click="chooseRecipe('{{ $key }}')"
                            class="p-4 rounded-xl border-2 border-gray-200 hover:border-emerald-500 hover:bg-emerald-50
                                   text-center transition-colors focus:outline-none focus:ring-2 focus:ring-emerald-500">
                        <x-ui.icon :name="$recipe['icon']" class="w-7 h-7 mx-auto mb-1.5 text-emerald-600" />
                        <div class="text-sm font-bold text-gray-800">{{ $recipe['name_ar'] }}</div>
                        <div class="text-xs text-gray-400 mt-0.5">{{ $recipe['hint_ar'] }}</div>
                    </button>
                @endforeach
            </div>

            <div class="mt-5 pt-5 border-t border-gray-100 text-center">
                <button type="button" wire:click="startBlank"
                        class="text-sm text-gray-600 hover:text-emerald-700 font-medium">
                    {{ __('أو ابدأ من الصفر') }}
                </button>
            </div>
        </div>

    {{-- ─────────── Stage: build ─────────── --}}
    @else
        <div class="grid grid-cols-1 lg:grid-cols-5 gap-5">

            {{-- The sentence --}}
            <div class="lg:col-span-3 space-y-5">
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
                    <div class="flex items-center justify-between mb-4">
                        <h2 class="text-base font-bold text-gray-800">{{ __('الخصم') }}</h2>
                        <button type="button" wire:click="backToRecipes"
                                class="text-xs text-gray-500 hover:text-gray-700">{{ __('تغيير الوصفة') }}</button>
                    </div>

                    <div class="p-4 bg-emerald-50 border border-emerald-200 rounded-xl mb-5">
                        <p class="text-emerald-900 font-semibold leading-8">{{ $this->sentence }}</p>
                    </div>

                    <div class="space-y-4">
                        {{-- Name --}}
                        <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.live.debounce.400ms="nameAr"
                                   class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 focus:border-emerald-500">
                            @error('nameAr') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>

                        {{-- Amount + type --}}
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('نوع التعديل') }}</label>
                                <select wire:model.live="adjustmentType"
                                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500">
                                    <option value="percentage_discount">{{ __('خصم نسبة مئوية') }}</option>
                                    <option value="fixed_discount">{{ __('خصم مبلغ ثابت') }}</option>
                                    <option value="fixed_price">{{ __('سعر ثابت') }}</option>
                                    <option value="percentage_increase">{{ __('زيادة نسبة مئوية') }}</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">
                                    {{ __('القيمة') }}
                                    <span class="text-gray-400">
                                        ({{ in_array($adjustmentType, ['fixed_discount','fixed_price']) ? __('ج.م') : '%' }})
                                    </span>
                                </label>
                                <input type="number" step="0.01" min="0" dir="ltr"
                                       wire:model.live.debounce.400ms="amount"
                                       class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500">
                                @error('amount') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                        </div>

                        {{-- Who qualifies --}}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('لمن؟') }}</label>
                            <select wire:model.live="ruleType"
                                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500 mb-3">
                                @foreach($ruleTypes as $rt)
                                    <option value="{{ $rt->value }}">{{ $rt->label() }}</option>
                                @endforeach
                            </select>

                            @include('livewire.pricing.partials.condition-fields', [
                                'kind' => $schemaKind,
                                'unit' => $schemaUnit,
                            ])
                            @error('conditions') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                        </div>

                        {{-- Branches --}}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                {{ __('الفروع') }}
                                <span class="text-xs text-gray-400">{{ __('اتركه فارغاً للتطبيق على كل الفروع') }}</span>
                            </label>
                            <div class="flex flex-wrap gap-2">
                                @foreach($branches as $branch)
                                    <label class="cursor-pointer">
                                        <input type="checkbox" value="{{ $branch->id }}"
                                               wire:model.live="branchIds" class="peer sr-only">
                                        <span class="inline-block px-3 py-1.5 rounded-full border-2 text-sm font-medium
                                                     border-gray-200 text-gray-600
                                                     peer-checked:border-emerald-500 peer-checked:bg-emerald-50 peer-checked:text-emerald-700">
                                            {{ $branch->name_ar }}
                                        </span>
                                    </label>
                                @endforeach
                            </div>
                        </div>

                        {{-- Stacking --}}
                        <div class="pt-4 border-t border-gray-100">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                {{ __('يُجمع مع خصومات أخرى؟') }}
                            </label>
                            <div class="inline-flex rounded-lg border-2 border-gray-200 overflow-hidden">
                                <button type="button" wire:click="$set('isStackable', false)"
                                        class="px-4 py-1.5 text-sm font-bold transition-colors
                                               {{ !$isStackable ? 'bg-emerald-600 text-white' : 'bg-white text-gray-500' }}">
                                    {{ __('لا — الأفضل فقط') }}
                                </button>
                                <button type="button" wire:click="$set('isStackable', true)"
                                        class="px-4 py-1.5 text-sm font-bold transition-colors
                                               {{ $isStackable ? 'bg-emerald-600 text-white' : 'bg-white text-gray-500' }}">
                                    {{ __('نعم') }}
                                </button>
                            </div>
                            <p class="text-xs text-gray-400 mt-1.5">
                                {{ __('معظم الخصومات لا تُجمع — يُطبق الأعلى قيمة فقط') }}
                            </p>
                        </div>

                        {{-- Pin + dates --}}
                        <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-4 border-t border-gray-100">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('من تاريخ') }} <span class="text-red-500">*</span></label>
                                <input type="date" wire:model="effectiveFrom" dir="ltr"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500">
                                @error('effectiveFrom') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('إلى تاريخ') }}</label>
                                <input type="date" wire:model="effectiveTo" dir="ltr"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500">
                                @error('effectiveTo') <p class="text-red-500 text-xs mt-1">{{ $message }}</p> @enderror
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">{{ __('حد الاستخدام') }}</label>
                                <input type="number" min="1" wire:model="usageLimit" dir="ltr"
                                       placeholder="{{ __('بلا حد') }}"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-emerald-500">
                            </div>
                        </div>

                        <label class="flex items-center gap-2 cursor-pointer">
                            <input type="checkbox" wire:model.live="isPinned"
                                   class="rounded border-gray-300 text-emerald-600 focus:ring-emerald-500">
                            <span class="text-sm text-gray-700">{{ __('تثبيت كزر سريع في شاشة الدفع') }}</span>
                        </label>
                    </div>
                </div>

                <div class="flex items-center gap-3">
                    <button type="button" wire:click="save"
                            wire:loading.attr="disabled" wire:target="save"
                            class="px-6 py-3 bg-emerald-600 text-white rounded-lg hover:bg-emerald-700 font-medium disabled:opacity-50">
                        <span wire:loading.remove wire:target="save">{{ __('حفظ الخصم') }}</span>
                        <span wire:loading wire:target="save">{{ __('جارٍ الحفظ...') }}</span>
                    </button>
                    <button type="button" wire:click="backToRecipes"
                            class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 font-medium">
                        {{ __('إلغاء') }}
                    </button>
                </div>
            </div>

            {{-- Simulator --}}
            <div class="lg:col-span-2">
                <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-5 lg:sticky lg:top-4">
                    <h2 class="text-base font-bold text-gray-800 mb-1">{{ __('جرّبها على مشترك حقيقي') }}</h2>
                    <p class="text-xs text-gray-500 mb-4">{{ __('شوف الحساب قبل ما تحفظ') }}</p>

                    @if($audience)
                        <div class="mb-4 p-3 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800 font-semibold">
                            <x-ui.icon name="users" class="w-4 h-4 inline-block align-text-bottom" />
                            {{ __('تنطبق على') }} {{ $audience['matched'] }}
                            {{ __('مشترك من') }} {{ $audience['total'] }}
                            @if($audience['total'] > 0 && $audience['matched'] === $audience['total'])
                                <div class="text-xs font-normal text-blue-700 mt-1">
                                    <x-ui.icon name="exclamation-triangle" class="w-3.5 h-3.5 inline-block align-text-bottom" />
                                    {{ __('تنطبق على الجميع — تأكد أن هذا مقصود') }}
                                </div>
                            @endif
                        </div>
                    @endif

                    <div class="space-y-3 mb-4">
                        <select wire:model.live="simProgramId"
                                class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500">
                            <option value="">{{ __('اختر برنامج...') }}</option>
                            @foreach($programs as $program)
                                <option value="{{ $program->id }}">{{ $program->name_ar }}</option>
                            @endforeach
                        </select>

                        <input type="number" wire:model.live.debounce.600ms="simParticipantId" dir="ltr"
                               placeholder="{{ __('رقم المشترك') }}"
                               class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-emerald-500">
                    </div>

                    @if(!empty($simulation['error']))
                        <div class="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
                            {{ $simulation['error'] }}
                        </div>
                    @elseif(!empty($simulation))
                        <div class="border-t border-gray-100 pt-4">
                            <div class="font-bold text-gray-800 text-sm mb-2">
                                {{ $simulation['participant'] }} — {{ $simulation['program'] }}
                            </div>

                            <div class="flex justify-between py-1 text-sm text-gray-700">
                                <span>{{ __('السعر الأساسي') }}</span>
                                <span dir="ltr" class="tabular-nums">{{ number_format($simulation['base'] / 100, 2) }}</span>
                            </div>

                            @foreach($simulation['applied'] as $line)
                                <div class="flex justify-between py-1 text-sm text-emerald-700">
                                    <span>{{ $line['rule_name'] }}</span>
                                    <span dir="ltr" class="tabular-nums">−{{ number_format($line['discount'] / 100, 2) }}</span>
                                </div>
                            @endforeach

                            <div class="flex justify-between py-1 text-sm {{ $simulation['qualifies'] ? 'text-emerald-700 font-semibold' : 'text-gray-400' }}">
                                <span>{{ $simulation['draft_name'] }} {{ __('(جديد)') }}</span>
                                <span>{{ $simulation['qualifies'] ? __('ينطبق') : __('لا ينطبق') }}</span>
                            </div>

                            <div class="flex justify-between border-t-2 border-gray-800 mt-2 pt-2 font-bold text-gray-900">
                                <span>{{ __('الإجمالي الحالي') }}</span>
                                <span dir="ltr" class="tabular-nums">{{ number_format($simulation['current'] / 100, 2) }} {{ __('ج.م') }}</span>
                            </div>
                        </div>
                    @else
                        <p class="text-sm text-gray-400 text-center py-6">
                            {{ __('اختر برنامج ومشترك لعرض الحساب') }}
                        </p>
                    @endif
                </div>
            </div>
        </div>
    @endif
</div>
