<template>
  <div class="p-6 bg-gray-50 min-h-screen">
    <!-- … encabezado … -->
    <header class="mb-8">
      <div class="flex justify-between items-center">
        <h1 class="text-4xl font-bold text-gray-800">Gestión de Empleados</h1>
        <button
          @click="goToCreateEmployee"
          class="create-button px-6 py-3 text-white font-semibold rounded-lg shadow-md focus:outline-none transition duration-150 ease-in-out"
        >
          <!-- ícono ➕ -->
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline-block mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
          </svg>
          Crear Empleado
        </button>
      </div>
      <p class="mt-2 text-gray-600">Visualiza, crea y gestiona los empleados de la organización.</p>
    </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="text-center py-10">
        <p class="text-gray-500 text-xl">Cargando empleados...</p>
      </div>

      <div v-else-if="error" class="text-center py-10">
        <p class="text-red-500 text-xl">Error al cargar los empleados: {{ 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 v-if="employees.length === 0" class="col-span-full text-center py-10">
            <p class="text-gray-500 text-xl">No hay empleados para mostrar en la vista de tarjetas.</p>
          </div>
        </div>

        <!-- vista de tabla -->
        <div v-if="currentView === 'table'">
          <TablaEmpleados :employees="employees" />
          <div
            v-if="employees.length === 0"
            class="text-center py-10 bg-white shadow-md rounded-lg mt-4"
          >
            <p class="text-gray-500 text-xl">No hay empleados para mostrar en la vista de tabla.</p>
          </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>
.min-h-screen { min-height: calc(100vh - var(--navbar-height, 0px)); } /* Assuming --navbar-height is defined elsewhere or adjust */

.create-button {
  background-color: var(--accent-color-empleados);
}
.create-button:hover {
  filter: brightness(1.1);
}
.create-button:focus {
  box-shadow: 0 0 0 2px var(--background-color), 0 0 0 4px var(--accent-color-empleados);
}

.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), 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>
