@extends('admin.shell')

@section('body')
  <div class="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(15,118,110,0.14),_transparent_40%),linear-gradient(180deg,_rgba(255,255,255,0.98),_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 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">Control center</h1>
          <p class="mt-2 max-w-2xl text-sm text-muted-foreground">Monitor the whole app, jump into users and spaces, and manage access from one place.</p>
        </div>

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

      <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
        @foreach ([
          ['label' => 'Users', 'value' => $stats['users'], 'tone' => 'from-sky-500/15 to-sky-500/5'],
          ['label' => 'Super admins', 'value' => $stats['super_admins'], 'tone' => 'from-amber-500/15 to-amber-500/5'],
          ['label' => 'Spaces', 'value' => $stats['spaces'], 'tone' => 'from-emerald-500/15 to-emerald-500/5'],
          ['label' => 'Expenses', 'value' => $stats['expenses'], 'tone' => 'from-rose-500/15 to-rose-500/5'],
          ['label' => 'Activities', 'value' => $stats['activities'], 'tone' => 'from-violet-500/15 to-violet-500/5'],
        ] as $card)
          <div class="apple-card rounded-[26px] border border-white/80 bg-gradient-to-br {{ $card['tone'] }} p-5">
            <p class="text-sm text-muted-foreground">{{ $card['label'] }}</p>
            <p class="mt-4 text-3xl font-semibold tracking-tight text-foreground">{{ number_format($card['value']) }}</p>
          </div>
        @endforeach
      </div>

      <div class="mt-4 grid gap-4 sm:grid-cols-2 xl:grid-cols-5">
        @foreach ([
          ['label' => 'People', 'value' => $stats['people']],
          ['label' => 'Groups', 'value' => $stats['groups']],
          ['label' => 'Shared lists', 'value' => $stats['shared_lists']],
          ['label' => 'Shared purchases', 'value' => $stats['shared_purchases']],
          ['label' => 'Invitations', 'value' => $stats['invitations']],
        ] as $item)
          <div class="rounded-3xl border border-border/70 bg-white/75 px-5 py-4 shadow-sm backdrop-blur">
            <p class="text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">{{ $item['label'] }}</p>
            <p class="mt-2 text-2xl font-semibold text-foreground">{{ number_format($item['value']) }}</p>
          </div>
        @endforeach
      </div>

      <div class="mt-8 grid gap-6 xl:grid-cols-[1.15fr_0.85fr]">
        <section class="apple-card rounded-[28px] p-6">
          <div class="mb-5 flex items-center justify-between">
            <div>
              <p class="section-header">Recent users</p>
              <h2 class="mt-2 text-xl font-semibold text-foreground">Newest accounts</h2>
            </div>
            <a href="{{ route('admin.users') }}" class="text-sm font-medium text-primary">Open users</a>
          </div>

          <div class="space-y-3">
            @foreach ($recentUsers as $user)
              <a href="{{ route('admin.users.show', $user) }}" class="flex items-center justify-between rounded-2xl border border-border/60 bg-white/70 px-4 py-3 transition hover:border-primary/30 hover:bg-primary-muted/50">
                <div class="min-w-0">
                  <div class="flex items-center gap-2">
                    <p class="truncate font-medium text-foreground">{{ $user->profile?->display_name ?: $user->name }}</p>
                    @if ($user->isSuperAdmin())
                      <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="truncate text-sm text-muted-foreground">{{ $user->email }}</p>
                </div>
                <p class="shrink-0 text-xs text-muted-foreground">{{ optional($user->created_at)->diffForHumans() }}</p>
              </a>
            @endforeach
          </div>
        </section>

        <div class="space-y-6">
          <section class="apple-card rounded-[28px] p-6">
            <div class="mb-5 flex items-center justify-between">
              <div>
                <p class="section-header">Recent spaces</p>
                <h2 class="mt-2 text-xl font-semibold text-foreground">Latest workspaces</h2>
              </div>
              <a href="{{ route('admin.spaces') }}" class="text-sm font-medium text-primary">Open spaces</a>
            </div>

            <div class="space-y-3">
              @foreach ($recentSpaces as $space)
                <a href="{{ route('admin.spaces.show', $space->id) }}" class="block rounded-2xl border border-border/60 bg-white/70 px-4 py-3 transition hover:border-primary/30 hover:bg-primary-muted/50">
                  <p class="font-medium text-foreground">{{ $space->name }}</p>
                  <p class="mt-1 break-all text-xs text-muted-foreground">{{ $space->id }}</p>
                </a>
              @endforeach
            </div>
          </section>

          <section class="apple-card rounded-[28px] p-6">
            <p class="section-header">Live feed</p>
            <h2 class="mt-2 text-xl font-semibold text-foreground">Recent activity</h2>

            <div class="mt-5 space-y-3">
              @foreach ($recentActivities as $activity)
                <div class="rounded-2xl border border-border/60 bg-white/70 px-4 py-3">
                  <p class="text-sm font-medium text-foreground">{{ $activity->description }}</p>
                  <p class="mt-1 text-xs text-muted-foreground">
                    {{ $activity->activity_type }} · {{ optional($activity->activity_at)->diffForHumans() }}
                  </p>
                </div>
              @endforeach
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
@endsection