<?php
/**
 * @var array $group
 * @var string $tab
 */
if (empty($group['items'])) return;
?>
<li class="mt-4 first:mt-0 group-data-[collapsed=true]/collapse:w-12!">
    <div class="px-2 py-1 text-xs --text-[11px] --font-semibold --uppercase  tracking-wide text-secondary/60 group-data-[collapsed=true]/collapse:opacity-0 group-data-[collapsed=true]/collapse:h-2">
        <?php echo \Components\Base::h($group['header']); ?>
    </div>
    <ul class="space-y-0 transition-all group-data-[collapsed=true]/collapse:bg-canvas group-data-[collapsed=true]/collapse:rounded-xl group-data-[collapsed=true]/collapse:border border-divider/70  group-data-[collapsed=true]/collapse:px-1.5 group-data-[collapsed=true]/collapse:py-1.5 group-data-[collapsed=true]/collapse:mx-0">
        <?php foreach ($group['items'] as $item):
            $active = ($tab === $item['key']);
            $hasChildren = !empty($item['items']);
            $childKeys = [];
            if ($hasChildren) {
                foreach ($item['items'] as $child) $childKeys[] = "'".$child['key']."'";
            }
            $allKeys = array_merge(["'".$item['key']."'"], $childKeys);
            $allKeysStr = implode(',', $allKeys);
            $isIndependent = !empty($item['independent']);
            ?>
            <li class="relative"
                <?php if ($hasChildren): ?>:class="{ 'animate-overswing': overswing, 'animate-overswing-expanding': overswingExpanding }"<?php endif; ?>
                x-data="{
                    open: [<?php echo $allKeysStr; ?>].includes(active),
                    overswing: false,
                    overswingExpanding: false,
                    tooltipVisible: false,
                    tooltipText: '<?php echo \Components\Base::h($item['label']); ?>',
                    tooltipArrow: true,
                    tooltipPosition: 'right',
                    tooltipX: 0,
                    tooltipY: 0,
                    flyoutVisible: false,
                    flyoutX: 0,
                    flyoutY: 0
                }"
                x-init="$watch('active', val => { if([<?php echo $allKeysStr; ?>].includes(val)) open = true; }); $watch('open', val => { if (val) { <?php if ($hasChildren && !$isIndependent): ?>$dispatch('open-menu', { key: '<?php echo $item['key']; ?>' });<?php endif; ?> <?php echo \Components\Base::overswingAlpineTrigger('overswingExpanding'); ?> } else { <?php echo \Components\Base::overswingAlpineTrigger('overswing'); ?> } });"
                <?php if ($hasChildren && !$isIndependent): ?>@open-menu.window="if ($event.detail.key !== '<?php echo $item['key']; ?>') open = false"<?php endif; ?>
                @mouseleave="tooltipVisible = false; flyoutVisible = false"
            >

                <!-- Tooltip (teleported to body to avoid any overflow clipping) -->
                <template x-teleport="body">
                    <div x-ref="tooltip"
                         x-show="tooltipVisible && document.documentElement.getAttribute('data-collapsed') === 'true'"
                         x-cloak
                         :style="'position: fixed; top:' + tooltipY + 'px; left:' + tooltipX + 'px'"
                         class="w-auto text-sm z-[1000] pointer-events-none transform -translate-y-1/2">
                        <div x-show="tooltipVisible" x-transition
                             class="relative px-2 py-1 text-white rounded-md shadow bg-brand/90">
                            <p x-text="tooltipText"
                               class="block flex-shrink-0 text-xs whitespace-nowrap"></p>
                            <div x-ref="tooltipArrow" x-show="tooltipArrow"
                                 :class="{ 'left-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px -translate-x-full' : tooltipPosition == 'right', 'bottom-0 -translate-x-1/2 left-1/2 w-2.5 translate-y-full' : tooltipPosition == 'top', 'right-0 -translate-y-1/2 top-1/2 h-2.5 -mt-px translate-x-full' : tooltipPosition == 'left', 'top-0 -translate-x-1/2 left-1/2 w-2.5 -translate-y-full' : tooltipPosition == 'bottom' }"
                                 class="inline-flex overflow-hidden absolute justify-center items-center">
                                <div :class="{ 'origin-top-right -rotate-45' : tooltipPosition == 'right', 'origin-top-left -rotate-45' : tooltipPosition == 'top', 'origin-top-left rotate-45' : tooltipPosition == 'left', 'origin-bottom-left rotate-45' : tooltipPosition == 'bottom' }"
                                     class="w-1.5 h-1.5 shadow bg-brand/90 transform"></div>
                            </div>
                        </div>
                    </div>
                </template>

                <?php if ($hasChildren): ?>
                    <!-- Flyout Submenu (teleported) -->
                    <template x-teleport="body">
                        <div x-show="flyoutVisible && document.documentElement.getAttribute('data-collapsed') === 'true'"
                             x-cloak
                             x-transition:enter="transition ease-out-back duration-300"
                             x-transition:enter-start="opacity-0 scale-95"
                             x-transition:enter-end="opacity-100 scale-100"
                             x-transition:leave="transition ease-out-back duration-150"
                             x-transition:leave-start="opacity-100 scale-100"
                             x-transition:leave-end="opacity-0 scale-95"
                             @mouseenter="flyoutVisible = true"
                             @mouseleave="flyoutVisible = false"
                             :style="'position: fixed; top:' + flyoutY + 'px; left:' + flyoutX + 'px'"
                             class="z-[1000] w-48 rounded-lg bg-elevated  p-1 border border-divider">
                            <div class="px-3 py-2 text-xs font-semibold text-secondary/60 border-b border-divider mb-1">
                                <?php echo \Components\Base::h($item['label']); ?>
                            </div>
                            <ul class="space-y-1">
                                <?php foreach ($item['items'] as $subItem): ?>
                                    <li>
                                        <a id="flyout-tab-<?php echo \Components\Base::h($subItem['key']); ?>"
                                           @click.prevent="active = '<?php echo $subItem['key']; ?>'; flyoutVisible = false; updateUrlForActive('<?php echo $subItem['key']; ?>', false)"
                                           :class="{ 'font-medium bg-muted/50': active === '<?php echo $subItem['key']; ?>', 'hover:bg-muted': active !== '<?php echo $subItem['key']; ?>' }"
                                           class="block rounded-md px-3 py-2 text-sm text-secondary cursor-pointer">
                                            <?php echo \Components\Base::h($subItem['label']); ?>
                                        </a>
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                        </div>
                    </template>
                <?php endif; ?>

                <a id="<?php echo $hasChildren ? 'desk-group-' : 'desk-tab-'; ?><?php echo \Components\Base::h($item['key']); ?>"
                   @click.prevent="<?php echo $hasChildren ? 'open = !open' : "active = '{$item['key']}'"; ?>"
                   :class="{ 'font-medium bg-secondary/5': active === '<?php echo $item['key']; ?>', 'hover:bg-secondary/3': active !== '<?php echo $item['key']; ?>' }"
                   class="group flex items-center align-middle gap-x-3 rounded-md p-2 text-sm/6 text-secondary/80 cursor-pointer"
                   @mouseenter="(() => {
                       const isCol = document.documentElement.getAttribute('data-collapsed') === 'true';
                       if (!isCol) return;
                       const r = $el.getBoundingClientRect();
                       if (<?php echo $hasChildren ? 'true' : 'false'; ?>) {
                           const sideRect = document.getElementById('app-sidebar').getBoundingClientRect();
                           flyoutX = sideRect.right-16;
                           flyoutY = r.top;
                           flyoutVisible = true;
                       } else {
                           tooltipX = r.right + 8;
                           tooltipY = r.top + r.height/2;
                           tooltipVisible = true;
                       }
                   })()"
                >

                    <div>
                        <div aria-hidden="true"
                             :class="{ 'text-secondary/90': active === '<?php echo $item['key']; ?>', 'text-secondary/50  group-hover:text-secondary/70': active !== '<?php echo $item['key']; ?>' }"
                             class="size-4 [&>svg]:size-4 shrink-0">
                            <?php echo $item['icon']; ?>
                        </div>
                    </div>
                    <span class="transition-all group-data-[collapsed=true]/collapse:max-w-0 overflow-hidden text-nowrap inline-block tracking-tight"><?php echo \Components\Base::h($item['label']); ?></span>
                    <?php if ($hasChildren): ?>
                        <div :class="{ 'rotate-180': open }" class="ml-auto size-4 shrink-0 group-data-[collapsed=true]/collapse:hidden [&_svg]:size-4 transition-transform duration-300 ease-out-back">
                            <?php echo \Components\Base::SVG_CHEVRON_DOWN; ?>
                        </div>
                    <?php endif; ?>
                </a>

                <?php if ($hasChildren): ?>
                    <div x-show="open" x-collapse.duration.220ms x-cloak class="overflow-hidden group-data-[collapsed=true]/collapse:hidden pb-1">
                        <ul :class="open ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-0'" class="pb-1 transition-[opacity,transform] duration-200  will-change-transform will-change-opacity">
                            <?php foreach ($item['items'] as $subItem): ?>
                                <li>
                                    <a id="desk-tab-<?php echo \Components\Base::h($subItem['key']); ?>"
                                       @click.prevent="active = '<?php echo $subItem['key']; ?>'"
                                       :class="{ 'font-medium bg-secondary/5': active === '<?php echo $subItem['key']; ?>', 'hover:bg-secondary/3': active !== '<?php echo $subItem['key']; ?>' }"
                                       class="group flex items-center gap-x-3 rounded-md px-2 h-8 pl-9 text-sm text-secondary/80 cursor-pointer text-nowrap tracking-tight">
                                        <?php echo \Components\Base::h($subItem['label']); ?>
                                    </a>
                                </li>
                            <?php endforeach; ?>
                        </ul>
                    </div>
                <?php endif; ?>
            </li>
        <?php endforeach; ?>
    </ul>
</li>
