<template>
  <div :style="{ backgroundColor: ui.tableBgColorAsistencias }" class="shadow-md rounded-lg p-4 md:p-6 m-2 border border-gray-200 hover:shadow-lg transition-shadow duration-300 ease-in-out flex flex-col">
    <div class="flex justify-between items-center mb-3 md:mb-4 pb-2 md:pb-3 border-b border-gray-100">
      <h4 class="text-lg md:text-xl font-semibold" :style="{ color: 'var(--accent-color-asistencias)' }">Asistencia ID: {{ asistencia.id }}</h4>
      <span :class="['px-2 py-1 text-xs font-bold text-white rounded-full', getStatusClass(asistencia.estado)]">
        {{ asistencia.estado || 'N/A' }}
      </span>
    </div>
    <div class="text-sm text-gray-700 space-y-2">
      <p><strong class="font-medium text-gray-900">Empleado ID:</strong> {{ asistencia.empleado_id }}</p>
      <p><strong class="font-medium text-gray-900">Entrada:</strong> {{ formatDateTime(asistencia.entrada) }}</p>
      <p><strong class="font-medium text-gray-900">Salida:</strong> {{ asistencia.salida ? formatDateTime(asistencia.salida) : 'No registrada' }}</p>
      <p v-if="asistencia.observacion" class="italic text-gray-600 bg-gray-50 p-2 border-l-3 rounded" :style="{ borderColor: 'var(--accent-color-asistencias)' }">
        <strong class="font-medium text-gray-900">Observación:</strong> {{ asistencia.observacion }}
      </p>
    </div>
    <div class="mt-auto pt-3 md:pt-4 flex justify-end space-x-2 md:space-x-3">
      <button
        @click="editAsistencia"
        class="px-3 py-1 md:px-4 md:py-2 text-xs md:text-sm font-medium rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-white"
        :style="{ backgroundColor: 'var(--accent-color-asistencias)', borderColor: 'var(--accent-color-asistencias)' }"
        @mouseover="buttonHover($event, true, 'var(--accent-color-asistencias)')"
        @mouseleave="buttonHover($event, false, 'var(--accent-color-asistencias)')"
        :class="`focus:ring-[var(--accent-color-asistencias)]`"
      >Editar</button>
      <button
        @click="confirmDeleteAsistencia"
        class="px-3 py-1 md:px-4 md:py-2 text-xs md:text-sm font-medium rounded-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 bg-red-600 hover:bg-red-700 text-white focus:ring-red-500"
      >Eliminar</button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';
import { useAsistenciasStore } from '../../stores/useAsistencias';
import { useUi } from '../../stores/useUi.js';
import { computed } from '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);
  return date.toLocaleString('es-HN', { timeZone: 'America/Tegucigalpa', year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' });
};

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

const confirmDeleteAsistencia = () => {
  if (confirm(`¿Está seguro de que desea eliminar la asistencia "${props.asistencia.id}" (ID: ${props.asistencia.id})?`)) {
    deleteAsistenciaInternal();
  }
};

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

const getStatusClass = (status) => {
  if (!status) return 'bg-gray-400'; // Default for N/A
  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';
    case 'ausente': return 'bg-red-500';
    case 'justificada': return 'bg-blue-500';
    case 'cancelada':
    case 'anulada': return 'bg-gray-500';
    default: return 'bg-gray-400';
  }
};

const buttonHover = (event, isHovering, colorVar) => {
  if (isHovering) {
    event.target.style.filter = 'brightness(90%)';
  } else {
    event.target.style.filter = 'brightness(100%)';
  }
};

</script>

<style scoped>
/* Minimal scoped styles, mainly for complex status colors if not handled by Tailwind directly */
/* Or for :style bindings if preferred for dynamic properties like accent colors */

/* The border-l-3 for observation uses a utility-like class,
   but Tailwind doesn't have border-left-width: 3px by default.
   You could add this to your tailwind.config.js if used often:
   theme: { extend: { borderWidth: { '3': '3px' } } }
   Then use class `border-l-3`. For now, inline style is fine.
*/
.border-l-3 {
  border-left-width: 3px;
}
</style>
