@extends('admin.shell')

@section('body')
  <div class="min-h-screen bg-[linear-gradient(180deg,_rgba(255,255,255,1),_rgba(241,245,249,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 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
        <div>
          <p class="section-header">Super Admin</p>
          <h1 class="mt-2 text-4xl font-semibold tracking-tight text-foreground">Spaces</h1>
          <p class="mt-2 text-sm text-muted-foreground">Inspect the containers that hold group data, memberships, purchases, expenses, and invitations.</p>
        </div>

        <nav class="flex flex-wrap gap-2">
          <a href="{{ route('admin.dashboard') }}" class="rounded-full bg-secondary px-4 py-2 text-sm font-semibold text-foreground">Overview</a>
          <a href="{{ route('admin.users') }}" class="rounded-full bg-secondary px-4 py-2 text-sm font-semibold text-foreground">Users</a>
          <a href="{{ route('admin.spaces') }}" class="rounded-full bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground">Spaces</a>
        </nav>
      </div>

      <form method="GET" action="{{ route('admin.spaces') }}" class="apple-card mb-6 flex flex-col gap-3 rounded-[28px] p-4 md:flex-row">
        <input
          type="search"
          name="search"
          value="{{ $search }}"
          placeholder="Search by space name or id"
          class="h-12 flex-1 rounded-2xl border border-border bg-white px-4 text-sm text-foreground outline-none ring-0 transition focus:border-primary"
        >
        <button type="submit" class="h-12 rounded-2xl bg-primary px-5 text-sm font-semibold text-primary-foreground">Search</button>
      </form>

      <div class="space-y-4">
        @foreach ($spaces as $space)
          <a href="{{ route('admin.spaces.show', $space->id) }}" class="block apple-card rounded-[28px] p-5 transition hover:border-primary/20 hover:bg-primary-muted/20">
            <div class="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
              <div class="min-w-0">
                <p class="text-xl font-semibold text-foreground">{{ $space->name }}</p>
                <p class="mt-1 break-all text-xs text-muted-foreground">{{ $space->id }}</p>
                <p class="mt-2 text-sm text-muted-foreground">
                  Owner {{ $creators[$space->created_by]->email ?? 'Unknown' }} · Created {{ optional($space->created_at)->toDayDateTimeString() }}
                </p>
              </div>

              <div class="grid grid-cols-2 gap-3 sm:grid-cols-5">
                @foreach ([
                  ['label' => 'Members', 'value' => (int) ($memberCounts[$space->id] ?? 0)],
                  ['label' => 'Groups', 'value' => (int) ($groupCounts[$space->id] ?? 0)],
                  ['label' => 'Lists', 'value' => (int) ($listCounts[$space->id] ?? 0)],
                  ['label' => 'Purchases', 'value' => (int) ($purchaseCounts[$space->id] ?? 0)],
                  ['label' => 'Expenses', 'value' => (int) ($expenseCounts[$space->id] ?? 0)],
                ] as $stat)
                  <div class="rounded-2xl bg-secondary/70 px-3 py-3 text-center">
                    <p class="text-[11px] uppercase tracking-wide text-muted-foreground">{{ $stat['label'] }}</p>
                    <p class="mt-1 text-lg font-semibold text-foreground">{{ $stat['value'] }}</p>
                  </div>
                @endforeach
              </div>
            </div>
          </a>
        @endforeach
      </div>

      <div class="mt-6">
        {{ $spaces->links() }}
      </div>
    </div>
  </div>
@endsection