@props(['allCategories' => [], 'quickPills' => [], 'headerMenus' => []])

@php
    // The toggle below is the All Categories entry, so its /categories menu row is not repeated as a link.
    $menuLinks = collect($headerMenus)->reject(fn ($menu) => $menu['destination_link'] === '/categories');

    // shortcut: categories have no link to pills, so this maps by word and other pills show everything; add a real relation if admins need to edit it.
    $pillFilters = ['pill-glow-and-go' => 'beauty', 'pill-home-decor' => 'home', 'pill-skin-care' => 'beauty'];

    // The strip shows short names in this order; any other category follows under its full name.
    $stripLabels = [
        'all-mens-fashion' => 'Men',
        'all-womens-fashion' => 'Women',
        'all-mobiles-cameras' => 'Phones',
        'all-watches-bags' => 'Watches',
        'all-groceries-essentials' => 'Groceries',
        'all-home-living' => 'Home & Living',
        'all-computers-laptops' => 'Gadgets',
        'all-health-beauty' => 'Health & Beauty',
        'all-tv-appliances' => 'Appliances',
    ];
    $stripOrder = array_flip(array_keys($stripLabels));
    $stripCategories = collect($allCategories)->sortBy(fn ($category) => $stripOrder[$category['slug']] ?? count($stripOrder));
@endphp

<nav class="sm-menu-bar" aria-label="Main menu">
    <div class="container d-flex align-items-center gap-3">
        <button class="btn sm-menu-toggle flex-shrink-0" type="button" data-bs-toggle="collapse" data-bs-target="#saruarAllCategoriesCollapse" aria-expanded="false" aria-controls="saruarAllCategoriesCollapse">
            <i class="bi bi-grid" aria-hidden="true"></i> All Categories
        </button>

        <ul id="saruarCategoryStrip" class="list-unstyled d-flex align-items-center gap-4 mb-0 sm-category-strip">
            @foreach ($stripCategories as $category)
                <li><a class="sm-strip-link" href="{{ route('storefront.category.show', $category['slug']) }}"><i class="bi {{ $category['icon_class'] }}" aria-hidden="true"></i> {{ $stripLabels[$category['slug']] ?? $category['name'] }}</a></li>
            @endforeach
        </ul>

        <div class="d-flex flex-shrink-0">
            <button class="btn sm-strip-arrow" type="button" data-saruar-strip-scroll="-1" aria-label="Scroll categories left"><i class="bi bi-chevron-left" aria-hidden="true"></i></button>
            <button class="btn sm-strip-arrow" type="button" data-saruar-strip-scroll="1" aria-label="Scroll categories right"><i class="bi bi-chevron-right" aria-hidden="true"></i></button>
        </div>
    </div>

    <div id="saruarAllCategoriesCollapse" class="collapse sm-all-categories">
        <div class="container py-2">
            <ul class="list-unstyled d-flex flex-wrap align-items-center gap-2 mb-2">
                @foreach ($menuLinks as $menu)
                    <li><a class="sm-menu-link" href="{{ url($menu['destination_link']) }}">{{ $menu['name'] }}</a></li>
                @endforeach
                @foreach ($quickPills as $pill)
                    <li>
                        <a class="saruar-quick-pill" href="{{ route('storefront.category.show', $pill['slug']) }}" data-category-item data-category-name="{{ $pill['name'] }}" data-category-group="quick_pill" data-category-filter="{{ $pillFilters[$pill['slug']] ?? '' }}">
                            <i class="bi {{ $pill['icon_class'] }}" aria-hidden="true"></i> {{ $pill['name'] }}
                        </a>
                    </li>
                @endforeach
            </ul>

            @if ($allCategories)
                <ul class="list-unstyled row row-cols-2 row-cols-lg-4 g-1 mb-0">
                    @foreach ($allCategories as $category)
                        <li class="col" data-category-item data-category-name="{{ $category['name'] }}" data-category-group="all_categories">
                            <a class="sm-drawer-link" href="{{ route('storefront.category.show', $category['slug']) }}">
                                <i class="bi {{ $category['icon_class'] }}" aria-hidden="true"></i>
                                <span>{{ $category['name'] }}</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            @else
                <p class="text-body-secondary p-3 mb-0">Categories are not available right now.</p>
            @endif
        </div>
    </div>
</nav>