@extends('admin.shell')

@section('body')
  <div class="min-h-screen bg-[radial-gradient(circle_at_top_right,_rgba(245,158,11,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 flex flex-col gap-4 xl:flex-row xl:items-end xl:justify-between">
        <div>
          <a href="{{ route('admin.users') }}" class="text-sm font-medium text-primary">Back to users</a>
          <div class="mt-3 flex flex-wrap items-center gap-3">
            <h1 class="text-4xl font-semibold tracking-tight text-foreground">{{ $managedUser->profile?->display_name ?: $managedUser->name }}</h1>
            @if ($managedUser->isSuperAdmin())
              <span class="rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em] text-amber-700">Super admin</span>
            @endif
          </div>
          <p class="mt-2 text-sm text-muted-foreground">{{ $managedUser->email }}</p>
        </div>

        <div class="flex flex-wrap gap-2">
          <form method="POST" action="{{ route('admin.users.impersonate', $managedUser) }}">
            @csrf
            <button type="submit" class="rounded-full bg-sky-50 px-4 py-2.5 text-sm font-semibold text-sky-700">Impersonate account</button>
          </form>

          <form method="POST" action="{{ route('admin.users.super-admin', $managedUser) }}">
            @csrf
            @method('PATCH')
            <input type="hidden" name="is_super_admin" value="{{ $managedUser->isSuperAdmin() ? 0 : 1 }}">
            <button type="submit" class="rounded-full bg-secondary px-4 py-2.5 text-sm font-semibold text-foreground">{{ $managedUser->isSuperAdmin() ? 'Remove admin access' : 'Grant admin access' }}</button>
          </form>

          <form method="POST" action="{{ route('admin.users.destroy', $managedUser) }}" onsubmit="return confirm('Delete this user and their cascaded data?');">
            @csrf
            @method('DELETE')
            <button type="submit" class="rounded-full bg-rose-50 px-4 py-2.5 text-sm font-semibold text-rose-700">Delete user</button>
          </form>
        </div>
      </div>

      @if ($errors->any())
        <div class="mb-4 rounded-2xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">{{ $errors->first() }}</div>
      @endif

      <div class="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
        <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">Joined</p>
          <p class="mt-2 text-lg font-semibold text-foreground">{{ optional($managedUser->created_at)->toDayDateTimeString() ?: 'Unknown' }}</p>
        </div>
        <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">Profile</p>
          <p class="mt-2 text-lg font-semibold text-foreground">{{ $managedUser->profile?->display_name ?: 'Not set' }}</p>
          <p class="mt-1 text-sm text-muted-foreground">Locale {{ $managedUser->profile?->locale ?: 'en' }} · Currency {{ $managedUser->profile?->currency ?: 'USD' }}</p>
        </div>
        <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">Spaces</p>
          <p class="mt-2 text-lg font-semibold text-foreground">{{ $spaces->count() }}</p>
        </div>
        <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">Push devices</p>
          <p class="mt-2 text-lg font-semibold text-foreground">{{ $pushSubscriptions->count() }}</p>
        </div>
      </div>

      <div class="mt-8 grid gap-6 xl:grid-cols-2">
        <section class="apple-card rounded-[28px] p-6">
          <h2 class="text-xl font-semibold text-foreground">Spaces and personas</h2>
          <div class="mt-5 space-y-4">
            @forelse ($spaces 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">
                <p class="font-medium text-foreground">{{ $space->name }}</p>
                <p class="mt-1 break-all text-xs text-muted-foreground">{{ $space->id }}</p>
              </a>
            @empty
              <p class="text-sm text-muted-foreground">No spaces linked to this user yet.</p>
            @endforelse

            @forelse ($people as $person)
              <div class="rounded-2xl border border-border/60 bg-secondary/40 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' }} · Space {{ $person->space_id }}</p>
              </div>
            @empty
              <p class="text-sm text-muted-foreground">No person records attached to this user.</p>
            @endforelse
          </div>
        </section>

        <section class="apple-card rounded-[28px] p-6">
          <h2 class="text-xl font-semibold text-foreground">Connected records</h2>
          <div class="mt-5 grid gap-3 sm:grid-cols-2">
            @foreach ([
              ['label' => 'Groups', 'value' => $groups->count()],
              ['label' => 'Shared lists', 'value' => $sharedLists->count()],
              ['label' => 'Shared purchases', 'value' => $sharedPurchases->count()],
              ['label' => 'Expenses paid', 'value' => $expenses->count()],
              ['label' => 'Activities', 'value' => $activities->count()],
              ['label' => 'Invitations', 'value' => $invitations->count()],
            ] as $stat)
              <div class="rounded-2xl border border-border/60 bg-white/70 px-4 py-4">
                <p class="text-sm text-muted-foreground">{{ $stat['label'] }}</p>
                <p class="mt-2 text-2xl font-semibold text-foreground">{{ $stat['value'] }}</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, 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 · Space {{ $group->space_id }}</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 activity and billing</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
            @foreach ($invitations as $invitation)
              <div class="rounded-2xl border border-border/60 bg-white/70 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>
  </div>
@endsection