<!-- components/AdminAcademia/Cursos/CursosList.vue -->
<template>
  <div class="cursos-container">
    <!-- Header con Título y Botón de Nuevo Curso -->
    <div class="cursos-header">
      <div class="header-title">
        <h2>Cursos Académicos</h2>
        <p class="subtitle">Gestiona los cursos académicos del sistema</p>
      </div>
      <a-button 
        type="primary" 
        @click="showCreateModal"
        class="new-curso-btn"
      >
        <template #icon>
          <PlusOutlined />
        </template>
        Nuevo Curso
      </a-button>
    </div>

    <!-- Filtros -->
    <div class="filters-section">
      <a-input-search
        v-model:value="searchText"
        placeholder="Buscar por nombre o código..."
        @search="handleSearch"
        @press-enter="handleSearch"
        style="width: 300px"
        size="large"
      >
        <template #enterButton>
          <SearchOutlined />
        </template>
      </a-input-search>
      
      <a-select
        v-model:value="statusFilter"
        placeholder="Filtrar por estado"
        style="width: 200px; margin-left: 16px"
        size="large"
        @change="handleStatusFilterChange"
      >
        <a-select-option :value="null">Todos los estados</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
        @click="handleClearFilters"
        style="margin-left: 16px"
        size="large"
      >
        <template #icon>
          <ReloadOutlined />
        </template>
        Limpiar filtros
      </a-button>
    </div>

    <!-- Estado de Carga -->
    <div v-if="cursoStore.loading && cursoStore.cursos.length === 0" class="loading-state">
      <a-spin size="large" />
      <p>Cargando cursos...</p>
    </div>

    <!-- Estado Vacío -->
    <div v-else-if="cursoStore.cursos.length === 0" class="empty-state">
      <a-empty description="No hay cursos registrados" />
    </div>

    <!-- Tabla de Cursos -->
    <div v-else class="cursos-table-container">
      <a-table 
        :data-source="cursoStore.cursos"
        :columns="columns"
        :loading="cursoStore.loading"
        :pagination="pagination"
        row-key="id"
        @change="handleTableChange"
        class="cursos-table"
      >
        <template #bodyCell="{ column, record }">
          <!-- Estado -->
          <template v-if="column.key === 'activo'">
            <a-switch
              :checked="record.activo"
              :loading="togglingId === record.id"
              @change="handleToggleStatus(record)"
              checked-children="Activo"
              un-checked-children="Inactivo"
            />
          </template>

          <!-- Preguntas -->
          <template v-if="column.key === 'preguntas'">
            <div class="preguntas-info">
              <span class="preguntas-count">{{ record.preguntas_count || 0 }}</span>
              <a-button 
                type="link" 
                size="small"
                @click="verPreguntasCurso(record)"
                class="ver-preguntas-btn"
              >
                <EyeOutlined /> Ver preguntas
              </a-button>
            </div>
          </template>

          <!-- Fecha Creación -->
          <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" 
                size="small"
                @click="showEditModal(record)"
                class="action-btn"
              >
                <EditOutlined /> Editar
              </a-button>
              <a-button 
                type="link" 
                size="small"
                danger
                @click="confirmDelete(record)"
                class="action-btn"
              >
                <DeleteOutlined /> Eliminar
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </div>

    <!-- Modal Crear/Editar Curso -->
    <a-modal
      v-model:open="modalVisible"
      :title="isEditing ? 'Editar Curso' : 'Nuevo Curso'"
      :confirm-loading="cursoStore.loading"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
      width="500px"
      class="curso-modal"
    >
      <a-form
        ref="formRef"
        :model="formState"
        :rules="formRules"
        layout="vertical"
        @finish="onFormSubmit"
      >
        <a-form-item 
          label="Nombre del Curso" 
          name="nombre"
          :validate-status="getFieldStatus('nombre')"
          :help="getFieldHelp('nombre')"
        >
          <a-input
            v-model:value="formState.nombre"
            placeholder="Ej: Matemática Básica, Lenguaje Avanzado"
            size="large"
          />
        </a-form-item>

        <a-form-item 
          label="Código" 
          name="codigo"
          :validate-status="getFieldStatus('codigo')"
          :help="getFieldHelp('codigo')"
        >
          <a-input
            v-model:value="formState.codigo"
            placeholder="Código único (ej: MAT101, LEN201)"
            size="large"
          />
        </a-form-item>

        <a-form-item label="Estado" name="activo" v-if="isEditing">
          <a-switch
            v-model:checked="formState.activo"
            checked-children="Activo"
            un-checked-children="Inactivo"
          />
        </a-form-item>

        <div class="form-footer" v-if="cursoStore.errors">
          <a-alert
            v-for="(errorList, field) in cursoStore.errors"
            :key="field"
            type="error"
            :message="errorList[0]"
            show-icon
            class="error-alert"
          />
        </div>
      </a-form>
    </a-modal>

    <!-- Modal de Confirmación para Eliminar -->
    <a-modal
      v-model:open="deleteModalVisible"
      title="Confirmar Eliminación"
      @ok="handleDelete"
      @cancel="deleteModalVisible = false"
      ok-text="Eliminar"
      cancel-text="Cancelar"
      ok-type="danger"
      width="400px"
    >
      <div class="delete-confirm-content">
        <a-alert
          message="¿Estás seguro de eliminar este curso?"
          description="Esta acción no se puede deshacer. Se eliminarán todas las preguntas asociadas al curso."
          type="warning"
          show-icon
        />
        <div class="curso-info" v-if="cursoToDelete">
          <p><strong>Curso:</strong> {{ cursoToDelete.nombre }}</p>
          <p><strong>Código:</strong> {{ cursoToDelete.codigo }}</p>
          <p><strong>Preguntas:</strong> {{ cursoToDelete.preguntas_count || 0 }}</p>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { useCursoStore } from '../../../store/curso.store'
import { useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
  ReloadOutlined,
  EyeOutlined
} from '@ant-design/icons-vue'

// Store y Router
const cursoStore = useCursoStore()
const router = useRouter()

// Estado
const modalVisible = ref(false)
const deleteModalVisible = ref(false)
const isEditing = ref(false)
const cursoToDelete = ref(null)
const formRef = ref()
const searchText = ref('')
const statusFilter = ref(null)
const togglingId = ref(null)

// Formulario
const formState = reactive({
  id: null,
  nombre: '',
  codigo: '',
  activo: true
})

// Reglas de validación del formulario
const formRules = {
  nombre: [
    { required: true, message: 'Por favor ingresa el nombre del curso', trigger: 'blur' },
    { min: 3, max: 100, message: 'El nombre debe tener entre 3 y 100 caracteres', trigger: 'blur' }
  ],
  codigo: [
    { required: true, message: 'Por favor ingresa el código del curso', trigger: 'blur' },
    { min: 2, max: 10, message: 'El código debe tener entre 2 y 10 caracteres', trigger: 'blur' }
  ]
}

// Paginación para la tabla
const pagination = computed(() => ({
  current: cursoStore.pagination.current_page,
  pageSize: cursoStore.pagination.per_page,
  total: cursoStore.pagination.total,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '30', '50'],
  showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} cursos`
}))

// Columnas de la tabla
const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
    width: 80
  },
  {
    title: 'Nombre',
    dataIndex: 'nombre',
    key: 'nombre',
    sorter: (a, b) => a.nombre.localeCompare(b.nombre)
  },
  {
    title: 'Código',
    dataIndex: 'codigo',
    key: 'codigo',
    width: 120
  },
  {
    title: 'Estado',
    dataIndex: 'activo',
    key: 'activo',
    width: 120
  },
  {
    title: 'Preguntas',
    key: 'preguntas',
    width: 150
  },
  {
    title: 'Creado',
    dataIndex: 'created_at',
    key: 'created_at',
    width: 150
  },
  {
    title: 'Acciones',
    key: 'acciones',
    width: 180,
    align: 'center'
  }
]

// Métodos
const showCreateModal = () => {
  isEditing.value = false
  resetForm()
  modalVisible.value = true
  cursoStore.errors = null
}

const showEditModal = (curso) => {
  isEditing.value = true
  resetForm()
  
  // Llenar formulario con datos del curso
  formState.id = curso.id
  formState.nombre = curso.nombre
  formState.codigo = curso.codigo
  formState.activo = curso.activo
  
  modalVisible.value = true
  cursoStore.errors = null
}

const verPreguntasCurso = (curso) => {
  router.push({ name: 'CursoPreguntas', params: { id: curso.id } })
}

const confirmDelete = (curso) => {
  cursoToDelete.value = curso
  deleteModalVisible.value = true
}

const handleDelete = async () => {
  try {
    const success = await cursoStore.deleteCurso(cursoToDelete.value.id)
    if (success) {
      message.success('Curso eliminado correctamente')
      deleteModalVisible.value = false
      cursoToDelete.value = null
    } else {
      message.error('Error al eliminar el curso')
    }
  } catch (error) {
    message.error('Error al eliminar el curso')
  }
}

const handleModalOk = async () => {
  try {
    await formRef.value.validateFields()
    await onFormSubmit()
  } catch (error) {
    console.log('Validación fallida:', error)
  }
}

const handleModalCancel = () => {
  modalVisible.value = false
  resetForm()
  cursoStore.errors = null
}

const onFormSubmit = async () => {
  const payload = {
    nombre: formState.nombre,
    codigo: formState.codigo
  }

  // Solo incluir activo si estamos editando
  if (isEditing.value) {
    payload.activo = formState.activo
  }

  let success = false
  
  if (isEditing.value) {
    success = await cursoStore.updateCurso(formState.id, payload)
  } else {
    success = await cursoStore.createCurso(payload)
  }

  if (success) {
    message.success(
      isEditing.value 
        ? 'Curso actualizado correctamente' 
        : 'Curso creado correctamente'
    )
    modalVisible.value = false
    resetForm()
    cursoStore.errors = null
  } else {
    message.error('Error al guardar el curso')
  }
}

const handleToggleStatus = async (curso) => {
  togglingId.value = curso.id
  try {
    await cursoStore.toggleCurso(curso.id)
    message.success(`Curso ${curso.activo ? 'desactivado' : 'activado'} correctamente`)
  } catch (error) {
    message.error('Error al cambiar el estado del curso')
  } finally {
    togglingId.value = null
  }
}

const resetForm = () => {
  formState.id = null
  formState.nombre = ''
  formState.codigo = ''
  formState.activo = true
  
  if (formRef.value) {
    formRef.value.resetFields()
  }
}

const handleSearch = () => {
  cursoStore.setSearch(searchText.value)
  cursoStore.fetchCursos({ page: 1 })
}

const handleStatusFilterChange = (value) => {
  cursoStore.setActivo(value)
  cursoStore.fetchCursos({ page: 1 })
}

const handleClearFilters = () => {
  searchText.value = ''
  statusFilter.value = null
  cursoStore.clearFilters()
  cursoStore.fetchCursos({ page: 1 })
}

const handleTableChange = (paginationConfig) => {
  cursoStore.fetchCursos({
    page: paginationConfig.current,
    per_page: paginationConfig.pageSize
  })
}

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('es-ES', {
    day: '2-digit',
    month: '2-digit',
    year: 'numeric'
  })
}

const getFieldStatus = (fieldName) => {
  if (cursoStore.errors && cursoStore.errors[fieldName]) {
    return 'error'
  }
  return ''
}

const getFieldHelp = (fieldName) => {
  if (cursoStore.errors && cursoStore.errors[fieldName]) {
    return cursoStore.errors[fieldName][0]
  }
  return ''
}

// Lifecycle
onMounted(() => {
  cursoStore.fetchCursos()
})
</script>

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

.cursos-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-curso-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;
}

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

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

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

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

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

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

.preguntas-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.preguntas-count {
  font-weight: 600;
  color: #1890ff;
  min-width: 24px;
  text-align: center;
}

.ver-preguntas-btn {
  padding: 0;
  height: auto;
}

.ver-preguntas-btn :deep(.anticon) {
  font-size: 12px;
  margin-right: 4px;
}

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

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

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

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

.curso-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;
}

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

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

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

/* Responsive */
@media (max-width: 768px) {
  .cursos-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .new-curso-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;
  }
  
  .cursos-table-container {
    overflow-x: auto;
  }
  
  .cursos-table {
    min-width: 800px;
  }
}
</style>