{% extends "admin/change_form.html" %}
{% load i18n admin_urls static %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Sortable/1.15.2/Sortable.min.js"></script>

<script>
    tailwind.config = {
        theme: {
            extend: {
                fontFamily: {
                    vazir: ['Vazirmatn', 'system-ui', '-apple-system', 'sans-serif'],
                },
                colors: {
                    'admin-bg': 'var(--body-bg)',
                    'admin-fg': 'var(--body-fg)',
                    'admin-quiet': 'var(--body-quiet-color)',
                    'admin-border': 'var(--border-color)',
                    'admin-dark': 'var(--darkened-bg)',
                    'admin-selected': 'var(--selected-bg)',
                    'admin-primary': 'var(--primary)',
                    'admin-error': 'var(--error-fg)',
                },
                keyframes: {
                    kbFadeIn: {
                        '0%': { opacity: 0, transform: 'translateY(8px)' },
                        '100%': { opacity: 1, transform: 'translateY(0)' },
                    },
                    kbPulse: {
                        '0%, 100%': { boxShadow: '0 0 0 0 rgba(99,102,241,.35)' },
                        '50%': { boxShadow: '0 0 0 8px rgba(99,102,241,0)' },
                    },
                },
                animation: {
                    'kb-fade-in': 'kbFadeIn .4s ease both',
                    'kb-pulse': 'kbPulse 1.1s ease 1',
                },
            }
        }
    }
</script>
{% endblock %}

{% block content %}
<form id="keyboard-form" method="post" enctype="multipart/form-data" class="font-vazir relative" dir="rtl">
    {% csrf_token %}

    <div class="flex gap-6 justify-center items-start flex-wrap my-2.5">

        <!-- Editor Column -->
        <div class="flex-1 min-w-80 max-w-2xl animate-kb-fade-in">
            <div class="bg-admin-bg border border-admin-border/80 shadow-[0_1px_2px_rgba(0,0,0,.04),0_20px_40px_-18px_rgba(0,0,0,.16)] rounded-[20px] p-6 flex flex-col gap-7">

                <!-- Related Step -->
                <div class="flex flex-col gap-2">
                    <label for="related_step" class="text-[11px] font-bold tracking-[.04em] text-admin-quiet uppercase flex items-center gap-1.5">
                        <i class="fa-solid fa-diagram-project text-[10px] opacity-70"></i>Related Step
                    </label>
                    <input id="related_step" name="related_step" type="text"
                        value="{{ original.related_step|default:'home' }}"
                        class="rounded-xl transition-all duration-200 w-full bg-admin-dark text-admin-fg border border-admin-border px-4 py-3 hover:border-admin-primary/45 focus:outline-none focus:border-admin-primary focus:ring-4 focus:ring-admin-primary/15">
                </div>

                <!-- Message Text -->
                <div class="flex flex-col gap-2">
                    <div class="flex items-center justify-between">
                        <label for="message_text" class="text-[11px] font-   tracking-[.04em] text-admin-quiet uppercase flex items-center gap-1.5">
                            <i class="fa-solid fa-message text-[10px] opacity-70"></i>متن پیام
                        </label>
                    </div>
                    <textarea id="message_text" name="text" rows="4"
                        class="rounded-xl transition-all duration-200 w-full bg-admin-dark text-admin-fg border border-admin-border px-4 py-3 text-right resize-y hover:border-admin-primary/45 focus:outline-none focus:border-admin-primary focus:ring-4 focus:ring-admin-primary/15 leading-relaxed">{{original.text|default:'' }}</textarea>
                </div>

                <!-- Keyboard Settings Dropdown (optional) -->
                <div class="border border-admin-border/75 rounded-[20px] overflow-hidden bg-admin-bg transition-all duration-300 p-5"
                    data-open="{% if original.keyboard.key_buttons.count %}true{% else %}false{% endif %}" id="kb-keyboard-collapse">
                    <div class="flex items-center justify-between pb-4 gap-3 cursor-pointer select-none group"
                         onclick="var p=this.parentElement; p.dataset.open = p.dataset.open === 'true' ? 'false' : 'true';">
                        <div class="flex items-center gap-3 font-bold text-sm text-admin-fg">
                            <span class="w-9 h-9 rounded-[11px] grid place-items-center bg-admin-primary text-white">
                                <i class="fa-solid fa-keyboard"></i>
                            </span>
                            <div>
                                تنظیمات کیبورد
                                <small class="block text-[11px] font-medium text-admin-quiet mt-0.5">نوع کیبورد، دکمه‌ها و پیش‌نمایش زنده</small>
                            </div>
                        </div>
                        <span class="text-[10px] font-bold tracking-[.02em] px-2.5 py-[3px] rounded-full bg-admin-quiet/15 text-admin-quiet flex-shrink-0">اختیاری</span>
                        <span class="w-[30px] h-[30px] rounded-[9px] grid place-items-center text-admin-quiet flex-shrink-0 transition-all duration-300 group-hover:bg-admin-primary/15 group-hover:text-admin-primary [[data-open=true]_&]:rotate-180">
                            <i class="fa-solid fa-chevron-down"></i>
                        </span>
                    </div>

                    <div class="grid grid-rows-[0fr] opacity-0 transition-[grid-template-rows,opacity] duration-300 [[data-open=true]_&]:grid-rows-[1fr] [[data-open=true]_&]:opacity-100">
                         <div class="overflow-hidden">
                             <!-- Keyboard Typez -->
                            <div class="px-5 pb-[22px] pt-1.5 flex flex-col gap-6">
                                <div class="flex flex-col gap-2">
                                    <label class="text-[11px] font-bold tracking-[.04em] text-admin-quiet uppercase flex items-center gap-1.5">
                                        <i class="fa-solid fa-table-cells text-[10px] opacity-70"></i>نوع کیبورد
                                    </label>
                                    <div class="grid grid-cols-2 gap-2.5">
                                        <button type="button" onclick="setKeyboardType('INLINE')" id="btn-inline"
                                            class="rounded-2xl transition-all duration-200 py-3.5 px-4 border border-admin-border bg-admin-dark text-admin-fg font-semibold text-sm flex items-center justify-center gap-2 data-[active=true]:border-admin-primary data-[active=true]:bg-admin-primary/15 data-[active=true]:text-admin-primary group">
                                            <i class="fa-regular fa-square transition-transform duration-200 group-hover:scale-110 group-hover:-rotate-3"></i> Inline Keyboard
                                        </button>
                                        <button type="button" onclick="setKeyboardType('REPLY')" id="btn-reply"
                                            class="rounded-2xl transition-all duration-200 py-3.5 px-4 border border-admin-border bg-admin-dark text-admin-fg font-semibold text-sm flex items-center justify-center gap-2 data-[active=true]:border-admin-primary data-[active=true]:bg-admin-primary/15 data-[active=true]:text-admin-primary group">
                                            <i class="fa-solid fa-keyboard transition-transform duration-200 group-hover:scale-110 group-hover:-rotate-3"></i> Reply Keyboard
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <!-- Reply Options (Toggles) -->
                            <div id="reply-options" class="flex flex-col gap-2">
                                <label class="text-[11px] font-bold tracking-[.04em] text-admin-quiet uppercase flex items-center gap-1.5">
                                    <i class="fa-solid fa-sliders text-[10px] opacity-70"></i>تنظیمات Reply Keyboard
                                </label>
                                <div class="border border-admin-border rounded-xl bg-admin-dark overflow-hidden">

                                    <div class="flex items-center justify-between gap-4 p-3.5 border-b border-admin-border rounded-xl transition-colors duration-200 hover:bg-admin-primary/[.06]">
                                        <div class="flex flex-col gap-0.5">
                                            <span class="text-sm font-semibold text-admin-fg">Resize Keyboard</span>
                                            <span class="text-xs text-admin-quiet">اندازه‌ی دکمه‌ها با تعدادشون تنظیم بشه</span>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer flex-shrink-0">
                                            <input type="checkbox" id="resize_keyboard" checked class="sr-only peer">
                                            <div class="w-10 h-6 bg-admin-border peer-checked:bg-admin-primary rounded-full transition-colors duration-200
                                                        after:content-[''] after:absolute after:top-0.75 after:left-0.75 after:h-[18px] after:w-[18px]
                                                        after:bg-admin-bg after:rounded-full after:shadow after:transition-transform after:duration-200
                                                        peer-checked:after:translate-x-[-18px]"></div>
                                        </label>
                                    </div>

                                    <div class="flex items-center justify-between gap-4 p-3.5 rounded-xl transition-colors duration-200 hover:bg-admin-primary/[.06]">
                                        <div class="flex flex-col gap-0.5">
                                            <span class="text-sm font-semibold text-admin-fg">One Time Keyboard</span>
                                            <span class="text-xs text-admin-quiet">بعد از یک بار استفاده، کیبورد بسته بشه</span>
                                        </div>
                                        <label class="relative inline-flex items-center cursor-pointer flex-shrink-0">
                                            <input type="checkbox" id="one_time_keyboard" class="sr-only peer">
                                            <div class="w-10 h-6 bg-admin-border peer-checked:bg-admin-primary rounded-full transition-colors duration-200
                                                        after:content-[''] after:absolute after:top-0.75 after:left-0.75 after:h-[18px] after:w-[18px]
                                                        after:bg-admin-bg after:rounded-full after:shadow after:transition-transform after:duration-200
                                                        peer-checked:after:translate-x-[-18px]"></div>
                                        </label>
                                    </div>

                                </div>
                            </div>

                            <!-- Buttons Section -->
                            <div>
                                <div class="flex items-center justify-between mb-3 pt-10">
                                    <h2 class="text-[13px] font-bold tracking-[.04em] text-admin-quiet uppercase flex items-center gap-1.5">
                                        <i class="fa-solid fa-list text-[10px] opacity-70"></i>دکمه‌ها
                                    </h2>
                                    <button type="button" onclick="addNewRow()"
                                        class="rounded-xl bg-admin-primary px-4 py-2 text-white text-xs font-semibold flex items-center gap-1.5">
                                        <i class="fa-solid fa-plus text-[10px]"></i> ردیف جدید
                                    </button>
                                </div>
                                <p class="text-xs text-admin-quiet mb-3 flex items-center gap-1.5">
                                    <i class="fa-solid fa-circle-info text-[11px] opacity-60"></i>
                                    دکمه‌ها و ردیف‌ها را با گرفتنِ آیکون <i class="fa-solid fa-grip-vertical"></i> بکشید و جابجا کنید
                                </p>
                                <div id="rows-container" class="flex flex-col gap-3"></div>
                            </div>

                        </div>
                    </div>
                </div>

            </div>
        </div>

        <!-- Preview -->
        <div class="flex-shrink-0 sticky top-5 animate-kb-fade-in [animation-delay:.08s]">
            <div class="flex items-center justify-center mb-3">
                <span class="text-[10.5px] tracking-[.08em] text-white/40 uppercase"><i class="fa-solid fa-eye mr-1"></i> پیش‌نمایش زنده</span>
            </div>
            <div id="phone-shell" class="relative w-80 h-[560px] border-[6px] border-slate-800 overflow-hidden flex flex-col rounded-[32px] bg-[radial-gradient(circle_at_30%_0%,#2a3744_0%,#131c24_60%)] shadow-[0_30px_60px_-15px_rgba(0,0,0,.55)]">
                <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[120px] h-[22px] bg-[#0b0f14] rounded-b-2xl z-10"></div>
                <div class="flex-1 pt-9 px-4 flex flex-col justify-end pb-4 overflow-hidden">
                    <div id="preview-bubble-wrap" class="flex flex-col mb-2"></div>
                    <div id="preview-keyboard" class="flex flex-col gap-2"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Button Edit Modal -->
    <div id="button-modal"
        class="hidden fixed inset-0 bg-black/60 z-50 flex items-center justify-center opacity-0 transition-opacity duration-200 backdrop-blur-sm [&.kb-modal-open]:opacity-100">
        <div class="w-full max-w-3xl mx-4 bg-admin-bg border border-admin-border shadow-2xl overflow-hidden rounded-[20px] scale-95 translate-y-2.5 opacity-0 transition-all duration-300 [.kb-modal-open_&]:scale-100 [.kb-modal-open_&]:translate-y-0 [.kb-modal-open_&]:opacity-100">

            <div class="bg-gradient-to-br from-admin-primary/15 to-transparent rounded-t-[20px] px-6 py-5 border-b border-admin-border flex items-center gap-3">
                <div class="w-9 h-9 rounded-full bg-admin-primary/15 flex items-center justify-center text-admin-primary">
                    <i class="fa-solid fa-pen text-sm"></i>
                </div>
                <h3 class="text-xl font-semibold text-admin-fg">ویرایش دکمه</h3>
            </div>

            <div class="px-6 py-5 flex flex-col gap-5 text-right max-h-[70vh] overflow-y-auto">
                <div>
                    <div class="flex items-center justify-between mb-2">
                        <label for="btn-text" class="text-xs font-semibold text-admin-quiet">متن دکمه</label>
                        <span id="btn-text-char-count" class="text-[11px] text-admin-quiet tabular-nums transition-colors">0/64</span>
                    </div>
                    <input id="btn-text" type="text" maxlength="64"
                        class="rounded-xl w-full bg-admin-dark text-admin-fg border border-admin-border px-4 py-3 focus:outline-none focus:border-admin-primary focus:ring-4 focus:ring-admin-primary/20">
                </div>
                <div>
                    <label for="btn-web-app" class="text-xs font-semibold text-admin-quiet block mb-2">WebApp</label>
                    <input id="btn-web-app" type="text" placeholder="url"
                        class="rounded-xl w-full bg-admin-dark text-left text-admin-fg border border-admin-border px-4 py-3 focus:outline-none focus:border-admin-primary focus:ring-4 focus:ring-admin-primary/20 text-sm">
                </div>
                <div>
                    <label for="btn-style" class="text-xs font-semibold text-admin-quiet block mb-2">Style</label>
                    <div class="grid grid-cols-4 gap-2" id="style-picker">
                        <button type="button" data-style="" class="kb-style-swatch py-2.5 rounded-lg border border-admin-border text-xs font-semibold text-admin-fg bg-slate-600/20 transition-all duration-150">None</button>
                        <button type="button" data-style="primary" class="kb-style-swatch py-2.5 rounded-lg border border-admin-border text-xs font-semibold text-white bg-blue-700 transition-all duration-150">Primary</button>
                        <button type="button" data-style="success" class="kb-style-swatch py-2.5 rounded-lg border border-admin-border text-xs font-semibold text-white bg-green-700 transition-all duration-150">Success</button>
                        <button type="button" data-style="danger" class="kb-style-swatch py-2.5 rounded-lg border border-admin-border text-xs font-semibold text-white bg-red-700 transition-all duration-150">Danger</button>
                    </div>
                    <input type="hidden" id="btn-style" value="">
                </div>

                <!-- Inline Button -->
                <div id="inline-fields" class="hidden space-y-4 border-t border-admin-border pt-4">
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <label for="btn-url" class="text-xs font-semibold text-admin-quiet block mb-2">URL</label>
                            <input id="btn-url" type="url" placeholder="https://example.com"
                                class="rounded-xl w-full bg-admin-dark text-admin-fg border border-admin-border px-4 py-3 focus:outline-none focus:border-admin-primary focus:ring-4 focus:ring-admin-primary/20 text-sm">
                        </div>
                        <div>
                            <label for="btn-callback" class="text-xs font-semibold text-admin-quiet block mb-2">Callback Data</label>
                            <input id="btn-callback" type="text" placeholder="callback url"
                                class="rounded-xl w-full bg-admin-dark text-admin-fg border border-admin-border px-4 py-3 focus:outline-none focus:border-admin-primary focus:ring-4 focus:ring-admin-primary/20 text-sm">
                        </div>
                        <div>
                            <label for="btn-copy-text" class="text-xs font-semibold text-admin-quiet block mb-2">Copy Text</label>
                            <input id="btn-copy-text" type="text" placeholder="copy text"
                                class="rounded-xl w-full bg-admin-dark text-admin-fg border border-admin-border px-4 py-3 focus:outline-none focus:border-admin-primary focus:ring-4 focus:ring-admin-primary/20 text-sm">
                        </div>
                        <div>
                            <label for="btn-login-url" class="text-xs font-semibold text-admin-quiet block mb-2">Login Url</label>
                            <input id="btn-login-url" type="text" placeholder="login url"
                                class="rounded-xl w-full bg-admin-dark text-admin-fg border border-admin-border px-4 py-3 focus:outline-none focus:border-admin-primary focus:ring-4 focus:ring-admin-primary/20 text-sm">
                        </div>
                    </div>
                </div>

                <!-- Reply Button -->
                <div id="reply-fields" class="hidden space-y-3 border-t border-admin-border pt-4">
                    <label class="rounded-xl flex items-center gap-3 cursor-pointer p-2.5 hover:bg-admin-dark transition-colors duration-150">
                        <input type="checkbox" id="btn-request-contact"
                            class="w-4 h-4 rounded border border-admin-border bg-admin-dark cursor-pointer accent-current">
                        <i class="fa-solid fa-phone text-admin-quiet text-sm"></i>
                        <span class="text-sm text-admin-fg">درخواست شماره تماس</span>
                    </label>
                    <label class="rounded-xl flex items-center gap-3 cursor-pointer p-2.5 hover:bg-admin-dark transition-colors duration-150">
                        <input type="checkbox" id="btn-request-location"
                            class="w-4 h-4 rounded border border-admin-border bg-admin-dark cursor-pointer accent-current">
                        <i class="fa-solid fa-location-dot text-admin-quiet text-sm"></i>
                        <span class="text-sm text-admin-fg">درخواست مکان</span>
                    </label>
                </div>
            </div>

            <div class="px-6 py-4 border-t border-admin-border flex gap-2.5">
                <button type="button" onclick="closeModal()"
                    class="flex-1 py-3 border border-admin-error text-admin-error rounded-xl font-semibold text-sm hover:bg-admin-error/10 transition-all">
                    انصراف
                </button>
                <button type="button" onclick="saveButton()"
                    class="flex-1 py-3 bg-green-600 hover:bg-green-700 text-white rounded-xl font-semibold text-sm transition-all shadow-lg shadow-green-600/20">
                    ذخیره دکمه
                </button>
            </div>
        </div>
    </div>

    <!-- Django Submit Buttons -->
   <div class="flex items-center gap-3 p-4 bg-gray-50 border border-gray-100 rounded-xl mt-6">
        <input type="submit" value="ذخیره" name="_save"
            class="px-6 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg shadow-sm transition-all active:scale-95 cursor-pointer">

        <input type="submit" value="ذخیره و ادامه ویرایش" name="_continue"
            class="px-6 py-2 bg-white hover:bg-gray-100 text-gray-700 border border-gray-300 font-semibold rounded-lg shadow-sm transition-all active:scale-95 cursor-pointer">
        {% if original %}
            <a href="{% url 'admin:contrib_message_delete' original.pk %}"
                class="px-6 py-2 bg-red-50 hover:bg-red-100 text-red-600 font-semibold rounded-lg transition-all border border-red-200 hover:border-red-300 active:scale-95">
                حذف آیتم
            </a>
        {% endif %}
    </div>
</form>

<div id="kb-toast-wrap" class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[80] flex flex-col gap-2 items-center pointer-events-none"></div>

<script>
    let uidCounter = 1;
    let rowUidCounter = 1;
    let allButtons = {};
    let suppressClick = false;
    let sortableInstances = [];
    let currentEditUid = null;
    let lastAddedRowUid = null;

    let keyboardData = {
        keyboard_type: "REPLY",
        resize_keyboard: true,
        one_time_keyboard: false,
        rows: []
    };

    function showToast(msg, icon) {
        const wrap = document.getElementById('kb-toast-wrap');
        const el = document.createElement('div');
        el.className = 'bg-admin-dark border border-admin-border text-admin-fg px-5 py-2.5 rounded-full text-[12.5px] font-semibold shadow-[0_12px_28px_-8px_rgba(0,0,0,.4)] opacity-0 translate-y-2.5 scale-95 transition-all duration-200 flex items-center gap-2';
        el.innerHTML = `<i class="fa-solid ${icon || 'fa-check'} text-admin-primary text-[11px]"></i><span>${msg}</span>`;
        wrap.appendChild(el);
        requestAnimationFrame(() => {
            el.classList.remove('opacity-0', 'translate-y-2.5', 'scale-95');
            el.classList.add('opacity-100', 'translate-y-0', 'scale-100');
        });
        setTimeout(() => {
            el.classList.remove('opacity-100', 'translate-y-0', 'scale-100');
            el.classList.add('opacity-0', 'translate-y-2.5', 'scale-95');
            setTimeout(() => el.remove(), 220);
        }, 1600);
    }

    {% if original and original.keyboard %}
        (function () {
            const flatButtons = [
                {% for button in original.keyboard.key_buttons.all %}
                    {
                        text: "{{ button.text|escapejs }}",
                        row: {{ button.row }},
                        column: {{ button.column }},
                        data: {{ button.data_as_json|safe }}
                    },
                {% endfor %}
            ];

            const grouped = {};
            flatButtons.forEach(b => {
                if (!grouped[b.row]) grouped[b.row] = [];
                grouped[b.row].push(b);
            });

            keyboardData.rows = Object.keys(grouped)
                .sort((a, b) => Number(a) - Number(b))
                .map(rowNum => {
                    const uids = grouped[rowNum]
                        .sort((a, b) => a.column - b.column)
                        .reverse()
                        .map(b => {
                            const uid = uidCounter++;
                            allButtons[uid] = { text: b.text, data: b.data || {} };
                            return uid;
                        });
                    return { rowUid: rowUidCounter++, buttonUids: uids };
                });
            keyboardData.keyboard_type = "{{ original.keyboard.keyboard_type }}";
            keyboardData.resize_keyboard = {{ original.keyboard.resize_keyboard|yesno:"true,false" }};
            keyboardData.one_time_keyboard = {{ original.keyboard.one_time_keyboard|yesno:"true,false" }};
        })();
    {% endif %}


    function escapeHtml(str) {
        const div = document.createElement('div');
        div.textContent = str == null ? '' : str;
        return div.innerHTML;
    }

    function setKeyboardType(type) {
        keyboardData.keyboard_type = type;
        document.getElementById('btn-inline').dataset.active = type === 'INLINE';
        document.getElementById('btn-reply').dataset.active = type === 'REPLY';
        document.getElementById('reply-options').style.display = type === 'REPLY' ? '' : 'none';
        updatePreview();
    }

    function renderRows() {
        sortableInstances.forEach(s => s.destroy());
        sortableInstances = [];

        const container = document.getElementById('rows-container');
        container.innerHTML = '';

        if (keyboardData.rows.length === 0) {
            container.innerHTML = `
                <div class="rounded-2xl text-center py-14 text-admin-quiet border border-dashed border-admin-border flex flex-col items-center gap-2">
                    <i class="fa-regular fa-square-plus text-2xl opacity-40"></i>
                    <span class="text-sm">هنوز دکمه‌ای اضافه نشده</span>
                    <span class="text-xs opacity-70">با «ردیف جدید» شروع کنید</span>
                </div>`;
            return;
        }

        keyboardData.rows.forEach((row, idx) => {
            const rowDiv = document.createElement('div');
            rowDiv.className = 'rounded-2xl border border-dashed border-admin-border p-3.5 bg-admin-bg transition-all duration-150 hover:border-admin-primary/35';
            rowDiv.dataset.rowUid = row.rowUid;

            const head = document.createElement('div');
            head.className = 'flex justify-between items-center text-xs text-admin-quiet mb-2.5';
            head.innerHTML = `
                <div class="flex items-center gap-2">
                    <i class="fa-solid fa-grip-vertical cursor-grab text-admin-quiet px-1 kb-row-handle transition-all duration-150 hover:text-admin-primary hover:scale-115" title="جابجایی ردیف"></i>
                    <span class="font-semibold">ردیف ${idx + 1}</span>
                </div>
                <div class="flex items-center gap-3">
                    <button type="button" class="w-6 h-6 flex items-center justify-center border border-admin-border text-admin-fg hover:border-admin-primary hover:text-admin-primary text-xs rounded-lg transition-all duration-150 hover:scale-110" title="افزودن دکمه به این ردیف"><i class="fa-solid fa-plus"></i></button>
                    <button type="button" class="text-admin-error hover:opacity-70 text-xs font-semibold flex items-center gap-1 transition-all duration-150"><i class="fa-regular fa-trash-can"></i> حذف</button>
                </div>`;
            head.querySelector('button:nth-of-type(1)').addEventListener('click', () => addButtonToRow(row.rowUid));
            head.querySelector('button:nth-of-type(2)').addEventListener('click', () => deleteRow(row.rowUid));
            rowDiv.appendChild(head);

            const btnContainer = document.createElement('div');
            btnContainer.className = 'flex flex-wrap gap-2.5 min-h-12';
            btnContainer.style.direction = 'ltr';


            const displayOrder = [...row.buttonUids].reverse();
            displayOrder.forEach(uid => {
                const btn = allButtons[uid];
                const chip = document.createElement('div');
                chip.className = 'flex-1 min-w-[150px] border border-admin-border bg-admin-dark p-2.5 hover:border-admin-primary group cursor-pointer rounded-xl transition-all duration-150 hover:shadow-[0_10px_22px_-12px_rgba(0,0,0,.3)] hover:-translate-y-px';
                chip.dataset.uid = uid;
                chip.innerHTML = `
                    <div class="flex justify-between items-center gap-2 ps-1">
                        <span class="text-sm text-admin-fg truncate flex-1">${escapeHtml(btn.text)}</span>
                        <i class="fa-solid fa-trash text-sm text-admin-error opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0 cursor-pointer kb-btn-delete"></i>
                    </div>`;
                chip.querySelector('.kb-btn-delete').addEventListener('click', (e) => {
                    e.stopPropagation();
                    deleteButton(uid);
                });
                chip.addEventListener('click', () => {
                    if (suppressClick) return;
                    editButton(uid);
                });
                btnContainer.appendChild(chip);
            });

            rowDiv.appendChild(btnContainer);
            container.appendChild(rowDiv);

            sortableInstances.push(new Sortable(btnContainer, {
                group: 'kb-buttons',
                animation: 180,
                easing: 'cubic-bezier(.4,0,.2,1)',
                ghostClass: 'opacity-40',
                chosenClass: 'shadow-2xl',
                onStart: () => { suppressClick = true; },
                onEnd: onButtonsDragEnd
            }));
        });

        lastAddedRowUid = null;

        sortableInstances.push(new Sortable(container, {
            handle: '.kb-row-handle',
            animation: 180,
            easing: 'cubic-bezier(.4,0,.2,1)',
            ghostClass: 'opacity-40',
            onEnd: onRowsDragEnd
        }));
    }

    function onButtonsDragEnd() {
        syncModelFromDOM();
        renderRows();
        updatePreview();
        setTimeout(() => { suppressClick = false; }, 50);
    }

    function onRowsDragEnd() {
        syncModelFromDOM();
        renderRows();
        updatePreview();
    }

    function syncModelFromDOM() {
        const newRows = [];
        document.querySelectorAll('#rows-container > [data-row-uid]').forEach(rowEl => {
            const rowUid = Number(rowEl.dataset.rowUid);
            const domOrder = Array.from(rowEl.querySelectorAll('[data-uid]')).map(chip => Number(chip.dataset.uid));
            const buttonUids = domOrder.reverse();
            if (buttonUids.length > 0) {
                newRows.push({ rowUid, buttonUids });
            }
        });
        keyboardData.rows = newRows;
    }

    function addNewRow() {
        const uid = uidCounter++;
        allButtons[uid] = { text: "دکمه جدید", data: {} };
        const rowUid = rowUidCounter++;
        keyboardData.rows.push({ rowUid, buttonUids: [uid] });
        lastAddedRowUid = rowUid;
        renderRows();
        updatePreview();
    }

    function addButtonToRow(rowUid) {
        const row = keyboardData.rows.find(r => r.rowUid === rowUid);
        if (!row) return;
        const uid = uidCounter++;
        allButtons[uid] = { text: "دکمه جدید", data: {} };
        row.buttonUids.push(uid);
        renderRows();
        updatePreview();
    }

    function deleteRow(rowUid) {
        const row = keyboardData.rows.find(r => r.rowUid === rowUid);
        if (row) {
            row.buttonUids.forEach(uid => delete allButtons[uid]);
        }
        keyboardData.rows = keyboardData.rows.filter(r => r.rowUid !== rowUid);
        renderRows();
        updatePreview();
    }

    function deleteButton(uid) {
        for (const row of keyboardData.rows) {
            const i = row.buttonUids.indexOf(uid);
            if (i !== -1) {
                row.buttonUids.splice(i, 1);
                break;
            }
        }
        delete allButtons[uid];
        keyboardData.rows = keyboardData.rows.filter(r => r.buttonUids.length > 0);
        renderRows();
        updatePreview();
    }

    function updateBtnTextCounter() {
        const val = document.getElementById('btn-text').value;
        const el = document.getElementById('btn-text-char-count');
        el.textContent = `${val.length}/64`;
        el.classList.toggle('text-amber-500', val.length >= 48 && val.length < 64);
        el.classList.toggle('text-admin-error', val.length >= 64);
        el.classList.toggle('font-bold', val.length >= 64);
    }

    function setStylePicker(value) {
        document.getElementById('btn-style').value = value || '';
        document.querySelectorAll('.kb-style-swatch').forEach(el => {
            const active = el.dataset.style === (value || '');
            el.classList.toggle('ring-2', active);
            el.classList.toggle('ring-admin-primary', active);
            el.classList.toggle('ring-offset-1', active);
            el.classList.toggle('scale-[1.04]', active);
        });
    }

    document.querySelectorAll('.kb-style-swatch').forEach(el => {
        el.addEventListener('click', () => setStylePicker(el.dataset.style));
    });

    function editButton(uid) {
        const btn = allButtons[uid];
        if (!btn) return;
        currentEditUid = uid;

        document.getElementById('btn-text').value = btn.text;
        updateBtnTextCounter();
        setStylePicker(btn.data?.style || '');
        document.getElementById('btn-web-app').value = btn.data?.web_app || '';

        const isInline = keyboardData.keyboard_type === 'INLINE';
        document.getElementById('inline-fields').classList.toggle('hidden', !isInline);
        document.getElementById('reply-fields').classList.toggle('hidden', isInline);

        if (isInline) {
            document.getElementById('btn-url').value = btn.data?.url || '';
            document.getElementById('btn-callback').value = btn.data?.callback_data || '';
            document.getElementById('btn-copy-text').value = btn.data?.copy_text || '';
            document.getElementById('btn-login-url').value = btn.data?.login_url || '';
        } else {
            document.getElementById('btn-request-contact').checked = btn.data?.request_contact || false;
            document.getElementById('btn-request-location').checked = btn.data?.request_location || false;
        }

        openModal();
    }

    function openModal() {
        const modal = document.getElementById('button-modal');
        modal.classList.remove('hidden');
        requestAnimationFrame(() => modal.classList.add('kb-modal-open'));
    }

    function saveButton() {
        if (currentEditUid == null) return;
        const btn = allButtons[currentEditUid];
        btn.text = document.getElementById('btn-text').value.trim();

        if (!btn.text) {
            showErrorModal('متن دکمه نمی‌تواند خالی باشد.');
            return;
        }

        const isInline = keyboardData.keyboard_type === 'INLINE';
        btn.data = { text: btn.text.trim() };

        if (document.getElementById('btn-style').value) {
            btn.data.style = document.getElementById('btn-style').value.trim();
        }

        if (document.getElementById('btn-web-app').value) {
            btn.data.web_app = document.getElementById('btn-web-app').value.trim();
        }

        if (isInline) {
            if (document.getElementById('btn-url').value) {
                btn.data.url = document.getElementById('btn-url').value.trim();
            }
            if (document.getElementById('btn-callback').value) {
                btn.data.callback_data = document.getElementById('btn-callback').value.trim();
            }
            if (document.getElementById('btn-copy-text').value) {
                btn.data.copy_text = document.getElementById('btn-copy-text').value.trim();
            }
            if (document.getElementById('btn-login-url').value) {
                btn.data.login_url = document.getElementById('btn-login-url').value.trim();
            }

            if (btn.data.callback_data && btn.data.url) {
                showErrorModal(`
                    دکمه نمی‌تواند همزمان <strong>URL</strong> و <strong>Callback Data</strong> داشته باشد.
                    <br><br>
                    لطفاً فقط یکی از آن‌ها را پر کنید.
                `);
                return;
            }

            if (btn.data.copy_text) {
                if (btn.data.callback_data || btn.data.url || btn.data.web_app || btn.data.login_url) {
                    showErrorModal(`
                        دکمه <strong>Copy Text</strong> نمی‌تواند با فیلدهای دیگر ترکیب شود.
                        <br><br>
                        لطفاً سایر فیلدها را خالی کنید.
                    `);
                    return;
                }
            }
            else if (!btn.data.callback_data && !btn.data.url && !btn.data.web_app && !btn.data.login_url) {
                showErrorModal(`
                    دکمه اینلاین باید حداقل یکی از موارد زیر را داشته باشد:
                    <br><br>
                    • Callback Data<br>
                    • URL<br>
                    • Web App<br>
                    • Copy Text<br>
                    • Login Url
                `);
                return;
            }
        } else {
            if (document.getElementById('btn-request-contact').checked) {
                btn.data.request_contact = true;
            }
            if (document.getElementById('btn-request-location').checked) {
                btn.data.request_location = true;
            }
        }

        closeModal();
        renderRows();
        updatePreview();
        showToast('دکمه ذخیره شد', 'fa-check');
    }

    function closeModal() {
        currentEditUid = null;
        const modal = document.getElementById('button-modal');
        modal.classList.remove('kb-modal-open');
        setTimeout(() => modal.classList.add('hidden'), 200);
    }

    function showErrorModal(message) {
        document.getElementById('error-modal')?.remove();
        const modalHTML = `
            <div id="error-modal" class="fixed inset-0 bg-black/70 backdrop-blur-sm z-[60] flex items-center justify-center">
                <div class="bg-admin-bg border border-red-500 rounded-2xl max-w-md w-full mx-4 shadow-2xl" dir="rtl">
                    <div class="px-6 py-4 border-b border-red-500/30 flex items-center gap-3">
                        <i class="fa-solid fa-circle-exclamation text-red-500 text-2xl"></i>
                        <h3 class="text-lg font-semibold text-red-500">خطا</h3>
                    </div>
                    <div class="px-6 py-8 text-admin-fg leading-relaxed text-[15.2px] text-right" dir="rtl">
                        ${message}
                    </div>
                    <div class="px-6 py-4 border-t border-admin-border flex justify-end">
                        <button onclick="this.closest('#error-modal').remove()" 
                                class="px-8 py-3 bg-red-600 hover:bg-red-700 text-white rounded-xl font-medium transition-all active:scale-95">
                            متوجه شدم
                        </button>
                    </div>
                </div>
            </div>
        `;
        document.body.insertAdjacentHTML('beforeend', modalHTML);
    }

    function updatePreview() {
        const container = document.getElementById('preview-keyboard');
        container.innerHTML = '';
        const isInline = keyboardData.keyboard_type === 'INLINE';

        const bubbleWrap = document.getElementById('preview-bubble-wrap');
        const messageText = document.getElementById('message_text').value || 'متن پیامی که کاربر می‌بیند اینجا نمایش داده می‌شود...';
        bubbleWrap.innerHTML = `<div class="bg-gradient-to-b from-[#22303c] to-[#1a252f] text-[#e7edf3] rounded-tl-2xl rounded-tr-2xl rounded-bl-2xl rounded-br-[5px] px-3.5 py-2.5 text-[12.5px] max-w-[82%] leading-relaxed shadow-md mb-2">${escapeHtml(messageText)}</div>`;

        keyboardData.rows.forEach(row => {
            const rowDiv = document.createElement('div');
            rowDiv.className = "flex gap-2 mb-2";

            row.buttonUids.forEach(uid => {
                const btn = allButtons[uid];
                if (!btn) return;

                const bEl = document.createElement('button');
                bEl.type = 'button';

                let iconHtml = '';
                if (isInline) {
                    if (btn.data?.url) iconHtml = '<i class="fa-solid fa-arrow-up-right-from-square text-[10px] ml-1.5"></i>';
                } else {
                    if (btn.data?.request_contact) iconHtml = '<i class="fa-solid fa-phone text-[10px] ml-1.5"></i>';
                    else if (btn.data?.request_location) iconHtml = '<i class="fa-solid fa-location-dot text-[10px] ml-1.5"></i>';
                }
                bEl.innerHTML = `${iconHtml}<span>${escapeHtml(btn.text)}</span>`;

                let baseClass = isInline
                    ? "flex-1 py-3 px-4 text-sm rounded-2xl text-white flex items-center justify-center shadow-md transition-all duration-150 hover:brightness-110 active:scale-[.97]"
                    : "flex-1 py-3 px-4 text-sm rounded-xl text-white flex items-center justify-center shadow-md transition-all duration-150 hover:brightness-110 active:scale-[.97]";


                const style = btn.data?.style || '';
                let bgClass = '';

                if (style === 'primary') bgClass = 'bg-blue-700';
                else if (style === 'success') bgClass = 'bg-green-700';
                else if (style === 'danger') bgClass = 'bg-red-700';
                else bgClass = 'bg-slate-700';

                bEl.className = `${baseClass} ${bgClass}`;
                rowDiv.appendChild(bEl);
            });

            container.appendChild(rowDiv);
        });
    }

    function flattenButtonsForSubmit() {
        const flat = [];
        keyboardData.rows.forEach((row, rIdx) => {
            const ltrOrder = [...row.buttonUids].reverse();
            ltrOrder.forEach((uid, pIdx) => {
                const b = allButtons[uid];
                flat.push({
                    text: b.text,
                    row: rIdx + 1,
                    column: pIdx + 1,
                    data: b.data || {}
                });
            });
        });
        return flat;
    }

    document.getElementById('btn-text').addEventListener('input', updateBtnTextCounter);

    const form = document.getElementById('keyboard-form');
    form.addEventListener('submit', function () {
        const hidden = document.createElement('input');
        hidden.type = 'hidden';
        hidden.name = 'keyboard_data';
        hidden.value = JSON.stringify({
            keyboard_type: keyboardData.keyboard_type,
            resize_keyboard: document.getElementById('resize_keyboard').checked,
            one_time_keyboard: document.getElementById('one_time_keyboard').checked,
            buttons: flattenButtonsForSubmit()
        });
        form.appendChild(hidden);
    });

    document.addEventListener('DOMContentLoaded', () => {
        {% if original and original.keyboard %}
            document.getElementById('resize_keyboard').checked = {{ original.keyboard.resize_keyboard|yesno:"true,false" }};
            document.getElementById('one_time_keyboard').checked = {{ original.keyboard.one_time_keyboard|yesno:"true,false" }};
        {% endif %}
        setKeyboardType(keyboardData.keyboard_type || 'REPLY');
        renderRows();
        updatePreview();
    });

</script>
{% endblock %}