
<script setup>
import { onMounted, ref } from 'vue';
import { api } from '@Services/Api';
import { apiTo } from './Module';

import PrimaryButton from '@Holos/Button/Primary.vue';
import GoogleIcon from '@Shared/GoogleIcon.vue';

// Propiedades
const vacations = ref({});
const vacationsRequests = ref([]);

/** Ciclos */
onMounted(() => {
    api.get(apiTo('employee'), {
        onSuccess: (r) => {
            vacations.value = r.vacations;
            vacationsRequests.value = r.vacation_requests;
        }
    });
});
</script>

<template>
    <div>
        <!-- Banner de bienvenida -->
        <section
            class="relative mb-8 overflow-hidden rounded-2xl bg-gradient-to-r from-blue-600 to-sky-600 text-white"
        >
            <div class="relative z-10 p-6 md:p-8">
                <p class="text-2xl md:text-3xl font-semibold">
                    Bienvenido, {{ $page.user.name }}
                </p>
                <p class="mt-2 text-white/90">
                    Gestiona tus solicitudes de vacaciones y revisa tu información.
                </p>
                <div class="mt-6">
                    <RouterLink to="/vacations/create">
                        <PrimaryButton
                            type="button"
                            class="hover:scale-[1.02] with-transition"
                            v-text="'Solicitar Vacaciones'"
                        />
                    </RouterLink>
                </div>
            </div>
        </section>

        <!-- Tarjetas de KPIs -->
        <section class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-4">
            <!-- Días disponibles -->
            <article
                class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800"
            >
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <GoogleIcon name="check_circle" class="text-emerald-500 text-5xl" />
                        <div>
                            <h3 class="text-sm text-slate-500 dark:text-slate-400">
                                Días Disponibles
                            </h3>
                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
                                {{ vacations.available_days }}
                            </p>
                        </div>
                    </div>
                    <span
                        class="rounded-full bg-emerald-100 px-2 py-1 text-xs font-medium text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400"
                    >
                        Disponible
                    </span>
                </div>
            </article>

            <!-- Próxima renovación -->
            <article
                class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800"
            >
                <div class="flex items-center gap-4">
                    <GoogleIcon name="event" class="text-sky-500 text-5xl" />
                    <div>
                        <h3 class="text-sm text-slate-500 dark:text-slate-400">
                            Próxima Renovación
                        </h3>
                        <div class="flex items-end gap-2">
                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
                                {{ vacations.next_renewal_date ? (() => { const date = new Date(vacations.next_renewal_date + 'T00:00:00'); return `${date.getDate()}-${date.toLocaleDateString('es-ES', { month: 'long' })}-${date.getFullYear()}` })() : 'N/A' }}
                            </p>
                        </div>
                    </div>
                </div>
            </article>

            <!-- Solicitudes activas -->
            <article
                class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800"
            >
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <GoogleIcon name="hourglass_top" class="text-amber-500 text-5xl" />
                        <div>
                            <h3 class="text-sm text-slate-500 dark:text-slate-400">
                                Solicitudes Activas
                            </h3>
                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">
                                {{ vacations.active_requests }}
                            </p>
                        </div>
                    </div>
                    <span
                        class="rounded-full bg-amber-100 px-2 py-1 text-xs font-medium text-amber-700 dark:bg-amber-500/10 dark:text-amber-400"
                    >
                        Pendientes
                    </span>
                </div>
            </article>

            <!-- Días usados -->
            <article
                class="rounded-xl bg-white p-6 shadow with-transition hover:shadow-lg dark:bg-slate-800"
            >
                <div class="flex items-center justify-between">
                    <div class="flex items-center gap-4">
                        <GoogleIcon name="task_alt" class="text-indigo-500 text-5xl" />
                        <div>
                            <h3 class="text-sm text-slate-500 dark:text-slate-400">Días Usados</h3>
                            <p class="text-2xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.used_days }}</p>
                        </div>
                    </div>
                </div>
            </article>
        </section>

        <!-- Acciones rápidas y solicitudes recientes -->
        <section class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
            <!-- Acciones rápidas -->
            <article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-slate-900 dark:text-slate-100">
                        Acciones Rápidas
                    </h3>
                    <p class="text-sm text-slate-500 dark:text-slate-400">
                        Gestiona tus vacaciones de forma rápida
                    </p>
                </div>
                <div class="space-y-3">
                    <RouterLink
                        to="/vacations/create"
                        class="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3 with-transition hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-700/40"
                    >
                        <div class="flex items-center gap-3">
                            <GoogleIcon name="add" class="text-sky-500 text-2xl" />
                            <span class="font-medium">Nueva Solicitud de Vacaciones</span>
                        </div>
                        <GoogleIcon name="chevron_right" class="text-slate-400" />
                    </RouterLink>

                    <RouterLink
                        to="/vacations"
                        class="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3 with-transition hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-700/40"
                    >
                        <div class="flex items-center gap-3">
                            <GoogleIcon name="format_list_bulleted" class="text-indigo-500 text-2xl" />
                            <span class="font-medium">Ver Mis Solicitudes</span>
                        </div>
                        <GoogleIcon name="chevron_right" class="text-slate-400" />
                    </RouterLink>

                    <RouterLink
                        to="/profile"
                        class="flex items-center justify-between rounded-lg border border-slate-200 px-4 py-3 with-transition hover:bg-slate-50 dark:border-slate-700 dark:hover:bg-slate-700/40"
                    >
                        <div class="flex items-center gap-3">
                            <GoogleIcon name="person" class="text-emerald-500 text-2xl" />
                            <span class="font-medium">Mi Perfil</span>
                        </div>
                        <GoogleIcon name="chevron_right" class="text-slate-400" />
                    </RouterLink>
                </div>
            </article>

            <!-- Solicitudes recientes -->
            <article class="rounded-xl bg-white p-6 shadow dark:bg-slate-800">
                <h3 class="mb-4 text-lg font-semibold text-slate-900 dark:text-slate-100">
                    Solicitudes Recientes
                </h3>

                <div v-if="vacationsRequests?.length == 0" class="text-center py-8">
                    <GoogleIcon name="inbox" class="text-slate-400 text-4xl mx-auto mb-2" />
                    <p class="text-slate-500 dark:text-slate-400">No tienes solicitudes recientes</p>
                </div>

                <div v-if="vacationsRequests?.length > 0" class="space-y-3">
                    <div
                        v-for="request in vacationsRequests"
                        class="flex items-center justify-between rounded-lg border border-slate-200 p-4 dark:border-slate-700"
                    >
                        <div>
                            <p class="font-medium">{{ request.first_period_start }} - {{ request.last_period_end }}</p>
                            <p class="text-xs text-slate-500 dark:text-slate-400">{{ request.total_days }} días</p>
                        </div>
                        <span
                            :class="{
                                'rounded-full px-3 py-1 text-xs font-medium': true,
                                'bg-amber-100 text-amber-700 dark:bg-amber-500/10 dark:text-amber-400': request.status === 'pendiente',
                                'bg-emerald-100 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-400': request.status === 'aprobada',
                                'bg-red-100 text-red-700 dark:bg-red-500/10 dark:text-red-400': request.status === 'rechazada'
                            }"
                        >
                            {{ request.status }}
                        </span>
                    </div>
                </div>

                <div class="mt-4">
                    <RouterLink to="/vacations" class="inline-flex items-center gap-1 text-sm font-medium text-sky-600 hover:underline dark:text-sky-400">
                        Ver todas las solicitudes
                        <GoogleIcon name="chevron_right" />
                    </RouterLink>
                </div>
            </article>
        </section>

        <!-- Resumen -->
        <section
            class="mt-8 rounded-2xl bg-white p-6 shadow dark:bg-slate-800"
        >
            <h3 class="mb-4 text-lg font-semibold text-slate-900 dark:text-slate-100">
                Resumen de Vacaciones
            </h3>
            <div class="grid grid-cols-1 gap-6 md:grid-cols-3">
                <div class="text-center">
                    <p class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.available_days }}</p>
                    <p class="text-sm text-slate-500 dark:text-slate-400">Días Disponibles</p>
                </div>
                <div class="text-center">
                    <p class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.used_days }}</p>
                    <p class="text-sm text-slate-500 dark:text-slate-400">Días Usados</p>
                </div>
                <div class="text-center">
                    <p class="text-3xl font-bold text-slate-900 dark:text-slate-100">{{ vacations.total_days_in_period }}</p>
                    <p class="text-sm text-slate-500 dark:text-slate-400">Total del Período</p>
                </div>
            </div>
            <div class="mt-4 text-center text-sm text-slate-500 dark:text-slate-400">
                <p>Período: {{ vacations.period_start_date ? (() => { const date = new Date(vacations.period_start_date + 'T00:00:00'); return `${date.getDate()}-${date.toLocaleDateString('es-ES', { month: 'long' })}-${date.getFullYear()}` })() : 'N/A' }} - {{ vacations.period_end_date ? (() => { const date = new Date(vacations.period_end_date + 'T00:00:00'); return `${date.getDate()}-${date.toLocaleDateString('es-ES', { month: 'long' })}-${date.getFullYear()}` })() : 'N/A' }}</p>
            </div>
        </section>
    </div>
</template>
