{% block sellops_rules_page %}
<sw-page class="sellops-rules-page">

    {% block sellops_rules_header %}
    <template #smart-bar-header>
        <h2>Upsell Rules</h2>
    </template>
    {% endblock %}

    {% block sellops_rules_actions %}
    <template #smart-bar-actions>
        <button @click="openCreateModal"
                style="height:32px; padding:0 16px; background:#5C67F2; color:#fff; border:none; border-radius:4px; font-size:13px; font-weight:600; cursor:pointer;">
            + Add Rule
        </button>
    </template>
    {% endblock %}

    {% block sellops_rules_content %}
    <template #content>
        <div style="padding:24px;">

            <div style="background:#f0f4ff; border:1px solid #c7d2fe; border-radius:6px; padding:14px 18px; margin-bottom:24px; font-size:13px; color:#3730a3; line-height:1.6;">
                <strong>How rules work:</strong>
                Rules are evaluated top-to-bottom (lowest priority first). The first matching rule wins.
                If no rule matches, the plugin falls back to the global Settings configuration.
            </div>

            <sw-loader v-if="isLoading" />

            <div v-else-if="rules.length === 0" style="text-align:center; padding:60px 20px; color:#8a94a6;">
                <div style="font-size:48px; margin-bottom:12px;">🎯</div>
                <p style="font-size:16px; font-weight:600; margin-bottom:8px;">No rules yet</p>
                <p style="font-size:13px;">Click <strong>+ Add Rule</strong> to create your first upsell funnel rule.</p>
            </div>

            <div v-else>
                <table style="width:100%; border-collapse:collapse; background:#fff; border-radius:8px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.08);">
                    <thead>
                        <tr style="background:#f8f9fb; border-bottom:1px solid #e5e7eb;">
                            <th style="padding:12px 16px; text-align:left; font-size:11px; font-weight:600; color:#52667a; text-transform:uppercase; letter-spacing:.5px; width:60px;">#</th>
                            <th style="padding:12px 16px; text-align:left; font-size:11px; font-weight:600; color:#52667a; text-transform:uppercase; letter-spacing:.5px;">Name</th>
                            <th style="padding:12px 16px; text-align:left; font-size:11px; font-weight:600; color:#52667a; text-transform:uppercase; letter-spacing:.5px;">Trigger</th>
                            <th style="padding:12px 16px; text-align:left; font-size:11px; font-weight:600; color:#52667a; text-transform:uppercase; letter-spacing:.5px;">Offer</th>
                            <th style="padding:12px 16px; text-align:center; font-size:11px; font-weight:600; color:#52667a; text-transform:uppercase; letter-spacing:.5px;">Discount</th>
                            <th style="padding:12px 16px; text-align:center; font-size:11px; font-weight:600; color:#52667a; text-transform:uppercase; letter-spacing:.5px;">Active</th>
                            <th style="padding:12px 16px; text-align:right; font-size:11px; font-weight:600; color:#52667a; text-transform:uppercase; letter-spacing:.5px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(rule, index) in rules" :key="rule.id"
                            style="border-bottom:1px solid #f3f4f6;"
                            :style="{ opacity: rule.active ? 1 : 0.5 }">
                            <td style="padding:14px 16px; font-size:13px; color:#8a94a6; font-weight:600;">{{ rule.priority }}</td>
                            <td style="padding:14px 16px; font-size:13px; font-weight:600; color:#1a1a2e;">{{ rule.name }}</td>
                            <td style="padding:14px 16px;">
                                <span style="background:#e0e7ff; color:#4338ca; border-radius:4px; padding:2px 8px; font-size:11px; font-weight:600;">{{ triggerLabel(rule) }}</span>
                            </td>
                            <td style="padding:14px 16px;">
                                <span style="background:#d1fae5; color:#065f46; border-radius:4px; padding:2px 8px; font-size:11px; font-weight:600;">{{ offerLabel(rule) }}</span>
                            </td>
                            <td style="padding:14px 16px; text-align:center; font-size:13px; color:#5C67F2; font-weight:600;">
                                {{ rule.discount_percent > 0 ? rule.discount_percent + '%' : '—' }}
                            </td>
                            <td style="padding:14px 16px; text-align:center;">
                                <input type="checkbox" :checked="rule.active" @change="toggleActive(rule)" style="width:16px; height:16px; cursor:pointer;" />
                            </td>
                            <td style="padding:14px 16px; text-align:right; white-space:nowrap;">
                                <button @click="moveUp(index)" :disabled="index === 0"
                                        style="background:none; border:1px solid #d1d9e0; border-radius:4px; padding:4px 8px; cursor:pointer; margin-right:4px; font-size:12px;">↑</button>
                                <button @click="moveDown(index)" :disabled="index === rules.length - 1"
                                        style="background:none; border:1px solid #d1d9e0; border-radius:4px; padding:4px 8px; cursor:pointer; margin-right:4px; font-size:12px;">↓</button>
                                <button @click="openEditModal(rule)"
                                        style="background:none; border:1px solid #5C67F2; color:#5C67F2; border-radius:4px; padding:4px 10px; cursor:pointer; margin-right:4px; font-size:12px; font-weight:600;">Edit</button>
                                <button @click="deleteRule(rule)"
                                        style="background:none; border:1px solid #ef4444; color:#ef4444; border-radius:4px; padding:4px 10px; cursor:pointer; font-size:12px; font-weight:600;">Delete</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- ── Modal ──────────────────────────────────────────────────── -->
            <div v-if="showModal"
                 style="position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999; display:flex; align-items:flex-start; justify-content:center; padding-top:40px; overflow-y:auto;">
                <div style="background:#fff; border-radius:8px; width:600px; margin-bottom:40px; box-shadow:0 20px 60px rgba(0,0,0,.2);"
                     @click.stop>

                    <!-- Header -->
                    <div style="padding:20px 24px; border-bottom:1px solid #e5e7eb; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; background:#fff; z-index:1; border-radius:8px 8px 0 0;">
                        <h3 style="margin:0; font-size:16px; font-weight:700; color:#1a1a2e;">{{ editingRule.id ? 'Edit Rule' : 'New Rule' }}</h3>
                        <button @click="closeModal" style="background:none; border:none; font-size:20px; cursor:pointer; color:#8a94a6; line-height:1;">×</button>
                    </div>

                    <!-- Body — NO overflow:auto here, so dropdowns are not clipped -->
                    <div style="padding:24px;">

                        <!-- Name -->
                        <div style="margin-bottom:18px;">
                            <label style="display:block; font-size:12px; font-weight:600; color:#52667a; margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px;">Rule Name</label>
                            <input type="text" v-model="editingRule.name" placeholder="e.g. Women's category → Accessories upsell"
                                   style="width:100%; height:36px; padding:0 12px; border:1px solid #d1d9e0; border-radius:4px; font-size:13px; box-sizing:border-box;" />
                        </div>

                        <!-- Priority -->
                        <div style="margin-bottom:18px;">
                            <label style="display:block; font-size:12px; font-weight:600; color:#52667a; margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px;">Priority (lower = evaluated first)</label>
                            <input type="number" v-model.number="editingRule.priority" min="0"
                                   style="width:120px; height:36px; padding:0 12px; border:1px solid #d1d9e0; border-radius:4px; font-size:13px;" />
                        </div>

                        <!-- ── TRIGGER ─────────────────────────────────── -->
                        <div style="background:#f8f9fb; border-radius:6px; padding:16px; margin-bottom:18px;">
                            <div style="font-size:13px; font-weight:700; color:#1a1a2e; margin-bottom:12px;">🎯 Trigger — When should this rule fire?</div>

                            <label style="display:block; font-size:12px; font-weight:600; color:#52667a; margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px;">Trigger type</label>
                            <select v-model="editingRule.trigger_type"
                                    style="width:100%; height:36px; padding:0 12px; border:1px solid #d1d9e0; border-radius:4px; font-size:13px; background:#fff; margin-bottom:14px;">
                                <option value="any">Any order (catch-all)</option>
                                <option value="products">Customer bought specific product(s)</option>
                                <option value="categories">Customer bought from specific category/ies</option>
                                <option value="tags">Customer bought a product with specific tag(s)</option>
                            </select>

                            <!-- ── Products picker ── -->
                            <div v-if="editingRule.trigger_type === 'products'">
                                <label style="display:block; font-size:12px; font-weight:600; color:#52667a; margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px;">Products</label>

                                <!-- Selected chips -->
                                <div v-if="(editingRule.trigger_product_ids || []).length" style="display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;">
                                    <span v-for="id in editingRule.trigger_product_ids" :key="id"
                                          style="display:inline-flex; align-items:center; background:#e0e7ff; color:#3730a3; border-radius:20px; padding:4px 10px 4px 12px; font-size:12px; font-weight:600; gap:6px;">
                                        {{ getLabel('triggerProducts', id) }}
                                        <span @click="removeEntity('trigger_product_ids', id)"
                                              style="cursor:pointer; font-size:16px; line-height:1; opacity:.6; font-weight:400;">×</span>
                                    </span>
                                </div>

                                <!-- Search input -->
                                <input type="text"
                                       :value="search.triggerProducts.query"
                                       @input="search.triggerProducts.query = $event.target.value; onSearchInput('triggerProducts', 'product')"
                                       placeholder="Type product name to search…"
                                       style="width:100%; height:36px; padding:0 12px; border:1px solid #d1d9e0; border-radius:4px; font-size:13px; box-sizing:border-box;" />

                                <!-- Inline results (no absolute positioning — avoids overflow clipping) -->
                                <div v-if="search.triggerProducts.loading || search.triggerProducts.results.length"
                                     style="border:1px solid #d1d9e0; border-top:none; border-radius:0 0 4px 4px; background:#fff; max-height:180px; overflow-y:auto;">
                                    <div v-if="search.triggerProducts.loading"
                                         style="padding:10px 12px; font-size:12px; color:#8a94a6;">Searching…</div>
                                    <div v-for="item in search.triggerProducts.results" :key="item.id"
                                         @click="selectEntity('triggerProducts', 'trigger_product_ids', item.id, item.name)"
                                         style="padding:10px 12px; font-size:13px; cursor:pointer; border-top:1px solid #f3f4f6; transition:background .1s;"
                                         onmouseover="this.style.background='#f0f4ff'" onmouseout="this.style.background=''">
                                        {{ item.name }}
                                    </div>
                                </div>
                            </div>

                            <!-- ── Categories picker ── -->
                            <div v-if="editingRule.trigger_type === 'categories'">
                                <label style="display:block; font-size:12px; font-weight:600; color:#52667a; margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px;">Categories</label>

                                <div v-if="(editingRule.trigger_category_ids || []).length" style="display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;">
                                    <span v-for="id in editingRule.trigger_category_ids" :key="id"
                                          style="display:inline-flex; align-items:center; background:#e0e7ff; color:#3730a3; border-radius:20px; padding:4px 10px 4px 12px; font-size:12px; font-weight:600; gap:6px;">
                                        {{ getLabel('triggerCategories', id) }}
                                        <span @click="removeEntity('trigger_category_ids', id)"
                                              style="cursor:pointer; font-size:16px; line-height:1; opacity:.6; font-weight:400;">×</span>
                                    </span>
                                </div>

                                <input type="text"
                                       :value="search.triggerCategories.query"
                                       @input="search.triggerCategories.query = $event.target.value; onSearchInput('triggerCategories', 'category')"
                                       placeholder="Type category name to search…"
                                       style="width:100%; height:36px; padding:0 12px; border:1px solid #d1d9e0; border-radius:4px; font-size:13px; box-sizing:border-box;" />

                                <div v-if="search.triggerCategories.loading || search.triggerCategories.results.length"
                                     style="border:1px solid #d1d9e0; border-top:none; border-radius:0 0 4px 4px; background:#fff; max-height:180px; overflow-y:auto;">
                                    <div v-if="search.triggerCategories.loading"
                                         style="padding:10px 12px; font-size:12px; color:#8a94a6;">Searching…</div>
                                    <div v-for="item in search.triggerCategories.results" :key="item.id"
                                         @click="selectEntity('triggerCategories', 'trigger_category_ids', item.id, item.name)"
                                         style="padding:10px 12px; font-size:13px; cursor:pointer; border-top:1px solid #f3f4f6;"
                                         onmouseover="this.style.background='#f0f4ff'" onmouseout="this.style.background=''">
                                        {{ item.name }}
                                    </div>
                                </div>
                            </div>

                            <!-- ── Tags picker ── -->
                            <div v-if="editingRule.trigger_type === 'tags'">
                                <label style="display:block; font-size:12px; font-weight:600; color:#52667a; margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px;">Tags</label>

                                <div v-if="(editingRule.trigger_tags || []).length" style="display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;">
                                    <span v-for="id in editingRule.trigger_tags" :key="id"
                                          style="display:inline-flex; align-items:center; background:#fef3c7; color:#92400e; border-radius:20px; padding:4px 10px 4px 12px; font-size:12px; font-weight:600; gap:6px;">
                                        {{ getLabel('triggerTags', id) }}
                                        <span @click="removeEntity('trigger_tags', id)"
                                              style="cursor:pointer; font-size:16px; line-height:1; opacity:.6; font-weight:400;">×</span>
                                    </span>
                                </div>

                                <input type="text"
                                       :value="search.triggerTags.query"
                                       @input="search.triggerTags.query = $event.target.value; onSearchInput('triggerTags', 'tag')"
                                       placeholder="Type tag name to search…"
                                       style="width:100%; height:36px; padding:0 12px; border:1px solid #d1d9e0; border-radius:4px; font-size:13px; box-sizing:border-box;" />

                                <div v-if="search.triggerTags.loading || search.triggerTags.results.length"
                                     style="border:1px solid #d1d9e0; border-top:none; border-radius:0 0 4px 4px; background:#fff; max-height:180px; overflow-y:auto;">
                                    <div v-if="search.triggerTags.loading"
                                         style="padding:10px 12px; font-size:12px; color:#8a94a6;">Searching…</div>
                                    <div v-for="item in search.triggerTags.results" :key="item.id"
                                         @click="selectEntity('triggerTags', 'trigger_tags', item.id, item.name)"
                                         style="padding:10px 12px; font-size:13px; cursor:pointer; border-top:1px solid #f3f4f6;"
                                         onmouseover="this.style.background='#fffbeb'" onmouseout="this.style.background=''">
                                        {{ item.name }}
                                    </div>
                                </div>
                            </div>

                        </div>

                        <!-- ── OFFER ───────────────────────────────────── -->
                        <div style="background:#f0fdf4; border-radius:6px; padding:16px; margin-bottom:18px;">
                            <div style="font-size:13px; font-weight:700; color:#1a1a2e; margin-bottom:12px;">🎁 Offer — What products to show?</div>

                            <label style="display:block; font-size:12px; font-weight:600; color:#52667a; margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px;">Offer type</label>
                            <select v-model="editingRule.offer_type"
                                    style="width:100%; height:36px; padding:0 12px; border:1px solid #d1d9e0; border-radius:4px; font-size:13px; background:#fff; margin-bottom:14px;">
                                <option value="cross_selling">Cross-selling (from product's cross-sell list)</option>
                                <option value="frequently_bought_together">Frequently bought together (auto)</option>
                                <option value="category_top_seller">Top sellers from the same category</option>
                                <option value="manual">Manual — specific products</option>
                                <option value="product_stream">Product stream</option>
                            </select>

                            <!-- ── Manual offer products picker ── -->
                            <div v-if="editingRule.offer_type === 'manual'">
                                <label style="display:block; font-size:12px; font-weight:600; color:#52667a; margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px;">Products to offer</label>

                                <div v-if="(editingRule.offer_product_ids || []).length" style="display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;">
                                    <span v-for="id in editingRule.offer_product_ids" :key="id"
                                          style="display:inline-flex; align-items:center; background:#d1fae5; color:#065f46; border-radius:20px; padding:4px 10px 4px 12px; font-size:12px; font-weight:600; gap:6px;">
                                        {{ getLabel('offerProducts', id) }}
                                        <span @click="removeEntity('offer_product_ids', id)"
                                              style="cursor:pointer; font-size:16px; line-height:1; opacity:.6; font-weight:400;">×</span>
                                    </span>
                                </div>

                                <input type="text"
                                       :value="search.offerProducts.query"
                                       @input="search.offerProducts.query = $event.target.value; onSearchInput('offerProducts', 'product')"
                                       placeholder="Type product name to search…"
                                       style="width:100%; height:36px; padding:0 12px; border:1px solid #d1d9e0; border-radius:4px; font-size:13px; box-sizing:border-box;" />

                                <div v-if="search.offerProducts.loading || search.offerProducts.results.length"
                                     style="border:1px solid #d1d9e0; border-top:none; border-radius:0 0 4px 4px; background:#fff; max-height:180px; overflow-y:auto;">
                                    <div v-if="search.offerProducts.loading"
                                         style="padding:10px 12px; font-size:12px; color:#8a94a6;">Searching…</div>
                                    <div v-for="item in search.offerProducts.results" :key="item.id"
                                         @click="selectEntity('offerProducts', 'offer_product_ids', item.id, item.name)"
                                         style="padding:10px 12px; font-size:13px; cursor:pointer; border-top:1px solid #f3f4f6;"
                                         onmouseover="this.style.background='#f0fdf4'" onmouseout="this.style.background=''">
                                        {{ item.name }}
                                    </div>
                                </div>
                            </div>

                            <!-- ── Product stream picker ── -->
                            <div v-if="editingRule.offer_type === 'product_stream'">
                                <label style="display:block; font-size:12px; font-weight:600; color:#52667a; margin-bottom:8px; text-transform:uppercase; letter-spacing:.5px;">Product Stream</label>

                                <!-- Selected chip -->
                                <div v-if="editingRule.offer_product_stream_id" style="margin-bottom:8px;">
                                    <span style="display:inline-flex; align-items:center; background:#d1fae5; color:#065f46; border-radius:20px; padding:4px 10px 4px 12px; font-size:12px; font-weight:600; gap:6px;">
                                        {{ getLabel('offerStream', editingRule.offer_product_stream_id) }}
                                        <span @click="clearSingleEntity('offer_product_stream_id', 'offerStream')"
                                              style="cursor:pointer; font-size:16px; line-height:1; opacity:.6; font-weight:400;">×</span>
                                    </span>
                                </div>

                                <div v-if="!editingRule.offer_product_stream_id">
                                    <input type="text"
                                           :value="search.offerStream.query"
                                           @input="search.offerStream.query = $event.target.value; onSearchInput('offerStream', 'product-stream')"
                                           placeholder="Type stream name to search…"
                                           style="width:100%; height:36px; padding:0 12px; border:1px solid #d1d9e0; border-radius:4px; font-size:13px; box-sizing:border-box;" />

                                    <div v-if="search.offerStream.loading || search.offerStream.results.length"
                                         style="border:1px solid #d1d9e0; border-top:none; border-radius:0 0 4px 4px; background:#fff; max-height:180px; overflow-y:auto;">
                                        <div v-if="search.offerStream.loading"
                                             style="padding:10px 12px; font-size:12px; color:#8a94a6;">Searching…</div>
                                        <div v-for="item in search.offerStream.results" :key="item.id"
                                             @click="selectSingleEntity('offerStream', 'offer_product_stream_id', item.id, item.name)"
                                             style="padding:10px 12px; font-size:13px; cursor:pointer; border-top:1px solid #f3f4f6;"
                                             onmouseover="this.style.background='#f0fdf4'" onmouseout="this.style.background=''">
                                            {{ item.name }}
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <!-- Discount & Max offers -->
                        <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px;">
                            <div>
                                <label style="display:block; font-size:12px; font-weight:600; color:#52667a; margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px;">Discount %</label>
                                <input type="number" v-model.number="editingRule.discount_percent" min="0" max="90" step="0.5"
                                       style="width:100%; height:36px; padding:0 12px; border:1px solid #d1d9e0; border-radius:4px; font-size:13px; box-sizing:border-box;" />
                                <div style="font-size:11px; color:#8a94a6; margin-top:4px;">0 = no discount. Overrides global discount.</div>
                            </div>
                            <div>
                                <label style="display:block; font-size:12px; font-weight:600; color:#52667a; margin-bottom:6px; text-transform:uppercase; letter-spacing:.5px;">Max products to show</label>
                                <input type="number" v-model.number="editingRule.max_offers" min="1" max="12"
                                       style="width:100%; height:36px; padding:0 12px; border:1px solid #d1d9e0; border-radius:4px; font-size:13px; box-sizing:border-box;" />
                            </div>
                        </div>

                        <!-- Active -->
                        <div style="display:flex; align-items:center; gap:10px; margin-bottom:8px;">
                            <input type="checkbox" v-model="editingRule.active" style="width:16px; height:16px; cursor:pointer;" />
                            <label style="font-size:13px; color:#1a1a2e; cursor:pointer;">Rule is active</label>
                        </div>

                    </div>

                    <!-- Footer -->
                    <div style="padding:16px 24px; border-top:1px solid #e5e7eb; display:flex; justify-content:flex-end; gap:10px; position:sticky; bottom:0; background:#fff; border-radius:0 0 8px 8px;">
                        <button @click="closeModal"
                                style="height:36px; padding:0 16px; background:#fff; border:1px solid #d1d9e0; border-radius:4px; font-size:13px; cursor:pointer;">Cancel</button>
                        <button @click="saveRule" :disabled="isSaving"
                                style="height:36px; padding:0 20px; background:#5C67F2; color:#fff; border:none; border-radius:4px; font-size:13px; font-weight:600; cursor:pointer;">
                            {{ isSaving ? 'Saving…' : 'Save Rule' }}
                        </button>
                    </div>

                </div>
            </div>

        </div>
    </template>
    {% endblock %}

</sw-page>
{% endblock %}