@props(['menuGroups', 'ungroupedCategories' => null, 'currency' => 'TL', 'clickable' => true])

@php
    // Build tab list: enabled groups + "Diğer" for ungrouped categories
    $tabs = [];
    $dayOfWeek = now()->dayOfWeekIso;
    foreach ($menuGroups as $group) {
        $groupData = $group->data ?? [];
        $hasGroupHours = $groupData['service_hours_enabled'] ?? false;
        $groupSlots = $hasGroupHours ? $groupData['service_hours'][$dayOfWeek] ?? [] : [];
        // Eski format dönüşümü
        if (isset($groupSlots['start'])) {
            $groupSlots = [['name' => 'Servis', 'open' => $groupSlots['start'], 'close' => $groupSlots['end']]];
        }
        $groupSlots = collect($groupSlots)->filter(fn($s) => !($s['is_closed'] ?? false));
        $hoursText = '';
        if ($hasGroupHours && $groupSlots->isNotEmpty()) {
            $hoursText = $groupSlots->map(fn($s) => ($s['open'] ?? '') . ' - ' . ($s['close'] ?? ''))->implode(', ');
        }
        // Grubun şu an açık/kapalı durumunu hesapla
        $groupServiceCheck = $group->checkGroupServiceHours(true);
        $groupIsOpen = $groupServiceCheck['is_open'];
        $tabs[] = [
            'id' => 'group-' . $group->id,
            'name' => $group->name,
            'hours' => $hoursText,
            'isOpen' => $groupIsOpen,
        ];
    }
    if ($ungroupedCategories && $ungroupedCategories->isNotEmpty()) {
        $tabs[] = ['id' => 'group-ungrouped', 'name' => __('menu.other'), 'hours' => '', 'isOpen' => true];
    }
@endphp

@if (!empty($tabs))
    <!-- Group Tab Selector -->
    <div class="sticky top-0 z-10 -mx-4 bg-stone-200/95 backdrop-blur-sm">
        <div class="flex gap-2 px-4 py-3 overflow-x-auto" id="group-tabs"
            style="scrollbar-width: none; -ms-overflow-style: none;">
            @foreach ($tabs as $index => $tab)
                <button type="button" onclick="selectGroupTab('{{ $tab['id'] }}')"
                    class="group-tab-btn whitespace-nowrap px-4 py-1.5 rounded-lg text-sm font-medium transition-colors text-center {{ $index === 0 ? 'bg-stone-700 text-white' : 'bg-white text-stone-600' }}"
                    data-group-tab="{{ $tab['id'] }}">
                    <span class="flex items-center justify-center gap-1">
                        @if (!$tab['isOpen'])
                            <span class="inline-block w-1.5 h-1.5 rounded-full bg-rose-400"></span>
                        @else
                            <span class="inline-block w-1.5 h-1.5 rounded-full bg-teal-400"></span>
                        @endif
                        {{ $tab['name'] }}
                    </span>
                    @if (!empty($tab['hours']))
                        <span
                            class="flex items-center justify-center gap-0.5 text-[12px] font-normal opacity-75 {{ !$tab['isOpen'] ? 'text-rose-400' : 'text-teal-500' }}">
                            <span class="material-symbols-rounded"
                                style="font-size: 12px;">{{ !$tab['isOpen'] ? 'lock_clock' : 'search_activity' }}</span>
                            {{ $tab['hours'] }}
                        </span>
                    @endif
                </button>
            @endforeach
        </div>
    </div>

    <!-- Group Contents -->
    @foreach ($menuGroups as $group)
        <div class="group-content {{ $loop->first ? '' : 'hidden' }}" data-group-content="group-{{ $group->id }}">
            @php
                $groupData = $group->data ?? [];
                $hasGroupHours = $groupData['service_hours_enabled'] ?? false;
                $groupSlots = $hasGroupHours ? $groupData['service_hours'][now()->dayOfWeekIso] ?? [] : [];
                // Eski format dönüşümü
                if (isset($groupSlots['start'])) {
                    $groupSlots = [['name' => 'Servis', 'open' => $groupSlots['start'], 'close' => $groupSlots['end']]];
                }
                $groupSlots = collect($groupSlots)->filter(fn($s) => !($s['is_closed'] ?? false));

                // Grubun açık/kapalı durumunu hesapla
                $groupServiceCheck = $group->checkGroupServiceHours(true);
                $groupIsOpen = $groupServiceCheck['is_open'];
                $groupClosedReason = $groupServiceCheck['reason'];
            @endphp
            @if ($hasGroupHours && $groupSlots->isNotEmpty())
                <div
                    class="flex items-center gap-1 px-1 pb-3 text-xs {{ $groupIsOpen ? 'text-teal-600' : 'text-rose-500' }}">
                    <span
                        class="text-base material-symbols-rounded">{{ $groupIsOpen ? 'timelapse' : 'lock_clock' }}</span>
                    <span>{{ __('menu.service_hours') }}
                        @foreach ($groupSlots as $slot)
                            {{ $slot['open'] ?? '' }} - {{ $slot['close'] ?? '' }}{{ !$loop->last ? ',' : '' }}
                        @endforeach
                        @if (!$groupIsOpen)
                            — {{ __('menu.currently_closed') }}
                        @endif
                    </span>
                </div>
            @endif
            @include('menu.partials.product-categories', [
                'categories' => $group->menu_categories,
                'currency' => $currency,
                'clickable' => $clickable && $groupIsOpen,
                'serviceOpenOverride' => $groupIsOpen,
                'groupClosedReason' => $groupClosedReason,
            ])
        </div>
    @endforeach

    @if ($ungroupedCategories && $ungroupedCategories->isNotEmpty())
        <div class="group-content {{ $menuGroups->isEmpty() ? '' : 'hidden' }}" data-group-content="group-ungrouped">
            @include('menu.partials.product-categories', [
                'categories' => $ungroupedCategories,
                'currency' => $currency,
                'clickable' => $clickable,
            ])
        </div>
    @endif

    <script>
        function selectGroupTab(groupId) {
            // Toggle content visibility
            document.querySelectorAll('.group-content').forEach(function(el) {
                el.classList.add('hidden');
            });
            var target = document.querySelector('[data-group-content="' + groupId + '"]');
            if (target) {
                target.classList.remove('hidden');
            }

            // Update tab button styles
            document.querySelectorAll('.group-tab-btn').forEach(function(btn) {
                if (btn.dataset.groupTab === groupId) {
                    btn.classList.remove('bg-white', 'text-stone-600');
                    btn.classList.add('bg-stone-700', 'text-white');
                } else {
                    btn.classList.add('bg-white', 'text-stone-600');
                    btn.classList.remove('bg-stone-700', 'text-white');
                }
            });

            // Scroll active tab into view
            var activeBtn = document.querySelector('[data-group-tab="' + groupId + '"]');
            if (activeBtn) {
                activeBtn.scrollIntoView({
                    behavior: 'smooth',
                    block: 'nearest',
                    inline: 'center'
                });
            }
        }
    </script>
@endif