@php
    $statusLabel = $version->status->label();
@endphp

<div>
    {{-- Header --}}
    <div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
        <div>
            <a href="{{ route('automation.workflows.show', $workflow) }}" wire:navigate class="text-xs text-indigo-600">← {{ $workflow->name }}</a>
            <h1 class="mt-1 text-lg font-bold text-gray-800">
                {{ $readOnly ? 'مشاهدهٔ مراحل' : 'ویرایش مراحل' }}
                <span class="text-sm font-normal text-gray-500">— نسخهٔ <span class="ltr-numerals">{{ $version->version_number }}</span> ({{ $statusLabel }})</span>
                @if ($dirty)<span class="ms-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-normal text-amber-700">ذخیره‌نشده</span>@endif
            </h1>
        </div>

        @unless ($readOnly)
            <div class="flex flex-wrap items-center gap-2">
                <x-secondary-button type="button" x-on:click="$dispatch('open-modal', 'workflow-settings')">تنظیمات ارسال</x-secondary-button>
                <x-secondary-button type="button" wire:click="saveDraft">ذخیره پیش‌نویس</x-secondary-button>
                <x-primary-button type="button" wire:click="openPublish">انتشار</x-primary-button>
                @if ($workflow->published_version_id)
                    <button type="button" wire:click="discardDraft" wire:confirm="این پیش‌نویس دور انداخته شود؟ نسخهٔ منتشرشده تغییری نمی‌کند." class="rounded-md border border-gray-300 bg-white px-3 py-2 text-xs font-medium text-gray-600 hover:bg-gray-50">دور انداختن</button>
                @endif
            </div>
        @endunless
    </div>

    {{-- Read-only and unsupported notices --}}
    @if ($unsupported)
        <div class="mb-4 rounded-lg border border-amber-300 bg-amber-50 p-4 text-sm text-amber-800">
            <p class="font-medium">این Workflow ساختاری دارد که ویرایشگر مرحله‌ای نمی‌تواند نشان دهد یا ویرایش کند.</p>
            <ul class="mt-1 list-disc ps-5 text-xs">
                @foreach ($unsupportedProblems as $problem)
                    <li>{{ $problem }}</li>
                @endforeach
            </ul>
            <p class="mt-2 text-xs">Workflow همچنان درست اجرا می‌شود؛ فقط این صفحه آن را ویرایش نمی‌کند تا چیزی از آن بی‌صدا تغییر نکند.</p>
        </div>
    @elseif ($readOnly)
        <div class="mb-4 flex flex-wrap items-center justify-between gap-2 rounded-lg border border-sky-200 bg-sky-50 p-3 text-sm text-sky-800">
            <span>{{ $version->isEditable() ? 'شما اجازهٔ ویرایش این Workflow را ندارید.' : 'این نسخه منتشر شده و قابل ویرایش نیست؛ برای تغییر، پیش‌نویس جدیدی از آن بسازید. Executionهای در حال اجرا روی همین نسخه ادامه می‌دهند.' }}</span>
            @if ($canUpdate && ! $version->isEditable())
                @if ($hasDraftElsewhere)
                    <a href="{{ route('automation.workflows.builder', $workflow) }}" wire:navigate class="rounded-md bg-sky-700 px-3 py-1.5 text-xs font-medium text-white">ادامهٔ ویرایش پیش‌نویس</a>
                @else
                    <button type="button" wire:click="createDraft" class="rounded-md bg-sky-700 px-3 py-1.5 text-xs font-medium text-white">ساخت پیش‌نویس جدید از این نسخه</button>
                @endif
            @endif
        </div>
    @endif

    {{-- Problems --}}
    @if ($problems !== [])
        <div class="mb-4 rounded-lg border border-amber-300 bg-amber-50 p-4 text-sm text-amber-900">
            <p class="font-medium">قبل از انتشار این موارد باید درست شوند ({{ count($problems) }})</p>
            <ul class="mt-1 list-disc ps-5 text-xs leading-6">
                @foreach ($problems as $problem)
                    <li>{{ $problem }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- The flow --}}
    <div class="rounded-xl border border-gray-200 bg-white p-4">
        <div class="mb-3 flex items-center gap-2 text-xs text-gray-500">
            <span class="flex h-6 w-6 items-center justify-center rounded-full bg-emerald-100 text-emerald-700">▶</span>
            <span>شروع — هر تارگتی که به کمپین اضافه شود از اینجا وارد می‌شود</span>
        </div>

        @include('livewire.automation.workflows._sequence', ['seq' => $sequence, 'path' => '', 'readOnly' => $readOnly, 'flat' => $flat, 'describer' => $describer])
    </div>

    @unless ($readOnly)
        {{-- Step editor --}}
        <x-modal name="workflow-step" focusable max-width="2xl">
            <form wire:submit="saveStep" class="space-y-4 p-6">
                @if ($editKind === 'sms')
                    <h2 class="text-base font-bold text-gray-800">ویرایش پیامک</h2>

                    <div>
                        <x-input-label for="st-name" value="عنوان داخلی" />
                        <x-text-input wire:model="form.name" id="st-name" type="text" class="mt-1 block w-full" />
                        <x-input-error :messages="$errors->get('form.name')" class="mt-2" />
                    </div>

                    <div>
                        <div class="mb-1 flex items-center justify-between gap-2">
                            <x-input-label for="st-body" value="متن پیام" />
                            @if ($smsTemplates->isNotEmpty())
                                <select wire:model.live="form.template_id" class="rounded-md border-gray-300 py-1 text-xs">
                                    <option value="">درج از قالب…</option>
                                    @foreach ($smsTemplates as $template)
                                        <option value="{{ $template->id }}">{{ $template->name }}</option>
                                    @endforeach
                                </select>
                            @endif
                        </div>
                        @if ($preview)
                            <x-automation.message-field model="form.body" :preview="$preview" :catalog="$variableCatalog" id="st-body" />
                        @endif
                        <x-input-error :messages="$errors->get('form.body')" class="mt-2" />
                    </div>

                    <div class="grid gap-3 sm:grid-cols-2">
                        <div>
                            <x-input-label for="st-provider" value="پنل پیامکی" />
                            <select wire:model="form.provider" id="st-provider" class="mt-1 block w-full rounded-md border-gray-300 text-sm">
                                <option value="">پنل اصلی فضای کاری</option>
                                @foreach ($providers as $provider)
                                    <option value="{{ $provider }}">{{ $provider === 'melipayamak' ? 'ملی‌پیامک' : $provider }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <x-input-label for="st-sender" value="خط ارسال" />
                            <select wire:model="form.sender" id="st-sender" class="mt-1 block w-full rounded-md border-gray-300 text-sm">
                                <option value="">خط پیش‌فرض پنل</option>
                                @foreach ($senders as $sender)
                                    <option value="{{ $sender }}">{{ $sender }}</option>
                                @endforeach
                            </select>
                            @if ($senders === [])
                                <p class="mt-1 text-xs text-gray-400">خطوط ارسال را در «تنظیمات ← پیامک» ثبت کنید.</p>
                            @endif
                        </div>
                    </div>

                    <div class="space-y-2 rounded-lg border border-gray-200 p-3 text-sm">
                        <label class="flex items-center gap-2"><input type="checkbox" wire:model="form.send_only_in_window" class="rounded border-gray-300 text-indigo-600"><span>فقط در بازهٔ زمانی مجاز ارسال شود</span></label>
                        <label class="flex items-center gap-2"><input type="checkbox" wire:model="form.append_opt_out" class="rounded border-gray-300 text-indigo-600"><span>عبارت لغو ارسال (تنظیم‌شده در فضای کاری) به انتهای پیام اضافه شود</span></label>
                        <div class="flex flex-wrap items-center gap-2">
                            <span>اگر مقدار یک متغیر خالی بود:</span>
                            <select wire:model="form.on_missing_variable" class="rounded-md border-gray-300 py-1 text-sm">
                                <option value="skip">پیام ارسال نشود</option>
                                <option value="send_blank">با جای خالی ارسال شود</option>
                            </select>
                        </div>
                    </div>

                    <div class="space-y-2 rounded-lg border border-gray-200 p-3 text-sm">
                        <label class="flex items-center gap-2 font-medium"><input type="checkbox" wire:model.live="form.retry_enabled" class="rounded border-gray-300 text-indigo-600"><span>تلاش مجدد در صورت ناموفق بودن ارسال</span></label>
                        @if ($form['retry_enabled'] ?? false)
                            <div class="flex flex-wrap items-center gap-2">
                                <span>تا</span>
                                <input type="number" min="0" max="10" wire:model="form.retry_max" class="ltr-numerals w-16 rounded-md border-gray-300 py-1 text-sm">
                                <span>بار، هر</span>
                                <input type="number" min="1" wire:model="form.retry_interval" class="ltr-numerals w-20 rounded-md border-gray-300 py-1 text-sm">
                                <select wire:model="form.retry_unit" class="rounded-md border-gray-300 py-1 text-sm"><option value="minutes">دقیقه</option><option value="hours">ساعت</option></select>
                            </div>
                            <div class="flex flex-wrap items-center gap-2">
                                <span>اگر همچنان ناموفق بود:</span>
                                <select wire:model="form.retry_on_exhausted" class="rounded-md border-gray-300 py-1 text-sm">
                                    <option value="fail">Workflow برای این تارگت «ناموفق» شود</option>
                                    <option value="stop">Workflow متوقف (پایان‌یافته) شود</option>
                                    <option value="skip_step">این مرحله رد شود</option>
                                    <option value="continue">ادامهٔ روند</option>
                                </select>
                            </div>
                            <x-input-error :messages="array_merge($errors->get('form.retry_max'), $errors->get('form.retry_interval'))" />
                        @endif
                    </div>
                @elseif ($editKind === 'wait')
                    <h2 class="text-base font-bold text-gray-800">ویرایش انتظار</h2>

                    <div>
                        <x-input-label for="st-name" value="عنوان داخلی" />
                        <x-text-input wire:model="form.name" id="st-name" type="text" class="mt-1 block w-full" />
                    </div>

                    <div class="flex flex-wrap gap-2 text-xs">
                        @foreach ([[10, 'minutes', '۱۰ دقیقه'], [2, 'hours', '۲ ساعت'], [1, 'days', '۱ روز'], [7, 'days', '۷ روز'], [30, 'days', '۳۰ روز']] as [$amount, $unit, $label])
                            <button type="button" wire:click="setWaitPreset({{ $amount }}, '{{ $unit }}')" class="rounded-full border border-gray-200 bg-white px-3 py-1 text-gray-700 hover:border-indigo-300 hover:text-indigo-700">{{ $label }}</button>
                        @endforeach
                    </div>

                    <div class="space-y-3 rounded-lg border border-gray-200 p-3 text-sm">
                        <label class="flex items-center gap-2"><input type="radio" wire:model.live="form.mode" value="duration"><span>مدت مشخص از لحظهٔ رسیدن تارگت به این مرحله</span></label>
                        @if (($form['mode'] ?? '') === 'duration')
                            <div class="flex items-center gap-2 ps-6">
                                <input type="number" min="1" wire:model="form.amount" class="ltr-numerals w-24 rounded-md border-gray-300 py-1 text-sm">
                                <select wire:model="form.unit" class="rounded-md border-gray-300 py-1 text-sm">
                                    <option value="minutes">دقیقه</option><option value="hours">ساعت</option><option value="days">روز</option><option value="weeks">هفته</option>
                                </select>
                            </div>
                            <x-input-error :messages="$errors->get('form.amount')" class="ps-6" />
                        @endif

                        <label class="flex items-center gap-2"><input type="radio" wire:model.live="form.mode" value="until"><span>تا یک تاریخ و ساعت مشخص</span></label>
                        @if (($form['mode'] ?? '') === 'until')
                            <div class="ps-6">
                                <x-date-input name="form.at" :time="true" id="st-at" />
                                <x-input-error :messages="$errors->get('form.at')" class="mt-1" />
                            </div>
                        @endif
                    </div>
                    <p class="text-xs text-gray-400">مدت انتظار برای هر تارگت از لحظهٔ واقعی رسیدنش به این مرحله حساب می‌شود، نه از شروع کمپین.</p>
                @elseif ($editKind === 'condition')
                    <h2 class="text-base font-bold text-gray-800">ویرایش شرط</h2>

                    <div>
                        <x-input-label for="st-name" value="عنوان داخلی" />
                        <x-text-input wire:model="form.name" id="st-name" type="text" class="mt-1 block w-full" />
                    </div>

                    <div class="flex items-center gap-2 text-sm">
                        <span>شرط برقرار است اگر</span>
                        <select wire:model="form.logic" class="rounded-md border-gray-300 py-1 text-sm"><option value="all">همهٔ موارد زیر</option><option value="any">هرکدام از موارد زیر</option></select>
                        <span>درست باشد.</span>
                    </div>

                    <div class="space-y-2">
                        @foreach ($form['rules'] ?? [] as $i => $rule)
                            <div wire:key="rule-{{ $i }}" class="flex flex-wrap items-center gap-2 rounded-lg border border-gray-200 p-2 text-sm">
                                <select wire:model="form.rules.{{ $i }}.field" class="rounded-md border-gray-300 py-1 text-sm">
                                    @foreach ($fields as $field => $label)
                                        <option value="{{ $field }}">{{ $label }}</option>
                                    @endforeach
                                </select>
                                <select wire:model.live="form.rules.{{ $i }}.operator" class="rounded-md border-gray-300 py-1 text-sm">
                                    @foreach ($operators as $op => $opLabel)
                                        <option value="{{ $op }}">{{ $opLabel }}</option>
                                    @endforeach
                                </select>
                                @unless (in_array($rule['operator'] ?? '', ['is_empty', 'is_not_empty'], true))
                                    <input type="text" wire:model="form.rules.{{ $i }}.value" class="min-w-0 flex-1 rounded-md border-gray-300 py-1 text-sm" placeholder="{{ in_array($rule['operator'] ?? '', ['in', 'not_in'], true) ? 'چند مقدار با ویرگول جدا شود' : 'مقدار' }}">
                                @endunless
                                @if (count($form['rules']) > 1)
                                    <button type="button" wire:click="removeRule({{ $i }})" class="text-rose-600" aria-label="حذف شرط">✕</button>
                                @endif
                            </div>
                        @endforeach
                        <button type="button" wire:click="addRule" class="text-xs text-indigo-600">+ شرط دیگر</button>
                        <x-input-error :messages="$errors->get('form.rules')" />
                    </div>
                @elseif ($editKind === 'end')
                    <h2 class="text-base font-bold text-gray-800">پایان این مسیر</h2>

                    <div>
                        <x-input-label for="st-behavior" value="وقتی تارگت به اینجا رسید" />
                        <select wire:model.live="form.behavior" id="st-behavior" class="mt-1 block w-full rounded-md border-gray-300 text-sm">
                            <option value="complete">Workflow برای او تمام شود</option>
                            <option value="stop">Workflow متوقف شود</option>
                            <option value="loop">به یکی از مراحل برگردد (تکرار)</option>
                            <option value="restart">از اولین مرحله دوباره شروع شود</option>
                        </select>
                    </div>

                    @if (in_array($form['behavior'] ?? '', ['loop', 'restart'], true))
                        <div class="space-y-3 rounded-lg border border-gray-200 p-3 text-sm">
                            @if (($form['behavior'] ?? '') === 'loop')
                                <div>
                                    <x-input-label for="st-to" value="برگشت به مرحلهٔ" />
                                    <select wire:model="form.to_node" id="st-to" class="mt-1 block w-full rounded-md border-gray-300 text-sm">
                                        <option value="">— انتخاب کنید —</option>
                                        @foreach ($flat as $item)
                                            <option value="{{ $item['key'] }}">{{ $item['name'] }}</option>
                                        @endforeach
                                    </select>
                                    <x-input-error :messages="$errors->get('form.to_node')" class="mt-1" />
                                </div>
                            @endif
                            <div class="flex flex-wrap items-center gap-2">
                                <span>هر</span>
                                <input type="number" min="1" wire:model="form.delay_amount" class="ltr-numerals w-20 rounded-md border-gray-300 py-1 text-sm">
                                <select wire:model="form.delay_unit" class="rounded-md border-gray-300 py-1 text-sm"><option value="hours">ساعت</option><option value="days">روز</option><option value="weeks">هفته</option></select>
                                <span>حداکثر</span>
                                <input type="number" min="1" wire:model="form.max_cycles" class="ltr-numerals w-20 rounded-md border-gray-300 py-1 text-sm">
                                <span>دور</span>
                            </div>
                            <x-input-error :messages="array_merge($errors->get('form.delay_amount'), $errors->get('form.max_cycles'))" />
                            <p class="text-xs text-gray-400">فاصلهٔ بین دورها حداقل ۱ ساعت است و تعداد دورها همیشه محدود می‌ماند.</p>
                        </div>
                    @endif
                @endif

                <div class="flex justify-end gap-2">
                    <x-secondary-button type="button" x-on:click="$dispatch('close-modal', 'workflow-step')">انصراف</x-secondary-button>
                    <x-primary-button wire:loading.attr="disabled">اعمال</x-primary-button>
                </div>
            </form>
        </x-modal>

        {{-- Defaults of this workflow --}}
        <x-modal name="workflow-settings" focusable max-width="lg">
            <div class="space-y-4 p-6">
                <h2 class="text-base font-bold text-gray-800">تنظیمات ارسال</h2>
                <p class="text-xs text-gray-500">پیش‌فرض همهٔ کمپین‌هایی که از این Workflow ساخته می‌شوند؛ هر کمپین می‌تواند آن را عوض کند.</p>

                <div>
                    <x-input-label for="set-limit" value="سقف ارسال روزانه (خالی = بدون سقف)" />
                    <input type="number" min="1" wire:model.live.debounce.400ms="settings.daily_limit" id="set-limit" class="ltr-numerals mt-1 block w-40 rounded-md border-gray-300 text-sm" placeholder="مثلاً 100">
                    <p class="mt-1 text-xs text-gray-400">مخاطبی که امروز جا نشد، فردا به‌ترتیب سررسید ارسال می‌شود.</p>
                </div>

                <div class="space-y-2 rounded-lg border border-gray-200 p-3 text-sm">
                    <label class="flex items-center gap-2 font-medium"><input type="checkbox" wire:model.live="settings.window_enabled" class="rounded border-gray-300 text-indigo-600"><span>ارسال فقط در ساعت‌های مجاز</span></label>
                    @if ($settings['window_enabled'] ?? false)
                        @if ($settings['window_multi'] ?? false)
                            <p class="text-xs text-amber-700">این پنجره برای بعضی روزها چند بازه دارد و در این صفحه قابل ویرایش نیست؛ همان‌طور که هست نگه داشته می‌شود. برای تغییر آن، تیک بالا را بردارید و دوباره تنظیم کنید.</p>
                        @else
                            <div class="space-y-1.5">
                                @foreach ($days as $day => $dayLabel)
                                    <div wire:key="day-{{ $day }}" class="flex flex-wrap items-center gap-2">
                                        <label class="flex w-28 items-center gap-2"><input type="checkbox" wire:model.live="settings.window.{{ $day }}.on" class="rounded border-gray-300 text-indigo-600"><span>{{ $dayLabel }}</span></label>
                                        @if ($settings['window'][$day]['on'] ?? false)
                                            <span class="text-xs text-gray-500">از</span>
                                            <input type="time" wire:model="settings.window.{{ $day }}.from" class="ltr-numerals rounded-md border-gray-300 py-1 text-sm">
                                            <span class="text-xs text-gray-500">تا</span>
                                            <input type="time" wire:model="settings.window.{{ $day }}.until" class="ltr-numerals rounded-md border-gray-300 py-1 text-sm">
                                        @else
                                            <span class="text-xs text-gray-400">غیرفعال</span>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                            <p class="text-xs text-gray-400">به‌وقت منطقهٔ زمانی فضای کاری. پیامی که خارج از این ساعت‌ها سررسید شود، به اولین زمان مجاز بعدی می‌رود.</p>
                        @endif
                    @endif
                </div>

                <div>
                    <x-input-label for="set-unknown" value="اگر نتیجهٔ ارسال یک پیام نامعلوم ماند (مثلاً قطع اتصال پس از ارسال)" />
                    <select wire:model="settings.on_unknown_outcome" id="set-unknown" class="mt-1 block w-full rounded-md border-gray-300 text-sm">
                        <option value="">ادامهٔ روند (پیش‌فرض)</option>
                        <option value="continue">ادامهٔ روند</option>
                        <option value="hold">متوقف برای بررسی دستی</option>
                    </select>
                    <p class="mt-1 text-xs text-gray-400">در هر دو حالت آن پیام دوباره ارسال نمی‌شود.</p>
                </div>

                @if ($settingsError)
                    <p class="text-xs text-rose-600">{{ $settingsError }}</p>
                @endif

                <div class="flex justify-end">
                    <x-secondary-button type="button" x-on:click="$dispatch('close-modal', 'workflow-settings')">بستن</x-secondary-button>
                </div>
            </div>
        </x-modal>

        {{-- Publish --}}
        <x-modal name="publish-workflow" :show="$errors->has('publishNote')" focusable max-width="md">
            <form wire:submit="publish" class="space-y-4 p-6">
                <h2 class="text-base font-bold text-gray-800">انتشار Workflow</h2>
                <p class="text-sm text-gray-600">پس از انتشار، این نسخه ثابت می‌شود و کمپین‌های جدید از آن استفاده می‌کنند. کمپین‌های در حال اجرا روی نسخهٔ قبلی می‌مانند.</p>
                <div>
                    <x-input-label for="pub-note" value="توضیح این نسخه (اختیاری)" />
                    <textarea wire:model="publishNote" id="pub-note" rows="2" class="mt-1 block w-full rounded-md border-gray-300 text-sm shadow-sm" placeholder="مثلاً متن پیام دوم عوض شد"></textarea>
                    <x-input-error :messages="$errors->get('publishNote')" class="mt-2" />
                </div>
                <div class="flex justify-end gap-2">
                    <x-secondary-button type="button" x-on:click="$dispatch('close-modal', 'publish-workflow')">انصراف</x-secondary-button>
                    <x-primary-button wire:loading.attr="disabled">انتشار</x-primary-button>
                </div>
            </form>
        </x-modal>
    @endunless
</div>