<script setup>
import GoogleIcon from '@Shared/GoogleIcon.vue';
import { getDate } from '@Controllers/DateController';

/** Props */
const props = defineProps({
  certifications: {
    type: Array,
    default: () => []
  }
});

/** Eventos */
const emit = defineEmits(['destroy', 'edit']);

/** Métodos */
function openDestroy(cert) {
  emit('destroy', cert);
}

function openEdit(cert) {
  emit('edit', cert);
}

/** Métodos */
function getCertificationStatus(cert) {
  // Si no tiene fecha de expiración, se considera permanente
  if (!cert.date_expiration) {
    return {
      status: 'permanente',
      statusText: 'Permanente',
      isExpired: false
    };
  }
  
  const now = new Date();
  const expirationDate = new Date(cert.date_expiration);
  
  // Si la fecha actual es mayor a la fecha de expiración, está vencida
  const isExpired = now > expirationDate;
  
  return {
    status: isExpired ? 'vencida' : 'vigente',
    statusText: isExpired ? 'Vencida' : 'Vigente',
    isExpired
  };
}
</script>

<template>
  <div class="mt-8">
    <h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
      <GoogleIcon 
        class="text-black dark:text-primary-dt text-xl"
        name="license"
      />
      Certificaciones
    </h3>

    <div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-2">
      <!-- Certificación dinámica -->
      <article 
        v-for="cert in certifications" 
        :key="cert.id"
        :class="[
          'rounded-lg border p-4 relative',
          getCertificationStatus(cert).status === 'vigente' 
            ? 'border-gray-100 bg-green-50/40 dark:bg-success-d/10 dark:border-primary/20 dark:text-primary-dt'
            : 'border-gray-100 bg-white dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt'
        ]"
      >
        <div class="flex items-start justify-between">
          <div>
            <h4 class="text-sm font-semibold text-gray-800 dark:text-primary-dt">{{ cert.name }}</h4>
            <p class="text-xs text-gray-500 mt-2 dark:text-primary-dt/70">{{ cert.institution }}</p>
            <p class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">Obtenida: {{ cert.date_obtained ? getDate(cert.date_obtained) : '-' }}</p>
            <p class="text-xs text-gray-500 dark:text-primary-dt/70">Vigencia: {{ cert.date_expiration ? getDate(cert.date_expiration) : 'Permanente' }}</p>
          </div>

          <div class="flex items-center gap-2">
            <span 
              :class="[
                'inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold',
                getCertificationStatus(cert).status === 'vigente' 
                  ? 'bg-emerald-100 text-emerald-700 dark:bg-success-d dark:text-success-dt'
                  : getCertificationStatus(cert).status === 'permanente'
                  ? 'bg-blue-100 text-blue-700 dark:bg-info-d dark:text-info-dt'
                  : 'bg-amber-100 text-amber-800 dark:bg-warning-d dark:text-warning-dt'
              ]"
            >
              {{ getCertificationStatus(cert).statusText }}
            </span>
            <button 
              @click="openEdit(cert)"
              class="p-1 text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300"
              title="Editar certificación"
            >
              <GoogleIcon name="edit" class="w-4 h-4" />
            </button>
            <button 
              @click="openDestroy(cert)"
              class="p-1 text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300"
              title="Eliminar certificación"
            >
              <GoogleIcon name="delete" class="w-4 h-4" />
            </button>
          </div>
        </div>
      </article>

      <!-- Estado vacío para certificaciones -->
      <div v-if="!certifications || certifications.length === 0" class="col-span-2 py-8 text-center">
        <div class="text-gray-500 dark:text-primary-dt/70">
          <GoogleIcon name="license" class="w-12 h-12 mx-auto mb-4 text-gray-400" />
          <p class="text-lg font-medium">No se encontraron certificaciones</p>
          <p class="text-sm mt-1">Intenta ajustar los filtros de búsqueda</p>
        </div>
      </div>
    </div>
  </div>
</template>
