<template>
  <NucleoDataCard
    :title="employee.name"
    :accent-color="ui.accentColorEmpleados"
    :background-color="ui.tableBgColorEmpleados"
    :avatar-url="employee.avatar_url || 'https://via.placeholder.com/150'"
    @edit="handleEdit"
    @delete="confirmDeleteEmpleado"
  >
    <template #header>
      <div class="flex items-center w-full">
        <img
          :src="employee.avatar_url || 'https://via.placeholder.com/150'"
          alt="Avatar del empleado"
          class="w-16 h-16 rounded-full mr-4 border-2 object-cover"
          :style="{ borderColor: ui.accentColorEmpleados }"
        />
        <div class="flex-grow">
          <h2 class="text-lg md:text-xl font-semibold" :style="{ color: ui.accentColorEmpleados }">{{ employee.name }}</h2>
          <p class="text-xs text-gray-500">ID: {{ employee.id }}</p>
        </div>
      </div>
    </template>

    <template #body>
      <div class="text-sm text-gray-700 space-y-2">
        <p v-if="employee.telefono" class="flex items-center">
          <svg class="w-5 h-5 mr-2 shrink-0" :style="{ color: ui.accentColorEmpleados }" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.308 1.154a11.042 11.042 0 005.516 5.516l1.154-2.308a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
          <strong class="font-medium text-gray-900">Teléfono:</strong>&nbsp;<span>{{ employee.telefono }}</span>
        </p>
        <p v-if="employee.ubicacion" class="flex items-center">
          <svg class="w-5 h-5 mr-2 shrink-0" :style="{ color: ui.accentColorEmpleados }" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          <strong class="font-medium text-gray-900">Ubicación:</strong>&nbsp;<span>{{ employee.ubicacion }}</span>
        </p>
        <p v-if="employee.cedula" class="flex items-center">
          <svg class="w-5 h-5 mr-2 shrink-0" :style="{ color: ui.accentColorEmpleados }" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 012-2h2a2 2 0 012 2v1m-4 0h4m-6 10v-5m0 5v0z"></path></svg>
          <strong class="font-medium text-gray-900">Cédula:</strong>&nbsp;<span>{{ employee.cedula }}</span>
        </p>
        <p v-if="employee.grupo_estudio" class="flex items-center">
           <svg class="w-5 h-5 mr-2 shrink-0" :style="{ color: ui.accentColorEmpleados }" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 14l9-5-9-5-9 5 9 5z"></path><path d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-5.998 12.083 12.083 0 01.665-6.479L12 14z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5zm0 0v3.945m0-3.945L6.161 10.58M17.839 10.58L12 14m5.839-3.42L12 14m0 0l6.161 3.42m-6.161-3.42L5.839 14.002"></path></svg>
          <strong class="font-medium text-gray-900">Grupo Estudio:</strong>&nbsp;<span>{{ employee.grupo_estudio }}</span>
        </p>
      </div>
    </template>
  </NucleoDataCard>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'; // Removed PropType, useRouter as they are not used
import { useUi } from '../../stores/useUi.js';
import { useEmpleadosStore } from '../../stores/useEmpleados'; // Added import
import NucleoDataCard from '../ui/NucleoDataCard.vue';

const ui = useUi();
const emit = defineEmits(['edit']);
const empleadosStore = useEmpleadosStore();

const props = defineProps({
  employee: {
    type: Object,
    required: true,
  },
});

const handleEdit = () => {
  emit('edit', props.employee.id);
};

const confirmDeleteEmpleado = () => {
  if (confirm(`¿Está seguro de que desea eliminar al empleado "${props.employee.name}" (ID: ${props.employee.id})?`)) {
    deleteEmpleado();
  }
};

const deleteEmpleado = async () => {
  try {
    await empleadosStore.deleteEmpleado(props.employee.id);
    // Optionally, show a success notification
  } catch (error) {
    console.error('Error deleting employee:', error);
    alert('Ocurrió un error al eliminar el empleado.');
  }
};
// buttonHover function removed as it's no longer used
</script>

<style scoped>
/* Scoped styles can be kept if they target elements within slots that NucleoDataCard doesn't style.
   .shrink-0 might be useful if icons/elements in slots need it and it's not covered by Tailwind classes used.
   .rounded-full with object-fit is good practice for avatars; NucleoDataCard's default avatar is also rounded.
   The custom avatar styling (size, border) is now handled directly in the #header slot.
*/
.shrink-0 { /* Retained if needed by SVGs in slots, though Tailwind's `shrink-0` class can be used directly in template */
  flex-shrink: 0;
}
</style>
