<div class="page-container animate-fade-in split-view" cdkDropListGroup>
  
  <div class="main-workspace">
    <div class="page-header">
      <h1>Manage Groups</h1>
      <p class="page-subtitle">Create organizational groups and effortlessly drag-and-drop candidates into them.</p>
    </div>

    @if (error()) {
      <div class="alert alert-error"><span class="material-symbols-rounded">error</span> {{ error() }}</div>
    }
    @if (success()) {
      <div class="alert alert-success"><span class="material-symbols-rounded">check_circle</span> {{ success() }}</div>
    }

    <!-- Create Group Area -->
    <div class="card card-padding form-card" style="margin-bottom: 30px;">
      <h2 class="section-title" style="margin-top: 0; margin-bottom: 16px;">Create New Group</h2>
      <form (ngSubmit)="createGroup()" class="group-form">
        <div class="form-group row-align">
          <div class="input-container">
            <span class="material-symbols-rounded block-icon">group_add</span>
            <input class="form-input" [ngModel]="newGroupName()" (ngModelChange)="newGroupName.set($event)" name="groupName" placeholder="e.g., Summer Interns 2026">
          </div>
          
          <button type="submit" class="btn btn-primary" [disabled]="loading() || !newGroupName().trim()">
            @if (loading()) { <span class="spinner"></span> } @else { <span class="material-symbols-rounded">add</span> Add Group }
          </button>
        </div>
      </form>
    </div>

    <h2 class="section-title">Your Groups</h2>
    @if (loadingGroups()) {
      <div class="loading-state"><div class="loader"></div></div>
    } @else if (groups().length === 0) {
      <div class="empty-state">
        <span class="material-symbols-rounded empty-icon">group_off</span>
        <h3>No groups available</h3>
        <p>Create your first grouping tier up above</p>
      </div>
    } @else {
      <!-- Outer wrapper handles the drag contexts collectively -->
      <div class="groups-grid">
        @for (group of groups(); track group) {
          <div class="group-lane card" cdkDropList [cdkDropListData]="group" (cdkDropListDropped)="onDrop($event)" (click)="toggleGroupExpansion(group)">
            
            <div class="group-lane-header">
              <div class="group-header-info">
                @if (editingGroup() === group) {
                  <input type="text" class="form-input form-input-small" [ngModel]="editName()" (ngModelChange)="editName.set($event)" autofocus>
                } @else {
                  <h4 class="lane-title"><span class="material-symbols-rounded">workspaces</span> {{ group }}</h4>
                  <span class="member-count">{{ getStudentsInGroup(group).length }} Members</span>
                }
              </div>
              <div class="group-actions" (click)="$event.stopPropagation()">
                @if (editingGroup() === group) {
                  <button class="action-btn text-success" (click)="saveEdit(group)" title="Save"><span class="material-symbols-rounded">check</span></button>
                  <button class="action-btn text-danger" (click)="cancelEdit()" title="Cancel"><span class="material-symbols-rounded">close</span></button>
                } @else {
                  <button class="action-btn" (click)="startEdit(group)" title="Edit"><span class="material-symbols-rounded">edit</span></button>
                  <button class="action-btn text-danger" (click)="deleteGroup(group)" title="Delete"><span class="material-symbols-rounded">delete</span></button>
                }
              </div>
            </div>

            <!-- Drop Zone Body (Displayed on Expansion) -->
            @if (expandedGroup() === group) {
              <div class="group-lane-body" [class.empty-body]="getStudentsInGroup(group).length === 0" (click)="$event.stopPropagation()">
                @if (getStudentsInGroup(group).length === 0) {
                   <div class="drop-placeholder">No candidates found in {{group}}</div>
                }
                
                @for (student of getStudentsInGroup(group); track student._id) {
                  <div class="student-pill card" cdkDrag [cdkDragData]="student">
                     <div class="pill-avatar">{{ student.name.charAt(0).toUpperCase() }}</div>
                     <div class="pill-info">
                        <span class="pill-name">{{ student.name }}</span>
                     </div>
                     <button class="action-btn text-danger" title="Remove" (click)="removeFromGroup(student)">
                       <span class="material-symbols-rounded" style="font-size: 16px;">close</span>
                     </button>
                     <div class="custom-drag-placeholder" *cdkDragPlaceholder></div>
                  </div>
                }
              </div>
            }
          </div>
        }
      </div>
    }
  </div>

  <!-- Sidebar: Unassigned Candidates -->
  <aside class="unassigned-sidebar card">
    <div class="sidebar-header">
      <div class="sidebar-title">
         <span class="material-symbols-rounded">person_search</span>
         <h2>Unassigned Candidates</h2>
      </div>
      <div class="sidebar-badge">{{ unassignedStudents().length }}</div>
    </div>
    
    <div class="unassigned-list" cdkDropList [cdkDropListData]="'General'" (cdkDropListDropped)="onDrop($event)">
       @if (unassignedStudents().length === 0) {
          <div class="empty-unassigned">
             <span class="material-symbols-rounded">done_all</span>
             <p>All candidates are matched to groups!</p>
          </div>
       }
       @for (student of unassignedStudents(); track student._id) {
          <div class="unassigned-card" cdkDrag [cdkDragData]="student">
             <div class="unassigned-avatar">{{ student.name.charAt(0).toUpperCase() }}</div>
             <div class="unassigned-details">
                <h4>{{ student.name }}</h4>
                <p>{{ student.email }}</p>
             </div>
             <span class="material-symbols-rounded drag-handle">drag_indicator</span>
             <div class="custom-drag-placeholder" *cdkDragPlaceholder></div>
          </div>
       }
    </div>
  </aside>

</div>
