<template>
  <NucleoDataCard
    :title="`Asistencia ID: ${asistencia.id}`"
    :status="asistencia.estado"
    :fields="cardFields"
    :accent-color="ui.accentColorAsistencias"
    :background-color="ui.tableBgColorAsistencias"
    :observation="asistencia.observacion"
    @edit="editAsistencia"
    @delete="confirmDeleteAsistencia"
  >
    <template #header>
      <div class="flex items-center justify-between w-full">
        <h2 class="text-xl font-semibold text-gray-800" :style="{ color: ui.accentColorAsistencias }">Asistencia ID: {{ asistencia.id }}</h2>
        <span :class="['px-2 py-1 text-xs font-bold text-white rounded-full', getStatusClass(asistencia.estado)]">
          {{ asistencia.estado || 'N/A' }}
        </span>
      </div>
    </template>
  </NucleoDataCard>
</template>

<script setup>
import { defineProps, defineEmits, computed } from 'vue';
import { useAsistenciasStore } from '../../stores/useAsistencias';
import { useUi } from '../../stores/useUi.js';
import NucleoDataCard from '../ui/NucleoDataCard.vue';

const ui = useUi();

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

const emit = defineEmits(['edit']);

const asistenciasStore = useAsistenciasStore();

const formatDateTime = (dateTimeString) => {
  if (!dateTimeString) return 'N/A';
  const date = new Date(dateTimeString);
  // Consistent formatting
  return date.toLocaleString('es-HN', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: true });
};

const cardFields = computed(() => [
  { label: 'Empleado ID', value: props.asistencia.empleado_id },
  { label: 'Entrada', value: formatDateTime(props.asistencia.entrada) },
  { label: 'Salida', value: props.asistencia.salida ? formatDateTime(props.asistencia.salida) : 'No registrada' },
]);

const editAsistencia = () => {
  emit('edit', props.asistencia.id);
};

const confirmDeleteAsistencia = () => {
  // Consider using a global notification/dialog system if available
  if (confirm(`¿Está seguro de que desea eliminar la asistencia ID: ${props.asistencia.id}?`)) {
    deleteAsistenciaInternal();
  }
};

const deleteAsistenciaInternal = async () => {
  try {
    await asistenciasStore.deleteAsistencia(props.asistencia.id);
    // Optionally, show a success notification
  } catch (error) {
    console.error('Error deleting asistencia:', error);
    // Optionally, show an error notification
    alert('Ocurrió un error al eliminar la asistencia.');
  }
};

const getStatusClass = (status) => {
  if (!status) return 'bg-gray-400 text-white'; // Default for N/A, ensuring text is visible
  const statusNormalized = status.toLowerCase().replace(/\s+/g, '-');
  switch (statusNormalized) {
    case 'pendiente': return 'bg-yellow-500 text-gray-800';
    case 'presente':
    case 'confirmada': return 'bg-green-500 text-white';
    case 'ausente': return 'bg-red-500 text-white';
    case 'justificada': return 'bg-blue-500 text-white';
    case 'cancelada':
    case 'anulada': return 'bg-gray-500 text-white';
    default: return 'bg-gray-400 text-white';
  }
};

</script>

<style scoped>
/* Scoped styles can be kept if they target elements within slots that NucleoDataCard doesn't style.
   For this refactor, assuming NucleoDataCard and Tailwind handle most styling.
   The .border-l-3 class is no longer used as observation styling is handled by NucleoDataCard.
*/
</style>
