{{-- Inspector sidebar --}}
<aside class="shrink-0 w-72 bg-white/90 backdrop-blur border-s border-black/5 overflow-y-auto z-20 flex flex-col">

    {{-- No selection --}}
    <div x-show="!selection" class="p-6 text-center text-muted text-sm">
        <i class="ti ti-click text-2xl mb-2 block opacity-40"></i>
        اختر جدولاً أو عموداً للتعديل
    </div>

    {{-- Table inspector --}}
    <div x-show="selection && !selection.columnId" x-cloak class="p-4">
        <h3 class="font-display text-sm font-extrabold text-ink mb-4 flex items-center gap-2">
            <i class="ti ti-table text-brand"></i> إعدادات الجدول
            <span x-show="selectedTable && isTableExternal(selectedTable)"
                  class="text-[10px] font-bold text-muted bg-black/5 px-2 py-0.5 rounded">
                مرجع خارجي — للقراءة فقط
            </span>
        </h3>

        <template x-if="selectedTable">
            <div class="space-y-4">
                <div>
                    <label class="text-[11px] font-bold text-muted block mb-1">اسم الجدول</label>
                    <input type="text" x-model="selectedTable.name"
                           @input="onTableNameChange(); markDirty()"
                           :disabled="isTableExternal(selectedTable)"
                           class="w-full font-mono text-sm px-3 py-2 rounded-xl border border-black/10 focus:ring-2 focus:ring-brand/30 outline-none disabled:bg-black/5 disabled:text-muted">
                </div>

                <div x-show="!isTableExternal(selectedTable)">
                    <label class="text-[11px] font-bold text-muted block mb-2">اللون</label>
                    <div class="flex flex-wrap gap-2">
                        <template x-for="c in colorPalette" :key="c">
                            <button @click="selectedTable.color = c; markDirty()"
                                    class="w-7 h-7 rounded-lg border-2 transition hover:scale-110"
                                    :class="selectedTable.color === c ? 'border-ink scale-110' : 'border-transparent'"
                                    :style="`background:${c}`"
                                    :aria-label="'لون ' + c"></button>
                        </template>
                    </div>
                </div>

                <div x-show="!isTableExternal(selectedTable)" class="flex items-center justify-between">
                    <span class="text-xs font-medium">Timestamps</span>
                    <button @click="selectedTable.timestamps = !selectedTable.timestamps; markDirty()"
                            class="w-10 h-6 rounded-full transition relative"
                            :class="selectedTable.timestamps ? 'bg-brand' : 'bg-black/10'">
                        <span class="absolute top-0.5 w-5 h-5 rounded-full bg-white shadow transition"
                              :class="selectedTable.timestamps ? 'start-0.5' : 'start-[18px]'"></span>
                    </button>
                </div>

                <div x-show="!isTableExternal(selectedTable)" class="flex items-center justify-between">
                    <span class="text-xs font-medium">Soft Deletes</span>
                    <button @click="selectedTable.soft_deletes = !selectedTable.soft_deletes; markDirty()"
                            class="w-10 h-6 rounded-full transition relative"
                            :class="selectedTable.soft_deletes ? 'bg-brand' : 'bg-black/10'">
                        <span class="absolute top-0.5 w-5 h-5 rounded-full bg-white shadow transition"
                              :class="selectedTable.soft_deletes ? 'start-0.5' : 'start-[18px]'"></span>
                    </button>
                </div>

                <button x-show="!isTableExternal(selectedTable)"
                        @click="deleteTable(selection.tableId)"
                        class="w-full text-xs font-bold text-red-600 bg-red-50 hover:bg-red-100 py-2.5 rounded-xl transition mt-4">
                    <i class="ti ti-trash me-1"></i> حذف الجدول
                </button>
            </div>
        </template>
    </div>

    {{-- Column inspector --}}
    <div x-show="selection && selection.columnId" x-cloak class="p-4">
        <h3 class="font-display text-sm font-extrabold text-ink mb-4 flex items-center gap-2">
            <i class="ti ti-columns text-brand"></i> إعدادات العمود
            <span x-show="selectedTable && isTableExternal(selectedTable)"
                  class="text-[10px] font-bold text-muted bg-black/5 px-2 py-0.5 rounded">
                للقراءة فقط
            </span>
        </h3>

        <template x-if="selectedColumn">
            <div class="space-y-3" :class="selectedTable && isTableExternal(selectedTable) ? 'pointer-events-none opacity-60' : ''">
                <div>
                    <label class="text-[11px] font-bold text-muted block mb-1">اسم العمود</label>
                    <input type="text" x-model="selectedColumn.name" @input="onColumnNameChange(); markDirty()"
                           :disabled="selectedTable && isTableExternal(selectedTable)"
                           class="w-full font-mono text-sm px-3 py-2 rounded-xl border border-black/10 focus:ring-2 focus:ring-brand/30 outline-none">
                </div>

                <div>
                    <label class="text-[11px] font-bold text-muted block mb-1">النوع</label>
                    <select x-model="selectedColumn.type" @change="onColumnTypeChange(); markDirty()"
                            class="w-full font-mono text-sm px-3 py-2 rounded-xl border border-black/10 focus:ring-2 focus:ring-brand/30 outline-none">
                        <template x-for="tp in columnTypes" :key="tp">
                            <option :value="tp" x-text="tp"></option>
                        </template>
                    </select>
                </div>

                <div x-show="['string'].includes(selectedColumn.type)">
                    <label class="text-[11px] font-bold text-muted block mb-1">Length</label>
                    <input type="number" x-model.number="selectedColumn.length" @input="markDirty()"
                           class="w-full font-mono text-sm px-3 py-2 rounded-xl border border-black/10 outline-none">
                </div>

                <div x-show="selectedColumn.type === 'decimal'" class="grid grid-cols-2 gap-2">
                    <div>
                        <label class="text-[11px] font-bold text-muted block mb-1">Precision</label>
                        <input type="number" x-model.number="selectedColumn.precision" @input="markDirty()"
                               class="w-full font-mono text-sm px-3 py-2 rounded-xl border border-black/10 outline-none">
                    </div>
                    <div>
                        <label class="text-[11px] font-bold text-muted block mb-1">Scale</label>
                        <input type="number" x-model.number="selectedColumn.scale" @input="markDirty()"
                               class="w-full font-mono text-sm px-3 py-2 rounded-xl border border-black/10 outline-none">
                    </div>
                </div>

                <div x-show="selectedColumn.type === 'enum'">
                    <label class="text-[11px] font-bold text-muted block mb-1">Values (comma-separated)</label>
                    <input type="text"
                           :value="(selectedColumn.values || []).join(', ')"
                           @input="selectedColumn.values = $event.target.value.split(',').map(v => v.trim()).filter(Boolean); markDirty()"
                           class="w-full font-mono text-sm px-3 py-2 rounded-xl border border-black/10 outline-none">
                </div>

                <div class="grid grid-cols-2 gap-2">
                    <template x-for="flag in columnFlags" :key="flag.key">
                        <label class="flex items-center gap-2 text-xs cursor-pointer">
                            <input type="checkbox" x-model="selectedColumn[flag.key]" @change="onColumnFlagChange(flag.key); markDirty()"
                                   class="rounded border-black/20 text-brand focus:ring-brand/30">
                            <span x-text="flag.label"></span>
                        </label>
                    </template>
                </div>

                <div>
                    <label class="text-[11px] font-bold text-muted block mb-1">Default</label>
                    <input type="text" x-model="selectedColumn.default" @input="markDirty()"
                           placeholder="null"
                           class="w-full font-mono text-sm px-3 py-2 rounded-xl border border-black/10 outline-none">
                </div>

                <div>
                    <label class="text-[11px] font-bold text-muted block mb-1">Comment</label>
                    <input type="text" x-model="selectedColumn.comment" @input="markDirty()"
                           class="w-full text-sm px-3 py-2 rounded-xl border border-black/10 outline-none">
                </div>

                {{-- Foreign key --}}
                <div class="border-t border-black/5 pt-3 mt-3">
                    <h4 class="text-xs font-extrabold text-ink mb-2 flex items-center gap-1">
                        <i class="ti ti-link text-brand"></i> علاقة FK
                    </h4>

                    <div class="space-y-2">
                        <select x-model="fkRefTable" @change="onFkTableChange()"
                                class="w-full font-mono text-xs px-3 py-2 rounded-xl border border-black/10 outline-none">
                            <option value="">— بدون FK —</option>
                            <template x-for="tbl in otherTables" :key="tbl.id">
                                <option :value="tbl.name" x-text="tbl.name"></option>
                            </template>
                        </select>

                        <select x-show="fkRefTable" x-model="fkRefColumn" @change="applyForeignKey()"
                                class="w-full font-mono text-xs px-3 py-2 rounded-xl border border-black/10 outline-none">
                            <template x-for="c in fkRefColumns" :key="c.id">
                                <option :value="c.name" x-text="c.name"></option>
                            </template>
                        </select>

                        <div x-show="fkRefTable" class="grid grid-cols-2 gap-2">
                            <div>
                                <label class="text-[10px] text-muted">ON DELETE</label>
                                <select x-model="fkOnDelete" @change="applyForeignKey()"
                                        class="w-full font-mono text-xs px-2 py-1.5 rounded-lg border border-black/10 outline-none">
                                    <option value="cascade">cascade</option>
                                    <option value="restrict">restrict</option>
                                    <option value="set null">set null</option>
                                    <option value="no action">no action</option>
                                </select>
                            </div>
                            <div>
                                <label class="text-[10px] text-muted">ON UPDATE</label>
                                <select x-model="fkOnUpdate" @change="applyForeignKey()"
                                        class="w-full font-mono text-xs px-2 py-1.5 rounded-lg border border-black/10 outline-none">
                                    <option value="cascade">cascade</option>
                                    <option value="restrict">restrict</option>
                                    <option value="set null">set null</option>
                                    <option value="no action">no action</option>
                                </select>
                            </div>
                        </div>

                        <button x-show="selectedColumn.foreign" @click="removeForeignKey()"
                                class="w-full text-xs text-red-600 hover:bg-red-50 py-2 rounded-lg transition">
                            إزالة FK
                        </button>
                    </div>
                </div>

                <button x-show="!(selectedTable && isTableExternal(selectedTable))"
                        @click="deleteColumn(selection.tableId, selection.columnId)"
                        class="w-full text-xs font-bold text-red-600 bg-red-50 hover:bg-red-100 py-2.5 rounded-xl transition">
                    <i class="ti ti-trash me-1"></i> حذف العمود
                </button>
            </div>
        </template>
    </div>
</aside>