@extends('app.shell')

@section('body')
  @php
    /** @var \App\Models\Group $group */
    /** @var \Illuminate\Support\Collection<int, \App\Models\Person> $notInGroup */
    /** @var \Illuminate\Support\Collection<int, \App\Models\GroupInvitation> $invitations */
    /** @var \App\Models\Person $mePerson */
  @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">
      <div class="flex items-center justify-between h-11 mb-2">
        <button type="button" onclick="window.WeShareNav?.back?.('/groups')" class="tap-target w-9 h-9 -ml-1 rounded-full flex items-center justify-center" aria-label="{{ __('Back') }}">
          <x-lucide-arrow-left class="w-[22px] h-[22px] text-primary" />
        </button>
        <h1 class="text-[17px] font-semibold text-foreground">{{ __('Members') }}</h1>
        <div class="w-9"></div>
      </div>

      <div class="apple-card p-5 text-center">
        <p class="text-[13px] mb-1 text-muted-foreground">
          {{ $group->emoji }} {{ $group->name }}
        </p>
        <p class="text-[15px] text-foreground">
          {{ __('Manage your group, members and invitations.') }}
        </p>
      </div>

      <section>
        <p class="section-header mb-3 px-1">{{ __('Group settings') }}</p>
        <form method="POST" action="{{ route('app.group.update', ['id' => $group->id]) }}" class="apple-card p-4 space-y-3">
          @csrf
          <div class="grid grid-cols-[72px_1fr] gap-3 items-center">
            <input
              type="text"
              name="emoji"
              value="{{ $group->emoji }}"
              class="w-[72px] text-center apple-card-inset px-3 py-3 text-[18px] text-foreground outline-none focus:ring-2 focus:ring-primary/15 rounded-2xl"
              maxlength="8"
              required
            />
            <input
              type="text"
              name="name"
              value="{{ $group->name }}"
              placeholder="{{ __('Group name') }}"
              class="w-full apple-card-inset px-4 py-3 text-[15px] text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-2 focus:ring-primary/15 rounded-2xl"
              required
            />
          </div>

          <div class="grid grid-cols-2 gap-2.5">
            <select name="type" class="apple-card-inset px-4 py-3 text-[14px] text-foreground outline-none focus:ring-2 focus:ring-primary/15 rounded-2xl" required>
              <option value="home" {{ $group->type === 'home' ? 'selected' : '' }}>{{ __('Home') }}</option>
              <option value="trip" {{ $group->type === 'trip' ? 'selected' : '' }}>{{ __('Trip') }}</option>
              <option value="event" {{ $group->type === 'event' ? 'selected' : '' }}>{{ __('Event') }}</option>
            </select>
            <select name="currency" class="apple-card-inset px-4 py-3 text-[14px] text-foreground outline-none focus:ring-2 focus:ring-primary/15 rounded-2xl" required>
              <option value="USD" {{ ($group->currency ?? 'USD') === 'USD' ? 'selected' : '' }}>USD</option>
              <option value="BRL" {{ ($group->currency ?? 'USD') === 'BRL' ? 'selected' : '' }}>BRL</option>
              <option value="EUR" {{ ($group->currency ?? 'USD') === 'EUR' ? 'selected' : '' }}>EUR</option>
            </select>
          </div>

          <button
            type="submit"
            class="w-full py-3.5 rounded-2xl bg-primary text-primary-foreground text-[15px] font-semibold active:scale-[0.98] transition-transform"
          >
            {{ __('Save') }}
          </button>
        </form>
      </section>

      <section>
        <p class="section-header mb-3 px-1">{{ __('Current members') }}</p>
        <div class="apple-card divide-y divide-border/40">
          @foreach ($group->members as $m)
            <div class="px-4 py-3 flex items-center justify-between gap-3">
              <div class="flex items-center gap-3 min-w-0">
                <div class="w-10 h-10 rounded-full flex items-center justify-center text-lg shrink-0 bg-secondary">
                  {{ $m->avatar }}
                </div>
                <div class="min-w-0">
                  <p class="text-[14px] font-medium truncate text-foreground">{{ $m->name }}</p>
                  <p class="text-[12px] truncate text-muted-foreground">{{ $m->email }}</p>
                </div>
              </div>

              @if ($group->members->count() > 1)
                <form method="POST" action="{{ route('app.group.members.remove', ['id' => $group->id, 'personId' => $m->id]) }}">
                  @csrf
                  <button
                    type="submit"
                    class="tap-target w-9 h-9 rounded-full bg-secondary/80 flex items-center justify-center text-muted-foreground hover:text-foreground"
                    aria-label="{{ __('Remove') }}"
                    @if ((string) $m->id === (string) $mePerson->id) title="{{ __('Leave group') }}" @endif
                  >
                    <x-lucide-user-minus class="w-5 h-5" />
                  </button>
                </form>
              @endif
            </div>
          @endforeach
        </div>
      </section>

      <section>
        <p class="section-header mb-3 px-1">{{ __('Invite by email') }}</p>

        <form method="POST" action="{{ route('app.group.members.add', ['id' => $group->id]) }}" class="space-y-2.5">
          @csrf
          <input type="hidden" name="resplit" value="1" />
          <div class="grid grid-cols-[1fr_86px] gap-2">
            <input
              type="email"
              name="invite_email"
              placeholder="{{ __('name@example.com') }}"
              class="min-w-0 apple-card-inset px-4 py-3.5 text-[15px] text-foreground placeholder:text-muted-foreground/50 outline-none focus:ring-2 focus:ring-primary/15 rounded-2xl"
              required
            />
            <input
              type="text"
              name="invite_avatar"
              placeholder="🙂"
              class="w-full text-center apple-card-inset px-3 py-3.5 text-[16px] text-foreground outline-none focus:ring-2 focus:ring-primary/15 rounded-2xl"
              maxlength="8"
            />
          </div>
          <button
            type="submit"
            class="w-full px-4 py-3.5 rounded-2xl text-[15px] font-semibold bg-primary text-primary-foreground active:scale-[0.98] transition-transform"
          >
            {{ __('Invite') }}
          </button>
        </form>

        <label class="mt-3 px-1 flex items-center gap-2 text-[13px] select-none text-muted-foreground">
          <input type="checkbox" checked class="accent-primary" disabled />
          {{ __('Re-split past equal expenses after adding someone') }}
        </label>
      </section>

      <section>
        <p class="section-header mb-3 px-1">{{ __('Invitations') }}</p>
        <div class="apple-card divide-y divide-border/40">
          @php $pending = ($invitations ?? collect())->where('status', 'pending')->values(); @endphp
          @if ($pending->count() === 0)
            <p class="px-4 py-6 text-center text-[14px] text-muted-foreground">{{ __('No pending invitations.') }}</p>
          @else
            @foreach ($pending as $inv)
              <div class="px-4 py-3 flex items-center justify-between gap-3">
                <div class="min-w-0">
                  <p class="text-[14px] font-medium text-foreground truncate">{{ $inv->invited_email }}</p>
                  <p class="text-[12px] text-muted-foreground mt-0.5">
                    {{ __('Pending') }} · {{ optional($inv->created_at)->format('M j') }}
                  </p>
                </div>
                <form method="POST" action="{{ route('app.group.invitations.revoke', ['id' => $group->id, 'invitationId' => $inv->id]) }}">
                  @csrf
                  <button type="submit" class="tap-target w-9 h-9 rounded-full bg-secondary/80 flex items-center justify-center text-muted-foreground hover:text-foreground" aria-label="{{ __('Revoke') }}">
                    <x-lucide-x class="w-5 h-5" />
                  </button>
                </form>
              </div>
            @endforeach
          @endif
        </div>
      </section>

      <section>
        <p class="section-header mb-3 px-1">{{ __('From contacts') }}</p>
        <div class="apple-card divide-y divide-border/40">
          @if ($notInGroup->count() === 0)
            <p class="px-4 py-6 text-center text-[14px] text-muted-foreground">{{ __('Everyone is already in this group.') }}</p>
          @else
            @foreach ($notInGroup as $u)
              <div class="px-4 py-3 flex items-center justify-between gap-3">
                <div class="flex items-center gap-3 min-w-0">
                  <div class="w-10 h-10 rounded-full flex items-center justify-center text-lg shrink-0 bg-secondary">
                    {{ $u->avatar }}
                  </div>
                  <div class="min-w-0">
                    <p class="text-[14px] font-medium truncate text-foreground">
                      {{ $u->name }}
                    </p>
                    <p class="text-[12px] truncate text-muted-foreground">{{ $u->email }}</p>
                  </div>
                </div>

                <form method="POST" action="{{ route('app.group.members.add', ['id' => $group->id]) }}">
                  @csrf
                  <input type="hidden" name="person_id" value="{{ $u->id }}" />
                  <input type="hidden" name="resplit" value="1" />
                  <button
                    type="submit"
                    class="shrink-0 tap-target flex items-center gap-1.5 px-3 py-2 rounded-full text-[13px] font-semibold bg-primary-muted text-primary"
                  >
                    <x-lucide-user-plus class="w-4 h-4" />
                    {{ __('Add') }}
                  </button>
                </form>
              </div>
            @endforeach
          @endif
        </div>
      </section>
    </div>
  </div>
@endsection