@props([
  'mode' => 'auto', // 'auto' | 'tabs' | 'context'
  'primaryLabel' => null,
  'primaryOnclick' => null,
  'primaryHref' => null,
  'leftOnclick' => null,
  'leftHref' => null,
  'ariaLabel' => null,
])

@php
  $pathname = '/'.ltrim(request()->path(), '/');
  $hide = in_array($pathname, ['/onboarding', '/login', '/register', '/forgot-password', '/reset-password', '/welcome'], true);

  $isTopTab = in_array($pathname, ['/', '/groups', '/activity', '/account', '/insights'], true);

  $computedMode = $mode;
  $computedPrimaryLabel = $primaryLabel;
  $computedPrimaryHref = $primaryHref;
  $computedPrimaryOnclick = $primaryOnclick;
  $computedLeftHref = $leftHref;
  $computedLeftOnclick = $leftOnclick;
  $plusHref = route('app.add-expense');
  $plusAria = 'Add expense';

  if ($mode === 'auto') {
    $computedMode = $isTopTab ? 'tabs' : 'context';

    if (! $isTopTab) {
      // Default left action is Back (history.back()).
      $computedLeftOnclick = $computedLeftOnclick ?: "window.WeShareNav?.back?.('/') || history.back()";

      // Route-aware primary actions.
      if (str_starts_with($pathname, '/group/') && ! str_contains($pathname, '/expense/') && ! str_ends_with($pathname, '/members')) {
        // Group detail
        $groupId = request()->route('id');
        if ($groupId) {
          $computedPrimaryLabel = $computedPrimaryLabel ?: 'Add expense';
          $computedPrimaryHref = $computedPrimaryHref ?: route('app.add-expense', ['group' => $groupId]);
        }
      } elseif (str_contains($pathname, '/expense/')) {
        // Expense detail (group or list)
        $groupId = request()->route('groupId') ?: request()->route('id');
        if ($groupId) {
          $computedPrimaryLabel = $computedPrimaryLabel ?: 'Settle';
          $computedPrimaryHref = $computedPrimaryHref ?: route('app.settle-up', ['id' => $groupId]);
        }
      } elseif (str_starts_with($pathname, '/settle/')) {
        // Group settle screen
        $computedPrimaryLabel = $computedPrimaryLabel ?: 'Record payment';
        $computedPrimaryOnclick = $computedPrimaryOnclick ?: "window.scrollTo({top: 0, behavior: 'smooth'})";
      } elseif (str_starts_with($pathname, '/shared-lists/') && str_ends_with($pathname, '/settle')) {
        // Shared list settle screen
        $computedPrimaryLabel = $computedPrimaryLabel ?: 'Record payment';
        $computedPrimaryOnclick = $computedPrimaryOnclick ?: "window.scrollTo({top: 0, behavior: 'smooth'})";
      } elseif (str_starts_with($pathname, '/shared-lists/') && str_ends_with($pathname, '/members')) {
        $computedPrimaryLabel = $computedPrimaryLabel ?: 'Add someone';
        $computedPrimaryOnclick = $computedPrimaryOnclick ?: "window.scrollTo({top: 0, behavior: 'smooth'})";
      } elseif ($pathname === '/shared-lists/intro') {
        $computedPrimaryLabel = $computedPrimaryLabel ?: 'New list';
        $computedPrimaryHref = $computedPrimaryHref ?: route('app.shared-lists.new');
      } elseif ($pathname === '/shared-lists/new') {
        $computedPrimaryLabel = $computedPrimaryLabel ?: 'Create list';
        $computedPrimaryOnclick = $computedPrimaryOnclick ?: "document.getElementById('create-shared-list-form')?.requestSubmit?.()";
      } elseif (str_starts_with($pathname, '/shared-purchases/') && $pathname !== '/shared-purchases/intro' && $pathname !== '/shared-purchases/new') {
        $computedPrimaryLabel = $computedPrimaryLabel ?: 'Save';
        $computedPrimaryOnclick = $computedPrimaryOnclick ?: "document.querySelector('form')?.requestSubmit?.()";
      } elseif ($pathname === '/shared-purchases/intro') {
        $computedPrimaryLabel = $computedPrimaryLabel ?: 'New purchase';
        $computedPrimaryHref = $computedPrimaryHref ?: route('app.shared-purchases.new');
      } elseif ($pathname === '/shared-purchases/new') {
        $computedPrimaryLabel = $computedPrimaryLabel ?: 'Create purchase';
        $computedPrimaryOnclick = $computedPrimaryOnclick ?: "document.getElementById('create-shared-purchase-form')?.requestSubmit?.()";
      } elseif ($pathname === '/create-group') {
        $computedPrimaryLabel = $computedPrimaryLabel ?: 'Create group';
        $computedPrimaryOnclick = $computedPrimaryOnclick ?: "document.querySelector('form')?.requestSubmit?.()";
      } elseif ($pathname === '/add-expense') {
        $computedPrimaryLabel = $computedPrimaryLabel ?: 'Add expense';
        $computedPrimaryOnclick = $computedPrimaryOnclick ?: "document.getElementById('add-expense-form')?.requestSubmit?.()";
      } elseif (str_starts_with($pathname, '/shared-lists/') && $pathname !== '/shared-lists/intro' && $pathname !== '/shared-lists/new') {
        // Shared list detail already overrides; keep fallback in case
        $computedPrimaryLabel = $computedPrimaryLabel ?: 'Add item';
        $computedPrimaryOnclick = $computedPrimaryOnclick ?: "(function(){ const el=document.getElementById('addItemInput'); if(el){ el.scrollIntoView({behavior:'smooth', block:'center'}); el.focus(); el.select(); } })()";
      }
    } else {
      // Tabs mode: make the + button match the current tab.
      if ($pathname === '/groups') {
        $plusHref = route('app.create-group');
        $plusAria = 'Create group';
      } elseif ($pathname === '/account' || $pathname === '/insights') {
        $plusHref = route('app.account.profile.edit');
        $plusAria = 'Edit profile';
      } else {
        // Home + Activity default to Add expense
        $plusHref = route('app.add-expense');
        $plusAria = 'Add expense';
      }
    }
  }
@endphp

@if (!$hide)
  <nav class="fixed inset-x-0 bottom-0 z-40 flex justify-center pointer-events-none md:hidden" aria-label="Main navigation">
    <div class="pointer-events-auto flex w-full max-w-lg items-end gap-2.5 px-4 pb-[calc(0.625rem+env(safe-area-inset-bottom,0px))] pt-2">
      @php
        $glass = 'border border-white/80 bg-white/[0.72] shadow-[0_8px_32px_rgba(0,0,0,0.08),0_2px_12px_rgba(0,0,0,0.04),inset_0_1px_0_rgba(255,255,255,0.9)] backdrop-blur-2xl backdrop-saturate-150 supports-[backdrop-filter]:bg-white/55';
      @endphp

      @if ($computedMode === 'context')
        <div class="flex min-h-[54px] min-w-0 flex-1 items-center gap-2 rounded-full px-2 py-2 {{ $glass }}" aria-label="{{ $ariaLabel ?? 'Context actions' }}">
          @php
            $leftIsLink = ! empty($computedLeftHref);
            $primaryIsLink = ! empty($computedPrimaryHref);
          @endphp

          @if ($leftIsLink)
            <a
              href="{{ $computedLeftHref }}"
              class="tap-target flex h-[44px] w-[44px] shrink-0 items-center justify-center rounded-full active:scale-[0.96] text-foreground transition-transform duration-150 bg-white/40"
              aria-label="Back"
            >
              <x-lucide-arrow-left class="h-[20px] w-[20px]" />
            </a>
          @else
            <button
              type="button"
              onclick="{{ $computedLeftOnclick ?: "window.WeShareNav?.back?.('/') || history.back()" }}"
              class="tap-target flex h-[44px] w-[44px] shrink-0 items-center justify-center rounded-full active:scale-[0.96] text-foreground transition-transform duration-150 bg-white/40"
              aria-label="Back"
            >
              <x-lucide-arrow-left class="h-[20px] w-[20px]" />
            </button>
          @endif

          @if ($primaryIsLink)
            <a
              href="{{ $computedPrimaryHref }}"
              class="tap-target flex h-[44px] min-w-0 flex-1 items-center justify-center rounded-full bg-primary text-primary-foreground active:scale-[0.98] transition-transform font-semibold text-[15px] shadow-[0_14px_32px_hsl(var(--primary)/0.18)]"
            >
              {{ $computedPrimaryLabel ?? 'Action' }}
            </a>
          @else
            <button
              type="button"
              @if($computedPrimaryOnclick) onclick="{{ $computedPrimaryOnclick }}" @endif
              class="tap-target flex h-[44px] min-w-0 flex-1 items-center justify-center rounded-full bg-primary text-primary-foreground active:scale-[0.98] transition-transform font-semibold text-[15px] shadow-[0_14px_32px_hsl(var(--primary)/0.18)]"
            >
              {{ $computedPrimaryLabel ?? 'Action' }}
            </button>
          @endif
        </div>
      @else
        <div class="flex min-h-[54px] min-w-0 flex-1 items-stretch rounded-full px-1 py-1 {{ $glass }}">
          @foreach ([
            ['route' => 'app.home', 'label' => 'Home', 'icon' => 'home', 'active' => $pathname === '/'],
            ['route' => 'app.groups', 'label' => 'Groups', 'icon' => 'users', 'active' => $pathname === '/groups' || str_starts_with($pathname, '/group/')],
            ['route' => 'app.activity', 'label' => 'Notifications', 'icon' => 'bell', 'active' => $pathname === '/activity'],
            ['route' => 'app.account', 'label' => 'Profile', 'icon' => 'user', 'active' => $pathname === '/account' || $pathname === '/insights'],
          ] as $tab)
            <a
              href="{{ route($tab['route']) }}"
              class="tap-target flex min-h-0 min-w-0 flex-1 flex-col items-center justify-center gap-0.5 rounded-full px-1 py-1.5 transition-colors duration-200
                {{ $tab['active'] ? 'text-[hsl(var(--primary))]' : 'text-muted-foreground hover:text-foreground/80' }}"
            >
              <x-dynamic-component :component="'lucide-'.$tab['icon']" class="h-[22px] w-[22px] shrink-0" />
              <span class="max-w-full truncate text-[10px] font-medium tracking-tight">{{ $tab['label'] }}</span>
            </a>
          @endforeach
        </div>

        <a
          href="{{ $plusHref }}"
          aria-label="{{ $plusAria }}"
          class="tap-target flex h-[54px] w-[54px] shrink-0 items-center justify-center rounded-full active:scale-[0.96] text-foreground transition-transform duration-150 {{ $glass }}"
        >
          <x-lucide-plus class="h-[22px] w-[22px]" />
        </a>
      @endif
    </div>
  </nav>
@endif