@if (!selectedGroupId()) {
  <div class="p-4 flex flex-col h-full text-white">
    <header class="mb-4">
      <div class="flex justify-between items-center">
        <div>
          <h1 class="text-3xl font-bold">I Miei Gruppi</h1>
          <p class="text-slate-400 mt-1">Gestisci i tuoi gruppi o creane di nuovi.</p>
        </div>
        <button (click)="toggleCreateMode()" class="bg-cyan-500 hover:bg-cyan-600 text-white font-bold p-2 rounded-full transition-colors duration-300 shadow-lg">
          @if (isCreating()) {
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          } @else {
            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
            </svg>
          }
        </button>
      </div>
    </header>

    @if (isCreating()) {
      <div class="bg-slate-800 p-4 rounded-lg border border-slate-700 mb-4 animate-fade-in">
        <h2 class="text-xl font-bold text-cyan-400 mb-4">Nuovo Gruppo</h2>
        <form (submit)="$event.preventDefault(); createGroup()">
          <div class="mb-4">
            <label for="groupName" class="block text-sm font-medium text-slate-300 mb-2">Nome Gruppo</label>
            <input type="text" id="groupName" name="groupName"
                  [value]="newGroupName()"
                  (input)="onGroupNameChange($event)"
                  required
                  class="w-full bg-slate-700 border border-slate-600 rounded-md py-2 px-3 text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500"
                  placeholder="Es. Colleghi d'ufficio">
          </div>

          <div class="mb-4">
            <label class="block text-sm font-medium text-slate-300 mb-2">Membri (Amici)</label>
            <div class="max-h-40 overflow-y-auto space-y-2 bg-slate-700 p-3 rounded-md border border-slate-600">
              @for (friend of friends(); track friend.id) {
                <label class="flex items-center space-x-3 cursor-pointer p-2 rounded-md hover:bg-slate-600 transition-colors">
                  <input type="checkbox"
                        (change)="onFriendSelect(friend.id, $event)"
                        [checked]="selectedFriendIds()[friend.id] || false"
                        class="h-5 w-5 rounded bg-slate-800 border-slate-500 text-cyan-500 focus:ring-cyan-600 cursor-pointer">
                  <img class="w-8 h-8 rounded-full" [src]="friend.avatarUrl" [alt]="friend.name">
                  <span class="font-medium text-slate-200">{{ friend.name }}</span>
                </label>
              }
            </div>
          </div>

          <div class="flex justify-end space-x-3 mt-4">
            <button type="button" (click)="toggleCreateMode()" class="px-4 py-2 rounded-md bg-slate-600 hover:bg-slate-500 text-white font-semibold transition-colors">Annulla</button>
            <button type="submit"
                    [disabled]="!isFormValid()"
                    [class]="'px-4 py-2 rounded-md font-semibold transition-colors ' + (isFormValid() ? 'bg-cyan-500 hover:bg-cyan-600 text-white' : 'bg-slate-700 text-slate-500 cursor-not-allowed')">
              Crea Gruppo
            </button>
          </div>
        </form>
      </div>
    }

    <main class="flex-grow overflow-y-auto space-y-4 pr-2 -mr-2">
      @for (group of groups(); track group.id) {
        <div (click)="selectGroup(group.id)" class="bg-slate-800 p-4 rounded-lg border border-slate-700 hover:border-cyan-500 transition-colors duration-300 cursor-pointer">
          <div class="flex justify-between items-center mb-3">
            <h3 class="text-xl font-bold text-cyan-400">{{ group.name }}</h3>
            <span class="text-sm font-semibold bg-slate-700 text-slate-300 px-2 py-1 rounded-md">{{ group.members.length }} Membri</span>
          </div>
          <div class="flex -space-x-2">
            @for(member of group.members; track member.id) {
              <img class="inline-block h-10 w-10 rounded-full ring-2 ring-slate-900" [src]="member.avatarUrl" [alt]="member.name" [title]="member.name">
            }
          </div>
        </div>
      }
      @empty {
        @if (!isCreating()) {
          <div class="text-center text-slate-500 mt-8 flex flex-col items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mb-4 text-slate-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
                <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.653-.124-1.282-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.653.124-1.282.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
            </svg>
            <p>Non fai ancora parte di nessun gruppo.</p>
            <p class="mt-1">Crea un gruppo per iniziare a scommettere con i tuoi amici!</p>
          </div>
        }
      }
    </main>
  </div>
} @else {
  <app-group-detail [groupId]="selectedGroupId()!" (goBack)="deselectGroup()"></app-group-detail>
}