@extends('layouts.admin')
@section('title', '考試分類管理')
@section('content')
<div x-data="categoryManager()" x-init="init()">
    <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4 mb-6">
        <p class="text-gray-500 dark:text-gray-400 text-sm">拖拉可排序或移動層級，雙擊名稱可直接改名</p>
        <a href="{{ route('admin.categories.create') }}" class="px-4 py-2 bg-green-600 text-white rounded-lg text-sm hover:bg-green-700 font-medium">+ 新增分類</a>
    </div>

    <!-- Toast -->
    <div x-show="message" x-transition x-cloak
         :class="msgOk ? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-700 dark:text-green-300' : 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-700 dark:text-red-300'"
         class="mb-4 px-4 py-3 rounded-lg border flex items-center justify-between text-sm">
        <span x-text="message"></span>
        <button @click="message=''" class="ml-4 opacity-60 hover:opacity-100 text-lg leading-none">&times;</button>
    </div>

    <!-- 分類樹 -->
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 overflow-hidden">
        <!-- 根容器（也是一個可拖入的 sortable） -->
        <div id="cat-root" class="cat-list" data-parent-id="">
            <template x-for="node in tree" :key="node.id">
                <div class="cat-item border-b border-gray-100 dark:border-slate-800" :data-id="node.id">
                    <!-- 第 1 層 row -->
                    <div class="cat-row flex items-center gap-2 px-4 py-3 bg-gray-50/60 dark:bg-slate-800/40"
                         :class="!node.is_active && 'opacity-50'">
                        <div class="cat-handle cursor-grab active:cursor-grabbing text-gray-300 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-400 flex-shrink-0">
                            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M7 2a2 2 0 100 4 2 2 0 000-4zm6 0a2 2 0 100 4 2 2 0 000-4zM7 8a2 2 0 100 4 2 2 0 000-4zm6 0a2 2 0 100 4 2 2 0 000-4zM7 14a2 2 0 100 4 2 2 0 000-4zm6 0a2 2 0 100 4 2 2 0 000-4z"/></svg>
                        </div>
                        <button x-show="node.children.length > 0" @click="node._open = !node._open; $nextTick(() => initSortables())"
                                class="w-6 h-6 flex items-center justify-center rounded hover:bg-gray-200 dark:hover:bg-slate-700 flex-shrink-0">
                            <svg class="w-4 h-4 text-gray-500 transition-transform duration-200" :class="node._open && 'rotate-90'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                        </button>
                        <div x-show="node.children.length === 0" class="w-6 flex-shrink-0"></div>
                        <!-- 名稱 -->
                        <template x-if="editId !== node.id">
                            <span class="font-bold text-gray-900 dark:text-white flex-1 cursor-pointer select-none hover:text-blue-600 dark:hover:text-blue-400"
                                  @dblclick="startEdit(node)" x-text="node.name" title="雙擊改名"></span>
                        </template>
                        <template x-if="editId === node.id">
                            <input type="text" x-model="editName" @keydown.enter="saveEdit(node)" @keydown.escape="editId=null" @blur="saveEdit(node)"
                                   class="flex-1 px-2 py-0.5 rounded border-2 border-blue-400 bg-white dark:bg-slate-800 text-sm font-bold text-gray-900 dark:text-white focus:outline-none">
                        </template>
                        <span x-show="node.children.length > 0" class="text-xs px-1.5 py-0.5 rounded-full bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 font-medium" x-text="node.children.length + ' 個子分類'"></span>
                        <span class="text-xs text-gray-400" x-text="node.exams_count + ' 筆考試'"></span>
                        <span class="text-xs px-2 py-0.5 rounded-full font-bold" :class="node.is_active ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'" x-text="node.is_active ? '啟用' : '停用'"></span>
                        <a :href="'{{ route('admin.categories.index') }}/' + node.id + '/edit'" class="text-blue-600 hover:text-blue-800 text-xs font-medium">編輯</a>
                        <form :action="'{{ route('admin.categories.index') }}/' + node.id" method="POST" onsubmit="return confirm('確定刪除？會連同子分類一起刪除')" class="flex-shrink-0">@csrf @method('DELETE')<button class="text-red-600 hover:text-red-800 text-xs font-medium">刪除</button></form>
                    </div>
                    <!-- 第 2 層 children -->
                    <div x-show="node._open && node.children.length > 0" x-collapse
                         class="cat-list border-t border-gray-100 dark:border-slate-800" :data-parent-id="node.id">
                        <template x-for="child in node.children" :key="child.id">
                            <div class="cat-item" :data-id="child.id">
                                <div class="cat-row flex items-center gap-2 px-4 py-2.5 pl-12 hover:bg-blue-50/30 dark:hover:bg-slate-800/50 border-b border-gray-50 dark:border-slate-800/50"
                                     :class="!child.is_active && 'opacity-50'">
                                    <div class="cat-handle cursor-grab active:cursor-grabbing text-gray-300 hover:text-gray-500 dark:text-gray-600 flex-shrink-0">
                                        <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M7 2a2 2 0 100 4 2 2 0 000-4zm6 0a2 2 0 100 4 2 2 0 000-4zM7 8a2 2 0 100 4 2 2 0 000-4zm6 0a2 2 0 100 4 2 2 0 000-4zM7 14a2 2 0 100 4 2 2 0 000-4zm6 0a2 2 0 100 4 2 2 0 000-4z"/></svg>
                                    </div>
                                    <button x-show="child.children.length > 0" @click="child._open = !child._open; $nextTick(() => initSortables())"
                                            class="w-5 h-5 flex items-center justify-center rounded hover:bg-gray-200 dark:hover:bg-slate-700 flex-shrink-0">
                                        <svg class="w-3.5 h-3.5 text-gray-500 transition-transform duration-200" :class="child._open && 'rotate-90'" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
                                    </button>
                                    <div x-show="child.children.length === 0" class="w-5 flex-shrink-0"></div>
                                    <span class="text-gray-300 dark:text-gray-600 text-xs select-none">└</span>
                                    <template x-if="editId !== child.id">
                                        <span class="text-sm font-medium text-gray-700 dark:text-gray-300 flex-1 cursor-pointer select-none hover:text-indigo-600 dark:hover:text-indigo-400"
                                              @dblclick="startEdit(child)" x-text="child.name" title="雙擊改名"></span>
                                    </template>
                                    <template x-if="editId === child.id">
                                        <input type="text" x-model="editName" @keydown.enter="saveEdit(child)" @keydown.escape="editId=null" @blur="saveEdit(child)"
                                               class="flex-1 px-2 py-0.5 rounded border-2 border-indigo-400 bg-white dark:bg-slate-800 text-sm text-gray-900 dark:text-white focus:outline-none">
                                    </template>
                                    <span x-show="child.children.length > 0" class="text-xs px-1.5 py-0.5 rounded-full bg-indigo-100 text-indigo-600 dark:bg-indigo-900/30 dark:text-indigo-400 font-medium" x-text="child.children.length + ' 個'"></span>
                                    <span class="text-xs text-gray-400" x-text="child.exams_count + ' 筆'"></span>
                                    <span class="text-xs px-2 py-0.5 rounded-full font-bold" :class="child.is_active ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'" x-text="child.is_active ? '啟用' : '停用'"></span>
                                    <a :href="'{{ route('admin.categories.index') }}/' + child.id + '/edit'" class="text-blue-600 hover:text-blue-800 text-xs font-medium">編輯</a>
                                    <form :action="'{{ route('admin.categories.index') }}/' + child.id" method="POST" onsubmit="return confirm('確定刪除？')" class="flex-shrink-0">@csrf @method('DELETE')<button class="text-red-600 hover:text-red-800 text-xs font-medium">刪除</button></form>
                                </div>
                                <!-- 第 3 層 grandchildren -->
                                <div x-show="child._open && child.children.length > 0" x-collapse
                                     class="cat-list border-t border-gray-50 dark:border-slate-800/30" :data-parent-id="child.id">
                                    <template x-for="gc in child.children" :key="gc.id">
                                        <div class="cat-item" :data-id="gc.id">
                                            <div class="cat-row flex items-center gap-2 px-4 py-2 pl-24 hover:bg-indigo-50/30 dark:hover:bg-slate-800/30 border-b border-gray-50 dark:border-slate-800/30"
                                                 :class="!gc.is_active && 'opacity-50'">
                                                <div class="cat-handle cursor-grab active:cursor-grabbing text-gray-300 hover:text-gray-500 dark:text-gray-600 flex-shrink-0">
                                                    <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 20 20"><path d="M7 2a2 2 0 100 4 2 2 0 000-4zm6 0a2 2 0 100 4 2 2 0 000-4zM7 8a2 2 0 100 4 2 2 0 000-4zm6 0a2 2 0 100 4 2 2 0 000-4zM7 14a2 2 0 100 4 2 2 0 000-4zm6 0a2 2 0 100 4 2 2 0 000-4z"/></svg>
                                                </div>
                                                <span class="text-gray-300 dark:text-gray-600 text-xs select-none">└</span>
                                                <template x-if="editId !== gc.id">
                                                    <span class="text-sm text-gray-600 dark:text-gray-400 flex-1 cursor-pointer select-none hover:text-purple-600 dark:hover:text-purple-400"
                                                          @dblclick="startEdit(gc)" x-text="gc.name" title="雙擊改名"></span>
                                                </template>
                                                <template x-if="editId === gc.id">
                                                    <input type="text" x-model="editName" @keydown.enter="saveEdit(gc)" @keydown.escape="editId=null" @blur="saveEdit(gc)"
                                                           class="flex-1 px-2 py-0.5 rounded border-2 border-purple-400 bg-white dark:bg-slate-800 text-sm text-gray-900 dark:text-white focus:outline-none">
                                                </template>
                                                <span class="text-xs text-gray-400" x-text="gc.exams_count + ' 筆'"></span>
                                                <span class="text-xs px-2 py-0.5 rounded-full font-bold" :class="gc.is_active ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400' : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'" x-text="gc.is_active ? '啟用' : '停用'"></span>
                                                <a :href="'{{ route('admin.categories.index') }}/' + gc.id + '/edit'" class="text-blue-600 hover:text-blue-800 text-xs font-medium">編輯</a>
                                                <form :action="'{{ route('admin.categories.index') }}/' + gc.id" method="POST" onsubmit="return confirm('確定刪除？')" class="flex-shrink-0">@csrf @method('DELETE')<button class="text-red-600 hover:text-red-800 text-xs font-medium">刪除</button></form>
                                            </div>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </template>
                        <!-- 空拖入區 -->
                        <div class="cat-empty px-4 py-3 text-center text-xs text-gray-300 dark:text-gray-600 border-b border-dashed border-gray-200 dark:border-slate-700"
                             x-show="node.children.length === 0" :data-parent-id="node.id">
                            拖拉分類到此處成為子分類
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <div x-show="tree.length === 0" class="px-4 py-12 text-center text-gray-400">尚無分類</div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js"></script>
<script>
function categoryManager() {
    return {
        cats: @json($catsJson),
        editId: null,
        editName: '',
        message: '',
        msgOk: true,

        // 建立巢狀樹
        get tree() {
            return this.buildTree(null);
        },

        buildTree(parentId) {
            return this.cats
                .filter(c => c.parent_id === parentId)
                .sort((a, b) => a.sort_order - b.sort_order)
                .map(c => {
                    if (c._open === undefined) c._open = false;
                    c.children = this.buildTree(c.id);
                    return c;
                });
        },

        // ── SortableJS ──
        init() {
            this.$nextTick(() => this.initSortables());
        },

        initSortables() {
            // 所有 .cat-list 容器都是同一個 group，可以互相拖拉
            document.querySelectorAll('.cat-list').forEach(el => {
                if (el._sortable) return;
                el._sortable = new Sortable(el, {
                    group: 'categories',
                    animation: 200,
                    handle: '.cat-handle',
                    draggable: '.cat-item',
                    ghostClass: 'sortable-ghost',
                    fallbackOnBody: true,
                    swapThreshold: 0.65,
                    onEnd: (evt) => this.onDragEnd(evt),
                });
            });
        },

        onDragEnd(evt) {
            const movedId = parseInt(evt.item.dataset.id);
            const newParentId = evt.to.dataset.parentId ? parseInt(evt.to.dataset.parentId) : null;

            // 防止把自己拖入自己的子孫底下
            if (newParentId && this.isDescendant(movedId, newParentId)) {
                // 還原（重新整理頁面）
                this.toast('不能把分類拖入自己的子分類中', false);
                location.reload();
                return;
            }

            // 更新本地資料
            const cat = this.cats.find(c => c.id === movedId);
            if (cat) cat.parent_id = newParentId;

            // 收集所有容器的順序
            this.saveOrder();
        },

        // 檢查 targetId 是否為 ancestorId 的子孫
        isDescendant(ancestorId, targetId) {
            let current = this.cats.find(c => c.id === targetId);
            while (current) {
                if (current.id === ancestorId) return true;
                current = current.parent_id ? this.cats.find(c => c.id === current.parent_id) : null;
            }
            return false;
        },

        async saveOrder() {
            const items = [];
            document.querySelectorAll('.cat-list').forEach(list => {
                const parentId = list.dataset.parentId ? parseInt(list.dataset.parentId) : null;
                list.querySelectorAll(':scope > .cat-item').forEach((el, i) => {
                    const id = parseInt(el.dataset.id);
                    if (id) items.push({ id, parent_id: parentId, sort_order: i });
                });
            });

            if (!items.length) return;

            // 同步本地
            items.forEach(item => {
                const c = this.cats.find(c => c.id === item.id);
                if (c) { c.parent_id = item.parent_id; c.sort_order = item.sort_order; }
            });

            try {
                const r = await this.post('{{ route("admin.categories.reorder") }}', { items });
                if (r.success) this.toast(r.message);
            } catch (e) {
                this.toast('排序儲存失敗: ' + e.message, false);
            }
        },

        // ── 改名 ──
        startEdit(cat) {
            this.editId = cat.id;
            this.editName = cat.name;
            this.$nextTick(() => {
                const el = document.querySelector('input[x-model="editName"]');
                if (el) { el.focus(); el.select(); }
            });
        },

        async saveEdit(cat) {
            const name = this.editName.trim();
            this.editId = null;
            if (!name || name === cat.name) return;
            try {
                const r = await this.post('{{ route("admin.categories.rename") }}', { id: cat.id, name });
                if (r.success) {
                    const c = this.cats.find(c => c.id === cat.id);
                    if (c) c.name = name;
                    this.toast(r.message);
                }
            } catch (e) { this.toast('改名失敗: ' + e.message, false); }
        },

        // ── 工具 ──
        async post(url, body) {
            const r = await fetch(url, { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }, body: JSON.stringify(body) });
            return r.json();
        },
        toast(msg, ok = true) {
            this.message = msg; this.msgOk = ok;
            setTimeout(() => this.message = '', 3000);
        },
    };
}
</script>
<style>
.sortable-ghost { opacity: 0.25; background: #dbeafe !important; border-radius: 0.5rem; }
.cat-item { transition: background 0.15s; }
</style>
@endsection