<div class="timeline-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>{{ getOperadores().length }}</strong> operadores
		</span>
	</div>

	<div *ngIf="!isLoading && serviciosRaw.length > 0" class="timeline-wrapper">
		<!-- Header con horas -->
		<div class="timeline-header">
			<div class="operador-label-header">Operador</div>
			<div class="horas-container">
				<div class="hora-mark" *ngFor="let hora of horasDelDia">
					<span>{{ hora }}</span>
				</div>
			</div>
		</div>

		<!-- Filas por operador -->
		<div class="timeline-body">
			<div class="timeline-row" *ngFor="let operador of getOperadores()">
				<div class="operador-label">
					<mat-icon>person</mat-icon>
					<span>{{ operador }}</span>
				</div>
				<div class="timeline-track">
					<!-- Lineas de hora -->
					<div class="hora-line" *ngFor="let hora of horasDelDia; let i = index"
						 [style.left.%]="(i / (horasDelDia.length - 1)) * 100">
					</div>

					<!-- Servicios -->
					<div class="servicio-block"
						 *ngFor="let servicio of getServiciosPorOperador(operador)"
						 [style.left.%]="servicio.leftPosition"
						 [style.width.%]="servicio.width"
						 [style.background-color]="servicio.color_estatus"
						 [matTooltip]="servicio.hora_servicio + ' - ' + servicio.denominacion_cliente + ' (' + servicio.duracion_servicio + ')'">
						<div class="servicio-content">
							<span class="cliente-nombre">{{ servicio.denominacion_cliente }}</span>
							<span class="servicio-hora">{{ servicio.hora_servicio }}</span>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- Leyenda -->
		<div class="timeline-legend">
			<div class="legend-item" *ngFor="let servicio of serviciosRaw | slice:0:5">
				<span class="legend-color" [style.background-color]="servicio.color_estatus"></span>
				<span class="legend-text">{{ servicio.nombre_estatus }}</span>
			</div>
		</div>
	</div>
</div>
