<template>
  <div class="p-4 sm:p-6 rounded-lg overflow-x-auto" :style="{ backgroundColor: ui.tableBgColorEmpleados }">
    <table class="min-w-full divide-y divide-[var(--accent-color-empleados)]" :style="{ backgroundColor: ui.tableBgColorEmpleados }">
      <thead class="divide-y divide-[var(--accent-color-empleados)]" :style="{ backgroundColor: ui.tableBgColorEmpleados }">
        <tr>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
            Avatar
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
            Nombre
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
            Cédula
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
            Teléfono
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
            Ubicación
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
            ID CIAT
          </th>
          <th scope="col" class="px-4 py-3 sm:px-6 sm:py-3 text-left text-xs font-medium text-gray-500 dark:text-slate-400 uppercase tracking-wider">
            Acciones
          </th>
        </tr>
      </thead>
      <tbody class="divide-y divide-[var(--accent-color-empleados)]" :style="{ backgroundColor: ui.tableBgColorEmpleados }">
        <tr v-if="!employees || employees.length === 0">
          <td colspan="7" class="px-6 py-10 text-center text-gray-500 dark:text-slate-400 text-lg">
            No hay empleados para mostrar.
          </td>
        </tr>
        <tr v-for="employee in employees" :key="employee.id" class="transition-colors duration-150 ease-in-out hover:bg-[var(--accent-color-empleados)]/10 dark:hover:bg-[var(--accent-color-empleados)]/20">
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap">
            <img
              :src="employee.avatar_url || 'https://via.placeholder.com/40'"
              alt="Avatar"
              class="w-10 h-10 rounded-full object-cover border border-gray-300 shadow-sm"
            />
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm">
            <div class="text-sm font-semibold text-gray-800 dark:text-slate-200">{{ employee.name }}</div>
            <div v-if="employee.grupo_estudio" class="text-xs text-gray-500 dark:text-slate-400">
              Grupo: {{ employee.grupo_estudio }}
            </div>
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
            {{ employee.cedula }}
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
            {{ employee.telefono || '-' }}
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
            {{ employee.ubicacion }}
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm text-gray-700 dark:text-slate-300">
            {{ employee.idciat || '-' }}
          </td>
          <td class="px-4 py-3 sm:px-6 sm:py-4 whitespace-nowrap text-sm font-medium">
            <div class="flex items-center space-x-2">
              <button @click="handleEdit(employee.id)" class="p-1.5 sm:p-2 rounded-md transition-all duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-600/20 focus:ring-blue-500 dark:focus:ring-blue-400" title="Editar Empleado">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg>
              </button>
              <button @click="handleViewDetails(employee.id)" class="p-1.5 sm:p-2 rounded-md transition-all duration-150 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-300 hover:bg-green-100 dark:hover:bg-green-600/20 focus:ring-green-500 dark:focus:ring-green-400" title="Ver Detalles">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5"><path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" /></svg>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup lang="ts">
import { PropType } from 'vue'
import { useRouter } from 'vue-router'
import { useUi } from '../../stores/useUi.js';

const ui = useUi();

// Interface for Employee object structure, aligning with prisma model (excluding sensitive or large fields for table view)
interface Employee {
  id: string | number; // Primary key for navigation and :key
  name: string;
  cedula: number; // Assuming cedula is a number; adjust if it's a string
  avatar_url?: string;
  telefono?: string;
  ubicacion: string; // As per schema, this has a default and likely always present
  idciat?: string;
  grupo_estudio?: string;
  // Omitting created_at, updated_at, empleado boolean for brevity in table
}

const props = defineProps({
  employees: {
    type: Array as PropType<Employee[]>,
    required: true,
    default: () => [], // Provides a default empty array if no prop is passed
  },
});

const router = useRouter();

const handleEdit = (employeeId: string | number) => {
  router.push(`/empleados/edit/${employeeId}`);
};

const handleViewDetails = (employeeId: string | number) => {
  // This could navigate to a dedicated detail view or the edit view itself
  router.push(`/empleados/view/${employeeId}`); // Adjust route as per application structure
};
</script>

<style scoped>
/* Scoped styles can be minimized or removed if Tailwind covers all needs */

.rounded-full {
  object-fit: cover; /* Ensures avatar images are displayed nicely */
}

/* Optional: Keep icon transition if not handled by Tailwind's transition utilities on the button */
button svg {
  transition: transform 0.15s ease-in-out;
}
button:hover svg {
  transform: scale(1.1); /* Adjusted scale for a subtler effect */
}
</style>
