<template>
  <div class="bg-white 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-planillas)' }">Planilla ID: {{ planilla.id }}</h4>
      <span :class="['px-2 py-1 text-xs font-bold text-white rounded-full', getStatusClass(planilla.estado)]">
        {{ planilla.estado || 'N/A' }}
      </span>
    </div>
    <div class="text-sm text-gray-700 space-y-2">
      <p><strong class="font-medium text-gray-900">Título:</strong> {{ planilla.titulo }}</p>
      <p><strong class="font-medium text-gray-900">Empleado ID:</strong> {{ planilla.empleado_id }}</p>
      <p><strong class="font-medium text-gray-900">Desde:</strong> {{ formatDate(planilla.fecha_desde) }}</p>
      <p><strong class="font-medium text-gray-900">Hasta:</strong> {{ formatDate(planilla.fecha_hasta) }}</p>
      <p><strong class="font-medium text-gray-900">Total:</strong> {{ formatCurrency(planilla.total) }}</p>
    </div>
    <div class="mt-auto pt-3 md:pt-4 flex justify-end space-x-2 md:space-x-3">
      <button
        @click="editPlanilla"
        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-planillas)', borderColor: 'var(--accent-color-planillas)' }"
        @mouseover="buttonHover($event, true)"
        @mouseleave="buttonHover($event, false)"
        :class="`focus:ring-[var(--accent-color-planillas)]`"
      >Editar</button>
      <button
        @click="confirmDeletePlanilla"
        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 { usePlanillasStore } from '../../stores/usePlanillas';

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' 
  });
};

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})?`)) {
    deletePlanilla();
  }
};

const deletePlanilla = 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';
  const statusNormalized = status.toLowerCase().replace(/\s+/g, '-');
  switch (statusNormalized) {
    case 'pagado': return 'bg-green-500';
    case 'pendiente': return 'bg-yellow-500 text-gray-800';
    case 'anulado': return 'bg-red-500';
    case 'borrador': return 'bg-gray-500';
    default: return 'bg-gray-400';
  }
};

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

</script>

<style scoped>
/* All layout and most styling is now handled by Tailwind utility classes. */
/* Scoped styles can be used for very specific cases not covered by Tailwind, if any. */
</style>
