<template>
  <div class="areas-container">
    <!-- Header -->
    <div class="areas-header">
      <div class="header-title">
        <h2>Procesos</h2>
        <p class="subtitle">Gestión de procesos académicos</p>
      </div>
      <a-button type="primary" @click="showCreateModal">
        <template #icon><PlusOutlined /></template>
        Nuevo Proceso
      </a-button>
    </div>

    <!-- Filtros -->
    <div class="filters-section">
      <a-input-search
        v-model:value="searchText"
        placeholder="Buscar por nombre..."
        @search="handleSearch"
        style="width: 300px"
        size="large"
      />

      <a-select
        v-model:value="estadoFilter"
        placeholder="Estado"
        style="width: 200px; margin-left: 16px"
        size="large"
        @change="handleFilterChange"
      >
        <a-select-option :value="null">Todos</a-select-option>
        <a-select-option :value="true">Activo</a-select-option>
        <a-select-option :value="false">Inactivo</a-select-option>
      </a-select>

      <a-button
        size="large"
        style="margin-left: 16px"
        @click="clearFilters"
      >
        <ReloadOutlined /> Limpiar
      </a-button>
    </div>

    <!-- Tabla -->
    <a-table
      :data-source="procesoStore.procesos"
      :columns="columns"
      :loading="procesoStore.loading"
      :pagination="pagination"
      row-key="id"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record }">
        <!-- Estado -->
        <template v-if="column.key === 'activo'">
          <a-switch
            :checked="record.activo"
            @change="() => toggleActivo(record)"
            checked-children="Activo"
            un-checked-children="Inactivo"
          />
        </template>

        <!-- Público -->
        <template v-if="column.key === 'publico'">
          <a-tag :color="record.publico ? 'green' : 'default'">
            {{ record.publico ? 'Público' : 'Privado' }}
          </a-tag>
        </template>

        <!-- Fecha -->
        <template v-if="column.key === 'created_at'">
          {{ formatDate(record.created_at) }}
        </template>

        <!-- Acciones -->
        <template v-if="column.key === 'acciones'">
          <a-space>
            <a-button type="link" @click="showEditModal(record)">
              <EditOutlined /> Editar
            </a-button>
            <a-button danger type="link" @click="confirmDelete(record)">
              <DeleteOutlined /> Eliminar
            </a-button>
          </a-space>
        </template>
      </template>
    </a-table>

    <!-- Modal Crear / Editar -->
    <a-modal
      v-model:open="modalVisible"
      :title="isEditing ? 'Editar Proceso' : 'Nuevo Proceso'"
      :confirm-loading="procesoStore.loading"
      @ok="handleSubmit"
      @cancel="closeModal"
      width="600px"
    >
      <a-form ref="formRef" :model="formState" layout="vertical">
        <a-form-item label="Nombre" required>
          <a-input v-model:value="formState.nombre" />
        </a-form-item>

        <a-form-item label="Descripción">
          <a-textarea v-model:value="formState.descripcion" />
        </a-form-item>

        <a-form-item label="Tipo de Proceso">
          <a-input v-model:value="formState.tipo_proceso" />
        </a-form-item>

        <a-form-item label="Tipo de Simulacro">
          <a-input v-model:value="formState.tipo_simulacro" />
        </a-form-item>

        <a-form-item label="Duración (min)">
          <a-input-number v-model:value="formState.duracion" style="width:100%" />
        </a-form-item>

        <a-form-item label="Intentos Máximos">
          <a-input-number v-model:value="formState.intentos_maximos" style="width:100%" />
        </a-form-item>

        <a-form-item label="Público">
          <a-switch v-model:checked="formState.publico" />
        </a-form-item>

        <a-form-item label="Activo">
          <a-switch v-model:checked="formState.activo" />
        </a-form-item>

        <!-- Errores -->
        <a-alert
          v-if="procesoStore.errors"
          type="error"
          show-icon
          :message="'Errores en el formulario'"
        />
      </a-form>
    </a-modal>

    <!-- Modal Eliminar -->
    <a-modal
      v-model:open="deleteModalVisible"
      title="Eliminar Proceso"
      ok-type="danger"
      ok-text="Eliminar"
      @ok="handleDelete"
      @cancel="deleteModalVisible = false"
    >
      <a-alert
        type="warning"
        show-icon
        message="¿Deseas eliminar este proceso?"
      />
      <p><strong>{{ procesoToDelete?.nombre }}</strong></p>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useProcesoStore } from '../../../store/proceso.store'
import { message } from 'ant-design-vue'
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  ReloadOutlined
} from '@ant-design/icons-vue'

const procesoStore = useProcesoStore()

const modalVisible = ref(false)
const deleteModalVisible = ref(false)
const isEditing = ref(false)
const procesoToDelete = ref(null)
const formRef = ref()

const searchText = ref('')
const estadoFilter = ref(null)

const formState = reactive({
  id: null,
  nombre: '',
  descripcion: '',
  tipo_proceso: '',
  tipo_simulacro: '',
  duracion: null,
  intentos_maximos: null,
  publico: false,
  activo: true,
})

const pagination = computed(() => ({
  current: procesoStore.pagination.current,
  pageSize: procesoStore.pagination.perPage,
  total: procesoStore.pagination.total,
  showSizeChanger: true,
}))

const columns = [
  { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
  { title: 'Nombre', dataIndex: 'nombre', key: 'nombre' },
  { title: 'Tipo Proceso', dataIndex: 'tipo_proceso', key: 'tipo_proceso' },
  { title: 'Público', dataIndex: 'publico', key: 'publico', width: 100 },
  { title: 'Activo', dataIndex: 'activo', key: 'activo', width: 100 },
  { title: 'Creado', dataIndex: 'created_at', key: 'created_at', width: 150 },
  { title: 'Acciones', key: 'acciones', width: 180, align: 'center' },
]

const showCreateModal = () => {
  isEditing.value = false
  resetForm()
  modalVisible.value = true
}

const showEditModal = (proceso) => {
  isEditing.value = true
  Object.assign(formState, proceso)
  modalVisible.value = true
}

const closeModal = () => {
  modalVisible.value = false
  resetForm()
}

const resetForm = () => {
  Object.assign(formState, {
    id: null,
    nombre: '',
    descripcion: '',
    tipo_proceso: '',
    tipo_simulacro: '',
    duracion: null,
    intentos_maximos: null,
    publico: false,
    activo: true,
  })
}

const handleSubmit = async () => {
  try {
    if (isEditing.value) {
      await procesoStore.actualizarProceso(formState.id, formState)
      message.success('Proceso actualizado')
    } else {
      await procesoStore.crearProceso(formState)
      message.success('Proceso creado')
    }
    closeModal()
    procesoStore.fetchProcesos()
  } catch {
    message.error('Error al guardar')
  }
}

const confirmDelete = (proceso) => {
  procesoToDelete.value = proceso
  deleteModalVisible.value = true
}

const handleDelete = async () => {
  await procesoStore.eliminarProceso(procesoToDelete.value.id)
  message.success('Proceso eliminado')
  deleteModalVisible.value = false
}

const toggleActivo = async (proceso) => {
  await procesoStore.toggleActivo(proceso.id)
}

const handleSearch = () => {
  procesoStore.fetchProcesos({ search: searchText.value })
}

const handleFilterChange = () => {
  procesoStore.fetchProcesos({ activo: estadoFilter.value })
}

const clearFilters = () => {
  searchText.value = ''
  estadoFilter.value = null
  procesoStore.fetchProcesos()
}

const handleTableChange = (pagination) => {
  procesoStore.pagination.current = pagination.current
  procesoStore.pagination.perPage = pagination.pageSize
  procesoStore.fetchProcesos()
}

const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleDateString('es-ES')
}

onMounted(() => {
  procesoStore.fetchProcesos()
})
</script>


<style scoped>
.areas-container {
  padding: 0;
}

.areas-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 8px;
}

.header-title h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f1f1f;
}

.subtitle {
  margin: 4px 0 0 0;
  color: #666;
  font-size: 14px;
}

.new-area-btn {
  height: 40px;
  font-weight: 500;
}

.filters-section {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 0 8px;
  flex-wrap: wrap;
  gap: 16px;
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  gap: 16px;
}

.loading-state p {
  color: #666;
  margin: 0;
}

.empty-state {
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.areas-table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  overflow: hidden;
}

.areas-table {
  border-radius: 12px;
}

.areas-table :deep(.ant-table) {
  border-radius: 12px;
}

.areas-table :deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  font-weight: 600;
  color: #1f1f1f;
  border-bottom: 1px solid #f0f0f0;
}

.areas-table :deep(.ant-table-tbody > tr > td) {
  border-bottom: 1px solid #f0f0f0;
}

.areas-table :deep(.ant-table-tbody > tr:hover > td) {
  background: #fafafa;
}

.action-btn {
  padding: 4px 8px;
  height: auto;
}

.action-btn :deep(.anticon) {
  font-size: 14px;
}

.area-modal :deep(.ant-modal-header) {
  border-bottom: 1px solid #f0f0f0;
  padding: 20px 24px;
}

.area-modal :deep(.ant-modal-body) {
  padding: 24px;
}

.area-modal :deep(.ant-modal-footer) {
  border-top: 1px solid #f0f0f0;
  padding: 12px 24px;
}

.form-footer {
  margin-top: 16px;
}

.error-alert {
  margin-bottom: 8px;
}

.error-alert:last-child {
  margin-bottom: 0;
}

.delete-confirm-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.area-info {
  background: #fafafa;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #f0f0f0;
}

.area-info p {
  margin: 4px 0;
  color: #666;
}

.area-info p strong {
  color: #1f1f1f;
}

/* Responsive */
@media (max-width: 768px) {
  .areas-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .new-area-btn {
    align-self: flex-start;
  }
  
  .filters-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filters-section .ant-input-search,
  .filters-section .ant-select,
  .filters-section .ant-btn {
    width: 100%;
    margin-left: 0;
    margin-bottom: 8px;
  }
  
  .areas-table-container {
    overflow-x: auto;
  }
  
  .areas-table {
    min-width: 800px;
  }
}
</style>