@extends('admin.layouts.app')
@section('title', 'Edit Menu: ' . $menu->name)
@section('page-title', 'Edit Menu: ' . $menu->name)

@section('content')
<div x-data="menuEditor({{ json_encode($menu->items->toArray()) }})">
    <form method="POST" action="{{ route('admin.menus.update', $menu->id) }}"
          x-ref="menuForm" @submit.prevent="saveMenu($event)">
        @csrf
        <input type="hidden" name="_method" value="PUT">

        <div class="flex flex-col md:flex-row gap-6">
            {{-- Item Picker --}}
            <div class="w-full md:w-64 md:flex-shrink-0 space-y-4">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4">
                    <h3 class="font-semibold text-sm text-gray-900 dark:text-white mb-3">Add Item</h3>

                    {{-- Tabs --}}
                    <div class="flex gap-1 p-1 bg-gray-100 dark:bg-gray-700 rounded-lg mb-3">
                        <button type="button" @click="switchTab('custom')"
                                :class="pickerTab==='custom' ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' : 'text-gray-500 hover:text-gray-700'"
                                class="flex-1 py-1 rounded-md text-xs font-medium transition-all">Custom</button>
                        <button type="button" @click="switchTab('post')"
                                :class="pickerTab==='post' ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' : 'text-gray-500 hover:text-gray-700'"
                                class="flex-1 py-1 rounded-md text-xs font-medium transition-all">Posts</button>
                        <button type="button" @click="switchTab('page')"
                                :class="pickerTab==='page' ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' : 'text-gray-500 hover:text-gray-700'"
                                class="flex-1 py-1 rounded-md text-xs font-medium transition-all">Pages</button>
                    </div>

                    {{-- Custom URL tab --}}
                    <div x-show="pickerTab==='custom'" class="space-y-2">
                        <input type="text" x-model="newLabel" placeholder="Label"
                               class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        <input type="text" x-model="newUrl" placeholder="URL e.g. /about"
                               class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white font-mono text-xs">
                        <div class="flex gap-1 p-1 bg-gray-100 dark:bg-gray-700 rounded-lg">
                            <button type="button" x-on:click="newTarget = '_self'"
                                    :class="newTarget === '_self' ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' : 'text-gray-500 hover:text-gray-700'"
                                    class="flex-1 py-1 rounded-md text-xs font-medium transition-all">Same Tab</button>
                            <button type="button" x-on:click="newTarget = '_blank'"
                                    :class="newTarget === '_blank' ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' : 'text-gray-500 hover:text-gray-700'"
                                    class="flex-1 py-1 rounded-md text-xs font-medium transition-all">New Tab</button>
                        </div>
                        <button type="button" @click="addItem"
                                class="w-full py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium">Add</button>
                    </div>

                    {{-- Post/Page picker tab --}}
                    <div x-show="pickerTab !== 'custom'" class="space-y-2">
                        <input type="text" x-model="pickerSearch" @input="searchPicker"
                               placeholder="Search by title..."
                               class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                        <div class="max-h-56 overflow-y-auto space-y-1">
                            <div x-show="pickerLoading" class="text-xs text-gray-400 text-center py-3">Loading...</div>
                            <template x-for="post in pickerResults" :key="post.id">
                                <button type="button" @click="addPostItem(post)"
                                        class="w-full flex items-start gap-2 px-3 py-2 rounded-lg hover:bg-indigo-50 dark:hover:bg-indigo-900/20 text-left group transition-colors">
                                    <svg class="w-4 h-4 text-indigo-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
                                    </svg>
                                    <div>
                                        <p class="text-xs font-medium text-gray-800 dark:text-gray-200 group-hover:text-indigo-600 leading-snug" x-text="post.title"></p>
                                        <p class="text-xs text-gray-400 font-mono" x-text="'/' + post.type + '/' + post.slug"></p>
                                    </div>
                                </button>
                            </template>
                            <p x-show="!pickerLoading && pickerResults.length === 0" class="text-xs text-gray-400 text-center py-4">
                                No results. Try searching.
                            </p>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Menu Tree --}}
            <div class="flex-1">
                <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
                    <div class="flex items-center justify-between mb-4">
                        <h3 class="font-semibold text-sm text-gray-900 dark:text-white">Menu Structure</h3>
                        <p class="text-xs text-gray-400">Drag to reorder · Use ← → to nest</p>
                    </div>

                    <div class="space-y-1 min-h-[60px]" x-ref="menuTree">
                        <template x-for="(item, i) in items" :key="item._id">
                            <div class="rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
                                {{-- Parent row --}}
                                <div class="flex items-center gap-2 px-3 py-2.5 bg-gray-50 dark:bg-gray-700/50">
                                    <span class="drag-handle cursor-move text-gray-300 hover:text-gray-500 select-none px-1">⠿</span>
                                    <span class="text-sm font-medium text-gray-800 dark:text-gray-200 flex-1" x-text="item.label"></span>
                                    <code class="text-xs text-gray-400 hidden sm:block mr-2" x-text="item.url"></code>
                                    {{-- Indent: make child of previous --}}
                                    <button type="button" x-on:click="demoteItem(i)" :disabled="i === 0 || (item.children && item.children.length > 0)"
                                            title="Make sub-item of previous"
                                            class="p-1 text-gray-400 hover:text-indigo-600 disabled:opacity-30 disabled:cursor-not-allowed rounded transition-colors">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"/></svg>
                                    </button>
                                    <button type="button" x-on:click="removeItem(i)"
                                            class="p-1 text-gray-400 hover:text-red-600 rounded transition-colors">
                                        <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                    </button>
                                </div>

                                {{-- Children --}}
                                <div x-show="item.children && item.children.length > 0"
                                     :data-children="item._id"
                                     class="border-t border-gray-100 dark:border-gray-700 divide-y divide-gray-100 dark:divide-gray-700 bg-white dark:bg-gray-800">
                                    <template x-for="(child, j) in item.children" :key="child._id">
                                        <div class="flex items-center gap-2 pl-8 pr-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700/30">
                                            <span class="drag-handle cursor-move text-gray-300 hover:text-gray-500 select-none px-1">⠿</span>
                                            <span class="text-sm text-gray-700 dark:text-gray-300 flex-1" x-text="child.label"></span>
                                            <code class="text-xs text-gray-400 hidden sm:block mr-2" x-text="child.url"></code>
                                            {{-- Outdent --}}
                                            <button type="button" x-on:click="promoteChild(i, j)"
                                                    title="Move to top level"
                                                    class="p-1 text-gray-400 hover:text-indigo-600 rounded transition-colors">
                                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 19l-7-7 7-7m8 14l-7-7 7-7"/></svg>
                                            </button>
                                            <button type="button" x-on:click="removeChild(i, j)"
                                                    class="p-1 text-gray-400 hover:text-red-600 rounded transition-colors">
                                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                            </button>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </template>
                        <p x-show="items.length === 0" class="text-sm text-gray-400 text-center py-8">No items yet. Add from the panel above.</p>
                    </div>

                    <input type="hidden" name="items" :value="JSON.stringify(items)">

                    <div x-show="menuMessage" x-text="menuMessage"
                         :class="menuSaved ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300' : 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-300'"
                         class="mt-3 text-xs p-2 rounded border" style="display:none"></div>

                    <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700 flex gap-3">
                        <button type="submit" :disabled="menuSaving"
                                class="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white rounded-lg text-sm font-medium flex items-center gap-2">
                            <svg x-show="menuSaving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                            </svg>
                            <span x-text="menuSaving ? 'Saving...' : 'Save Menu'"></span>
                        </button>
                        <a href="{{ route('admin.menus.index') }}" class="px-4 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg text-sm font-medium">Cancel</a>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection
