@extends('layouts.admin')
@section('title', $menu->title)
@section('content')
@php
  $editing = request('edit_item') ? $menu->allItems->firstWhere('id', (int) request('edit_item')) : null;
  $depthMap = collect($rows)->mapWithKeys(fn ($row) => [$row['item']->id => $row['depth']]);
@endphp

<x-admin.page
    :title="$menu->title"
    :subtitle="'Navigation tree · '.$menu->handle.' · '.$menu->location"
>
    <x-slot:actions>
        <a href="{{ route('admin.menus.index') }}" class="admin-btn">
            <i data-lucide="arrow-left" class="h-3.5 w-3.5"></i> Menus
        </a>
        <form method="post" action="{{ route('admin.menus.duplicate', $menu) }}" class="inline">@csrf
            <button class="admin-btn"><i data-lucide="copy" class="h-3.5 w-3.5"></i> Duplicate</button>
        </form>
        <a href="{{ url($menu->handle === 'footer' ? '/#footer' : '/') }}" target="_blank" class="admin-btn">
            <i data-lucide="external-link" class="h-3.5 w-3.5"></i> Preview site
        </a>
        <button type="submit" form="menu-settings-form" class="admin-btn admin-btn-primary">
            <i data-lucide="save" class="h-3.5 w-3.5"></i> Save settings
        </button>
    </x-slot:actions>

    @if(session('status'))
        <div class="mb-4 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-900">{{ session('status') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ $errors->first() }}</div>
    @endif

    <div class="grid gap-5 xl:grid-cols-[minmax(0,1fr)_22rem]">
        <div class="space-y-5">
            <x-admin.section title="Structure" hint="Nest with indent, reorder with arrows, or hide items without deleting.">
                <div class="overflow-hidden rounded-xl border border-[var(--color-admin-border)]">
                    @forelse($rows as $row)
                        @php $item = $row['item']; @endphp
                        <div class="flex flex-wrap items-center gap-2 border-b border-[var(--color-admin-border)] bg-white px-3 py-2.5 last:border-0 {{ $item->is_visible ? '' : 'opacity-55' }}" style="padding-left: {{ 12 + ($row['depth'] * 18) }}px">
                            <div class="min-w-0 flex-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <span class="font-medium text-[#202223]">{{ $item->displayTitle() }}</span>
                                    @if($item->highlight)<x-admin.badge tone="warning">Highlight</x-admin.badge>@endif
                                    @unless($item->is_visible)<x-admin.badge tone="muted">Hidden</x-admin.badge>@endunless
                                    <x-admin.badge tone="info">{{ $item->type }}</x-admin.badge>
                                </div>
                                <div class="truncate font-mono text-[11px] text-[#6d7175]">{{ $row['url'] }}</div>
                            </div>
                            <div class="flex flex-wrap gap-1">
                                <form method="post" action="{{ route('admin.menus.items.move', [$menu, $item]) }}">@csrf
                                    <input type="hidden" name="direction" value="up">
                                    <button class="admin-btn !px-2 !py-1 text-xs" title="Move up">↑</button>
                                </form>
                                <form method="post" action="{{ route('admin.menus.items.move', [$menu, $item]) }}">@csrf
                                    <input type="hidden" name="direction" value="down">
                                    <button class="admin-btn !px-2 !py-1 text-xs" title="Move down">↓</button>
                                </form>
                                <form method="post" action="{{ route('admin.menus.items.move', [$menu, $item]) }}">@csrf
                                    <input type="hidden" name="direction" value="indent">
                                    <button class="admin-btn !px-2 !py-1 text-xs" title="Indent">→</button>
                                </form>
                                <form method="post" action="{{ route('admin.menus.items.move', [$menu, $item]) }}">@csrf
                                    <input type="hidden" name="direction" value="outdent">
                                    <button class="admin-btn !px-2 !py-1 text-xs" title="Outdent">←</button>
                                </form>
                                <form method="post" action="{{ route('admin.menus.items.toggle', [$menu, $item]) }}">@csrf
                                    <button class="admin-btn !px-2 !py-1 text-xs">{{ $item->is_visible ? 'Hide' : 'Show' }}</button>
                                </form>
                                <a href="{{ route('admin.menus.edit', [$menu, 'edit_item' => $item->id]) }}" class="admin-btn !px-2 !py-1 text-xs">Edit</a>
                                <form method="post" action="{{ route('admin.menus.items.destroy', [$menu, $item]) }}" onsubmit="return confirm('Remove this item?')">@csrf @method('DELETE')
                                    <button class="admin-btn !px-2 !py-1 text-xs">Delete</button>
                                </form>
                            </div>
                        </div>
                    @empty
                        <div class="p-10 text-center text-sm text-[#6d7175]">No items yet — add your first link below.</div>
                    @endforelse
                </div>
            </x-admin.section>

            <x-admin.section :title="$editing ? 'Edit item' : 'Add item'" hint="Link to catalogue resources or a custom URL. Parents can use # as a dropdown root.">
                <form method="post" action="{{ $editing ? route('admin.menus.items.update', [$menu, $editing]) : route('admin.menus.items.store', $menu) }}" class="space-y-4" data-menu-item-form>
                    @csrf
                    @if($editing) @method('PUT') @endif
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-admin.field label="Title" name="title" required>
                            <input name="title" value="{{ old('title', $editing?->title) }}" required class="admin-input">
                        </x-admin.field>
                        <x-admin.field label="Display label" name="label" help="Optional override shown in nav.">
                            <input name="label" value="{{ old('label', $editing?->label) }}" class="admin-input">
                        </x-admin.field>
                        <x-admin.field label="Link type" name="type" required>
                            <select name="type" class="admin-input" data-link-type>
                                @foreach(['url' => 'Custom URL', 'home' => 'Home', 'collection' => 'Collection', 'page' => 'Page', 'product' => 'Product', 'post' => 'Blog post', 'policy' => 'Policy'] as $val => $label)
                                    <option value="{{ $val }}" @selected(old('type', $editing?->type ?: 'url') === $val)>{{ $label }}</option>
                                @endforeach
                            </select>
                        </x-admin.field>
                        <x-admin.field label="Parent" name="parent_id">
                            <select name="parent_id" class="admin-input">
                                <option value="">— Top level —</option>
                                @foreach($menu->allItems as $parent)
                                    @continue($editing && $parent->id === $editing->id)
                                    <option value="{{ $parent->id }}" @selected((string) old('parent_id', $editing?->parent_id) === (string) $parent->id)>
                                        {{ str_repeat('— ', (int) ($depthMap[$parent->id] ?? 0)) }}{{ $parent->displayTitle() }}
                                    </option>
                                @endforeach
                            </select>
                        </x-admin.field>
                    </div>

                    <div data-panel="url" class="grid gap-4 sm:grid-cols-2">
                        <x-admin.field label="URL" name="url" help="Path like /collections/ring-canvas or https://…">
                            <input name="url" value="{{ old('url', $editing?->url) }}" class="admin-input font-mono text-xs" data-url-input>
                        </x-admin.field>
                    </div>

                    @foreach(['collection' => 'collections', 'page' => 'pages', 'product' => 'products', 'post' => 'posts', 'policy' => 'policies'] as $type => $key)
                        <div data-panel="{{ $type }}" class="hidden">
                            <x-admin.field :label="ucfirst($type)" name="resource_id">
                                <select name="resource_id" class="admin-input" data-resource-select="{{ $type }}" disabled>
                                    <option value="">— Select —</option>
                                    @foreach($catalog[$key] as $option)
                                        <option value="{{ $option['id'] }}" data-url="{{ $option['url'] }}" @selected((string) old('resource_id', $editing?->resource_id) === (string) $option['id'] && old('type', $editing?->type) === $type)>
                                            {{ $option['label'] }}
                                        </option>
                                    @endforeach
                                </select>
                            </x-admin.field>
                        </div>
                    @endforeach

                    <x-admin.field label="Description" name="description" help="Optional subtitle for mega-style dropdowns.">
                        <input name="description" value="{{ old('description', $editing?->description) }}" class="admin-input">
                    </x-admin.field>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-admin.field label="CSS class" name="css_class">
                            <input name="css_class" value="{{ old('css_class', $editing?->css_class) }}" class="admin-input font-mono text-xs">
                        </x-admin.field>
                        <x-admin.field label="Icon" name="icon" help="Optional lucide icon name.">
                            <input name="icon" value="{{ old('icon', $editing?->icon) }}" class="admin-input" placeholder="sparkles">
                        </x-admin.field>
                    </div>

                    <div class="flex flex-wrap gap-4 text-sm">
                        <label class="flex items-center gap-2"><input type="checkbox" name="is_visible" value="1" @checked(old('is_visible', $editing?->is_visible ?? true))> Visible</label>
                        <label class="flex items-center gap-2"><input type="checkbox" name="open_in_new_tab" value="1" @checked(old('open_in_new_tab', $editing?->open_in_new_tab))> Open in new tab</label>
                        <label class="flex items-center gap-2"><input type="checkbox" name="highlight" value="1" @checked(old('highlight', $editing?->highlight))> Highlight</label>
                    </div>

                    <div class="flex flex-wrap gap-2">
                        <button class="admin-btn admin-btn-primary">{{ $editing ? 'Update item' : 'Add item' }}</button>
                        @if($editing)
                            <a href="{{ route('admin.menus.edit', $menu) }}" class="admin-btn">Cancel edit</a>
                        @endif
                    </div>
                </form>
            </x-admin.section>

            <form id="menu-settings-form" method="post" action="{{ route('admin.menus.update', $menu) }}">
                @csrf
                @method('PUT')
                <x-admin.section title="Menu settings">
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-admin.field label="Title" name="title" required>
                            <input name="title" value="{{ old('title', $menu->title) }}" required class="admin-input">
                        </x-admin.field>
                        <x-admin.field label="Handle" name="handle">
                            <input name="handle" value="{{ old('handle', $menu->handle) }}" class="admin-input font-mono text-xs" {{ $menu->isProtected() ? 'readonly' : '' }}>
                        </x-admin.field>
                        <x-admin.field label="Location" name="location">
                            <select name="location" class="admin-input" {{ $menu->isProtected() ? 'disabled' : '' }}>
                                @foreach(['header','footer','mobile','custom'] as $loc)
                                    <option value="{{ $loc }}" @selected(old('location', $menu->location) === $loc)>{{ ucfirst($loc) }}</option>
                                @endforeach
                            </select>
                            @if($menu->isProtected())
                                <input type="hidden" name="location" value="{{ $menu->location }}">
                            @endif
                        </x-admin.field>
                        <label class="mt-6 flex items-center gap-2 text-sm">
                            <input type="checkbox" name="is_active" value="1" @checked(old('is_active', $menu->is_active))>
                            Active on storefront
                        </label>
                    </div>
                    <x-admin.field label="Description" name="description" class="mt-4">
                        <textarea name="description" rows="2" class="admin-input">{{ old('description', $menu->description) }}</textarea>
                    </x-admin.field>
                    @unless($menu->isProtected())
                        <button type="submit" form="delete-menu" class="admin-btn mt-4" onclick="return confirm('Delete this menu and all items?')">Delete menu</button>
                    @endunless
                </x-admin.section>
            </form>
        </div>

        <div class="space-y-5 xl:sticky xl:top-20 xl:self-start">
            <div class="rounded-xl border border-[var(--color-admin-border)] bg-gradient-to-br from-[#111] to-[#2a2a2a] p-5 text-white">
                <p class="text-[10px] font-semibold uppercase tracking-[0.28em] text-[var(--color-gold)]">Live preview</p>
                <p class="mt-1 text-xs text-white/50">Visible items only · {{ $menu->handle }}</p>
                <ul class="mt-4 space-y-2 text-sm" data-menu-preview>
                    @include('admin.menus._preview-tree', ['nodes' => $preview, 'depth' => 0])
                </ul>
            </div>
            <x-admin.section title="Tips">
                <ul class="space-y-2 text-sm text-[#6d7175]">
                    <li>Use a custom URL of <code class="text-xs">#</code> for dropdown parents.</li>
                    <li>Resource links stay in sync when handles change.</li>
                    <li>Header/footer handles are protected system menus.</li>
                </ul>
            </x-admin.section>
        </div>
    </div>
</x-admin.page>

@unless($menu->isProtected())
    <form id="delete-menu" method="post" action="{{ route('admin.menus.destroy', $menu) }}" class="hidden">@csrf @method('DELETE')</form>
@endunless

<script>
(() => {
  const form = document.querySelector('[data-menu-item-form]');
  if (!form) return;
  const typeSelect = form.querySelector('[data-link-type]');
  const sync = () => {
    const type = typeSelect.value;
    form.querySelectorAll('[data-panel]').forEach((panel) => {
      const show = panel.dataset.panel === type || (type === 'home' && panel.dataset.panel === 'url');
      panel.classList.toggle('hidden', !(panel.dataset.panel === type || (type === 'url' && panel.dataset.panel === 'url')));
    });
    form.querySelectorAll('[data-resource-select]').forEach((sel) => {
      const active = sel.dataset.resourceSelect === type;
      sel.disabled = !active;
      if (active) sel.setAttribute('name', 'resource_id');
      else sel.removeAttribute('name');
    });
    if (type === 'home') {
      const url = form.querySelector('[data-url-input]');
      if (url) url.value = '/';
    }
  };
  typeSelect.addEventListener('change', sync);
  sync();
})();
</script>
@endsection