@extends('app.shell')

@section('body')
  @php
    /** @var \App\Models\Group $group */
    /** @var \Illuminate\Support\Collection<int, \App\Models\Expense> $expenses */
    $myAmount = $myAmount ?? 0.0;
    $progress = min((abs($myAmount) / 200.0) * 100.0, 100.0);
    $locale = app()->getLocale();
    $displayCurrency = request()->user()?->profile?->currency ?: ($group->currency ?? 'USD');
  @endphp

  <div class="min-h-screen safe-bottom animate-in-up">
    <div class="app-page-wrap pt-6 md:pt-6 lg:pt-8 pb-6 md:pb-8 space-y-6">
      <x-page-header title="{{ $group->emoji }}  {{ $group->name }}" back>
        <x-slot:right>
          <a
            href="{{ route('app.group.members', ['id' => $group->id]) }}"
            class="tap-target w-9 h-9 rounded-full flex items-center justify-center"
            aria-label="{{ __('Members') }}"
          >
            <x-lucide-settings class="w-[18px] h-[18px] text-muted-foreground" />
          </a>
        </x-slot:right>
      </x-page-header>

      <div class="apple-card p-5 text-center">
        <p class="text-[13px] text-muted-foreground">
          {{ $myAmount >= 0 ? __('You’re owed') : __('You owe') }}
        </p>
        <p class="text-[38px] font-bold tracking-tight leading-none mt-1 {{ $myAmount >= 0 ? 'balance-positive' : 'balance-negative' }}">
          {{ \App\Support\Money::formatConvertedWithOriginal((float) abs($myAmount), $group->currency ?? 'USD', $displayCurrency, $locale)['primary'] }}
        </p>
        @php
          $fmt = \App\Support\Money::formatConvertedWithOriginal((float) abs($myAmount), $group->currency ?? 'USD', $displayCurrency, $locale);
        @endphp
        @if ($fmt['secondary'])
          <p class="text-[12px] text-muted-foreground mt-1 tabular-nums">
            {{ $fmt['secondary'] }}
          </p>
        @endif

        <div class="mt-4 h-[6px] rounded-full bg-secondary overflow-hidden">
          <div
            class="h-full rounded-full transition-all duration-700 {{ $myAmount >= 0 ? 'bg-success' : 'bg-owe' }}"
            style="width: {{ $progress }}%;"
          ></div>
        </div>
      </div>

      <section>
        <div class="flex items-center justify-between mb-3 px-1">
          <p class="section-header">{{ __('Members') }}</p>
          <a href="{{ route('app.group.members', ['id' => $group->id]) }}" class="flex items-center gap-1 text-[13px] font-medium text-primary">
            <x-lucide-user-plus class="w-4 h-4" />
            {{ __('Add people') }}
          </a>
        </div>
        <div class="flex gap-4 overflow-x-auto pb-1 px-1">
          @foreach ($group->members as $m)
            @php
              $b = collect($balances ?? [])->firstWhere('userId', $m->id);
              $amt = (float) ($b['amount'] ?? 0);
            @endphp
            <div class="flex flex-col items-center gap-1.5 min-w-[52px]">
              <div class="w-12 h-12 rounded-full bg-secondary flex items-center justify-center text-xl">
                {{ $m->avatar }}
              </div>
              <span class="text-[12px] font-medium text-foreground truncate max-w-[64px]">{{ $m->name }}</span>
              <span class="text-[11px] font-semibold {{ $amt >= 0 ? 'balance-positive' : 'balance-negative' }}">
                @php
                  $fmt2 = \App\Support\Money::formatConvertedWithOriginal((float) abs($amt), $group->currency ?? 'USD', $displayCurrency, $locale);
                @endphp
                {{ $amt >= 0 ? '+' : '-' }}{{ $fmt2['primary'] }}
              </span>
            </div>
          @endforeach
        </div>
      </section>

      @if ($group->members->count() > 1)
        <section>
          <div class="flex items-center justify-between mb-3 px-1">
            <p class="section-header">{{ __('Settle up') }}</p>
            <a href="{{ route('app.settle-up', ['id' => $group->id]) }}" class="text-[13px] font-medium text-primary">
              {{ __('Open') }}
            </a>
          </div>
          <a
            href="{{ route('app.settle-up', ['id' => $group->id]) }}"
            class="w-full mb-3 py-3.5 rounded-2xl bg-primary text-primary-foreground text-[15px] font-semibold flex items-center justify-center gap-2 active:scale-[0.98] transition-transform"
          >
            <x-lucide-wallet class="w-5 h-5" />
            {{ __('Pay / settle') }}
          </a>
        </section>
      @endif

      <section>
        <p class="section-header mb-3 px-1">{{ __('Expenses') }}</p>
        <div class="apple-card">
          @forelse ($expenses as $i => $exp)
            <div>
              <x-list-row
                :href="route('app.group.expense.detail', ['groupId' => $group->id, 'expenseId' => $exp->id])"
                left-class="w-10 h-10 rounded-[12px] bg-primary-muted flex items-center justify-center text-xl shrink-0"
                :show-chevron="false"
                class="px-0 py-0 rounded-none shadow-none bg-transparent"
              >
                <x-slot:left>{{ $exp->emoji }}</x-slot:left>

                <p class="text-[14px] font-medium truncate text-foreground">
                  {{ $exp->description }}
                </p>
                <p class="text-[12px] text-muted-foreground mt-0.5">
                  {{ $exp->paidBy?->name ?? __('Someone') }} {{ __('paid') }} · {{ optional($exp->expense_date)->format('M j') }}
                  @if ($exp->is_recurring) · 🔄 @endif
                </p>

                <x-slot:right>
                  <p class="text-[15px] font-semibold text-foreground tabular-nums shrink-0">
                    @php
                      $fmt3 = \App\Support\Money::formatConvertedWithOriginal((float) $exp->amount, $exp->currency ?: ($group->currency ?? 'USD'), $displayCurrency, $locale);
                    @endphp
                    {{ $fmt3['primary'] }}
                  </p>
                  @if ($fmt3['secondary'])
                    <p class="text-[11px] text-muted-foreground tabular-nums mt-0.5">
                      {{ $fmt3['secondary'] }}
                    </p>
                  @endif
                </x-slot:right>
              </x-list-row>
              @if ($i < $expenses->count() - 1)
                <div class="subtle-divider ml-[60px]"></div>
              @endif
            </div>
          @empty
            <div class="px-4 py-6 text-center text-[13px] text-muted-foreground">
              {{ __('No expenses yet.') }}
            </div>
          @endforelse
        </div>
      </section>
    </div>
  </div>
@endsection