@extends('app.shell')

@section('body')
  @php
    /** @var \App\Models\Person $mePerson */
    /** @var string $monthLabel */
    /** @var float $totalSpent */
    /** @var int $expenseCount */
    /** @var float $avgExpense */
    /** @var float $myPaid */
    /** @var float $myShare */
    /** @var \App\Models\Person|null $topPayer */
    /** @var float|null $topPayerAmount */
    /** @var array{category:string,emoji:string,amount:float}|null $topCategory */
    /** @var array<int, array{user:\App\Models\Person,totalPaid:float,totalShare:float,contributionPct:float,status:string}> $fairness */
    $locale = app()->getLocale();
    $displayCurrency = request()->user()?->profile?->currency ?: 'USD';
    $m = fn (float $n): array => \App\Support\Money::formatConvertedWithOriginal($n, $displayCurrency, $displayCurrency, $locale);
  @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-10 md:pb-10 space-y-6">
      <x-page-header title="{{ __('Insights') }}" back />

      <div class="apple-card p-5">
        <div class="flex items-center gap-2 mb-4">
          <x-lucide-sparkles class="w-4 h-4 text-primary" />
          <p class="text-[13px] font-semibold capitalize text-foreground">{{ $monthLabel }}</p>
        </div>

        <div class="grid grid-cols-2 gap-3 mb-4">
          <div class="apple-card-inset p-4 rounded-2xl">
            <p class="text-[11px] mb-1 text-muted-foreground">{{ __('Total spent') }}</p>
            <p class="text-[22px] font-bold tracking-tight tabular-nums text-foreground">
              @php $fmtTotal = $m((float) $totalSpent); @endphp
              {{ $fmtTotal['primary'] }}
            </p>
            <p class="text-[11px] mt-0.5 text-muted-foreground">
              {{ $expenseCount }} {{ __('transactions') }}
            </p>
          </div>
          <div class="apple-card-inset p-4 rounded-2xl">
            <p class="text-[11px] mb-1 text-muted-foreground">{{ __('Avg expense') }}</p>
            <p class="text-[22px] font-bold tracking-tight tabular-nums text-foreground">
              @php $fmtAvg = $m((float) $avgExpense); @endphp
              {{ $fmtAvg['primary'] }}
            </p>
            <p class="text-[11px] mt-0.5 text-muted-foreground">{{ __('Per transaction') }}</p>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-3">
          <div class="apple-card-inset p-4 rounded-2xl">
            <p class="text-[11px] mb-1 text-muted-foreground">{{ __('You paid') }}</p>
            <p class="text-[20px] font-bold tabular-nums balance-positive">
              @php $fmtPaid = $m((float) $myPaid); @endphp
              {{ $fmtPaid['primary'] }}
            </p>
          </div>
          <div class="apple-card-inset p-4 rounded-2xl">
            <p class="text-[11px] mb-1 text-muted-foreground">{{ __('Your share') }}</p>
            <p class="text-[20px] font-bold tabular-nums text-foreground">
              @php $fmtShare = $m((float) $myShare); @endphp
              {{ $fmtShare['primary'] }}
            </p>
          </div>
        </div>
      </div>

      @if ($topPayer)
        <div class="apple-card p-4 flex items-center gap-3">
          <div class="w-10 h-10 rounded-full flex items-center justify-center text-lg bg-success/10">
            {{ $topPayer->avatar }}
          </div>
          <div class="flex-1">
            <p class="text-[14px] font-medium text-foreground">
              {{ __(':name paid the most', ['name' => $topPayer->name]) }}
            </p>
            <p class="text-[12px] text-muted-foreground">
              @php $fmtTop = $m((float) ($topPayerAmount ?? 0)); @endphp
              {{ __(':amount this month', ['amount' => $fmtTop['primary']]) }}
            </p>
          </div>
          <x-lucide-trending-up class="w-4 h-4 text-success" />
        </div>
      @endif

      @if ($topCategory)
        <div class="apple-card p-4 flex items-center gap-3">
          <div class="w-10 h-10 rounded-[12px] flex items-center justify-center text-lg bg-primary/10">
            {{ $topCategory['emoji'] }}
          </div>
          <div class="flex-1">
            <p class="text-[14px] font-medium text-foreground">
              {{ __('Top category: :category', ['category' => $topCategory['category']]) }}
            </p>
            <p class="text-[12px] text-muted-foreground">
              @php $fmtCat = $m((float) $topCategory['amount']); @endphp
              {{ __(':amount spent', ['amount' => $fmtCat['primary']]) }}
            </p>
          </div>
        </div>
      @endif

      <section>
        <p class="section-header mb-3 px-1">{{ __('Fairness') }}</p>
        <div class="apple-card">
          @if (count($fairness) === 0)
            <p class="px-4 py-8 text-center text-[14px] text-muted-foreground">
              {{ __('Not enough data yet.') }}
            </p>
          @else
            @foreach ($fairness as $i => $f)
              <div>
                <div class="px-4 py-3.5">
                  <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center gap-2.5">
                      <div class="w-9 h-9 rounded-full flex items-center justify-center text-base bg-secondary">
                        {{ $f['user']->avatar }}
                      </div>
                      <div>
                        <p class="text-[14px] font-medium text-foreground">{{ $f['user']->name }}</p>
                        <p class="text-[11px] text-muted-foreground">
                          @php $fmtFPaid = $m((float) $f['totalPaid']); @endphp
                          @php $fmtFShare = $m((float) $f['totalShare']); @endphp
                          {{ __('Paid :paid · Share :share', ['paid' => $fmtFPaid['primary'], 'share' => $fmtFShare['primary']]) }}
                        </p>
                      </div>
                    </div>
                    @php
                      $status = $f['status'];
                      $badgeClass =
                        $status === 'overpaying' ? 'bg-owe-muted text-owe' :
                        ($status === 'underpaying' ? 'bg-primary-muted text-primary' : 'bg-secondary text-muted-foreground');
                      $label = $status === 'overpaying' ? __('Overpaying') : ($status === 'underpaying' ? __('Underpaying') : __('Fair'));
                    @endphp
                    <span class="text-[12px] font-semibold px-2 py-0.5 rounded-full {{ $badgeClass }}">{{ $label }}</span>
                  </div>
                  <div class="flex items-center gap-2">
                    <div class="flex-1 h-[5px] rounded-full overflow-hidden bg-secondary">
                      @php
                        $barClass = $status === 'overpaying' ? 'bg-owe' : ($status === 'underpaying' ? 'bg-primary' : 'bg-success');
                        $w = min(100, (float) $f['contributionPct']);
                      @endphp
                      <div class="h-full rounded-full transition-all duration-700 {{ $barClass }}" style="width: {{ $w }}%;"></div>
                    </div>
                    <span class="text-[11px] font-semibold tabular-nums w-10 text-right text-muted-foreground">
                      {{ (int) round((float) $f['contributionPct']) }}%
                    </span>
                  </div>
                </div>
                @if ($i < count($fairness) - 1)
                  <div class="subtle-divider ml-[52px]"></div>
                @endif
              </div>
            @endforeach
          @endif
        </div>
      </section>
    </div>
  </div>
@endsection