<div class="flex flex-col h-[calc(100vh-4rem)]" x-data="{ }">
    {{-- Toolbar --}}
    <div class="flex flex-wrap items-center justify-between gap-3 border-b bg-white px-5 py-3">
        <div class="flex items-center gap-3 min-w-0">
            <a href="{{ route('website.manage.pages') }}" wire:navigate class="text-gray-500 hover:text-gray-800" aria-label="{{ __('رجوع') }}">
                <x-ui.icon name="chevron-right" class="w-5 h-5" />
            </a>
            <div class="min-w-0">
                <h1 class="font-bold truncate">{{ $page->title ?: $page->title_en ?: $page->slug }}</h1>
                <p class="text-xs text-gray-500 font-mono" dir="ltr">/{{ $page->slug }}</p>
            </div>
            <span class="text-xs px-2 py-1 rounded-full {{ $page->is_published ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-600' }}">
                {{ $page->is_published ? __('منشورة') : __('مسودة') }}
            </span>
        </div>

        <div class="flex items-center gap-2">
            <div class="hidden md:flex items-center rounded-lg border overflow-hidden" role="group" aria-label="{{ __('عرض المعاينة') }}">
                @foreach (['desktop' => 'شاشة', 'tablet' => 'لوحي', 'mobile' => 'جوال'] as $vp => $vpLabel)
                    <button type="button" wire:click="$set('previewport', '{{ $vp }}')"
                            class="px-3 py-1.5 text-sm {{ $previewport === $vp ? 'bg-primary-600 text-white' : 'hover:bg-gray-50' }}">
                        {{ __($vpLabel) }}
                    </button>
                @endforeach
            </div>
            <a href="{{ route('website.manage.pages.preview', $page->id) }}" target="_blank" rel="noopener"
               class="rounded-lg border px-4 py-2 text-sm font-medium">{{ __('معاينة') }}</a>
        </div>
    </div>

    @if (session('success'))
        <div class="bg-green-50 border-b border-green-200 text-green-800 px-5 py-2 text-sm">{{ session('success') }}</div>
    @endif
    @if (session('error'))
        <div class="bg-red-50 border-b border-red-200 text-red-800 px-5 py-2 text-sm">{{ session('error') }}</div>
    @endif

    <div class="flex flex-1 min-h-0">
        {{-- Block tree --}}
        <aside class="w-72 shrink-0 border-e bg-white overflow-y-auto">
            <div class="p-3 border-b">
                <button type="button" wire:click="openPicker"
                        class="w-full inline-flex items-center justify-center gap-2 rounded-lg bg-primary-600 px-4 py-2.5 text-white text-sm font-medium hover:bg-primary-700">
                    <x-ui.icon name="plus" class="w-4 h-4" /> {{ __('إضافة عنصر') }}
                </button>
            </div>

            @if ($tree->isEmpty())
                <p class="p-6 text-center text-sm text-gray-500">{{ __('الصفحة فارغة — أضف أول عنصر') }}</p>
            @else
                <ul class="p-2 space-y-1">
                    @foreach ($tree as $node)
                        @include('website.builder.tree-node', ['node' => $node, 'depth' => 0])
                    @endforeach
                </ul>
            @endif
        </aside>

        {{-- Inspector --}}
        <section class="flex-1 min-w-0 overflow-y-auto bg-gray-50">
            @if (! $block)
                <div class="h-full grid place-items-center text-center p-10">
                    <div class="space-y-2 text-gray-500">
                        <x-ui.icon name="squares-plus" class="w-10 h-10 mx-auto opacity-40" />
                        <p>{{ __('اختر عنصرًا من القائمة لتعديله') }}</p>
                    </div>
                </div>
            @elseif (! $definition)
                <div class="p-6">
                    <div class="rounded-lg bg-amber-50 border border-amber-200 text-amber-900 p-4">
                        {{ __('نوع هذا العنصر لم يعد متاحًا في النظام. يمكنك حذفه.') }}
                    </div>
                </div>
            @else
                <div class="p-5 space-y-5 max-w-3xl">
                    <div class="flex items-center gap-3">
                        <span class="inline-flex items-center justify-center w-10 h-10 rounded-lg bg-white border">
                            <x-website.icon :name="$definition->icon()" class="w-5 h-5" />
                        </span>
                        <div>
                            <h2 class="font-bold">{{ $definition->label() }}</h2>
                            @if ($definition->description())
                                <p class="text-xs text-gray-500">{{ $definition->description() }}</p>
                            @endif
                        </div>
                    </div>

                    {{-- Panel tabs --}}
                    <div class="flex gap-1 rounded-lg bg-white border p-1" role="tablist">
                        @foreach (['content' => 'المحتوى', 'design' => 'التصميم', 'motion' => 'الحركة'] as $tab => $tabLabel)
                            <button type="button" role="tab" wire:click="$set('panel', '{{ $tab }}')"
                                    aria-selected="{{ $panel === $tab ? 'true' : 'false' }}"
                                    class="flex-1 rounded-md px-3 py-2 text-sm font-medium {{ $panel === $tab ? 'bg-primary-600 text-white' : 'hover:bg-gray-50' }}">
                                {{ __($tabLabel) }}
                            </button>
                        @endforeach
                    </div>

                    <div class="rounded-xl border bg-white p-5 space-y-4">
                        @if ($panel === 'content')
                            @if (count($definition->variants()) > 1)
                                <div class="flex flex-col gap-1.5">
                                    <label for="pb-variant" class="text-sm font-medium">{{ __('نمط العرض') }}</label>
                                    <select id="pb-variant" wire:model="variant" class="w-full rounded-lg border px-3 py-2 text-sm">
                                        @foreach ($definition->variants() as $value => $variantLabel)
                                            <option value="{{ $value }}">{{ $variantLabel }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            @endif

                            @foreach ($definition->fields() as $field)
                                @include('website.builder.field', ['field' => $field, 'path' => 'form.' . $field->key])
                            @endforeach

                        @elseif ($panel === 'design')
                            @include('website.builder.style-panel')
                        @else
                            @include('website.builder.motion-panel')
                        @endif
                    </div>

                    <div class="flex items-center gap-3 sticky bottom-0 bg-gray-50 py-3">
                        <button type="button" wire:click="saveBlock" wire:loading.attr="disabled" wire:target="saveBlock"
                                class="rounded-lg bg-primary-600 px-6 py-2.5 text-white font-medium">
                            <span wire:loading.remove wire:target="saveBlock">{{ __('حفظ العنصر') }}</span>
                            <span wire:loading wire:target="saveBlock">{{ __('جارٍ الحفظ...') }}</span>
                        </button>
                        <button type="button" wire:click="duplicateBlock({{ $block->id }})" class="rounded-lg border px-4 py-2.5 text-sm">{{ __('نسخ') }}</button>
                        <button type="button" wire:click="deleteBlock({{ $block->id }})"
                                wire:confirm="{{ __('حذف هذا العنصر؟') }}"
                                class="rounded-lg border border-red-200 text-red-600 px-4 py-2.5 text-sm">{{ __('حذف') }}</button>
                    </div>
                </div>
            @endif
        </section>
    </div>

    {{-- Block picker --}}
    @if ($showPicker)
        <div class="fixed inset-0 z-50 bg-black/40 flex items-start justify-center p-6 overflow-y-auto"
             wire:click.self="$set('showPicker', false)" role="dialog" aria-modal="true" aria-label="{{ __('اختر عنصرًا') }}">
            <div class="bg-white rounded-2xl w-full max-w-4xl mt-10 overflow-hidden">
                <div class="flex items-center gap-3 border-b p-4">
                    <input type="search" wire:model.live.debounce.200ms="pickerSearch" autofocus
                           placeholder="{{ __('ابحث عن عنصر...') }}"
                           class="flex-1 rounded-lg border px-4 py-2.5" aria-label="{{ __('بحث في العناصر') }}">
                    <button type="button" wire:click="$set('showPicker', false)" class="p-2 text-gray-400" aria-label="{{ __('إغلاق') }}">
                        <x-ui.icon name="x-mark" class="w-5 h-5" />
                    </button>
                </div>

                <div class="p-5 space-y-6 max-h-[65vh] overflow-y-auto">
                    @forelse ($groups as $categoryKey => $types)
                        <div>
                            <h3 class="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3">
                                {{ \App\Domain\Website\Enums\BlockCategory::from($categoryKey)->label() }}
                            </h3>
                            <div class="grid sm:grid-cols-3 gap-3">
                                @foreach ($types as $type)
                                    <button type="button" wire:click="addBlock('{{ $type->key() }}')"
                                            class="flex items-start gap-3 rounded-xl border p-3 text-start hover:border-primary-500 hover:bg-primary-50/40 transition">
                                        <span class="shrink-0 inline-flex items-center justify-center w-9 h-9 rounded-lg bg-gray-50 border">
                                            <x-website.icon :name="$type->icon()" class="w-4 h-4" />
                                        </span>
                                        <span class="min-w-0">
                                            <span class="block font-medium text-sm">{{ $type->label() }}</span>
                                            @if ($type->description())
                                                <span class="block text-xs text-gray-500 line-clamp-2">{{ $type->description() }}</span>
                                            @endif
                                        </span>
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    @empty
                        <p class="text-center text-gray-500 py-10">{{ __('لا توجد عناصر مطابقة') }}</p>
                    @endforelse
                </div>
            </div>
        </div>
    @endif

    <datalist id="ec-icon-names">
        @foreach (['check','x-mark','map-pin','phone','envelope','star','globe','users','calendar','clock','trophy','academic-cap','building-office','share','link','whatsapp','facebook','instagram','youtube','tiktok','twitter','device-phone-mobile','arrow-down-tray'] as $iconName)
            <option value="{{ $iconName }}"></option>
        @endforeach
    </datalist>
</div>
