<!-- components/AdminAcademia/Cursos.vue -->
<template>
  <div class="cursos-container">
    <!-- Header con filtros y acciones -->
    <div class="cursos-header">
      <div class="header-left">
        <h2 class="page-title">Gestión de Cursos</h2>
        <p class="page-subtitle">Administra todos los cursos del sistema</p>
      </div>
      <div class="header-right">
        <a-space :size="16">
          <a-input-search
            v-model:value="searchQuery"
            placeholder="Buscar cursos..."
            style="width: 250px"
            @search="handleSearch"
          />
          <a-button type="primary" @click="showModal = true">
            <template #icon><PlusOutlined /></template>
            Nuevo Curso
          </a-button>
        </a-space>
      </div>
    </div>

    <!-- Filtros avanzados -->
    <a-card class="filters-card" :bordered="false">
      <div class="filters-row">
        <a-space :size="16" wrap>
          <div class="filter-item">
            <span class="filter-label">Área:</span>
            <a-select
              v-model:value="filters.area"
              placeholder="Todas las áreas"
              style="width: 180px"
              allow-clear
            >
              <a-select-option value="matematicas">Matemáticas</a-select-option>
              <a-select-option value="ciencias">Ciencias</a-select-option>
              <a-select-option value="lenguaje">Lenguaje</a-select-option>
              <a-select-option value="sociales">Sociales</a-select-option>
            </a-select>
          </div>
          
          <div class="filter-item">
            <span class="filter-label">Estado:</span>
            <a-select
              v-model:value="filters.estado"
              placeholder="Todos los estados"
              style="width: 180px"
              allow-clear
            >
              <a-select-option value="activo">Activo</a-select-option>
              <a-select-option value="inactivo">Inactivo</a-select-option>
            </a-select>
          </div>
          
          <div class="filter-item">
            <span class="filter-label">Ordenar por:</span>
            <a-select
              v-model:value="filters.orden"
              style="width: 180px"
              default-value="nombre"
            >
              <a-select-option value="nombre">Nombre (A-Z)</a-select-option>
              <a-select-option value="fecha">Fecha de creación</a-select-option>
              <a-select-option value="estudiantes">N° de estudiantes</a-select-option>
            </a-select>
          </div>
          
          <a-button @click="resetFilters">
            <template #icon><ReloadOutlined /></template>
            Limpiar
          </a-button>
        </a-space>
      </div>
    </a-card>

    <!-- Tabla de cursos -->
    <a-card class="cursos-table-card">
      <template #extra>
        <a-space>
          <a-button @click="exportToExcel">
            <template #icon><ExportOutlined /></template>
            Excel
          </a-button>
          <a-button @click="exportToPDF">
            <template #icon><FilePdfOutlined /></template>
            PDF
          </a-button>
        </a-space>
      </template>

      <a-table
        :columns="columns"
        :data-source="filteredCursos"
        :pagination="pagination"
        :loading="loading"
        row-key="id"
        @change="handleTableChange"
      >
        <!-- Columna de Nombre -->
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'nombre'">
            <div class="curso-info">
              <div class="curso-avatar">
                <BookOutlined />
              </div>
              <div class="curso-details">
                <div class="curso-nombre">{{ record.nombre }}</div>
                <div class="curso-codigo">{{ record.codigo }}</div>
              </div>
            </div>
          </template>

          <!-- Columna de Área -->
          <template v-else-if="column.key === 'area'">
            <a-tag :color="getAreaColor(record.area)">
              {{ formatArea(record.area) }}
            </a-tag>
          </template>

          <!-- Columna de Estudiantes -->
          <template v-else-if="column.key === 'estudiantes'">
            <div class="estudiantes-info">
              <TeamOutlined />
              <span>{{ record.estudiantes }} estudiantes</span>
            </div>
          </template>

          <!-- Columna de Estado -->
          <template v-else-if="column.key === 'estado'">
            <a-badge
              :status="record.estado === 'activo' ? 'success' : 'default'"
              :text="record.estado === 'activo' ? 'Activo' : 'Inactivo'"
            />
          </template>

          <!-- Columna de Acciones -->
          <template v-else-if="column.key === 'acciones'">
            <a-space :size="8">
              <a-tooltip title="Ver detalles">
                <a-button type="text" size="small" @click="verCurso(record)">
                  <EyeOutlined />
                </a-button>
              </a-tooltip>
              
              <a-tooltip title="Editar">
                <a-button type="text" size="small" @click="editarCurso(record)">
                  <EditOutlined />
                </a-button>
              </a-tooltip>
              
              <a-tooltip title="Eliminar">
                <a-popconfirm
                  title="¿Estás seguro de eliminar este curso?"
                  ok-text="Sí"
                  cancel-text="No"
                  @confirm="eliminarCurso(record.id)"
                >
                  <a-button type="text" size="small" danger>
                    <DeleteOutlined />
                  </a-button>
                </a-popconfirm>
              </a-tooltip>
              
              <a-dropdown>
                <a-button type="text" size="small">
                  <EllipsisOutlined />
                </a-button>
                <template #overlay>
                  <a-menu>
                    <a-menu-item @click="duplicarCurso(record)">
                      <CopyOutlined /> Duplicar
                    </a-menu-item>
                    <a-menu-item @click="exportarCurso(record)">
                      <ExportOutlined /> Exportar
                    </a-menu-item>
                    <a-menu-divider />
                    <a-menu-item @click="activarCurso(record)" v-if="record.estado === 'inactivo'">
                      <CheckCircleOutlined /> Activar
                    </a-menu-item>
                    <a-menu-item @click="desactivarCurso(record)" v-else>
                      <StopOutlined /> Desactivar
                    </a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </a-space>
          </template>
        </template>

        <!-- Vacío -->
        <template #emptyText>
          <div class="empty-state">
            <BookOutlined class="empty-icon" />
            <div class="empty-text">No se encontraron cursos</div>
            <a-button type="primary" @click="showModal = true">
              <template #icon><PlusOutlined /></template>
              Crear primer curso
            </a-button>
          </div>
        </template>
      </a-table>
    </a-card>

    <!-- Modal para nuevo/editar curso -->
    <a-modal
      v-model:open="showModal"
      :title="modalTitle"
      width="600px"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
    >
      <a-form
        ref="formRef"
        :model="formState"
        :rules="formRules"
        layout="vertical"
      >
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="Código del curso" name="codigo">
              <a-input v-model:value="formState.codigo" placeholder="Ej: MAT101" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="Nombre" name="nombre">
              <a-input v-model:value="formState.nombre" placeholder="Nombre del curso" />
            </a-form-item>
          </a-col>
        </a-row>

        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item label="Área" name="area">
              <a-select v-model:value="formState.area" placeholder="Seleccionar área">
                <a-select-option value="matematicas">Matemáticas</a-select-option>
                <a-select-option value="ciencias">Ciencias</a-select-option>
                <a-select-option value="lenguaje">Lenguaje</a-select-option>
                <a-select-option value="sociales">Sociales</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="Estado" name="estado">
              <a-select v-model:value="formState.estado">
                <a-select-option value="activo">Activo</a-select-option>
                <a-select-option value="inactivo">Inactivo</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>

        <a-form-item label="Descripción" name="descripcion">
          <a-textarea
            v-model:value="formState.descripcion"
            placeholder="Descripción del curso..."
            :rows="4"
          />
        </a-form-item>

        <a-form-item label="Objetivos" name="objetivos">
          <a-textarea
            v-model:value="formState.objetivos"
            placeholder="Objetivos de aprendizaje..."
            :rows="3"
          />
        </a-form-item>

        <a-row :gutter="16">
          <a-col :span="8">
            <a-form-item label="Duración (horas)" name="duracion">
              <a-input-number
                v-model:value="formState.duracion"
                :min="1"
                :max="200"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="Créditos" name="creditos">
              <a-input-number
                v-model:value="formState.creditos"
                :min="1"
                :max="10"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="Orden" name="orden">
              <a-input-number
                v-model:value="formState.orden"
                :min="1"
                :max="100"
                style="width: 100%"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { message, Modal } from 'ant-design-vue'
import {
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  EyeOutlined,
  ExportOutlined,
  BookOutlined,
  TeamOutlined,
  ReloadOutlined,
  FilePdfOutlined,
  EllipsisOutlined,
  CopyOutlined,
  CheckCircleOutlined,
  StopOutlined,
} from '@ant-design/icons-vue'

// Estado
const searchQuery = ref('')
const showModal = ref(false)
const loading = ref(false)
const formRef = ref()
const editingId = ref(null)

// Filtros
const filters = reactive({
  area: null,
  estado: null,
  orden: 'nombre',
})

// Paginación
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total, range) => `${range[0]}-${range[1]} de ${total} cursos`,
})

// Formulario
const formState = reactive({
  codigo: '',
  nombre: '',
  area: 'matematicas',
  estado: 'activo',
  descripcion: '',
  objetivos: '',
  duracion: 40,
  creditos: 3,
  orden: 1,
})

// Reglas de validación
const formRules = {
  codigo: [
    { required: true, message: 'El código es requerido' },
    { pattern: /^[A-Z]{3}\d{3}$/, message: 'Formato: ABC123' },
  ],
  nombre: [
    { required: true, message: 'El nombre es requerido' },
    { min: 3, message: 'Mínimo 3 caracteres' },
  ],
  area: [
    { required: true, message: 'Selecciona un área' },
  ],
  estado: [
    { required: true, message: 'Selecciona un estado' },
  ],
}

// Datos de ejemplo
const cursos = ref([
  {
    id: 1,
    codigo: 'MAT101',
    nombre: 'Matemáticas Básicas',
    area: 'matematicas',
    descripcion: 'Curso introductorio de matemáticas',
    estudiantes: 45,
    estado: 'activo',
    duracion: 60,
    creditos: 4,
    createdAt: '2024-01-15',
  },
  {
    id: 2,
    codigo: 'FIS201',
    nombre: 'Física General',
    area: 'ciencias',
    descripcion: 'Fundamentos de física',
    estudiantes: 38,
    estado: 'activo',
    duracion: 80,
    creditos: 5,
    createdAt: '2024-01-20',
  },
  {
    id: 3,
    codigo: 'LEN301',
    nombre: 'Literatura Universal',
    area: 'lenguaje',
    descripcion: 'Estudio de obras literarias',
    estudiantes: 28,
    estado: 'activo',
    duracion: 50,
    creditos: 3,
    createdAt: '2024-02-01',
  },
  {
    id: 4,
    codigo: 'SOC401',
    nombre: 'Historia Mundial',
    area: 'sociales',
    descripcion: 'Panorama histórico global',
    estudiantes: 32,
    estado: 'inactivo',
    duracion: 70,
    creditos: 4,
    createdAt: '2024-02-10',
  },
  {
    id: 5,
    codigo: 'MAT202',
    nombre: 'Álgebra Lineal',
    area: 'matematicas',
    descripcion: 'Vectores, matrices y sistemas lineales',
    estudiantes: 25,
    estado: 'activo',
    duracion: 75,
    creditos: 5,
    createdAt: '2024-02-15',
  },
])

// Columnas de la tabla
const columns = [
  {
    title: 'Curso',
    key: 'nombre',
    dataIndex: 'nombre',
    width: '25%',
  },
  {
    title: 'Área',
    key: 'area',
    dataIndex: 'area',
    width: '15%',
  },
  {
    title: 'Estudiantes',
    key: 'estudiantes',
    dataIndex: 'estudiantes',
    width: '15%',
    align: 'center',
  },
  {
    title: 'Duración',
    key: 'duracion',
    dataIndex: 'duracion',
    width: '15%',
    render: (text) => `${text} horas`,
    align: 'center',
  },
  {
    title: 'Estado',
    key: 'estado',
    dataIndex: 'estado',
    width: '10%',
  },
  {
    title: 'Acciones',
    key: 'acciones',
    width: '20%',
    align: 'center',
  },
]

// Computed
const modalTitle = computed(() => {
  return editingId.value ? 'Editar Curso' : 'Nuevo Curso'
})

const filteredCursos = computed(() => {
  let filtered = [...cursos.value]

  // Filtro por búsqueda
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase()
    filtered = filtered.filter(curso =>
      curso.nombre.toLowerCase().includes(query) ||
      curso.codigo.toLowerCase().includes(query) ||
      curso.descripcion.toLowerCase().includes(query)
    )
  }

  // Filtro por área
  if (filters.area) {
    filtered = filtered.filter(curso => curso.area === filters.area)
  }

  // Filtro por estado
  if (filters.estado) {
    filtered = filtered.filter(curso => curso.estado === filters.estado)
  }

  // Ordenamiento
  if (filters.orden === 'nombre') {
    filtered.sort((a, b) => a.nombre.localeCompare(b.nombre))
  } else if (filters.orden === 'fecha') {
    filtered.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt))
  } else if (filters.orden === 'estudiantes') {
    filtered.sort((a, b) => b.estudiantes - a.estudiantes)
  }

  return filtered
})

// Métodos
const handleSearch = () => {
  pagination.current = 1
}

const resetFilters = () => {
  searchQuery.value = ''
  filters.area = null
  filters.estado = null
  filters.orden = 'nombre'
}

const getAreaColor = (area) => {
  const colors = {
    matematicas: 'blue',
    ciencias: 'green',
    lenguaje: 'orange',
    sociales: 'purple',
  }
  return colors[area] || 'default'
}

const formatArea = (area) => {
  const areas = {
    matematicas: 'Matemáticas',
    ciencias: 'Ciencias',
    lenguaje: 'Lenguaje',
    sociales: 'Sociales',
  }
  return areas[area] || area
}

const verCurso = (curso) => {
  Modal.info({
    title: curso.nombre,
    width: 600,
    content: `
      <div>
        <p><strong>Código:</strong> ${curso.codigo}</p>
        <p><strong>Área:</strong> ${formatArea(curso.area)}</p>
        <p><strong>Estudiantes:</strong> ${curso.estudiantes}</p>
        <p><strong>Duración:</strong> ${curso.duracion} horas</p>
        <p><strong>Créditos:</strong> ${curso.creditos}</p>
        <p><strong>Descripción:</strong> ${curso.descripcion}</p>
      </div>
    `,
  })
}

const editarCurso = (curso) => {
  editingId.value = curso.id
  Object.assign(formState, curso)
  showModal.value = true
}

const eliminarCurso = (id) => {
  cursos.value = cursos.value.filter(curso => curso.id !== id)
  message.success('Curso eliminado correctamente')
}

const duplicarCurso = (curso) => {
  const nuevoCurso = {
    ...curso,
    id: cursos.value.length + 1,
    codigo: `${curso.codigo}-COPY`,
    nombre: `${curso.nombre} (Copia)`,
  }
  cursos.value.unshift(nuevoCurso)
  message.success('Curso duplicado correctamente')
}

const exportarCurso = (curso) => {
  message.info(`Exportando curso: ${curso.nombre}`)
}

const activarCurso = (curso) => {
  curso.estado = 'activo'
  message.success('Curso activado')
}

const desactivarCurso = (curso) => {
  curso.estado = 'inactivo'
  message.warning('Curso desactivado')
}

const handleModalOk = async () => {
  try {
    await formRef.value.validate()
    
    if (editingId.value) {
      // Editar
      const index = cursos.value.findIndex(c => c.id === editingId.value)
      if (index !== -1) {
        cursos.value[index] = { ...formState, id: editingId.value }
        message.success('Curso actualizado correctamente')
      }
    } else {
      // Crear nuevo
      const nuevoCurso = {
        ...formState,
        id: cursos.value.length + 1,
        estudiantes: 0,
        createdAt: new Date().toISOString().split('T')[0],
      }
      cursos.value.unshift(nuevoCurso)
      message.success('Curso creado correctamente')
    }
    
    showModal.value = false
    resetForm()
  } catch (error) {
    console.error('Error al validar formulario:', error)
  }
}

const handleModalCancel = () => {
  showModal.value = false
  resetForm()
}

const resetForm = () => {
  editingId.value = null
  Object.keys(formState).forEach(key => {
    if (key === 'area') formState[key] = 'matematicas'
    else if (key === 'estado') formState[key] = 'activo'
    else if (key === 'duracion') formState[key] = 40
    else if (key === 'creditos') formState[key] = 3
    else if (key === 'orden') formState[key] = 1
    else formState[key] = ''
  })
  formRef.value?.resetFields()
}

const handleTableChange = (pag) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
}

const exportToExcel = () => {
  message.info('Exportando a Excel...')
}

const exportToPDF = () => {
  message.info('Exportando a PDF...')
}

// Lifecycle
onMounted(() => {
  pagination.total = cursos.value.length
})
</script>

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

.cursos-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.header-left {
  flex: 1;
  min-width: 0;
}

.page-title {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #1f1f1f;
  line-height: 1.3;
}

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

.filters-card {
  margin-bottom: 24px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.filters-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-label {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
}

.cursos-table-card {
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.curso-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.curso-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1890ff 0%, #52c41a 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.curso-details {
  flex: 1;
}

.curso-nombre {
  font-weight: 500;
  color: #1f1f1f;
  margin-bottom: 2px;
}

.curso-codigo {
  font-size: 12px;
  color: #999;
}

.estudiantes-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
}

.empty-state {
  padding: 48px 0;
  text-align: center;
}

.empty-icon {
  font-size: 48px;
  color: #d9d9d9;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 16px;
  color: #999;
  margin-bottom: 16px;
}

/* Responsive */
@media (max-width: 768px) {
  .cursos-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .header-right {
    width: 100%;
  }
  
  .header-right :deep(.ant-space) {
    width: 100%;
  }
  
  .header-right :deep(.ant-input-search) {
    flex: 1;
  }
  
  .filters-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .filter-item {
    width: 100%;
  }
  
  .filter-item :deep(.ant-select) {
    flex: 1;
  }
  
  .curso-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  
  .curso-avatar {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .cursos-table-card {
    overflow-x: auto;
  }
  
  :deep(.ant-table) {
    min-width: 600px;
  }
}
</style>