<template>
  <div class="planilla-form-container" :style="{ backgroundColor: uiStore.tableBgColorPlanillas }">
    <h2>{{ formTitle }}</h2>
    <form @submit.prevent="handleSubmit">
      <div class="form-group">
        <label for="titulo">Título:</label>
        <input type="text" id="titulo" v-model="formData.titulo" />
        <span v-if="formErrors.titulo" class="error-message">{{ formErrors.titulo }}</span>
      </div>

      <div class="form-group">
        <label for="empleado_id">Empleado ID:</label>
        <input type="number" id="empleado_id" v-model.number="formData.empleado_id" />
        <span v-if="formErrors.empleado_id" class="error-message">{{ formErrors.empleado_id }}</span>
      </div>

      <div class="form-group">
        <label for="fecha_desde">Fecha Desde:</label>
        <input type="date" id="fecha_desde" v-model="formData.fecha_desde" />
        <span v-if="formErrors.fecha_desde" class="error-message">{{ formErrors.fecha_desde }}</span>
      </div>

      <div class="form-group">
        <label for="fecha_hasta">Fecha Hasta:</label>
        <input type="date" id="fecha_hasta" v-model="formData.fecha_hasta" />
        <span v-if="formErrors.fecha_hasta" class="error-message">{{ formErrors.fecha_hasta }}</span>
      </div>

      <div class="form-group">
        <label for="total">Total:</label>
        <input type="number" step="any" id="total" v-model.number="formData.total" />
        <span v-if="formErrors.total" class="error-message">{{ formErrors.total }}</span>
      </div>

      <div class="form-group">
        <label for="estado">Estado:</label>
        <select id="estado" v-model="formData.estado">
          <option value="pendiente">Pendiente</option>
          <option value="pagado">Pagado</option>
          <option value="anulado">Anulado</option>
        </select>
        <span v-if="formErrors.estado" class="error-message">{{ formErrors.estado }}</span>
      </div>

      <div class="form-actions">
        <button type="submit" :disabled="isSubmitting">{{ isSubmitting ? 'Guardando...' : 'Guardar' }}</button>
        <button type="button" @click="handleCancel" :disabled="isSubmitting">Cancelar</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue';
import { usePlanillasStore } from '../../stores/usePlanillas';
import { useUi } from '@/stores/useUi'; // Corrected UI store import
import { useRouter, useRoute } from 'vue-router';

const props = defineProps({
  id: String, // From route params, will be a string
});

const router = useRouter();
const route = useRoute(); // Can also get id from route.params.id

const planillasStore = usePlanillasStore();
const uiStore = useUi(); // Corrected UI store instantiation

const formData = reactive({
  titulo: '',
  empleado_id: null,
  fecha_desde: '',
  fecha_hasta: '',
  total: null,
  estado: 'pendiente', // Default state
});

const formErrors = reactive({
  titulo: '',
  empleado_id: '',
  fecha_desde: '',
  fecha_hasta: '',
  estado: '',
  total: '', // Though not explicitly required, can add validation if needed
});

const isSubmitting = ref(false);
const editingId = ref(null); // To store the actual ID for editing

const formTitle = computed(() => (editingId.value ? 'Editar Planilla' : 'Crear Nueva Planilla'));

// Helper to format date for <input type="date">
const formatDateForInput = (dateString) => {
  if (!dateString) return '';
  const date = new Date(dateString);
  // Adjust for timezone issues if date is off by one day
  const offset = date.getTimezoneOffset();
  const correctedDate = new Date(date.getTime() - (offset * 60 * 1000));
  return correctedDate.toISOString().split('T')[0];
};

onMounted(() => {
  const routeId = route.params.id || props.id;
  if (routeId) {
    editingId.value = routeId; 
    planillasStore.fetchPlanillaById(routeId).then(() => {
      if (planillasStore.currentPlanilla && String(planillasStore.currentPlanilla.id) === String(editingId.value)) {
        populateFormFromStore();
      } else {
        console.error(`Failed to load planilla data for ID: ${routeId} or mismatch. Current store ID: ${planillasStore.currentPlanilla?.id}`);
        // router.push({ name: 'PlanillasIndex' }); 
      }
    }).catch(error => {
        console.error(`Error fetching planilla ${routeId}:`, error);
        // router.push({ name: 'PlanillasIndex' });
    });
  }
});

// Watch for changes in currentPlanilla if the component might be reused
// or if fetchPlanillaById updates currentPlanilla asynchronously after mount
watch(() => planillasStore.currentPlanilla, (newPlanilla) => {
  if (editingId.value && newPlanilla && String(newPlanilla.id) === String(editingId.value)) {
    populateFormFromStore();
  }
}, { deep: true });

function populateFormFromStore() {
    Object.assign(formData, {
      ...planillasStore.currentPlanilla,
      fecha_desde: formatDateForInput(planillasStore.currentPlanilla.fecha_desde),
      fecha_hasta: formatDateForInput(planillasStore.currentPlanilla.fecha_hasta),
      empleado_id: planillasStore.currentPlanilla.empleado_id ? Number(planillasStore.currentPlanilla.empleado_id) : null,
      total: planillasStore.currentPlanilla.total ? parseFloat(planillasStore.currentPlanilla.total) : null,
    });
}


const validateForm = () => {
  let isValid = true;
  for (const key in formErrors) {
    formErrors[key] = '';
  }

  if (!formData.titulo?.trim()) {
    formErrors.titulo = 'El título es obligatorio.';
    isValid = false;
  }
  if (formData.empleado_id == null || isNaN(parseInt(formData.empleado_id)) || Number(formData.empleado_id) <= 0) {
    formErrors.empleado_id = 'El ID de empleado es obligatorio y debe ser un número positivo.';
    isValid = false;
  }
  if (!formData.fecha_desde) {
    formErrors.fecha_desde = 'La fecha desde es obligatoria.';
    isValid = false;
  }
  if (!formData.fecha_hasta) {
    formErrors.fecha_hasta = 'La fecha hasta es obligatoria.';
    isValid = false;
  }
  if (formData.fecha_desde && formData.fecha_hasta && new Date(formData.fecha_desde) > new Date(formData.fecha_hasta)) {
    formErrors.fecha_hasta = 'La fecha hasta no puede ser anterior a la fecha desde.';
    isValid = false;
  }
  if (!formData.estado) {
    formErrors.estado = 'El estado es obligatorio.';
    isValid = false;
  }
  if (formData.total != null && (isNaN(parseFloat(formData.total)) || parseFloat(formData.total) < 0)) {
      formErrors.total = 'El total debe ser un número positivo.';
      isValid = false;
  }
  return isValid;
};

const handleSubmit = async () => {
  if (!validateForm()) {
    return;
  }

  isSubmitting.value = true;
  try {
    const payload = {
      ...formData,
      empleado_id: parseInt(formData.empleado_id, 10),
      total: formData.total != null ? parseFloat(formData.total) : null,
      // Ensure dates are actual Date objects or correctly formatted ISO strings if API requires
      // The <input type="date"> provides YYYY-MM-DD. If API needs full DateTime:
      // fecha_desde: formData.fecha_desde ? new Date(formData.fecha_desde).toISOString() : null,
      // fecha_hasta: formData.fecha_hasta ? new Date(formData.fecha_hasta).toISOString() : null,
    };

    if (editingId.value) {
      await planillasStore.updatePlanilla(editingId.value, payload);
    } else {
      await planillasStore.createPlanilla(payload);
    }
    router.push({ name: 'planillas-index' }); 
  } catch (error) {
    console.error('Error saving planilla:', error);
    alert(`Error: ${error}`);
    // Potentially set a form-level error message:
    // formErrors.general = `Error: ${errorMessage}`;
  } finally {
    isSubmitting.value = false;
  }
};

const handleCancel = () => {
  router.go(-1); 
};

</script>

<style scoped>
.planilla-form-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  /* background-color: #f9f9f9; */ /* Removed to use dynamic background */
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
  color: var(--accent-color-planillas); /* Accent color for title */
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #555;
}

.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group select {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--secondary-color); /* Theme border */
  border-radius: 4px;
  box-sizing: border-box;
  background-color: var(--background-color); /* Theme background */
  color: var(--text-color); /* Theme text */
}
.form-group input:focus,
.form-group select:focus {
  border-color: var(--accent-color-planillas);
  box-shadow: 0 0 0 2px var(--accent-color-planillas);
  outline: none;
}

.form-group select {
  appearance: none; 
  /* background-color: white; */ /* Now uses var(--background-color) */
}

.error-message {
  display: block;
  color: var(--warning-color); /* Theme warning color */
  font-size: 0.9em;
  margin-top: 5px;
}

.form-actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.form-actions button {
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.2s ease, filter 0.2s ease;
}

.form-actions button[type="submit"] {
  background-color: var(--accent-color-planillas);
  color: white; /* Assuming accent is dark enough */
}

.form-actions button[type="submit"]:hover {
  filter: brightness(0.9);
}

.form-actions button[type="submit"]:disabled {
  background-color: var(--secondary-color);
  opacity: 0.7;
  cursor: not-allowed;
}

.form-actions button[type="button"] {
  background-color: var(--secondary-color);
  color: var(--text-color); /* Ensure contrast */
}

.form-actions button[type="button"]:hover {
  filter: brightness(0.9);
}
.form-actions button[type="button"]:disabled {
  background-color: var(--secondary-color);
  opacity: 0.5;
  cursor: not-allowed;
}
</style>
