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

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

const ui = useUi();

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

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

const planillasStore = usePlanillasStore();

const formatDate = (dateString) => {
  if (!dateString) return 'N/A';
  const date = new Date(dateString);
  return date.toLocaleDateString('es-HN', { timeZone: 'America/Tegucigalpa', year: 'numeric', month: 'long', day: 'numeric' });
};

const formatCurrency = (value) => {
  if (value == null) return 'N/A';
  return Number(value).toLocaleString('es-PY', {
    style: 'currency',
    currency: 'PYG',
    minimumFractionDigits: 0, // Ensure no decimals for PYG if that's standard
    maximumFractionDigits: 0,
  });
};

const cardFields = computed(() => [
  { label: 'Título', value: props.planilla.titulo },
  { label: 'Empleado ID', value: props.planilla.empleado_id },
  { label: 'Desde', value: formatDate(props.planilla.fecha_desde) },
  { label: 'Hasta', value: formatDate(props.planilla.fecha_hasta) },
  { label: 'Total', value: formatCurrency(props.planilla.total) },
]);

const editPlanilla = () => {
  emit('edit', props.planilla.id);
};

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

const deletePlanillaInternal = async () => {
  try {
    await planillasStore.deletePlanilla(props.planilla.id);
  } catch (error) {
    console.error('Error deleting planilla:', error);
    alert('Ocurrió un error al eliminar la planilla.');
  }
};

const getStatusClass = (status) => {
  if (!status) return 'bg-gray-400 text-white';
  const statusNormalized = status.toLowerCase().replace(/\s+/g, '-');
  switch (statusNormalized) {
    case 'pagado': return 'bg-green-500 text-white';
    case 'pendiente': return 'bg-yellow-500 text-gray-800';
    case 'anulado': return 'bg-red-500 text-white';
    case 'borrador': return 'bg-gray-500 text-white';
    default: return 'bg-gray-400 text-white';
  }
};
// buttonHover removed
</script>

<style scoped>
/* Scoped styles can be removed or adjusted if not needed after refactor. */
</style>
