<template>
  <div class="page-wrapper">
    <a-card :bordered="false" class="main-card">

      <!-- Header -->
      <div class="header">
        <h2>Gestión de Calificaciones</h2>
        <a-button type="primary" @click="openModal()">
          Nueva Calificación
        </a-button>
      </div>

      <!-- Tabla -->
      <a-table
        :columns="columns"
        :data-source="calificaciones"
        :loading="loading"
        row-key="id"
        bordered
      >
        <template #actions="{ record }">
          <a-space>
            <a-button type="link" @click="openModal(record)">
              Editar
            </a-button>

            <a-popconfirm
              title="¿Seguro de eliminar?"
              @confirm="eliminar(record.id)"
            >
              <a-button type="link" danger>
                Eliminar
              </a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>

    </a-card>

    <!-- Modal -->
    <a-modal
      v-model:open="modalVisible"
      :title="form.id ? 'Editar Calificación' : 'Nueva Calificación'"
      @ok="guardar"
      @cancel="cerrarModal"
      ok-text="Guardar"
    >
      <a-form layout="vertical">
        <a-form-item label="Nombre">
          <a-input v-model:value="form.nombre" />
        </a-form-item>

        <a-form-item label="Puntos Correcta">
          <a-input-number v-model:value="form.puntos_correcta" style="width:100%" />
        </a-form-item>

        <a-form-item label="Puntos Incorrecta">
          <a-input-number v-model:value="form.puntos_incorrecta" style="width:100%" />
        </a-form-item>

        <a-form-item label="Puntos Nula">
          <a-input-number v-model:value="form.puntos_nula" style="width:100%" />
        </a-form-item>

        <a-form-item label="Puntaje Máximo">
          <a-input-number v-model:value="form.puntaje_maximo" style="width:100%" />
        </a-form-item>
      </a-form>
    </a-modal>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'

import api from '../../../axios'

const calificaciones = ref([])
const loading = ref(false)
const modalVisible = ref(false)

const form = ref({
  id: null,
  nombre: '',
  puntos_correcta: 0,
  puntos_incorrecta: 0,
  puntos_nula: 0,
  puntaje_maximo: 0
})

const columns = [
  { title: 'Nombre', dataIndex: 'nombre' },
  { title: 'Correcta', dataIndex: 'puntos_correcta' },
  { title: 'Incorrecta', dataIndex: 'puntos_incorrecta' },
  { title: 'Nula', dataIndex: 'puntos_nula' },
  { title: 'Máximo', dataIndex: 'puntaje_maximo' },
  { title: 'Acciones', key: 'actions', slots: { customRender: 'actions' } }
]

const cargar = async () => {
  loading.value = true
  try {
    const { data } = await api .getAll()
    calificaciones.value = data.data
  } catch (error) {
    message.error('Error al cargar')
  } finally {
    loading.value = false
  }
}

const openModal = (record = null) => {
  if (record) {
    form.value = { ...record }
  } else {
    form.value = {
      id: null,
      nombre: '',
      puntos_correcta: 0,
      puntos_incorrecta: 0,
      puntos_nula: 0,
      puntaje_maximo: 0
    }
  }
  modalVisible.value = true
}

const cerrarModal = () => {
  modalVisible.value = false
}

const guardar = async () => {
  try {
    if (form.value.id) {
      await api .update(form.value.id, form.value)
      message.success('Actualizado correctamente')
    } else {
      await api .create(form.value)
      message.success('Creado correctamente')
    }

    cerrarModal()
    cargar()
  } catch (error) {
    message.error('Error al guardar')
  }
}

const eliminar = async (id) => {
  try {
    await api .delete(id)
    message.success('Eliminado correctamente')
    cargar()
  } catch (error) {
    message.error('Error al eliminar')
  }
}

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

<style scoped>
.page-wrapper {
  padding: 24px;
}

.main-card {
  border-radius: 12px;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>
