<template>

    <Head title="mis rutas" />

    <AuthenticatedLayout>
        <template #header>
            Mis Rutas
        </template>

        <div class="min-w-full overflow-hidden mb-3 grid grid-cols-3  gap-4">
            <div class="...">
                <Select v-model="search" :options="estados" @change="handleSelect" optionLabel="name"
                    placeholder="Seleccione un estado" class="w-full md:w-56" />
            </div>
            <div class="flex justify-end items-end mb-2 col-span-2">
                <SecondaryButton class="text-center" :href="route('rutas.create')">
                    <PlusIcon class="h-4 w-4 mr-2" /> Agregar Ruta
                </SecondaryButton>
            </div>
        </div>
        <TableResponsive :columns="columns" :data="rutasList">
            <!-- Personalización de columnas -->
            <template #puestos="{ item }">
                <Tag icon="pi pi-user" :value="item.puestos"></Tag>
            </template>

            <template #estado="{ item }">
                <Tag v-if="item.estado === 'Activa'">{{ item.estado }}</Tag>
                <Tag v-else-if="item.estado === 'Finalizada'" severity="secondary">{{ item.estado }}</Tag>
                <Tag v-else-if="item.estado === 'Cancelada'" severity="danger">{{ item.estado }}</Tag>
                <Tag v-else severity="warning">Desconocido</Tag>
            </template>

            <template #acciones="{ item }">
                <div class="flex gap-3">

                    <Link v-if="item.estado === 'Activa'" :href="route('solicitudes-rutas.show', item.id)">
                    <Button icon="pi pi-users" severity="info" rounded outlined aria-label="Solicitudes" />
                    </Link>
                    <Link v-if="item.estado === 'Finalizada'" :href="route('solicitudes-rutas.show', item.id)">
                    <Button icon="pi pi-eye" severity="info" rounded outlined aria-label="Solicitudes" />
                    </Link>

                    <Button v-if="item.pendiente_calificacion && item.estado === 'Finalizada'" icon="pi pi-star" severity="warn" rounded outlined aria-label="Solicitudes"
                    @click="calificacion_ruta(item.id, item.conductor)" />

                    <Button v-if="item.estado === 'Activa'" icon="pi pi-stop" severity="warn" rounded outlined
                        aria-label="Finalizar" @click="cambiarEstado(item.id, 1)" />
                    <Button v-if="item.estado === 'Activa'" icon="pi pi-times" severity="danger" rounded outlined
                        aria-label="Cancelar" @click="cambiarEstado(item.id, 2)" />
                </div>

            </template>

            <template #empty>
                <div class="flex flex-col items-center justify-center text-gray-500 py-5">
                    <i class="pi pi-inbox text-4xl mb-3"></i>
                    <p>No hay registros disponibles</p>
                </div>
            </template>
        </TableResponsive>

        <div v-if="rutasInit && rutasInit.links && rutasInit.links.length > 3"
            class="flex flex-col items-center border-t bg-white px-2 py-2 xs:flex-row xs:justify-between">
            <pagination :links="rutasInit.links" />
        </div>
        <Toast />
        <ConfirmPopup></ConfirmPopup>

        <Dialog v-model:visible="modal_calificacion" header="Calificar Pasajeros" :style="{ width: '26rem' }"
            position="bottom" :modal="true" :draggable="false" :closable="false">
            <Carousel v-if="calificaciones.length > 0" :value="calificaciones" :numVisible="1" :numScroll="1"
                v-model:page="currentIndex" :circular="false" :autoplayInterval="0" class="custom-carousel">
                <template #item="slotProps">
                    <div class="p-4">
                        <div class="flex justify-center mb-2">
                            <img v-if="slotProps.data.estudiante.foto_perfil" :src="$page.props.base_url+slotProps.data.estudiante.foto_perfil"
                                alt="Foto de perfil" class="w-24 h-24 rounded-full object-cover" />
                            <Avatar v-else :label="obtenerIniciales(slotProps.data.estudiante.nombre)" class="mr-2"
                                style="height: 90px;width: 90px;font-size: 2rem;" shape="circle" />

                        </div>
                        <h4 class="mb-2 text-center w-full font-bold">{{ slotProps.data.estudiante.nombre }}</h4>
                        <div class="mb-5">
                            <div class="flex justify-center mb-2 w-full">
                                <Rating class="large-rating" v-model="slotProps.data.puntaje" />
                            </div>

                        </div>
                        <div class="mb-2">
                            <label for="observaciones" class="block font-semibold">Comentarios</label>
                            <Textarea v-model="slotProps.data.observaciones" rows="3" style="width: 100%;" autoResize />
                        </div>
                    </div>
                </template>
            </Carousel>

            <div class="flex justify-center mt-3">
                <Button label="Calificar usuarios" class="w-full" @click="guardarCalificaciones" />
            </div>
        </Dialog>
    </AuthenticatedLayout>
</template>

<script setup>
import { computed, onMounted, ref } from "vue";
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import Pagination from '@/Components/Pagination.vue'
import { Head } from '@inertiajs/vue3';
import { router } from '@inertiajs/vue3'
import Tag from 'primevue/tag';
import { PlusIcon } from "@heroicons/vue/24/outline";
import SecondaryButton from "@/Components/SecondaryButton.vue";
import TableResponsive from "@/Components/TableResponsive.vue";
import Button from 'primevue/button';
import Select from 'primevue/select';

import { Link } from '@inertiajs/vue3';
import Toast from 'primevue/toast';
import ConfirmPopup from 'primevue/confirmpopup';
import Dialog from 'primevue/dialog';

import Carousel from "primevue/carousel";
import Textarea from 'primevue/textarea';
import Rating from 'primevue/rating';
import Avatar from 'primevue/avatar';

import dayjs from "dayjs";
import "dayjs/locale/es";

import { useToast } from 'primevue/usetoast';
import { useConfirm } from "primevue/useconfirm";

const toast = useToast();
const confirm = useConfirm();

dayjs.locale("es");

const props = defineProps({
    rutas: {
        type: Object,
        default: () => ({ data: [], links: [] }), // Asegurar estructura inicial
    },
    filters: {
        type: Object,
        default: () => ({}),
    },
});

console.log(props.rutas);

const calificacion_ruta = async (id_ruta, id_conductor) => {
    try {
        const response = await axios.get(`/calificar/${id_ruta}/edit`, {
            params: {
                id_conductor: id_conductor
            }
        });
        abrirCalificaciones(response.data);
        console.log("Calificaciones encontradas:", response.data);
    } catch (error) {
        console.error("Error al obtener calificaciones pendientes", error);
    }
};


const rutasInit = computed(() => props.rutas ?? { data: [], links: [] });

const modal_calificacion = ref(false);
const calificaciones = ref([]);


// Función para abrir el modal con los datos de calificación
const abrirCalificaciones = (data) => {
    calificaciones.value = data;
    console.log(calificaciones.value);
    modal_calificacion.value = true;
};

const obtenerIniciales = (nombre) => {
    return nombre
        .split(" ")
        .slice(0, 2)
        .map(palabra => palabra.charAt(0))
        .join("")
        .toUpperCase();
};

const columns = [
    { field: 'origen', label: 'Origen' },
    { field: 'destino', label: 'Destino' },
    { field: 'fecha', label: 'Fecha' },
    { field: 'vehiculo', label: 'Vehiculo' },
    { field: 'puestos', label: 'Puestos' },
    { field: 'estado', label: 'Estado' },
    { field: 'acciones', label: 'Acciones' }
];

const rutasList = computed(() => {
    return props.rutas.data.map(ruta => ({
        id: ruta.id,
        origen: formatLocation(ruta.origen),
        destino: formatLocation(ruta.destino),
        fecha: formatDateTime(ruta.fecha_hora),
        vehiculo: ruta.vehiculo.placa + ' - ' + ruta.vehiculo.marca_vehiculo + ' ' + ruta.vehiculo.linea_vehiculo ?? 'No asignado',
        puestos: ruta.puestos_disponibles,
        pendiente_calificacion: ruta.pendiente_calificacion,
        conductor: ruta.id_conductor,
        estado: getEstado(ruta.estado)
    }));
});

const formatLocation = (location) => {
    if (location.includes("Universidad Tecnológica de Pereira") || location.includes("Plazoleta de banderas")) {
        return "Universidad Tecnológica de Pereira"; // Si la ubicación contiene esta frase, solo retorna eso
    }

    // Si no contiene "Universidad Tecnológica de Pereira", tomar los dos primeros elementos del split
    const parts = location.split(',');
    return parts.length > 1 ? parts[0] + ', ' + parts[1] : parts[0];
};


const getEstado = (estado) => {
    switch (estado) {
        case 0: return 'Activa';
        case 1: return 'Finalizada';
        case 2: return 'Cancelada';
        default: return 'Desconocido';
    }
};

const eliminar = (id) => {
    console.log(`Eliminar ruta con ID: ${id}`);
};

const formatDateTime = (dateTime) => {
    return dayjs(dateTime).format("dddd, D [de] MMMM [de] YYYY h:mm A");
};

// pass filters in search
let search = ref(props.filters.search);

const estados = ref([
    { name: 'Activas', code: 0 },
    { name: 'Finalizadas', code: 1 },
    { name: 'Canceladas', code: 2 },
]);

const handleSelect = () => {
    router.get(
        "/rutas",
        { estado: search.value?.code },
        {
            preserveState: true,
            replace: true,
        }
    );
};

/* onMounted(() => {
    abrirCalificaciones(
        [
            {
                "id": 21,
                "id_evaluador": 6,
                "id_evaluado": 6,
                "id_ruta": 22,
                "puntaje": null,
                "observaciones": null,
                "tipo_evaluado": "Pasajero",
                "estado": 0,
                "created_at": "2025-04-01T20:15:49.000000Z",
                "updated_at": "2025-04-01T20:15:49.000000Z",
                "estudiante": {
                    "id": 6,
                    "nombre": "Gustavo Alberto Henao"
                }
            },
            {
                "id": 23,
                "id_evaluador": 6,
                "id_evaluado": 9,
                "id_ruta": 22,
                "puntaje": null,
                "observaciones": null,
                "tipo_evaluado": "Pasajero",
                "estado": 0,
                "created_at": "2025-04-01T20:15:49.000000Z",
                "updated_at": "2025-04-01T20:15:49.000000Z",
                "estudiante": {
                    "id": 9,
                    "nombre": "Angie Daniela Londoño"
                }
            }
        ]
    );
}); */

const cambiarEstado = (id, estado) => {
    confirm.require({
        target: event.currentTarget,
        message: estado === 1 ? '¿Estas seguro de finalizar la ruta?' : estado === 2 ? '¿Estas seguro de cancelar la ruta?' : '',
        icon: 'pi pi-exclamation-triangle',
        rejectProps: {
            label: 'Cancelar',
            severity: 'secondary',
            outlined: true
        },
        acceptProps: {
            label: estado === 1 ? 'Finalizar' : estado === 2 ? 'Estoy seguro' : '',
        },
        accept: async () => {
            try {
                const response = await axios.put(route("rutas.update", id), {
                    estado: estado
                });

                // Verifica la respuesta
                if (response.status === 200) {
                    console.log("Respuesta del servidor:", response.data);

                    // Actualiza la fuente de datos directamente
                    const rutaIndex = props.rutas.data.findIndex(ruta => ruta.id === id);
                    if (rutaIndex !== -1) {
                        props.rutas.data[rutaIndex].estado = estado; // Actualiza el estado real
                    }

                    // Muestra las calificaciones pendientes si la ruta fue finalizada
                    if (estado === 1 && response.data.calificaciones) {
                        console.log("Calificaciones pendientes:", response.data.calificaciones);
                        modal_calificacion.value = true;

                        abrirCalificaciones(response.data.calificaciones);

                        toast.add({
                            severity: "success",
                            summary: "Ruta Finalizada",
                            detail: "El estado de la ruta ha sido actualizado. Debes realizar las calificaciones.",
                            life: 3000,
                        });
                    } else {
                        toast.add({
                            severity: "success",
                            summary: estado === 2 ? 'Ruta Cancelada' : '',
                            detail: "El estado de la ruta ha sido actualizado.",
                            life: 3000,
                        });
                    }
                }
            } catch (error) {
                console.error("Error al actualizar el estado:", error);
                toast.add({
                    severity: "error",
                    summary: "Error",
                    detail: "No se pudo actualizar el estado.",
                    life: 3000,
                });
            }
        },
        reject: () => {
            toast.add({ severity: 'error', summary: 'Acción cancelada', detail: 'Se ha cancelado la acción.', life: 3000 });
        }
    });

};


const guardarCalificaciones = async () => {
    // Verificar que todos los pasajeros tengan una calificación
    const sinCalificar = calificaciones.value.filter(calificacion => !calificacion.puntaje);

    if (sinCalificar.length > 0) {
        toast.add({
            severity: "warn",
            summary: "Faltan calificaciones",
            detail: "Todos los pasajeros deben ser calificados antes de guardar.",
            life: 3000,
        });
        return;
    }
    try {
        const response = axios.post('/calificar', {
            calificaciones: calificaciones.value
        });

        toast.add({
            severity: "success",
            summary: "Calificaciones guardadas",
            detail: "Se han registrado las calificaciones exitosamente.",
            life: 3000,
        });

        modal_calificacion.value = false;
    } catch (error) {
        toast.add({
            severity: "error",
            summary: "Error al guardar",
            detail: "Ocurrió un error al guardar las calificaciones.",
            life: 3000,
        });
        console.error(error);
    }

    // Recorrer las calificaciones y mostrarlas en consola
    /* calificaciones.value.forEach(calificacion => {
        console.log(`ID: ${calificacion.id}`);
        console.log(`ID Evaluado: ${calificacion.id_evaluado}`);
        console.log(`Nombre: ${calificacion.estudiante.nombre}`);
        console.log(`Puntaje: ${calificacion.puntaje}`);
        console.log(`Observaciones: ${calificacion.observaciones}`);
        console.log('-----------------------------');
    }); */

    // Cerrar el modal después de guardar
    //modal_calificacion.value = false;

    // Mensaje de éxito
   /*  toast.add({
        severity: "success",
        summary: "Calificaciones guardadas",
        detail: "Se han registrado las calificaciones exitosamente.",
        life: 3000,
    }); */
};

</script>
<style>
.large-rating .p-rating-icon {
    width: 40px;
    height: 40px;
    font-size: 40px;
    /* Esto afecta el tamaño del ícono interno */
}
</style>