<template>
    <div class="h-full overflow-auto">

        <div v-if="isLoading" class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
            Chargement...
        </div>

        <div v-else-if="!employee"
             class="mt-6 rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600">
            Employé introuvable.
        </div>

        <div v-else>
            <div class="flex items-center justify-between">
                <h1 class="text-4xl font-bold text-primary-500">{{ employee.firstName }} {{ employee.lastName }}</h1>
                <NuxtLink
                    to="/employees"
                    class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
                >
                    Retour
                </NuxtLink>
            </div>

            <div class="mt-6 rounded-lg border border-neutral-200 bg-white p-6">
                <p class="text-xl font-semibold text-neutral-900">{{ employee.firstName }} {{ employee.lastName }}</p>
                <p class="mt-2 text-md text-neutral-700">Site: {{ employee.site?.name ?? '-' }}</p>
                <p class="text-md text-neutral-700">Type de contrat: {{
                        contractNatureLabel(employee.currentContractNature)
                    }}</p>
                <p class="text-md text-neutral-700">Temps de travail: {{ employee.contract?.name ?? '-' }}</p>
            </div>
        </div>

    </div>
</template>

<script setup lang="ts">
import type {Employee} from '~/services/dto/employee'
import {getEmployee} from '~/services/employees'

const route = useRoute()
const employee = ref<Employee | null>(null)
const isLoading = ref(false)

useHead(() => ({
    title: employee.value
        ? `${employee.value.firstName} ${employee.value.lastName}`
        : 'Détail employé'
}))

const contractNatureLabel = (value?: 'CDI' | 'CDD' | 'INTERIM') => {
    if (value === 'CDD') return 'CDD'
    if (value === 'INTERIM') return 'Intérim'
    return 'CDI'
}

onMounted(async () => {
    const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
    const employeeId = Number(idParam)
    if (!Number.isInteger(employeeId) || employeeId <= 0) {
        return
    }

    isLoading.value = true
    try {
        employee.value = await getEmployee(employeeId)
    } finally {
        isLoading.value = false
    }
})
</script>
