<template>
  <div class="empleados-index-container">
    <!-- … encabezado … -->
    <header class="page-header">
      <h1>Gestión de Empleados</h1>
      <button @click="goToCreateEmployee" class="btn-create">
        Crear Empleado
      </button>
    </header>

    <!-- selector de vista -->
    <div class="mb-4 flex justify-end space-x-2">
      <button
        @click="currentView = 'table'"
        :class="btnViewClass('table')"
        aria-label="Table View"
        title="Table View"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" /></svg>
      </button>
      <button
        @click="currentView = 'card'"
        :class="btnViewClass('card')"
        aria-label="Card View"
        title="Card View"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
      </button>
    </div>

    <!-- contenido -->
    <div>
      <div v-if="loading" class="loading-message">Cargando empleados...</div>

      <div v-else-if="error" class="error-message-full">
        <p>Error al cargar los empleados. Por favor, intente de nuevo más tarde.</p>
        <p v-if="error">Detalle: {{ error }}</p>
      </div>

      <div v-else>
        <!-- vista de tarjetas -->
        <div
          v-if="currentView === 'card'"
          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
        >
          <CardEmpleado
            v-for="employee in employees"
            :key="employee.id"
            :employee="employee"
          />
        </div>
        <div v-if="currentView === 'card' && employees.length === 0 && !loading" class="no-data-message">
          No hay empleados para mostrar en la vista de tarjetas.
        </div>

        <!-- vista de tabla -->
        <div v-if="currentView === 'table'">
          <TablaEmpleados :employees="employees" />
          <div v-if="employees.length === 0 && !loading" class="no-data-message">
            No hay empleados para mostrar en la vista de tabla.
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
import { useUi } from '@/stores/useUi'; // Import useUi

import CardEmpleado   from '@/components/empleados/cardEmpleado.vue';
import TablaEmpleados from '@/components/empleados/tablaEmpleados.vue';
import { useEmpleadosStore } from '@/stores/useEmpleados.js'; // ruta según tu proyecto

// --- refs locales ---
const router       = useRouter();
const ui           = useUi(); // Access the ui store
const currentView  = ref<'card' | 'table'>(ui.defaultViewEmpleados); // Initialize from store
const loading      = ref(true);
const error        = ref<string | null>(null);

// --- store ---
const empleadosStore     = useEmpleadosStore();
const { empleados }      = storeToRefs(empleadosStore);

// alias para plantilla
const employees = empleados;

// --- helpers ---
// Removed btnClass as manual toggle buttons are removed
const btnViewClass = (viewType: 'card' | 'table') => {
  const base = 'p-2 rounded-md transition-colors duration-150 ease-in-out';
  if (currentView.value === viewType) {
    return `${base} bg-[var(--accent-color-empleados)] text-white shadow-lg`;
  }
  return `${base} bg-gray-200 text-gray-700 hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600`;
};

// --- fetch inicial ---
const fetchEmployees = async () => {
  loading.value = true;
  error.value   = null;
  try {
    await empleadosStore.fetchEmpleados();
  } catch (e) {
    console.error('Error al traer empleados:', e);
    error.value = e instanceof Error ? e.message : 'Ocurrió un error desconocido.';
  } finally {
    loading.value = false;
  }
};

onMounted(fetchEmployees);

// --- navegación ---
const goToCreateEmployee = () => router.push({ name: 'empleados-new' });
</script>

<style scoped>
.empleados-index-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  min-height: calc(100vh - var(--navbar-height, 0px)); /* Assuming --navbar-height is defined elsewhere or adjust */
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.page-header h1 {
  color: var(--accent-color-empleados); /* Accent for title */
  font-size: 2.2em;
  font-weight: 600;
}

.btn-create {
  background-color: var(--accent-color-empleados);
  color: white; /* Assuming accent is dark enough */
  padding: 12px 18px;
  border: none;
  border-radius: 5px;
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-create:hover {
  filter: brightness(0.9);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.btn-create:focus {
  box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-empleados);
}

.loading-message,
.error-message-full,
.no-data-message {
  text-align: center;
  padding: 25px;
  margin-top: 25px;
  border-radius: 8px;
  font-size: 1.1em;
}

.loading-message {
  color: #7f8c8d; /* Gray */
}

.error-message-full {
  background-color: #fdedec; /* Lighter red */
  color: #e74c3c; /* Strong red */
  border: 1px solid #f5b7b1; /* Light red border */
}
.error-message-full p {
  margin: 5px 0;
}

.no-data-message {
  background-color: #eafaf1; /* Lighter green/blue */
  color: #2ecc71; /* Green */
  border: 1px solid #a3e4d7; /* Light green/blue border */
}

.view-toggle-active {
  background-color: var(--accent-color-empleados);
  /* For focus, assuming white text on accent. Adjust if needed. */
  box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-empleados);
}
/* Inactive toggle button styling is handled by Tailwind classes directly in btnClass function */

.view-enter-active, .view-leave-active { transition: opacity .3s ease; }
.view-enter-from, .view-leave-to { opacity: 0; }
</style>
