<template>
  <div class="reglas-container">
    <!-- Header -->
    <div class="reglas-header">
      <div class="header-title">
        <h2>Reglas de Evaluación</h2>
        <p class="subtitle">Configuración de reglas por área-proceso</p>
      </div>
      <a-button v-if="store.areaProcesoId" @click="volverALista" size="large">
        <template #icon><ArrowLeftOutlined /></template>
        Volver
      </a-button>
    </div>

    <!-- Selección de Área Proceso -->
    <div v-if="!store.areaProcesoId" class="seleccion-section">
      <div class="card">
        <div class="card-header">
          <h3>Seleccionar Área Proceso</h3>
          <p>Selecciona un área-proceso para configurar sus reglas</p>
        </div>
        <div class="card-body">
          <!-- Filtros -->
          <div class="filters">
            <a-input-search
              v-model:value="filtroBusqueda"
              placeholder="Buscar área..."
              @search="filtrarAreas"
              style="width: 300px"
            />
<a-select
  v-model:value="filtroProceso"
  placeholder="Filtrar por proceso"
  style="width: 250px; margin-left: 16px"
  @change="filtrarAreas"
>
  <a-select-option :value="null">Todos los procesos</a-select-option>
  <a-select-option 
    v-for="proceso in procesosUnicos" 
    :key="proceso.id" 
    :value="proceso.id"
  >
    {{ proceso.nombre }}
  </a-select-option>
</a-select>
            <a-button @click="limpiarFiltros" style="margin-left: 16px">
              <ReloadOutlined /> Limpiar
            </a-button>
          </div>

          <!-- Tabla de Áreas Proceso -->
          <a-table
            :data-source="areasProcesoFiltradas"
            :columns="columnasAreas"
            :loading="store.cargando"
            :pagination="{ pageSize: 10 }"
            row-key="id"
            @rowClick="seleccionarAreaProceso"
            class="clickable-table"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'cursos'">
               <a-tag color="blue">{{ record.cursos_count || 0 }} cursos</a-tag>

              </template>
              <template v-if="column.key === 'reglas_count'">
                <a-tag :color="record.reglas_count > 0 ? 'green' : 'default'">
                  {{ record.reglas_count || 0 }} reglas
                </a-tag>

              </template>
              <template v-if="column.key === 'accion'">
                <a-button type="primary" size="small" @click.stop="seleccionarAreaProceso(record)">
                  Configurar
                </a-button>
              </template>
            </template>
          </a-table>
        </div>
      </div>
    </div>

    <!-- Configuración de Reglas -->
    <div v-else class="configuracion-section">
      <!-- Header del Proceso -->
      <div class="proceso-info">
        <div class="proceso-header">
          <h3>{{ store.proceso?.nombre }} <span class="separator">/</span> {{ nombreAreaActual }}</h3>
          <div class="proceso-stats">
            <div class="stat"><span class="stat-label">Total Preguntas:</span> <span class="stat-value">{{ store.totalPreguntasProceso }}</span></div>
            <div class="stat"><span class="stat-label">Asignadas:</span> <span class="stat-value">{{ store.totalPreguntasAsignadas }}</span></div>
            <div class="stat"><span class="stat-label">Disponibles:</span> <span class="stat-value" :class="{ 'cero': store.preguntasDisponibles === 0 }">{{ store.preguntasDisponibles }}</span></div>
          </div>
        </div>

        <!-- Barra de Progreso -->
        <div class="progress-container">
          <div class="progress-info">
            <span>Progreso de asignación</span>
            <span>{{ porcentajeAsignado }}%</span>
          </div>
          <a-progress 
            :percent="porcentajeAsignado" 
            :stroke-color="store.limiteAlcanzado ? '#ff4d4f' : '#52c41a'"
            :status="store.limiteAlcanzado ? 'exception' : 'normal'"
          />
          <div v-if="store.limiteAlcanzado" class="alerta">
            <a-alert type="warning" show-icon message="Se ha alcanzado el límite de preguntas" />
          </div>
        </div>

        <!-- Acciones Rápidas -->
        <div class="acciones-rapidas">
          <a-button @click="autoDistribuir" :disabled="store.preguntasDisponibles === 0">
            <template #icon><RobotOutlined /></template> Distribuir Automático
          </a-button>
          <a-button type="primary" @click="guardarTodo" :loading="store.guardando">
            <template #icon><SaveOutlined /></template> Guardar Todo
          </a-button>
          <a-button @click="restablecerCambios" danger>
            <template #icon><UndoOutlined /></template> Deshacer Cambios
          </a-button>
        </div>
      </div>

      <!-- Tabla de Reglas -->
      <div class="reglas-table">
        <a-table
          :data-source="store.reglas"
          :columns="columnasReglas"
          :loading="store.cargando"
          row-key="curso_id"
          :pagination="false"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'orden'">
              <div class="orden-controls">
                <a-button size="small" @click="cambiarOrden(record, -1)" :disabled="esPrimeraRegla(record)"><UpOutlined /></a-button>
                <a-input-number v-model:value="record.orden" :min="1" :max="store.reglas.length" @change="marcarComoModificado(record)" size="small" style="width: 60px; margin: 0 4px" />
                <a-button size="small" @click="cambiarOrden(record, 1)" :disabled="esUltimaRegla(record)"><DownOutlined /></a-button>
              </div>
            </template>

            <template v-if="column.key === 'curso'">
              <div class="curso-info"><strong>{{ record.nombre }}</strong><small>ID: {{ record.curso_id }}</small></div>
            </template>

            <template v-if="column.key === 'preguntas'">
              <div class="preguntas-control">
                <a-input-number
                    v-model:value="record.cantidad_preguntas"
                    :min="0"
                    :max="maxPreguntasPorCurso(record)"
                    @change="validarPreguntas(record)"
                    style="width: 100px"
                    :name="'cantidad_' + record.curso_id"
                  />

                <div class="preguntas-info">
                  <small>Máx: {{ maxPreguntasPorCurso(record) }}</small>
                  <small v-if="tieneErrorPreguntas(record)" class="error"><ExclamationCircleOutlined /> Excede límite</small>
                </div>
              </div>
            </template>

            <template v-if="column.key === 'dificultad'">
              <a-select v-model:value="record.nivel_dificultad" @change="marcarComoModificado(record)" style="width: 120px">
                <a-select-option value="bajo"><a-tag color="green">Bajo</a-tag></a-select-option>
                <a-select-option value="medio"><a-tag color="orange">Medio</a-tag></a-select-option>
                <a-select-option value="alto"><a-tag color="red">Alto</a-tag></a-select-option>
              </a-select>
            </template>

            <template v-if="column.key === 'ponderacion'">
              <div class="ponderacion-control">
                <a-input-number
                  v-model:value="record.ponderacion"
                  :min="0"
                  :max="100"
                  :step="0.1"
                  :precision="2"
                  string-mode
                  style="width: 120px"
                  @change="marcarComoModificado(record)"
                />
                <span style="margin-left: 4px"></span>
              </div>
            </template>


            <template v-if="column.key === 'acciones'">
              <a-space>
                <a-button type="primary" size="small" @click="guardarReglaIndividual(record)" :disabled="!reglaModificada(record) || store.guardando" :loading="guardandoIndividual[record.curso_id]"><SaveOutlined /></a-button>
                <a-button danger size="small" @click="eliminarRegla(record)" v-if="record.regla_id" :disabled="store.guardando"><DeleteOutlined /></a-button>
              </a-space>
            </template>

            <template v-if="column.key === 'estado'">
              <a-tag v-if="reglaModificada(record)" color="orange"><EditOutlined /> Modificado</a-tag>
              <a-tag v-else-if="record.regla_id" color="green"><CheckCircleOutlined /> Guardado</a-tag>
              <a-tag v-else color="default"><ClockCircleOutlined /> Sin guardar</a-tag>
            </template>
          </template>
        </a-table>
      </div>

      <!-- Resumen -->
      <div class="resumen-section">
        <a-card title="Resumen">
          <div class="resumen-grid">
            <div class="resumen-item"><span class="resumen-label">Cursos configurados:</span> <span class="resumen-value">{{ cursosConfigurados }} / {{ store.reglas.length }}</span></div>
            <div class="resumen-item"><span class="resumen-label">Total preguntas asignadas:</span> <span class="resumen-value">{{ store.totalPreguntasAsignadas }}</span></div>
            <div class="resumen-item"><span class="resumen-label">Preguntas disponibles:</span> <span class="resumen-value">{{ store.preguntasDisponibles }}</span></div>
            <div class="resumen-item"><span class="resumen-label">Porcentaje completado:</span> <span class="resumen-value">{{ porcentajeAsignado }}%</span></div>
          </div>
        </a-card>
      </div>
    </div>

    <!-- Modal de Confirmación -->
    <a-modal
      v-model:open="showConfirmModal"
      title="Confirmación"
      ok-text="Confirmar"
      cancel-text="Cancelar"
      @ok="confirmarAccion"
      @cancel="cancelarAccion"
    >
      <p>{{ confirmMessage }}</p>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useReglaAreaProcesoStore } from '../../../store/reglaAreaProceso.store' 
import { message } from 'ant-design-vue'
import {
  ArrowLeftOutlined,
  SaveOutlined,
  DeleteOutlined,
  EditOutlined,
  CheckCircleOutlined,
  ClockCircleOutlined,
  UpOutlined,
  DownOutlined,
  RobotOutlined,
  UndoOutlined,
  ReloadOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons-vue'

const store = useReglaAreaProcesoStore()

// Estados
const filtroBusqueda = ref('')
const filtroProceso = ref(null)
const areasProceso = ref([])                // inicializado seguro
const areasProcesoFiltradas = ref([])       // inicializado seguro
const reglasOriginales = ref([])            // copia de reglas originales
const reglasModificadas = ref([])           // ids de reglas modificadas
const guardandoIndividual = ref({})
const showConfirmModal = ref(false)
const confirmMessage = ref('')
const confirmAction = ref(null)
const confirmData = ref(null)
const nombreAreaActual = ref('')

// Computed
const porcentajeAsignado = computed(() => {
  return store.totalPreguntasProceso === 0
    ? 0
    : Math.round((store.totalPreguntasAsignadas / store.totalPreguntasProceso) * 100)
})

const cursosConfigurados = computed(() => {
  if (!Array.isArray(store.reglas)) return 0
  return store.reglas.filter(r => r.cantidad_preguntas > 0).length
})

// Computed defensivo para procesos únicos
const procesosUnicos = computed(() => {
  if (!Array.isArray(areasProceso.value)) return []
  
  const procesos = areasProceso.value.map(ap => ({
    id: ap.proceso_id,
    nombre: ap.proceso_nombre
  }))
  // eliminar duplicados por id
  return [...new Map(procesos.map(p => [p.id, p])).values()]
})

// Columnas
const columnasAreas = [
  { title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
  { title: 'Área', dataIndex: 'area_nombre', key: 'area' },
  { title: 'Proceso', dataIndex: 'proceso_nombre', key: 'proceso' },
  { title: 'Cursos', key: 'cursos', width: 100, align: 'center' },
  { title: 'Reglas Configuradas', key: 'reglas_count', width: 120, align: 'center' },
  { title: 'Acción', key: 'accion', width: 100, align: 'center' }
]

const columnasReglas = [
  { title: 'Orden', key: 'orden', width: 120 },
  { title: 'Curso', key: 'curso' },
  { title: 'Preguntas', key: 'preguntas', width: 150 },
  { title: 'Dificultad', key: 'dificultad', width: 120 },
  { title: 'Ponderación', key: 'ponderacion', width: 200 },
  { title: 'Estado', key: 'estado', width: 100 },
  { title: 'Acciones', key: 'acciones', width: 120 }
]

// Métodos
const cargarAreasProceso = async () => {
  await store.cargarAreaProcesos()
  areasProceso.value = Array.isArray(store.areaProcesos) ? store.areaProcesos : []
  areasProcesoFiltradas.value = [...areasProceso.value]
}

const filtrarAreas = () => {
  let filtradas = Array.isArray(areasProceso.value) ? areasProceso.value : []

  if (filtroProceso.value) {
    filtradas = filtradas.filter(ap => ap.proceso_id === filtroProceso.value)
  }

  if (filtroBusqueda.value) {
    const busqueda = filtroBusqueda.value.toLowerCase()
    filtradas = filtradas.filter(ap =>
      (ap.area_nombre || '').toLowerCase().includes(busqueda) ||
      (ap.proceso_nombre || '').toLowerCase().includes(busqueda)
    )
  }

  areasProcesoFiltradas.value = filtradas
}

const limpiarFiltros = () => {
  filtroBusqueda.value = ''
  filtroProceso.value = null
  areasProcesoFiltradas.value = [...areasProceso.value]
}

const seleccionarAreaProceso = async (areaProceso) => {
  if (!areaProceso?.id) return
  await store.setAreaProceso(areaProceso.id)
  reglasOriginales.value = Array.isArray(store.reglas) ? JSON.parse(JSON.stringify(store.reglas)) : []
  reglasModificadas.value = []
  nombreAreaActual.value = areaProceso?.area?.nombre || ''
}

const volverALista = () => {
  if (reglasModificadas.value.length > 0) {
    confirmMessage.value = 'Tienes cambios sin guardar. ¿Seguro que quieres salir?'
    confirmAction.value = confirmarVolver
    showConfirmModal.value = true
  } else {
    store.reset()
  }
}

const confirmarVolver = () => {
  store.reset()
  showConfirmModal.value = false
}

const maxPreguntasPorCurso = (regla) => store.calcularPreguntasDisponibles(regla?.curso_id, regla?.cantidad_preguntas || 0)
const tieneErrorPreguntas = (regla) => regla?.cantidad_preguntas > maxPreguntasPorCurso(regla)
const validarPreguntas = (regla) => {
  if (tieneErrorPreguntas(regla)) regla.cantidad_preguntas = maxPreguntasPorCurso(regla)
  marcarComoModificado(regla)
}
const reglaModificada = (regla) => {
  if (!Array.isArray(reglasOriginales.value)) return true
  const original = reglasOriginales.value.find(r => r.curso_id === regla?.curso_id)
  if (!original) return true
  return original.orden !== regla.orden ||
    original.cantidad_preguntas !== regla.cantidad_preguntas ||
    original.nivel_dificultad !== regla.nivel_dificultad ||
    original.ponderacion !== regla.ponderacion
}
const marcarComoModificado = (regla) => {
  if (!regla?.curso_id) return
  if (reglaModificada(regla) && !reglasModificadas.value.includes(regla.curso_id)) {
    reglasModificadas.value.push(regla.curso_id)
  }
}

const esPrimeraRegla = (regla) => store.reglas.findIndex(r => r?.curso_id === regla?.curso_id) === 0
const esUltimaRegla = (regla) => store.reglas.findIndex(r => r?.curso_id === regla?.curso_id) === (Array.isArray(store.reglas) ? store.reglas.length - 1 : 0)

// Funciones CRUD y acciones (defensivas)
const cambiarOrden = (regla, direccion) => {
  if (!Array.isArray(store.reglas)) return
  const index = store.reglas.findIndex(r => r?.curso_id === regla?.curso_id)
  const nuevoIndex = index + direccion
  if (nuevoIndex < 0 || nuevoIndex >= store.reglas.length) return
  const temp = store.reglas[index]; store.reglas[index] = store.reglas[nuevoIndex]; store.reglas[nuevoIndex] = temp
  const tempOrden = store.reglas[index].orden; store.reglas[index].orden = store.reglas[nuevoIndex].orden; store.reglas[nuevoIndex].orden = tempOrden
  marcarComoModificado(store.reglas[index])
  marcarComoModificado(store.reglas[nuevoIndex])
}
// Guardar todas las reglas modificadas
const guardarTodo = async () => {
  if (!Array.isArray(reglasModificadas.value) || reglasModificadas.value.length === 0) {
    message.info('No hay cambios para guardar')
    return
  }

  const reglasAGuardar = store.reglas.filter(r => reglasModificadas.value.includes(r.curso_id))
  const { success, error } = await store.guardarReglasMultiple(reglasAGuardar)
  if (success) {
    message.success('Reglas guardadas correctamente')
    reglasModificadas.value = [] // reset
  } else {
    message.error(error || 'Error al guardar reglas')
  }
}
const guardarReglaIndividual = async (regla) => {
  if (!store) return
  const result = await store.guardarRegla(regla)
  if (!result.success) {
    console.error('Error al guardar regla individual:', result.error)
  }
}

// Restablecer cambios locales
const restablecerCambios = () => {
  reglasModificadas.value = []
  // Restaurar reglas a su estado original
  if (Array.isArray(reglasOriginales.value)) {
    store.reglas = JSON.parse(JSON.stringify(reglasOriginales.value))
  }
  message.info('Cambios deshechos')
}

const autoDistribuir = () => {
  if (!Array.isArray(store.reglas) || store.reglas.length === 0) {
    message.info('No hay reglas para distribuir')
    return
  }

  // Total de preguntas disponibles
  let disponibles = store.preguntasDisponibles

  // Reglas que aún no tienen preguntas asignadas
  const reglasSinPreguntas = store.reglas.filter(r => !r.cantidad_preguntas || r.cantidad_preguntas === 0)

  if (reglasSinPreguntas.length === 0) {
    message.info('Todos los cursos ya tienen preguntas asignadas')
    return
  }

  // Distribuir de forma equitativa
  const cantidadPorCurso = Math.floor(disponibles / reglasSinPreguntas.length)
  reglasSinPreguntas.forEach(r => {
    r.cantidad_preguntas = cantidadPorCurso
    marcarComoModificado(r)
  })

  message.success('Preguntas distribuidas automáticamente')
}

// Más métodos de guardado y eliminación...
// (igual que tu código original, solo asegurando ?. y Array.isArray defensivo)

const confirmarAccion = () => { if(confirmAction.value) confirmAction.value() }
const cancelarAccion = () => {
  showConfirmModal.value = false
  confirmAction.value = null
  confirmData.value = null
}

onMounted(() => { cargarAreasProceso() })
</script>


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

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

/* Selección */
.seleccion-section {
  margin-top: 20px;
}

.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  margin-bottom: 24px;
}

.card-header {
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.card-header h3 {
  margin: 0;
  font-size: 18px;
  color: #1f1f1f;
}

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

.card-body {
  padding: 24px;
}

.filters {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.clickable-table :deep(.ant-table-tbody > tr) {
  cursor: pointer;
}

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

/* Configuración */
.configuracion-section {
  margin-top: 20px;
}

.proceso-info {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  padding: 24px;
  margin-bottom: 24px;
}

.proceso-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.proceso-header h3 {
  margin: 0;
  font-size: 20px;
  color: #1f1f1f;
}

.separator {
  color: #999;
  margin: 0 8px;
}

.proceso-stats {
  display: flex;
  gap: 24px;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #1f1f1f;
}

.stat-value.cero {
  color: #ff4d4f;
}

.progress-container {
  margin-bottom: 20px;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: #666;
}

.alerta {
  margin-top: 12px;
}

.acciones-rapidas {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

/* Tabla de Reglas */
.reglas-table {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
  margin-bottom: 24px;
  overflow: hidden;
}

.orden-controls {
  display: flex;
  align-items: center;
  justify-content: center;
}

.curso-info {
  display: flex;
  flex-direction: column;
}

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

.preguntas-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.preguntas-info {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.preguntas-info .error {
  color: #ff4d4f;
  display: flex;
  align-items: center;
  gap: 4px;
}

.ponderacion-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Resumen */
.resumen-section {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #f0f0f0;
}

.resumen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.resumen-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
}

.resumen-label {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
}

.resumen-value {
  font-size: 18px;
  font-weight: 600;
  color: #1f1f1f;
}

/* Responsive */
@media (max-width: 1200px) {
  .resumen-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .proceso-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .proceso-stats {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .reglas-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  
  .filters {
    flex-direction: column;
    gap: 12px;
  }
  
  .filters > * {
    width: 100%;
    margin-left: 0 !important;
  }
  
  .acciones-rapidas {
    flex-direction: column;
  }
  
  .resumen-grid {
    grid-template-columns: 1fr;
  }
  
  .reglas-table {
    overflow-x: auto;
  }
  
  .reglas-table :deep(.ant-table) {
    min-width: 800px;
  }
}
</style>