@extends('admin.shell')

@section('body')
  <div class="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(14,165,233,0.12),_transparent_38%),linear-gradient(180deg,_rgba(255,255,255,1),_rgba(248,250,252,1))]">
    <div class="mx-auto max-w-7xl px-4 pb-10 pt-16 md:px-6 lg:px-8 lg:pt-10">
      <div class="mb-8">
        <a href="{{ route('admin.spaces') }}" class="text-sm font-medium text-primary">Back to spaces</a>
        <h1 class="mt-3 text-4xl font-semibold tracking-tight text-foreground">{{ $space->name }}</h1>
        <p class="mt-2 break-all text-sm text-muted-foreground">{{ $space->id }}</p>
        <p class="mt-1 text-sm text-muted-foreground">Owner {{ $creator?->email ?? 'Unknown' }} · Created {{ optional($space->created_at)->toDayDateTimeString() }}</p>
      </div>

      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-5">
        @foreach ([
          ['label' => 'Members', 'value' => $members->count()],
          ['label' => 'People', 'value' => $people->count()],
          ['label' => 'Groups', 'value' => $groups->count()],
          ['label' => 'Shared lists', 'value' => $sharedLists->count()],
          ['label' => 'Shared purchases', 'value' => $sharedPurchases->count()],
        ] as $stat)
          <div class="rounded-3xl border border-border/70 bg-white/80 p-5 shadow-sm">
            <p class="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">{{ $stat['label'] }}</p>
            <p class="mt-2 text-2xl font-semibold text-foreground">{{ $stat['value'] }}</p>
          </div>
        @endforeach
      </div>

      <div class="mt-6 grid gap-6 xl:grid-cols-2">
        <section class="apple-card rounded-[28px] p-6">
          <h2 class="text-xl font-semibold text-foreground">Members</h2>
          <div class="mt-5 space-y-3">
            @foreach ($members as $member)
              <div class="rounded-2xl border border-border/60 bg-white/70 px-4 py-3">
                <div class="flex items-center gap-2">
                  <p class="font-medium text-foreground">{{ $member->display_name ?: $member->name }}</p>
                  @if ($member->is_super_admin)
                    <span class="rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide text-amber-700">Admin</span>
                  @endif
                </div>
                <p class="mt-1 text-sm text-muted-foreground">{{ $member->email }}</p>
                <p class="mt-1 text-xs text-muted-foreground">{{ $member->role }} · Joined {{ \Illuminate\Support\Carbon::parse($member->created_at)->toDayDateTimeString() }}</p>
              </div>
            @endforeach
          </div>
        </section>

        <section class="apple-card rounded-[28px] p-6">
          <h2 class="text-xl font-semibold text-foreground">People and invitations</h2>
          <div class="mt-5 space-y-3">
            @foreach ($people as $person)
              <div class="rounded-2xl border border-border/60 bg-white/70 px-4 py-3">
                <p class="font-medium text-foreground">{{ $person->avatar }} {{ $person->name ?: 'Unnamed person' }}</p>
                <p class="mt-1 text-xs text-muted-foreground">{{ $person->email ?: 'No email' }} · Auth user {{ $person->auth_user_id ?: 'none' }}</p>
              </div>
            @endforeach
            @foreach ($invitations as $invitation)
              <div class="rounded-2xl border border-border/60 bg-secondary/40 px-4 py-3">
                <p class="font-medium text-foreground">{{ $invitation->invited_email ?: $invitation->invited_name }}</p>
                <p class="mt-1 text-xs text-muted-foreground">Invitation · {{ $invitation->status }} · Group {{ $invitation->group_id }}</p>
              </div>
            @endforeach
          </div>
        </section>
      </div>

      <div class="mt-6 grid gap-6 xl:grid-cols-2">
        <section class="apple-card rounded-[28px] p-6">
          <h2 class="text-xl font-semibold text-foreground">Groups, shared lists, and purchases</h2>
          <div class="mt-5 space-y-3">
            @foreach ($groups as $group)
              <div class="rounded-2xl border border-border/60 bg-white/70 px-4 py-3">
                <p class="font-medium text-foreground">{{ $group->emoji }} {{ $group->name }}</p>
                <p class="mt-1 text-xs text-muted-foreground">Group · {{ $group->members_count }} members · {{ $group->currency }}</p>
              </div>
            @endforeach
            @foreach ($sharedLists as $list)
              <div class="rounded-2xl border border-border/60 bg-white/70 px-4 py-3">
                <p class="font-medium text-foreground">{{ $list->emoji }} {{ $list->name }}</p>
                <p class="mt-1 text-xs text-muted-foreground">Shared list · {{ $list->members_count }} members · {{ $list->items_count }} items</p>
              </div>
            @endforeach
            @foreach ($sharedPurchases as $purchase)
              <div class="rounded-2xl border border-border/60 bg-white/70 px-4 py-3">
                <p class="font-medium text-foreground">{{ $purchase->emoji }} {{ $purchase->name }}</p>
                <p class="mt-1 text-xs text-muted-foreground">Shared purchase · {{ $purchase->status }} · {{ $purchase->members_count }} members</p>
              </div>
            @endforeach
          </div>
        </section>

        <section class="apple-card rounded-[28px] p-6">
          <h2 class="text-xl font-semibold text-foreground">Recent expenses and activity</h2>
          <div class="mt-5 space-y-3">
            @foreach ($expenses as $expense)
              <div class="rounded-2xl border border-border/60 bg-white/70 px-4 py-3">
                <p class="font-medium text-foreground">{{ $expense->description }}</p>
                <p class="mt-1 text-xs text-muted-foreground">{{ number_format((float) $expense->amount, 2) }} {{ $expense->currency }} · {{ optional($expense->expense_date)->toDateString() }}</p>
              </div>
            @endforeach
            @foreach ($activities as $activity)
              <div class="rounded-2xl border border-border/60 bg-white/70 px-4 py-3">
                <p class="font-medium text-foreground">{{ $activity->description }}</p>
                <p class="mt-1 text-xs text-muted-foreground">{{ $activity->activity_type }} · {{ optional($activity->activity_at)->toDayDateTimeString() }}</p>
              </div>
            @endforeach
          </div>
        </section>
      </div>
    </div>
  </div>
@endsection