<x-filament-panels::page>
    @php
        /** @var \App\Models\User|null $user */
        $user = auth()->user();
        $menuSvc = app(\App\Services\DberpAdminMenuShortcutService::class);
        $registry = app(\App\Filament\Support\DberpShortcutRegistry::class);
        $pinned = $user instanceof \App\Models\User ? $menuSvc->pinnedRecordsOrdered($user) : [];
        $available = $user instanceof \App\Models\User ? $menuSvc->pinEligibleShortcuts($user) : [];
        $hasPins = $user instanceof \App\Models\User && $menuSvc->hasPinnedShortcuts($user);
        $availableBySection = collect($available)
            ->groupBy(fn (\App\Filament\Support\DberpShortcutItem $item) => $item->sectionLabel())
            ->map(fn (\Illuminate\Support\Collection $items) => $items->sortBy([
                fn (\App\Filament\Support\DberpShortcutItem $i) => $i->sidebarNavigationSort(),
                fn (\App\Filament\Support\DberpShortcutItem $i) => $i->localizedLabel(),
            ])->values())
            ->sortBy(
                fn (\Illuminate\Support\Collection $items, string $label): int => \App\Filament\Support\DberpAdminSidebarNavigationOrder::rankForResolvedLabel($label),
            );
        $pinnedCount = count($pinned);
    @endphp

    {{-- 状态提示横幅：保持单一根节点，避免 pin/unpin 后 Livewire 无法匹配 DOM 快照 --}}
    <div
        wire:key="shortcuts-status-banner"
        @class([
            'flex items-start gap-3 rounded-xl border px-4 py-3 text-sm',
            'border-primary-200 bg-primary-50 text-primary-800 dark:border-primary-800 dark:bg-primary-950 dark:text-primary-200' => $hasPins,
            'border-gray-200 bg-gray-50 text-gray-600 dark:border-gray-700 dark:bg-gray-800/60 dark:text-gray-300' => ! $hasPins,
        ])
    >
        <x-filament::icon
            :icon="$hasPins ? 'heroicon-o-bookmark' : 'heroicon-o-information-circle'"
            @class([
                'mt-0.5 h-4 w-4 shrink-0',
                'text-primary-500 dark:text-primary-400' => $hasPins,
                'text-gray-400 dark:text-gray-500' => ! $hasPins,
            ])
        />
        <span>
            {{ $hasPins
                ? __('dberp.shortcuts.preferences.mode_has_pins')
                : __('dberp.shortcuts.preferences.mode_unpinned') }}
        </span>
    </div>

    {{-- 已固定 --}}
    <div wire:key="shortcuts-pinned-section" class="mt-6">
        <div class="mb-3 flex items-center justify-between">
            <h2 class="flex items-center gap-2 text-base font-semibold text-gray-900 dark:text-gray-100">
                {{ __('dberp.shortcuts.preferences.section_pinned') }}
                @if ($pinnedCount > 0)
                    <span class="inline-flex h-5 min-w-[1.25rem] items-center justify-center rounded-full bg-primary-100 px-1.5 text-xs font-medium text-primary-700 dark:bg-primary-900 dark:text-primary-300">
                        {{ $pinnedCount }}
                    </span>
                @endif
            </h2>
        </div>

        @if ($pinnedCount === 0)
            <div wire:key="shortcuts-pinned-empty" class="flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-300 bg-white py-10 text-sm text-gray-400 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-500">
                <x-filament::icon icon="heroicon-o-star" class="mb-2 h-8 w-8 text-gray-300 dark:text-gray-600" />
                {{ __('dberp.shortcuts.preferences.pinned_empty_hint') }}
            </div>
        @else
            <div wire:key="shortcuts-pinned-list" class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
                <ul class="divide-y divide-gray-100 dark:divide-gray-800">
                    @foreach ($pinned as $index => $row)
                        @php
                            $definition = $registry->definitionByKey($row->shortcut_key);
                            $label = $menuSvc->resolvePinnedDisplayLabel($row);
                            $canAccess = $definition !== null && $user instanceof \App\Models\User && $definition->isAccessible($user);
                            $isFirst = $index === 0;
                            $isLast = $index === $pinnedCount - 1;
                        @endphp
                        <li wire:key="pinned-{{ $row->id }}" class="flex items-center gap-4 px-4 py-3">
                            {{-- 序号角标 --}}
                            <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-gray-100 text-xs font-semibold text-gray-500 dark:bg-gray-800 dark:text-gray-400">
                                {{ $index + 1 }}
                            </span>

                            {{-- 名称与状态 --}}
                            <div class="min-w-0 flex-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <span class="font-medium text-gray-900 dark:text-gray-100">{{ $label }}</span>
                                    @if (! $canAccess)
                                        <span class="inline-flex items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-700 dark:bg-amber-900/40 dark:text-amber-400">
                                            <x-filament::icon icon="heroicon-o-eye-slash" class="h-3 w-3" />
                                            {{ __('dberp.shortcuts.preferences.no_permission_hint') }}
                                        </span>
                                    @endif
                                </div>
                            </div>

                            {{-- 操作按钮组 --}}
                            <div class="flex shrink-0 items-center gap-1">
                                <x-filament::icon-button
                                    icon="heroicon-o-arrow-up"
                                    size="sm"
                                    color="gray"
                                    :disabled="$isFirst"
                                    :tooltip="__('dberp.shortcuts.preferences.move_up')"
                                    wire:click="moveShortcutUp({{ $row->id }})"
                                    :class="$isFirst ? 'opacity-30 cursor-not-allowed' : ''"
                                />
                                <x-filament::icon-button
                                    icon="heroicon-o-arrow-down"
                                    size="sm"
                                    color="gray"
                                    :disabled="$isLast"
                                    :tooltip="__('dberp.shortcuts.preferences.move_down')"
                                    wire:click="moveShortcutDown({{ $row->id }})"
                                    :class="$isLast ? 'opacity-30 cursor-not-allowed' : ''"
                                />
                                <x-filament::icon-button
                                    icon="heroicon-o-x-mark"
                                    size="sm"
                                    color="danger"
                                    :tooltip="__('dberp.shortcuts.preferences.unpin')"
                                    wire:click="unpinShortcut({{ $row->id }})"
                                />
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endif
    </div>

    {{-- 可固定候选 --}}
    <div wire:key="shortcuts-available-section" class="mt-8">
        <h2 class="mb-3 text-base font-semibold text-gray-900 dark:text-gray-100">
            {{ __('dberp.shortcuts.preferences.section_available') }}
        </h2>

        @if ($availableBySection->isEmpty())
            <div wire:key="shortcuts-available-empty" class="flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-300 bg-white py-10 text-sm text-gray-400 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-500">
                <x-filament::icon icon="heroicon-o-check-circle" class="mb-2 h-8 w-8 text-gray-300 dark:text-gray-600" />
                {{ __('dberp.shortcuts.preferences.available_empty') }}
            </div>
        @else
            <div wire:key="shortcuts-available-groups" class="space-y-4">
                @foreach ($availableBySection as $sectionTitle => $items)
                    <div wire:key="shortcuts-avail-section-{{ \Illuminate\Support\Str::slug($sectionTitle) }}" class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-900">
                        {{-- 分组标题行 --}}
                        <div class="border-b border-gray-100 bg-gray-50 px-4 py-2.5 dark:border-gray-800 dark:bg-gray-800/60">
                            <h3 class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
                                {{ $sectionTitle }}
                                <span class="ml-1 font-normal normal-case tracking-normal text-gray-400 dark:text-gray-500">
                                    ({{ $items->count() }})
                                </span>
                            </h3>
                        </div>

                        {{-- 候选项网格 --}}
                        <ul class="divide-y divide-gray-100 dark:divide-gray-800">
                            @foreach ($items as $item)
                                <li wire:key="avail-{{ $item->key }}" class="flex items-center gap-3 px-4 py-3">
                                    <div class="min-w-0 flex-1 font-medium text-gray-900 dark:text-gray-100">
                                        {{ $item->localizedLabel() }}
                                    </div>
                                    <x-filament::button
                                        size="xs"
                                        color="gray"
                                        icon="heroicon-o-plus"
                                        wire:click="pinShortcut({{ \Illuminate\Support\Js::from($item->key) }})"
                                        class="shrink-0"
                                    >
                                        {{ __('dberp.shortcuts.preferences.pin') }}
                                    </x-filament::button>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endforeach
            </div>
        @endif
    </div>
</x-filament-panels::page>
