@extends('app.shell')

@section('body')
  @php
    /** @var \App\Models\Group $group */
    /** @var \App\Models\Expense $expense */
    $locale = app()->getLocale();
    $displayCurrency = request()->user()?->profile?->currency ?: ($group->currency ?? ($expense->currency ?? 'USD'));
    $rows = collect(is_array($expense->split_among) ? $expense->split_among : [])->map(function ($s) use ($expense) {
      $amount = (float) (data_get($s, 'amount') ?? 0);
      $uid = (string) (data_get($s, 'userId') ?? data_get($s, 'user.id') ?? '');
      $pct = $expense->amount > 0 ? ($amount / (float) $expense->amount) * 100 : 0;
      return ['userId' => $uid, 'amount' => $amount, 'pct' => $pct];
    });
  @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="{{ __('Expense') }}" back>
        <x-slot:right>
          <a
            href="{{ route('app.add-expense', ['group' => $group->id]) }}"
            class="tap-target px-3 py-1.5 rounded-full bg-secondary text-[13px] font-semibold text-foreground"
          >
            {{ __('Edit') }}
          </a>
        </x-slot:right>
      </x-page-header>

      <div class="apple-card p-5">
        <div class="flex items-start gap-3">
          <div class="w-12 h-12 rounded-[14px] bg-primary-muted flex items-center justify-center text-2xl shrink-0">
            {{ $expense->emoji }}
          </div>
          <div class="min-w-0 flex-1">
            <h1 class="text-[18px] font-semibold text-foreground leading-tight">
              {{ $expense->description }}
            </h1>
            <p class="text-[20px] font-bold text-foreground tabular-nums mt-2">
              @php
                $fmt = \App\Support\Money::formatConvertedWithOriginal((float) $expense->amount, $expense->currency ?: ($group->currency ?? 'USD'), $displayCurrency, $locale);
              @endphp
              {{ $fmt['primary'] }}
            </p>
            @if ($fmt['secondary'])
              <p class="text-[12px] text-muted-foreground tabular-nums mt-1">
                {{ $fmt['secondary'] }}
              </p>
            @endif
            <p class="text-[13px] text-muted-foreground mt-2">
              {{ $group->emoji }} {{ $group->name }} · {{ optional($expense->expense_date)->format('M j') }}
            </p>
          </div>
        </div>
      </div>

      <section class="apple-card p-5 space-y-3">
        <p class="text-[12px] text-muted-foreground uppercase tracking-wide">{{ __('Who paid') }}</p>
        <div class="flex items-center gap-3">
          <div class="w-11 h-11 rounded-full bg-secondary flex items-center justify-center text-xl">
            {{ $expense->paidBy?->avatar ?? '🙂' }}
          </div>
          <div>
            <p class="text-[16px] font-semibold text-foreground">{{ $expense->paidBy?->name ?? __('Someone') }}</p>
            <p class="text-[13px] text-muted-foreground">{{ __('Paid the full amount') }}</p>
          </div>
        </div>
      </section>

      <section class="apple-card p-5 space-y-4">
        <div class="flex items-center justify-between">
          <p class="text-[12px] text-muted-foreground uppercase tracking-wide">{{ __('Split') }}</p>
          <span class="text-[12px] font-medium text-primary">{{ ucfirst($expense->split_type) }}</span>
        </div>
        <div class="divide-y divide-border/40">
          @foreach ($rows as $row)
            @php
              $person = $group->members->firstWhere('id', $row['userId']);
            @endphp
            <div class="flex items-center justify-between gap-3 py-3 first:pt-0">
              <div class="flex items-center gap-2.5 min-w-0">
                <div class="w-9 h-9 rounded-full bg-secondary flex items-center justify-center text-base shrink-0">
                  {{ $person?->avatar ?? '🙂' }}
                </div>
                <span class="text-[14px] font-medium text-foreground truncate">{{ $person?->name ?? $row['userId'] }}</span>
              </div>
              <div class="text-right shrink-0">
                <p class="text-[14px] font-semibold text-foreground tabular-nums">
                  @php
                    $fmtRow = \App\Support\Money::formatConvertedWithOriginal((float) $row['amount'], $expense->currency ?: ($group->currency ?? 'USD'), $displayCurrency, $locale);
                  @endphp
                  {{ $fmtRow['primary'] }}
                </p>
                @if ($fmtRow['secondary'])
                  <p class="text-[11px] text-muted-foreground tabular-nums mt-0.5">
                    {{ $fmtRow['secondary'] }}
                  </p>
                @endif
                <p class="text-[12px] text-muted-foreground tabular-nums">{{ number_format((float) $row['pct'], 1) }}%</p>
              </div>
            </div>
          @endforeach
        </div>
      </section>
    </div>
  </div>
@endsection