<template>
  <div class="planillas-index-container">
    <header class="page-header">
      <h1>Gestión de Planillas</h1>
      <button @click="navigateToCreateForm" class="btn-create">
        Crear Nueva Planilla
      </button>
    </header>

    <!-- View Toggle Buttons -->
    <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>

    <div v-if="isLoading" class="loading-message">
      Cargando planillas...
    </div>

    <div v-else-if="errorLoading" class="error-message-full">
      <p>Ocurrió un error al cargar las planillas. Por favor, intente de nuevo más tarde.</p>
      <p v-if="errorMessage">Detalle: {{ errorMessage }}</p>
    </div>
    
    <div v-else>
      <!-- Vista de Tabla -->
      <div v-if="currentView === 'table'">
        <tabla-planillas
          :planillas="planillasList"
          @edit="handleEditPlanilla"
        />
        <div v-if="planillasList.length === 0 && !isLoading" class="no-data-message">
          No hay planillas para mostrar en la vista de tabla.
        </div>
      </div>

      <!-- Vista de Tarjetas -->
      <div v-if="currentView === 'card'">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
          <CardPlanilla
            v-for="planilla in planillasList"
            :key="planilla.id"
            :planilla="planilla"
            @edit="handleEditPlanilla"
          />
        </div>
        <div v-if="planillasList.length === 0 && !isLoading" class="no-data-message">
          No hay planillas para mostrar en la vista de tarjetas.
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { usePlanillasStore } from '../../stores/usePlanillas';
import { useUi } from '../../stores/useUi'; // Import useUi
import { useRouter } from 'vue-router';
import TablaPlanillas from '../../components/planillas/tablaPlanillas.vue'; // Corrected path
import CardPlanilla from '../../components/planillas/cardPlanilla.vue';

const planillasStore = usePlanillasStore();
const ui = useUi(); // Access the ui store
const router = useRouter();

const isLoading = ref(true); // Set to true initially
const errorLoading = ref(false);
const errorMessage = ref('');

// Initialize currentView from the store's default setting for planillas
const currentView = ref(ui.defaultViewPlanillas);

// Computed property to get planillas from the store
const planillasList = computed(() => planillasStore.planillas);

// Fetch planillas when the component is mounted
onMounted(async () => {
  try {
    isLoading.value = true;
    errorLoading.value = false;
    errorMessage.value = '';
    await planillasStore.fetchPlanillas();
  } catch (error) {
    console.error("Error fetching planillas on mount:", error);
    errorLoading.value = true;
    errorMessage.value = error.message || 'Error desconocido.';
  } finally {
    isLoading.value = false;
  }
});

// Navigate to the form for creating a new planilla
const navigateToCreateForm = () => {
  // Assuming your route for creating a new planilla is named 'PlanillaFormNew'
  // This name should match what's defined in your router configuration
  router.push({ name: 'planillas-new' }); 
};

// Navigate to the form for editing an existing planilla
const handleEditPlanilla = (planillaId) => {
  // Assuming your route for editing is named 'PlanillaFormEdit'
  // This name should match what's defined in your router configuration
  router.push({ name: 'planillas-edit', params: { id: planillaId } });
};

const btnViewClass = (viewType) => {
  const base = 'p-2 rounded-md transition-colors duration-150 ease-in-out';
  if (currentView.value === viewType) {
    return `${base} bg-[var(--accent-color-planillas)] 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`;
};

</script>

<style scoped>
.planillas-index-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
}

.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-planillas); /* Accent for title */
  font-size: 2.2em;
  font-weight: 600;
}

.btn-create {
  background-color: var(--accent-color-planillas);
  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);
}

.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 */
}

/* Styling for the imported tablaPlanillas can be managed within its own component,
   but you can add overrides or container styles here if needed. */

/* Added for view toggle buttons */
.view-toggle-active-planillas {
  background-color: var(--accent-color-planillas);
  box-shadow: 0 0 0 2px var(--background-color, #fff), 0 0 0 4px var(--accent-color-planillas);
}
</style>
