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

@php
    // ─────────────────────────────────────────────────────────────────────────
    // Unified Purchasing navigation, in the order money actually moves:
    //
    //   RFQs → Purchase Orders → Bills → Suppliers
    //
    // Sourcing (RFQ) happens before the commitment (PO), which happens before
    // the liability (Bill); Suppliers is the master data behind all three.
    // Bills/Suppliers are views of the index component, so on that page they
    // switch in place; everywhere else they deep-link in.
    // ─────────────────────────────────────────────────────────────────────────
    $user = Auth::user();
    $team = $user?->currentTeam;
    $allows = fn (string $perm): bool => (bool) ($team && $user->hasTeamPermission($team, $perm));

    $onIndex = request()->routeIs('purchasing.index');
    $currentView = $activeTab ?? ($onIndex ? request('tab', 'bills') : null);

    // Standalone workspaces, each its own route.
    $routes = array_values(array_filter([
        ['route' => 'purchasing.rfqs',   'pattern' => 'purchasing.rfqs*',   'label' => __('RFQs'),            'icon' => 'paper-airplane',            'show' => $allows('purchasing.read')],
        ['route' => 'purchasing.orders', 'pattern' => 'purchasing.orders',  'label' => __('Purchase Orders'), 'icon' => 'clipboard-document-list',   'show' => $allows('purchasing.read')],
    ], fn ($t) => $t['show']));

    // Views of the purchasing index component.
    $views = array_values(array_filter([
        ['view' => 'bills',     'label' => __('Bills'),     'icon' => 'inbox',           'show' => $allows('purchasing.read')],
        ['view' => 'suppliers', 'label' => __('Suppliers'), 'icon' => 'building-office', 'show' => $allows('purchasing.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="{{ __('Purchasing 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">

    {{-- Sourcing & ordering --}}
    @foreach ($routes 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

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

    {{-- Payables & master data --}}
    @foreach ($views as $tab)
        @php $active = $currentView === $tab['view']; @endphp
        @if ($onIndex)
            {{-- In-place switch: no reload while browsing payables. --}}
            <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
            <a
                href="{{ route('purchasing.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
</nav>