{{--
    Entity-level SMART RETRY control — button + modal.

    Drives NotificationRetryController (preview + execute) which delegates
    to NotificationRetryService::retryEntity() / SmartRetryPlanner. The UI
    NEVER computes who to send to and never bypasses the idempotency
    success-guard — it only renders the engine's dry-run + result. Delta
    only: already-delivered recipients are skipped by the backend.

    Props:
      preview-url   POST → dry-run summary (no sending)
      execute-url   POST → queue the delta + result summary
      entity-type   'demo' | 'committee' | 'notification' | …
      entity-id     int
      entity-title  string
      entity-label        optional badge text (defaults to Demo/Committee by entity-type)
      show-automation-type  bool (default true) — hide for single-source producers
      show-audience         bool (default true) — hide when audience is fixed
      show-not-confirmed    bool (default true) — hide when there is no attendance axis
--}}
@props([
    'previewUrl', 'executeUrl', 'entityType', 'entityId', 'entityTitle',
    'entityLabel' => null,
    'showAutomationType' => true,
    'showAudience' => true,
    'showNotConfirmed' => true,
])

@php
    $ar = app()->getLocale() === 'ar';
    $badgeLabel = $entityLabel ?? ($entityType === 'demo' ? ($ar ? 'ديمو' : 'Demo') : ($ar ? 'لجنة' : 'Committee'));
@endphp

<div class="rn"
     x-data="retryNotifications({
        previewUrl: @js($previewUrl),
        executeUrl: @js($executeUrl),
        entityType: @js($entityType),
        entityId: @js((int) $entityId),
        entityTitle: @js($entityTitle),
        entityLabel: @js($badgeLabel),
        labels: {
            ar: {{ $ar ? 'true' : 'false' }},
        }
     })"
     @keydown.escape.window="open = false">

    <button type="button" class="btn-secondary" @click="show()">
        ↻ {{ $ar ? 'إعادة إرسال الإشعارات' : 'Retry Notifications' }}
    </button>

    <template x-teleport="body">
    <div class="rn-overlay" x-show="open" x-cloak @click.self="open = false" style="display:none;">
        <div class="rn-modal" role="dialog" aria-modal="true">

            {{-- Header --}}
            <div class="rn-head">
                <div>
                    <div class="rn-title">{{ $ar ? 'إعادة إرسال ذكية للإشعارات' : 'Smart Notification Retry' }}</div>
                    <div class="rn-sub">
                        <span class="rn-badge" x-text="entityLabel"></span>
                        <span>#<span x-text="entityId"></span></span>
                        <span class="rn-muted" x-text="entityTitle"></span>
                    </div>
                </div>
                <button type="button" class="rn-x" @click="open = false" aria-label="Close">&times;</button>
            </div>

            <div class="rn-body">
                {{-- No automation enabled --}}
                <div x-show="noAutomation" class="rn-alert rn-alert--warn">
                    {{ $ar ? 'لا توجد أتمتة مفعّلة مطابقة للمعايير المختارة — لا يوجد ما يُعاد إرساله.' : 'No enabled automation matches the selected filters — nothing to retry.' }}
                </div>

                <template x-if="!noAutomation">
                <div>
                    {{-- Automation type (hidden for single-source producers) --}}
                    @if ($showAutomationType)
                    <div class="rn-field">
                        <label class="rn-label">{{ $ar ? 'نوع الأتمتة' : 'Automation type' }}</label>
                        <div class="rn-chips">
                            <label class="rn-chip"><input type="radio" name="rn-type-{{ $entityId }}" value="all" x-model="automationType" @change="invalidate()"> {{ $ar ? 'الكل' : 'All' }}</label>
                            <label class="rn-chip"><input type="radio" name="rn-type-{{ $entityId }}" value="creation" x-model="automationType" @change="invalidate()"> {{ $ar ? 'الإنشاء' : 'Creation' }}</label>
                            <label class="rn-chip"><input type="radio" name="rn-type-{{ $entityId }}" value="reminder" x-model="automationType" @change="invalidate()"> {{ $ar ? 'التذكير' : 'Reminder' }}</label>
                            <label class="rn-chip"><input type="radio" name="rn-type-{{ $entityId }}" value="confirmation" x-model="automationType" @change="invalidate()"> {{ $ar ? 'التأكيد' : 'Confirmation' }}</label>
                        </div>
                    </div>
                    @endif

                    {{-- Audience (hidden when the audience is fixed) --}}
                    @if ($showAudience)
                    <div class="rn-field">
                        <label class="rn-label">{{ $ar ? 'الجمهور' : 'Audience' }}</label>
                        <div class="rn-chips">
                            <label class="rn-chip"><input type="radio" name="rn-aud-{{ $entityId }}" value="all" x-model="audience" @change="invalidate()"> {{ $ar ? 'الكل' : 'All' }}</label>
                            <label class="rn-chip"><input type="radio" name="rn-aud-{{ $entityId }}" value="investor" x-model="audience" @change="invalidate()"> {{ $ar ? 'المستثمرون' : 'Investors' }}</label>
                            <label class="rn-chip"><input type="radio" name="rn-aud-{{ $entityId }}" value="startup" x-model="audience" @change="invalidate()"> {{ $ar ? 'الشركات' : 'Companies' }}</label>
                        </div>
                    </div>
                    @endif

                    {{-- Channel selection --}}
                    <div class="rn-field">
                        <label class="rn-label">{{ $ar ? 'القنوات' : 'Channels' }}</label>
                        <div class="rn-chips">
                            <label class="rn-chip">
                                <input type="checkbox" x-model="allChannels" @change="onAllToggle()">
                                {{ $ar ? 'كل القنوات' : 'All channels' }}
                            </label>
                            <label class="rn-chip" :class="{ 'rn-chip--off': allChannels }">
                                <input type="checkbox" x-model="channels.whatsapp" :disabled="allChannels" @change="invalidate()"> WhatsApp
                            </label>
                            <label class="rn-chip" :class="{ 'rn-chip--off': allChannels }">
                                <input type="checkbox" x-model="channels.email" :disabled="allChannels" @change="invalidate()"> Email
                            </label>
                            <label class="rn-chip" :class="{ 'rn-chip--off': allChannels }">
                                <input type="checkbox" x-model="channels.sms" :disabled="allChannels" @change="invalidate()"> SMS
                            </label>
                        </div>
                    </div>

                    {{-- Delivery-state / attendance filter --}}
                    <div class="rn-field">
                        <label class="rn-label">{{ $ar ? 'الحالة المستهدفة' : 'Delivery state' }}</label>
                        <div class="rn-chips">
                            <label class="rn-chip"><input type="radio" name="rn-state-{{ $entityId }}" value="failed_not_sent" x-model="deliveryState" @change="invalidate()"> {{ $ar ? 'فشل + لم يُرسل' : 'Failed + Not sent' }}</label>
                            <label class="rn-chip"><input type="radio" name="rn-state-{{ $entityId }}" value="failed" x-model="deliveryState" @change="invalidate()"> {{ $ar ? 'الفاشل فقط' : 'Failed only' }}</label>
                            <label class="rn-chip"><input type="radio" name="rn-state-{{ $entityId }}" value="not_sent" x-model="deliveryState" @change="invalidate()"> {{ $ar ? 'لم يُرسل فقط' : 'Not sent only' }}</label>
                            @if ($showNotConfirmed)
                            <label class="rn-chip rn-chip--attend"><input type="radio" name="rn-state-{{ $entityId }}" value="not_confirmed" x-model="deliveryState" @change="invalidate()"> {{ $ar ? 'لم يؤكّدوا الحضور' : 'Not Confirmed Attendance' }}</label>
                            @endif
                        </div>
                        <p class="rn-hint" x-show="deliveryState !== 'not_confirmed'">{{ $ar ? 'لن يُعاد الإرسال لأي مستلم وصلته الرسالة بنجاح.' : 'Recipients already delivered successfully are never resent.' }}</p>
                        <p class="rn-hint" x-show="deliveryState === 'not_confirmed'" x-cloak>{{ $ar ? 'يُعاد الإرسال لكل من لم يؤكّد حضوره — حتى لو وصلته الرسالة من قبل. (الشركات: كلها تُعتبر غير مؤكَّدة.)' : 'Re-sends to everyone who has not confirmed attendance — even if they already received it. (Companies: all are treated as not confirmed.)' }}</p>
                    </div>

                    <button type="button" class="btn-secondary rn-calc" @click="runPreview()" :disabled="loading">
                        <span x-show="!loading">🔍 {{ $ar ? 'احسب (تشغيل تجريبي)' : 'Calculate (dry-run)' }}</span>
                        <span x-show="loading">{{ $ar ? 'جارٍ الحساب…' : 'Calculating…' }}</span>
                    </button>

                    {{-- Dry-run summary --}}
                    <div x-show="preview" x-cloak class="rn-summary">
                        {{-- Delivery-state stats (failed / not-sent modes) --}}
                        <div class="rn-grid" x-show="preview?.mode !== 'not_confirmed'">
                            <div class="rn-stat"><div class="rn-stat__n" x-text="preview?.total_audience ?? 0"></div><div class="rn-stat__l">{{ $ar ? 'إجمالي الجمهور' : 'Total audience' }}</div></div>
                            <div class="rn-stat rn-stat--ok"><div class="rn-stat__n" x-text="preview?.delivered ?? 0"></div><div class="rn-stat__l">{{ $ar ? 'وصلتهم (سيُتخطّون)' : 'Delivered (skipped)' }}</div></div>
                            <div class="rn-stat rn-stat--bad"><div class="rn-stat__n" x-text="preview?.failed ?? 0"></div><div class="rn-stat__l">{{ $ar ? 'فشل' : 'Failed' }}</div></div>
                            <div class="rn-stat rn-stat--warn"><div class="rn-stat__n" x-text="preview?.not_sent ?? 0"></div><div class="rn-stat__l">{{ $ar ? 'لم يُرسل' : 'Not sent' }}</div></div>
                            <div class="rn-stat rn-stat--target"><div class="rn-stat__n" x-text="preview?.targeted ?? 0"></div><div class="rn-stat__l">{{ $ar ? 'سيُرسل إليهم' : 'Will be sent' }}</div></div>
                        </div>

                        {{-- Attendance-confirmation stats (Not Confirmed mode) --}}
                        <div class="rn-grid" x-show="preview?.mode === 'not_confirmed'" x-cloak>
                            <div class="rn-stat"><div class="rn-stat__n" x-text="preview?.total_audience ?? 0"></div><div class="rn-stat__l">{{ $ar ? 'إجمالي الجمهور' : 'Total audience' }}</div></div>
                            <div class="rn-stat rn-stat--ok"><div class="rn-stat__n" x-text="preview?.confirmed_attendance ?? 0"></div><div class="rn-stat__l">{{ $ar ? 'أكّدوا الحضور' : 'Confirmed attendance' }}</div></div>
                            <div class="rn-stat rn-stat--warn"><div class="rn-stat__n" x-text="preview?.not_confirmed_attendance ?? 0"></div><div class="rn-stat__l">{{ $ar ? 'لم يؤكّدوا' : 'Not confirmed' }}</div></div>
                            <div class="rn-stat rn-stat--target"><div class="rn-stat__n" x-text="preview?.eligible ?? 0"></div><div class="rn-stat__l">{{ $ar ? 'مؤهّل لإعادة الإرسال' : 'Eligible for resend' }}</div></div>
                        </div>

                        {{-- Per-channel breakdown --}}
                        <table class="rn-table" x-show="Object.keys(preview?.per_channel || {}).length">
                            <thead><tr>
                                <th>{{ $ar ? 'القناة' : 'Channel' }}</th>
                                <th>{{ $ar ? 'وصلت' : 'Sent' }}</th>
                                <th>{{ $ar ? 'فشل' : 'Failed' }}</th>
                                <th>{{ $ar ? 'لم يُرسل' : 'Not sent' }}</th>
                                <th>{{ $ar ? 'سيُرسل' : 'Will send' }}</th>
                            </tr></thead>
                            <tbody>
                                <template x-for="(c, name) in preview.per_channel" :key="name">
                                    <tr>
                                        <td x-text="name"></td>
                                        <td x-text="c.sent ?? 0"></td>
                                        <td x-text="c.failed ?? 0"></td>
                                        <td x-text="c.not_sent ?? 0"></td>
                                        <td class="rn-td-target" x-text="c.targeted ?? 0"></td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>

                        {{-- Breakdown by automation --}}
                        <div class="rn-break" x-show="byAutomation.length">
                            <div class="rn-break__title">{{ $ar ? 'حسب الأتمتة' : 'By automation' }}</div>
                            <table class="rn-table">
                                <thead><tr>
                                    <th>{{ $ar ? 'الأتمتة' : 'Automation' }}</th>
                                    <th>{{ $ar ? 'الجمهور' : 'Audience' }}</th>
                                    <th>{{ $ar ? 'الكل' : 'Total' }}</th>
                                    <th>{{ $ar ? 'وصلت' : 'Delivered' }}</th>
                                    <th>{{ $ar ? 'فشل' : 'Failed' }}</th>
                                    <th>{{ $ar ? 'لم يُرسل' : 'Not sent' }}</th>
                                    <th>{{ $ar ? 'سيُرسل' : 'Will send' }}</th>
                                </tr></thead>
                                <tbody>
                                    <template x-for="a in byAutomation" :key="a.trigger + a.audience">
                                        <tr>
                                            <td><span class="rn-break__type" x-text="a.type"></span></td>
                                            <td x-text="a.audience"></td>
                                            <td x-text="a.total_audience"></td>
                                            <td x-text="a.delivered"></td>
                                            <td x-text="a.failed"></td>
                                            <td x-text="a.not_sent"></td>
                                            <td class="rn-td-target" x-text="a.targeted"></td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>

                        {{-- Breakdown by audience --}}
                        <div class="rn-break" x-show="Object.keys(byAudience).length">
                            <div class="rn-break__title">{{ $ar ? 'حسب الجمهور' : 'By audience' }}</div>
                            <div class="rn-chips">
                                <template x-for="(s, aud) in byAudience" :key="aud">
                                    <span class="rn-aud-pill">
                                        <strong x-text="aud === 'investor' ? '{{ $ar ? 'المستثمرون' : 'Investors' }}' : '{{ $ar ? 'الشركات' : 'Companies' }}'"></strong>
                                        · {{ $ar ? 'سيُرسل' : 'send' }} <b x-text="s.targeted"></b>
                                        <span class="rn-muted">/ <span x-text="s.total_audience"></span></span>
                                    </span>
                                </template>
                            </div>
                        </div>

                        {{-- Confirmation (delivery-state modes) --}}
                        <div class="rn-confirm" x-show="(preview?.targeted ?? 0) > 0 && preview?.mode !== 'not_confirmed'">
                            <p>
                                <span x-text="'{{ $ar ? 'أنت على وشك إعادة إرسال إشعارات لـ' : 'You are about to retry notifications for' }} ' + entityLabel + ' #' + entityId + '.'"></span>
                                {{ $ar ? 'سيتم تخطّي من وصلتهم الرسالة تلقائياً، وسيُعالَج فقط' : 'Already-delivered recipients are skipped automatically — only' }}
                                <strong x-text="preview?.targeted ?? 0"></strong>
                                {{ $ar ? 'مستلم.' : 'recipient(s) will be processed.' }}
                            </p>
                        </div>

                        {{-- Confirmation (Not Confirmed Attendance) — force re-send --}}
                        <div class="rn-confirm" x-show="(preview?.targeted ?? 0) > 0 && preview?.mode === 'not_confirmed'" x-cloak>
                            <p>
                                {{ $ar ? 'سيُعاد إرسال الإشعارات إلى' : 'Notifications will be re-sent to' }}
                                <strong x-text="preview?.eligible ?? 0"></strong>
                                {{ $ar ? 'مستلم لم يؤكّدوا حضورهم — حتى من وصلتهم الرسالة من قبل. (لن تتكرر سجلات الإرسال للمستلم نفسه.)' : 'recipient(s) who have not confirmed attendance — including those who already received it. (No duplicate dispatch ledger rows per recipient.)' }}
                            </p>
                        </div>
                        <div class="rn-confirm rn-confirm--empty" x-show="(preview?.targeted ?? 0) === 0">
                            {{ $ar ? 'لا يوجد مستلمون يحتاجون إعادة إرسال بالمعايير المختارة. ✅' : 'No recipients need a retry under the selected filters. ✅' }}
                        </div>
                    </div>

                    {{-- Result --}}
                    <div x-show="result" x-cloak class="rn-result">
                        <div class="rn-alert rn-alert--ok">
                            ✅ <strong x-text="result?.dispatched ?? 0"></strong> {{ $ar ? 'إشعار في قائمة الانتظار' : 'notification job(s) queued' }}
                            <template x-if="result?.summary?.mode !== 'not_confirmed'">
                                <span>· <span x-text="result?.skipped ?? 0"></span> {{ $ar ? 'تم تخطّيهم (وصلتهم بالفعل)' : 'skipped (already delivered)' }}</span>
                            </template>
                            <template x-if="result?.summary?.mode === 'not_confirmed'">
                                <span>· {{ $ar ? 'لغير المؤكِّدين' : 'to unconfirmed recipients' }}</span>
                            </template>
                            · <span x-text="(result?.channels || []).join(', ')"></span>
                        </div>
                        <div class="rn-muted rn-result__ts" x-text="result?.at"></div>
                    </div>

                    {{-- Error --}}
                    <div x-show="error" x-cloak class="rn-alert rn-alert--err" x-text="error"></div>
                </div>
                </template>
            </div>

            {{-- Footer --}}
            <div class="rn-foot">
                <button type="button" class="btn-secondary" @click="open = false">{{ $ar ? 'إغلاق' : 'Close' }}</button>
                <button type="button" class="btn-primary"
                        x-show="!noAutomation && !result"
                        :disabled="!preview || (preview?.targeted ?? 0) === 0 || executing"
                        @click="runExecute()">
                    <span x-show="!executing">↻ {{ $ar ? 'تأكيد وإعادة الإرسال' : 'Confirm & Retry' }}</span>
                    <span x-show="executing">{{ $ar ? 'جارٍ الإرسال…' : 'Queuing…' }}</span>
                </button>
            </div>
        </div>
    </div>
    </template>
</div>

@once
@push('styles')
<style>
    .rn-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
    .rn-modal { width: 100%; max-width: 640px; max-height: 90vh; overflow: auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px -20px rgba(15,23,42,.4); }
    .rn-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid #eef0f4; }
    .rn-title { font-size: 16px; font-weight: 800; }
    .rn-sub { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 13px; }
    .rn-badge { background: #eef2ff; color: #4338ca; font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 999px; }
    .rn-muted { color: #64748b; }
    .rn-x { border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: #94a3b8; }
    .rn-body { padding: 18px 20px; }
    .rn-field { margin-bottom: 16px; }
    .rn-label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #475569; margin-bottom: 8px; }
    .rn-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .rn-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #e2e8f0; border-radius: 10px; padding: 7px 11px; font-size: 13px; cursor: pointer; user-select: none; }
    .rn-chip--off { opacity: .45; }
    .rn-chip--attend { border-color: #c7d2fe; background: #eef2ff; }
    .rn-hint { font-size: 12px; color: #64748b; margin: 8px 0 0; }
    .rn-calc { margin-top: 4px; }
    .rn-summary { margin-top: 16px; border-top: 1px dashed #e2e8f0; padding-top: 16px; }
    .rn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
    .rn-stat { background: #f8fafc; border: 1px solid #eef0f4; border-radius: 12px; padding: 12px; text-align: center; }
    .rn-stat__n { font-size: 22px; font-weight: 800; }
    .rn-stat__l { font-size: 11px; color: #64748b; margin-top: 2px; }
    .rn-stat--ok { background: #f0fdf4; border-color: #bbf7d0; }
    .rn-stat--bad { background: #fef2f2; border-color: #fecaca; }
    .rn-stat--warn { background: #fffbeb; border-color: #fde68a; }
    .rn-stat--target { background: #eef2ff; border-color: #c7d2fe; }
    .rn-stat--target .rn-stat__n { color: #4338ca; }
    .rn-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; }
    .rn-table th, .rn-table td { text-align: center; padding: 7px 8px; border-bottom: 1px solid #f1f5f9; }
    .rn-table th { color: #64748b; font-weight: 700; font-size: 11px; text-transform: uppercase; }
    .rn-table td:first-child, .rn-table th:first-child { text-align: start; text-transform: none; }
    .rn-td-target { font-weight: 800; color: #4338ca; }
    .rn-confirm { margin-top: 16px; background: #f8fafc; border: 1px solid #eef0f4; border-radius: 12px; padding: 12px 14px; font-size: 13px; line-height: 1.6; }
    .rn-confirm--empty { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
    .rn-result { margin-top: 16px; }
    .rn-result__ts { font-size: 11px; margin-top: 6px; }
    .rn-alert { border-radius: 10px; padding: 11px 14px; font-size: 13px; }
    .rn-alert--ok { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d; }
    .rn-alert--warn { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
    .rn-alert--err { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; margin-top: 14px; }
    .rn-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid #eef0f4; }
    [dir="rtl"] .rn-table td:first-child, [dir="rtl"] .rn-table th:first-child { text-align: start; }
    .rn-break { margin-top: 16px; }
    .rn-break__title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #475569; margin-bottom: 6px; }
    .rn-break__type { display: inline-block; background: #eef2ff; color: #4338ca; font-weight: 700; font-size: 11px; padding: 2px 8px; border-radius: 999px; text-transform: capitalize; }
    .rn-aud-pill { display: inline-flex; align-items: center; gap: 5px; background: #f8fafc; border: 1px solid #eef0f4; border-radius: 999px; padding: 6px 12px; font-size: 13px; }
</style>
@endpush

@push('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('retryNotifications', (cfg) => ({
            ...cfg,
            open: false,
            automationType: 'all',
            audience: 'all',
            allChannels: true,
            channels: { whatsapp: true, email: true, sms: true },
            deliveryState: 'failed_not_sent',
            loading: false,
            executing: false,
            error: '',
            preview: null,
            byAutomation: [],
            byAudience: {},
            result: null,
            noAutomation: false,

            show() {
                this.reset();
                this.open = true;
            },
            reset() {
                this.preview = null;
                this.byAutomation = [];
                this.byAudience = {};
                this.result = null;
                this.error = '';
                this.noAutomation = false;
            },
            invalidate() {
                // Any filter change invalidates a prior dry-run / result.
                this.preview = null;
                this.result = null;
                this.error = '';
            },
            onAllToggle() {
                this.invalidate();
            },
            selectedChannels() {
                if (this.allChannels) return [];
                return Object.keys(this.channels).filter((c) => this.channels[c]);
            },
            csrf() {
                return document.querySelector('meta[name="csrf-token"]')?.content || '';
            },
            async post(url) {
                const res = await fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': this.csrf(),
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({
                        automation_type: this.automationType,
                        audience: this.audience,
                        delivery_state: this.deliveryState,
                        channels: this.selectedChannels(),
                    }),
                });
                const data = await res.json().catch(() => ({}));
                if (!res.ok || data.ok === false) {
                    throw new Error(data.message || ('Request failed (' + res.status + ')'));
                }
                return data;
            },
            async runPreview() {
                if (this.loading) return;
                this.loading = true;
                this.error = '';
                this.result = null;
                try {
                    const data = await this.post(this.previewUrl);
                    this.noAutomation = !!data.no_automation;
                    this.preview = data.summary || null;
                    this.byAutomation = data.by_automation || [];
                    this.byAudience = data.by_audience || {};
                } catch (e) {
                    this.error = e.message;
                } finally {
                    this.loading = false;
                }
            },
            async runExecute() {
                if (this.executing) return;               // double-click guard
                if (!this.preview || (this.preview.targeted ?? 0) === 0) return;
                this.executing = true;
                this.error = '';
                try {
                    this.result = await this.post(this.executeUrl);
                } catch (e) {
                    this.error = e.message;
                } finally {
                    this.executing = false;
                }
            },
        }));
    });
</script>
@endpush
@endonce