<div class="agenda-medica-container">
	<div *ngIf="isLoading" class="loading-container">
		<mat-spinner diameter="40"></mat-spinner>
		<span class="loading-text">Cargando servicios...</span>
	</div>

	<div *ngIf="!isLoading && serviciosRaw.length === 0" class="no-data">
		<mat-icon>event_busy</mat-icon>
		<span>No hay servicios programados para esta fecha</span>
	</div>

	<div *ngIf="!isLoading && serviciosRaw.length > 0" class="resumen">
		<span class="resumen-text">
			<strong>{{ getTotalServicios() }}</strong> servicios programados |
			<strong>{{ operadores.length }}</strong> operadores
		</span>
	</div>

	<div *ngIf="!isLoading && operadores.length > 0" class="agenda-wrapper">
		<table class="agenda-table">
			<thead>
				<tr>
					<th class="hora-header">
						<mat-icon>schedule</mat-icon>
						Hora
					</th>
					<th *ngFor="let operador of operadores; trackBy: trackByOperador" class="operador-header">
						<mat-icon>person</mat-icon>
						<span>{{ operador }}</span>
					</th>
				</tr>
			</thead>
			<tbody>
				<tr *ngFor="let celda of horasDelDia; trackBy: trackByHora" class="hora-row">
					<td class="hora-cell">
						<span class="hora-text">{{ celda.horaFormateada }}</span>
					</td>

					<ng-container *ngFor="let operador of operadores; trackBy: trackByOperador">
						<!-- Si la celda está ocupada por un servicio anterior, no renderizar -->
						<ng-container *ngIf="!esCeldaOcupada(celda, operador)">
							<td class="servicio-cell"
								*ngIf="getServicio(celda, operador) as servicio; else celdaVacia"
								[attr.rowspan]="servicio.rowSpan"
								[style.background-color]="servicio.color_estatus + '20'">
								<div class="servicio-card" [style.border-left-color]="servicio.color_estatus">
									<div class="servicio-hora">
										<mat-icon>access_time</mat-icon>
										{{ servicio.hora_servicio }}
									</div>
									<div class="servicio-cliente">
										<mat-icon>business</mat-icon>
										{{ servicio.denominacion_cliente }}
									</div>
									<div class="servicio-duracion">
										<mat-icon>timelapse</mat-icon>
										{{ servicio.duracion_servicio }}
									</div>
									<div class="servicio-estatus">
										<span class="estatus-badge" [style.background-color]="servicio.color_estatus">
											{{ servicio.nombre_estatus }}
										</span>
									</div>
								</div>
							</td>
							<ng-template #celdaVacia>
								<td class="servicio-cell celda-vacia">
									<span class="disponible">Disponible</span>
								</td>
							</ng-template>
						</ng-container>
					</ng-container>
				</tr>
			</tbody>
		</table>
	</div>
</div>
