@props([
    // Current in-page view when this bar is rendered inside the Inventory index
    // component (materials | movements | suppliers). Null on every other page.
    'activeTab' => null,
])

@php
    // ─────────────────────────────────────────────────────────────────────────
    // Unified Inventory navigation. One segmented control replaces the old
    // two-row layout (cross-page tabs + in-page view switcher) that duplicated
    // "Materials" and split the reorder concern across a page and two sub-tabs.
    //
    // Two logical groups, separated by a hairline divider so hierarchy reads at
    // a glance without a second row:
    //   • Catalogue , views OF the materials catalogue (Materials/Movements/
    //                  Suppliers). On the index page these switch in place
    //                  (wire:click, no reload); elsewhere they deep-link in.
    //   • Operations, standalone workspaces (Reorder, Locations, Transfers,
    //                  Material Categories), each its own route. Reorder is now
    //                  the single home for low-stock + reorder suggestions.
    // ─────────────────────────────────────────────────────────────────────────
    $user  = Auth::user();
    $team  = $user?->currentTeam;
    $allows = fn (string $perm): bool => (bool) ($team && $user->hasTeamPermission($team, $perm));

    $onIndex = request()->routeIs('inventory.index');
    // Resolve the active catalogue view: the live Livewire prop when we're on
    // the index page, otherwise fall back to the URL so deep links light up.
    $currentView = $activeTab ?? ($onIndex ? request('tab', 'materials') : null);

    // Catalogue views, a $view key means "sub-view of inventory.index".
    // Suppliers deliberately omitted: it's a read-only lens here, fully managed
    // from the sidebar's Suppliers page (purchasing.index).
    $catalogue = array_values(array_filter([
        ['view' => 'materials', 'label' => __('Materials'),  'icon' => 'archive-box',         'show' => $allows('inventory.read')],
        ['view' => 'movements', 'label' => __('Movements'),  'icon' => 'queue-list',          'show' => $allows('inventory.read')],
    ], fn ($t) => $t['show']));

    // Operational areas, each a real route. Purchase Orders deliberately lives
    // on the Suppliers page (purchasing.index), not here: a PO is a supplier
    // document, and the reorder → PO workflow is reachable from the Reorder
    // page's "Generate draft POs" action.
    $operations = array_values(array_filter([
        ['route' => 'inventory.reorder',    'pattern' => 'inventory.reorder',    'label' => __('Reorder'),            'icon' => 'exclamation-triangle', 'show' => $allows('inventory.read')],
        ['route' => 'inventory.locations',  'pattern' => 'inventory.locations',  'label' => __('Locations'),          'icon' => 'map-pin',              'show' => $allows('inventory.read')],
        ['route' => 'inventory.transfers',  'pattern' => 'inventory.transfers',  'label' => __('Transfers'),          'icon' => 'arrows-right-left',    'show' => $allows('inventory.read')],
        ['route' => 'material-categories.index', 'pattern' => 'material-categories.*', 'label' => __('Material Categories'), 'icon' => 'tag',           'show' => $allows('inventory.read')],
    ], fn ($t) => $t['show']));

    $itemBase   = 'group flex shrink-0 items-center gap-2 rounded-xl px-3.5 py-2 text-sm font-semibold transition';
    $itemActive = 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200/70';
    $itemIdle   = 'text-slate-500 hover:bg-white/70 hover:text-slate-800';
@endphp

<nav aria-label="{{ __('Inventory sections') }}"
     class="no-scrollbar flex items-center gap-1 overflow-x-auto rounded-2xl bg-slate-100/80 p-1 ring-1 ring-slate-200/70">

    {{-- Catalogue views --}}
    @foreach ($catalogue as $tab)
        @php $active = $currentView === $tab['view']; @endphp
        @if ($onIndex)
            {{-- In-place switch: no reload while browsing the catalogue. --}}
            <button
                type="button"
                wire:click="setTab('{{ $tab['view'] }}')"
                wire:loading.attr="disabled"
                @class([$itemBase, $itemActive => $active, $itemIdle => ! $active])
                @if ($active) aria-current="page" @endif
            >
                <x-icon :name="$tab['icon']" class="h-4 w-4 {{ $active ? 'text-indigo-500' : 'text-slate-400 group-hover:text-slate-500' }}" />
                {{ $tab['label'] }}
            </button>
        @else
            {{-- Elsewhere: deep-link into the index page's view. --}}
            <a
                href="{{ route('inventory.index', ['tab' => $tab['view']]) }}"
                wire:navigate
                @class([$itemBase, $itemIdle])
            >
                <x-icon :name="$tab['icon']" class="h-4 w-4 text-slate-400 group-hover:text-slate-500" />
                {{ $tab['label'] }}
            </a>
        @endif
    @endforeach

    {{-- Group divider: hierarchy without a second row. --}}
    @if (count($catalogue) && count($operations))
        <span class="mx-1 h-6 w-px shrink-0 bg-slate-300/70" aria-hidden="true"></span>
    @endif

    {{-- Operational areas --}}
    @foreach ($operations as $tab)
        @php $active = request()->routeIs($tab['pattern']); @endphp
        <a
            href="{{ route($tab['route']) }}"
            wire:navigate
            @class([$itemBase, $itemActive => $active, $itemIdle => ! $active])
            @if ($active) aria-current="page" @endif
        >
            <x-icon :name="$tab['icon']" class="h-4 w-4 {{ $active ? 'text-indigo-500' : 'text-slate-400 group-hover:text-slate-500' }}" />
            {{ $tab['label'] }}
        </a>
    @endforeach
</nav>