<!-- components/modals/PreinscripcionModal.vue -->
<template>
<a-modal 
  :open="visible"
  @update:open="$emit('update:visible', $event)"
  title="Preinscripción en Línea" 
  width="600px"
  :footer="null"
  class="modern-modal"
>

    <div class="modal-steps">
      <a-steps :current="0" size="small">
        <a-step title="Datos Personales" />
        <a-step title="Programa" />
        <a-step title="Documentos" />
        <a-step title="Confirmación" />
      </a-steps>
    </div>
    
    <a-form layout="vertical" class="modal-form">
      <h3>Información Personal</h3>
      
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="Nombres">
            <a-input placeholder="Ingresa tus nombres" />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="Apellidos">
            <a-input placeholder="Ingresa tus apellidos" />
          </a-form-item>
        </a-col>
      </a-row>
      
      <a-form-item label="Correo Electrónico">
        <a-input type="email" placeholder="ejemplo@correo.com" />
      </a-form-item>
      
      <a-form-item label="Programa de Interés">
        <a-select placeholder="Selecciona un programa">
          <a-select-option v-for="facultad in facultades" :key="facultad.id">
            <optgroup :label="facultad.nombre">
              <a-select-option v-for="carrera in facultad.carreras" :key="carrera.id" :value="carrera.id">
                {{ carrera.nombre }}
              </a-select-option>
            </optgroup>
          </a-select-option>
        </a-select>
      </a-form-item>
      
      <a-form-item>
        <a-checkbox>
          Acepto los términos y condiciones del proceso de admisión
        </a-checkbox>
      </a-form-item>
      
      <div class="modal-actions">
        <a-button @click="$emit('update:visible', false)">Cancelar</a-button>
        <a-button type="primary" @click="$emit('submit')">Continuar</a-button>
      </div>
    </a-form>
  </a-modal>
</template>

<script setup>
defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  facultades: {
    type: Array,
    required: true
  }
})

defineEmits(['update:visible', 'submit'])
</script>

<style scoped>
.modern-modal :deep(.ant-modal-content) {
  border-radius: 16px;
  overflow: hidden;
}

.modern-modal :deep(.ant-modal-header) {
  border-bottom: none;
  padding: 32px 32px 0;
}

.modern-modal :deep(.ant-modal-body) {
  padding: 32px;
}

.modern-modal :deep(.ant-modal-title) {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a237e;
}

.modal-steps {
  margin-bottom: 32px;
}

.modal-form h3 {
  margin: 0 0 24px;
  color: #1a237e;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 32px;
}
</style>