@extends('app.shell')

@section('body')
  @php
    /** @var \Illuminate\Support\Collection<int, \App\Models\Group> $groups */
    /** @var \Illuminate\Support\Collection<int, \App\Models\Expense> $expenses */
    $types = ['home', 'trip', 'event'];
    $typeEmoji = ['home' => '🏠', 'trip' => '✈️', 'event' => '🎉'];
    $typeLabel = ['home' => __('Home'), 'trip' => __('Trip'), 'event' => __('Event')];
    $meId = $mePersonId ?? null;
    $locale = app()->getLocale();
    $defaultCurrency = request()->user()?->profile?->currency ?: 'USD';

    $totalOwed = 0.0;
    $totalOwe = 0.0;
    foreach ($groups as $g) {
      $balanceMap = [];
      foreach ($g->members as $m) {
        $balanceMap[$m->id] = 0.0;
      }
      foreach ($expenses as $exp) {
        if ($exp->group_id !== $g->id || $exp->shared_list_id) continue;
        $payerId = (string) $exp->paid_by_person_id;
        $balanceMap[$payerId] = ($balanceMap[$payerId] ?? 0) + (float) $exp->amount;
        $split = is_array($exp->split_among) ? $exp->split_among : [];
        foreach ($split as $row) {
          $uid = (string) (data_get($row, 'user.id') ?? data_get($row, 'userId') ?? '');
          if ($uid === '') continue;
          $amt = (float) (data_get($row, 'amount') ?? 0);
          $balanceMap[$uid] = ($balanceMap[$uid] ?? 0) - $amt;
        }
      }
      $myAmt = $meId ? (float) ($balanceMap[$meId] ?? 0) : 0.0;
      if ($myAmt > 0.009) {
        $totalOwed += $myAmt;
      } elseif ($myAmt < -0.009) {
        $totalOwe += abs($myAmt);
      }
    }
  @endphp

  <div class="min-h-screen safe-bottom animate-fade-in">
    <div class="app-page-wrap pt-14 md:pt-6 lg:pt-8 pb-8 md:pb-8 space-y-5" data-collection-root>
      <div class="flex items-center justify-between">
        <div>
          <p class="text-[13px] text-muted-foreground">{{ __('Shared spaces') }}</p>
          <h1 class="text-[28px] font-bold text-foreground tracking-tight">{{ __('Groups') }}</h1>
        </div>
        <a
          href="{{ route('app.create-group') }}"
          class="tap-target w-10 h-10 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-sm active:scale-95 transition-transform"
          aria-label="{{ __('Create group') }}"
        >
          <x-lucide-plus class="w-5 h-5" />
        </a>
      </div>

      <div class="apple-card p-5 space-y-4">
        <div class="flex items-start justify-between gap-4">
          <div class="min-w-0">
            <p class="text-[13px] text-muted-foreground">{{ __('Keep home, trips, and events organized in one place.') }}</p>
            <p class="mt-1 text-[21px] font-semibold text-foreground">
              {{ trans_choice(':count group|:count groups', $groups->count(), ['count' => $groups->count()]) }}
            </p>
          </div>
          <div class="w-12 h-12 rounded-[18px] bg-primary/10 text-[24px] flex items-center justify-center shrink-0">
            👥
          </div>
        </div>

        <div class="grid grid-cols-3 gap-2.5">
          <div class="rounded-2xl bg-secondary/70 px-3 py-3">
            <p class="text-[11px] uppercase tracking-wide text-muted-foreground">{{ __('Open') }}</p>
            <p class="mt-1 text-[18px] font-semibold text-foreground">{{ $groups->count() }}</p>
          </div>
          <div class="rounded-2xl bg-secondary/70 px-3 py-3">
            <p class="text-[11px] uppercase tracking-wide text-muted-foreground">{{ __('Owed') }}</p>
            <p class="mt-1 text-[18px] font-semibold balance-positive tabular-nums">
              {{ \App\Support\Money::formatConvertedWithOriginal($totalOwed, $defaultCurrency, $defaultCurrency, $locale)['primary'] }}
            </p>
          </div>
          <div class="rounded-2xl bg-secondary/70 px-3 py-3">
            <p class="text-[11px] uppercase tracking-wide text-muted-foreground">{{ __('You owe') }}</p>
            <p class="mt-1 text-[18px] font-semibold balance-negative tabular-nums">
              {{ \App\Support\Money::formatConvertedWithOriginal($totalOwe, $defaultCurrency, $defaultCurrency, $locale)['primary'] }}
            </p>
          </div>
        </div>
      </div>

      <div class="space-y-3" @class(['hidden' => $groups->count() === 0])>
        <div class="relative">
          <x-lucide-search class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground/60" />
          <input
            type="text"
            placeholder="{{ __('Search groups, members, or type') }}"
            class="w-full rounded-xl bg-secondary/80 border-0 py-3 pl-10 pr-4 text-[15px] text-foreground placeholder:text-muted-foreground/50 focus:outline-none focus:ring-2 focus:ring-primary/30"
            data-collection-search
          />
        </div>

        <div class="flex gap-2 overflow-x-auto pb-1">
          <button type="button" class="shrink-0 rounded-full px-3.5 py-2 text-[13px] font-medium bg-primary text-primary-foreground shadow-sm" data-collection-chip="all" data-active="true">
            {{ __('All') }}
          </button>
          @foreach ($types as $type)
            @php $count = $groups->where('type', $type)->count(); @endphp
            @if ($count)
              <button type="button" class="shrink-0 rounded-full px-3.5 py-2 text-[13px] font-medium bg-secondary/80 text-foreground" data-collection-chip="{{ $type }}" data-active="false">
                {{ $typeEmoji[$type] }} {{ $typeLabel[$type] }} · {{ $count }}
              </button>
            @endif
          @endforeach
        </div>
      </div>

      @foreach ($types as $type)
        @php $bucket = $groups->where('type', $type)->values(); @endphp
        @if ($bucket->count())
          <section data-collection-section data-group-section="{{ $type }}">
            <div class="flex items-center justify-between mb-3 px-1">
              <p class="section-header">
                {{ $typeEmoji[$type] }} {{ $typeLabel[$type] }}
              </p>
              <p class="text-[12px] text-muted-foreground">{{ trans_choice(':count group|:count groups', $bucket->count(), ['count' => $bucket->count()]) }}</p>
            </div>

            <div class="space-y-2.5">
              @foreach ($bucket as $g)
                @php
                  $balanceMap = [];
                  foreach ($g->members as $m) {
                    $balanceMap[$m->id] = 0.0;
                  }
                  $groupExpenses = $expenses->where('group_id', $g->id)->where('shared_list_id', null);
                  foreach ($groupExpenses as $exp) {
                    $payerId = (string) $exp->paid_by_person_id;
                    $balanceMap[$payerId] = ($balanceMap[$payerId] ?? 0) + (float) $exp->amount;
                    $split = is_array($exp->split_among) ? $exp->split_among : [];
                    foreach ($split as $row) {
                      $uid = (string) (data_get($row, 'user.id') ?? data_get($row, 'userId') ?? '');
                      if ($uid === '') continue;
                      $amt = (float) (data_get($row, 'amount') ?? 0);
                      $balanceMap[$uid] = ($balanceMap[$uid] ?? 0) - $amt;
                    }
                  }
                  $myAmt = $meId ? (float) ($balanceMap[$meId] ?? 0) : 0.0;
                  $displayCurrency = request()->user()?->profile?->currency ?: ($g->currency ?? 'USD');
                  $fmt = \App\Support\Money::formatConvertedWithOriginal((float) abs($myAmt), $g->currency ?? 'USD', $displayCurrency, $locale);
                  $totalSpent = (float) $groupExpenses->sum('amount');
                  $spentFmt = \App\Support\Money::formatConvertedWithOriginal($totalSpent, $g->currency ?? 'USD', $displayCurrency, $locale);
                  $searchText = collect([$g->name, $typeLabel[$type], $g->members->pluck('name')->join(' ')])->filter()->join(' ');
                @endphp

                <x-list-row
                  :href="route('app.group.detail', ['id' => $g->id])"
                  left-class="w-11 h-11 text-xl rounded-[14px] bg-primary-muted flex items-center justify-center shrink-0"
                  data-collection-item
                  data-collection-filters="{{ $type }}"
                  data-collection-text="{{ strtolower($searchText) }}"
                >
                  <x-slot:left>{{ $g->emoji }}</x-slot:left>

                  <div class="flex items-start justify-between gap-3">
                    <div class="min-w-0">
                      <h3 class="font-semibold text-foreground leading-tight truncate text-[15px]">
                        {{ $g->name }}
                      </h3>
                      <p class="text-muted-foreground mt-0.5 text-[13px]">
                        {{ $g->members->count() }} {{ __('members') }} · {{ $groupExpenses->count() }} {{ __('expenses') }}
                      </p>
                    </div>
                    <span class="shrink-0 rounded-full bg-secondary/80 px-2.5 py-1 text-[11px] font-medium text-foreground">
                      {{ $typeLabel[$type] }}
                    </span>
                  </div>

                  <x-slot:right>
                    <div>
                      @if ($totalSpent > 0)
                        <p class="text-[11px] text-muted-foreground">{{ __('Spent') }}</p>
                        <p class="font-medium text-[13px] text-foreground tabular-nums">{{ $spentFmt['primary'] }}</p>
                      @endif

                      @if (abs($myAmt) < 0.01)
                        <p class="font-medium text-[13px] text-muted-foreground mt-1">{{ __('Settled') }}</p>
                      @elseif ($myAmt > 0)
                        <p class="text-[11px] text-muted-foreground mt-1">{{ __('You’re owed') }}</p>
                        <p class="font-semibold tabular-nums text-[15px] balance-positive">{{ $fmt['primary'] }}</p>
                      @else
                        <p class="text-[11px] text-muted-foreground mt-1">{{ __('You owe') }}</p>
                        <p class="font-semibold tabular-nums text-[15px] balance-negative">{{ $fmt['primary'] }}</p>
                      @endif
                    </div>
                  </x-slot:right>
                </x-list-row>
              @endforeach
            </div>
          </section>
        @endif
      @endforeach

      <div class="hidden text-center py-12 space-y-3" data-collection-no-results>
        <div class="w-14 h-14 rounded-2xl bg-secondary/80 text-[26px] flex items-center justify-center mx-auto">🔎</div>
        <div>
          <p class="text-[17px] font-semibold text-foreground">{{ __('No groups match that search') }}</p>
          <p class="text-[14px] text-muted-foreground mt-1">{{ __('Try another name, member, or type filter.') }}</p>
        </div>
      </div>

      <div class="text-center py-16 space-y-4" data-collection-empty @class(['hidden' => $groups->count() > 0])>
        <div class="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center text-[32px] mx-auto">👥</div>
        <div>
          <p class="text-[17px] font-semibold text-foreground">{{ __('No groups yet') }}</p>
          <p class="text-[14px] text-muted-foreground mt-1">{{ __('Create your first group to start sharing.') }}</p>
        </div>
        <a
          href="{{ route('app.create-group') }}"
          class="inline-flex items-center gap-2 rounded-2xl bg-primary text-primary-foreground px-6 py-3 text-[15px] font-semibold active:scale-[0.98] transition-transform"
        >
          <x-lucide-plus class="w-4 h-4" />
          {{ __('Create group') }}
        </a>
      </div>
    </div>
  </div>
@endsection