<template>
    <Dialog
        :visible="visible"
        @update:visible="$emit('update:visible', $event)"
        :modal="true"
        :style="{ width: '800px' }"
        :closable="true"
        class="p-0"
    >
        <template #header>
            <div class="flex flex-col gap-1 w-full">
                <h2 class="text-gray-900 dark:text-white text-2xl font-bold tracking-tight">
                    {{ mode === 'create' ? 'Crear Nuevo Departamento' : 'Editar Departamento' }}
                </h2>
                <p class="text-gray-500 dark:text-gray-400 text-base font-normal leading-normal">
                    Configure los detalles básicos para habilitar el nuevo departamento en la estructura organizacional.
                </p>
            </div>
        </template>

        <div class="p-6 pt-0 space-y-6">
            <!-- Department Name Field -->
            <div class="flex flex-col gap-2">
                <label class="text-gray-900 dark:text-gray-200 text-base font-semibold leading-normal">
                    Nombre del Departamento
                </label>
                <InputText 
                    v-model="localFormData.name" 
                    placeholder="Ej. Logística, Producción o Calidad"
                    class="w-full h-14"
                />
                <p class="text-gray-500 dark:text-gray-400 text-xs font-normal">
                    Este nombre será visible en todos los reportes de RH.
                </p>
            </div>

            <!-- Department Description Field -->
            <div class="flex flex-col gap-2">
                <label class="text-gray-900 dark:text-gray-200 text-base font-semibold leading-normal">
                    Descripción del Departamento
                </label>
                <Textarea 
                    v-model="localFormData.description" 
                    rows="5"
                    placeholder="Describa las funciones, responsabilidades y objetivos principales de este departamento..."
                    class="w-full"
                />
            </div>
        </div>

        <template #footer>
            <div class="flex items-center justify-end gap-4 pt-4 border-t border-gray-200 dark:border-gray-800">
                <Button 
                    label="Cancelar" 
                    severity="secondary"
                    text
                    @click="handleCancel"
                    class="px-6"
                />
                <Button 
                    :label="mode === 'create' ? 'Guardar Departamento' : 'Actualizar Departamento'" 
                    icon="pi pi-save" 
                    @click="handleSave"
                    class="px-8"
                />
            </div>
        </template>
    </Dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import Dialog from 'primevue/dialog';
import Button from 'primevue/button';
import InputText from 'primevue/inputtext';
import Textarea from 'primevue/textarea';
import type { Department } from '../../types/departments.interface';

interface Props {
    visible: boolean;
    mode: 'create' | 'edit';
    formData: Partial<Department>;
}

interface Emits {
    (e: 'update:visible', value: boolean): void;
    (e: 'save', data: Partial<Department>): void;
    (e: 'cancel'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const localFormData = ref<Partial<Department>>({ ...props.formData });

// Watch for external formData changes
watch(() => props.formData, (newData) => {
    localFormData.value = { ...newData };
}, { deep: true });

const handleSave = () => {
    emit('save', localFormData.value);
};

const handleCancel = () => {
    emit('update:visible', false);
    emit('cancel');
};
</script>

<style scoped>
/* Estilos adicionales si son necesarios */
</style>