import { createApp, reactive } from 'https://unpkg.com/petite-vue?module'

interface Periodo {
    created_at: Date;
    estado_id: number;
    id_periodo_sgu: number;
    nivel: string;
    nivel_id: number | '';
    periodo_clave: string;
    periodo_fecha_fin: Date;
    periodo_fecha_inicio: Date;
    periodo_id: number;
    periodo_nombre: string;
}

interface Nivel {
    nivel_id: number;
    nivel_nombre: string;
}

const app = createApp({
    periodos: [] as Array<Periodo>,
    niveles: [] as Array<Nivel>,
    messages: [] as Array<{ title: string, text: string, type: string, timestamp: string }>,

    addMessage(title: string, text: string, type: string) {
        this.messages.push({ title, text, type, timestamp: new Date() });
    },

    async sendRequest(action: string, periodo_id: number, data: any) {
        const response = await fetch('action/periodos.php', {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                action: action,
                periodo_id: periodo_id,
                ...data
            })
        })
        return await response.json()
    },

    async changeNivel(periodo: Periodo, nivel_id: number) {
        if (periodo.nivel_id === nivel_id) return

        const result = await this.sendRequest('changeNivel', periodo.periodo_id, { nivel_id: nivel_id })
        if (result.success) {
            this.addMessage('Nivel cambiado', `El nivel del periodo ${periodo.periodo_nombre} ha sido cambiado a ${this.niveles.find((nivel: Nivel) => nivel.nivel_id === nivel_id)?.nivel_nombre}`, 'success')
            periodo.nivel_id = nivel_id
            periodo.nivel = this.niveles.find((nivel: Nivel) => nivel.nivel_id === nivel_id)?.nivel_nombre || ''
        } else {
            this.addMessage('Error al cambiar nivel', `No se pudo cambiar el nivel del periodo ${periodo.periodo_nombre}`, 'danger')
        }
    },

    async changeFechaInicio(periodo: Periodo, fecha_inicio: Date) {
        const result = await this.sendRequest('changeFechaInicio', periodo.periodo_id, { periodo_fecha_inicio: fecha_inicio })
        if (result.success) {
            this.addMessage('Fecha de inicio cambiada', `La fecha de inicio del periodo ${periodo.periodo_nombre} ha sido cambiada a ${fecha_inicio}`, 'success')

            periodo.periodo_fecha_inicio = fecha_inicio
        } else {
            this.addMessage('Error al cambiar fecha de inicio', `No se pudo cambiar la fecha de inicio del periodo ${periodo.periodo_nombre}`, 'danger')
        }
    },

    async changeFechaFin(periodo: Periodo, fecha_fin: Date) {
        const result = await this.sendRequest('changeFechaFin', periodo.periodo_id, { periodo_fecha_fin: fecha_fin })
        if (result.success) {
            this.addMessage('Fecha de fin cambiada', `La fecha de fin del periodo ${periodo.periodo_nombre} ha sido cambiada a ${fecha_fin}`, 'success')
            periodo.periodo_fecha_fin = fecha_fin
        } else {
            this.addMessage('Error al cambiar fecha de fin', `No se pudo cambiar la fecha de fin del periodo ${periodo.periodo_nombre}`, 'danger')
        }
    },


    async updatePeriodo(periodo: Periodo) {
        const result = await this.sendRequest('updatePeriodo', periodo.periodo_id, {
            periodo_nombre: periodo.periodo_nombre,
            id_periodo_sgu: periodo.id_periodo_sgu,
            periodo_clave: periodo.periodo_clave,
        })
        if (result.success) {
            this.addMessage('Periodo actualizado', `El periodo ${periodo.periodo_nombre} ha sido actualizado`, 'success')
        } else {
            this.addMessage('Error al actualizar periodo', `No se pudo actualizar el periodo ${periodo.periodo_nombre}`, 'danger')
        }
    },


    async createPeriodo(newPeriodo: Periodo) {

        if (newPeriodo.periodo_nombre === null || newPeriodo.nivel_id === null || newPeriodo.periodo_fecha_inicio === null || newPeriodo.periodo_fecha_fin === null) {
            this.addMessage('Error al crear periodo', `No se pudo crear el periodo ${newPeriodo.periodo_nombre}`, 'danger')
            return
        }

        const result = await fetch('action/periodos.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(newPeriodo)
        }).then(res => res.json())

        if (result.success) {
            this.addMessage('Periodo creado', `El periodo ${newPeriodo.periodo_nombre} ha sido creado`, 'success')

            this.periodos
            Object.keys(newPeriodo).forEach(key => newPeriodo[key] = null);
            newPeriodo.nivel_id = '';
            this.periodos = await fetch('action/periodos.php').then(res => res.json())
        } else {
            this.addMessage('Error al crear periodo', `No se pudo crear el periodo ${newPeriodo.periodo_nombre}`, 'danger')
        }
    },

    async deletePeriodo(periodo: Periodo) {
        const response = await fetch('action/periodos.php', {
            method: 'DELETE',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                periodo_id: periodo.periodo_id,
            })
        })
        const result = await response.json()

        if (result.success) {
            this.addMessage('Periodo eliminado', `El periodo ${periodo.periodo_nombre} ha sido eliminado`, 'success')
            this.periodos = this.periodos.filter((p: Periodo) => p.periodo_id !== periodo.periodo_id)
        } else {
            this.addMessage('Error al eliminar periodo', `No se pudo eliminar el periodo ${periodo.periodo_nombre}`, 'danger')
        }
    },

    async mounted() {
        this.periodos = await fetch('action/periodos.php').then(res => res.json())
        this.niveles = await fetch('action/nivel.php').then(res => res.json())
    }
}).mount('#app')