import {Component, Input, OnChanges, SimpleChanges} from '@angular/core';

interface ServicioAgenda {
	nombre_operador: string;
	hora_servicio: string;
	duracion_servicio: string;
	denominacion_cliente: string;
	start_day: string;
	end_day: string;
	color_estatus: string;
	nombre_estatus: string;
}

interface OperadorAgrupado {
	nombre: string;
	servicios: ServicioAgenda[];
	expanded: boolean;
}

@Component({
	selector: 'kt-por-operador',
	templateUrl: './por-operador.component.html',
	styleUrls: ['./por-operador.component.scss']
})
export class PorOperadorComponent implements OnChanges {

	@Input() serviciosRaw: ServicioAgenda[] = [];
	@Input() isLoading: boolean = false;

	operadoresAgrupados: OperadorAgrupado[] = [];

	constructor() {}

	ngOnChanges(changes: SimpleChanges): void {
		if (changes.serviciosRaw) {
			this.agruparPorOperador();
		}
	}

	agruparPorOperador(): void {
		const grupos: { [key: string]: ServicioAgenda[] } = {};

		this.serviciosRaw.forEach(servicio => {
			const operador = servicio.nombre_operador || 'Sin asignar';
			if (!grupos[operador]) {
				grupos[operador] = [];
			}
			grupos[operador].push(servicio);
		});

		this.operadoresAgrupados = Object.keys(grupos).map(nombre => ({
			nombre: nombre,
			servicios: grupos[nombre],
			expanded: true
		}));
	}

	getTotalServicios(): number {
		return this.serviciosRaw.length;
	}
}
