<!-- src/components/convocatorias/ConvocatoriasSection.vue -->
<template>
  <section id="convocatorias" class="convocatorias-modern">
    <div class="section-container">
      <div class="section-header">
        <div class="header-with-badge">
          <h2 class="section-title">Convocatorias Vigentes</h2>
          <a-badge count="Nuevo" class="new-badge" />
        </div>
        <p class="section-subtitle">
          Selecciona el proceso de admisión que se ajuste a tu perfil
        </p>
      </div>

      <a-skeleton v-if="store.loading" active :paragraph="{ rows: 8 }" />

      <div v-else class="convocatorias-grid">
        <a-card v-if="store.procesoPrincipal" class="main-convocatoria-card">
          <div class="card-badge">Principal</div>

          <div class="main-card-grid">
            <div class="main-card-text">
              <div class="convocatoria-header">
                <div>
                  <h3>{{ store.procesoPrincipal.titulo }}</h3>
                      <a-divider class="custom-divider" />
                                    <p class="convocatoria-date">
                    PreInscripciones:
                    {{ formatFecha(store.procesoPrincipal.fecha_inicio_preinscripcion) }}
                    -
                    {{ formatFecha(store.procesoPrincipal.fecha_fin_inscripcion) }}
                  </p>
                  <p class="convocatoria-date">
                    Inscripciones:
                    {{ formatFecha(store.procesoPrincipal.fecha_inicio_inscripcion) }}
                    -
                    {{ formatFecha(store.procesoPrincipal.fecha_fin_inscripcion) }}
                  </p>
                                    <p class="convocatoria-date">
                    Examen:
                    {{ formatFecha(store.procesoPrincipal.fecha_examen1) }}

                  </p>
                </div>

                <a-tag color="success" class="status-tag">
                  {{ store.procesoPrincipal.estado }}
                </a-tag>
              </div>

              <p class="convocatoria-desc">
                {{ store.procesoPrincipal.descripcion }}
              </p>

              <a-divider class="custom-divider" />

              <!-- ACCIONES RAPIDAS -->
              <div
                v-if="store.procesoPrincipal?.detalles?.length"
                class="quick-actions"
              >
                <h4 class="subheading">Acciones Rápidas</h4>

                <div class="action-buttons-grid">
                  <a-button
                    v-if="tieneTipo('requisitos')"
                    class="action-btn"
                    @click="abrirPorTipo('requisitos')"
                  >
                    <template #icon><FileTextOutlined /></template>
                    Requisitos
                  </a-button>

                  <a-button
                    v-if="tieneTipo('pagos')"
                    class="action-btn"
                    @click="abrirPorTipo('pagos')"
                  >
                    <template #icon><DollarOutlined /></template>
                    Pagos
                  </a-button>

                  <a-button
                    v-if="tieneTipo('vacantes')"
                    class="action-btn"
                    @click="abrirPorTipo('vacantes')"
                  >
                    <template #icon><TeamOutlined /></template>
                    Vacantes
                  </a-button>

                  <a-button
                    v-if="tieneTipo('cronograma')"
                    class="action-btn"
                    @click="abrirPorTipo('cronograma')"
                  >
                    <template #icon><CalendarOutlined /></template>
                    Cronograma
                  </a-button>
                </div>
              </div>

              <a-divider class="custom-divider" />

            <div class="preinscripcion-section">
              <div class="preinscripcion-info">
                <h4 class="subheading">Preinscripción en Línea</h4>
                <p>Completa tu preinscripción de manera virtual y segura</p>
              </div>


              <div v-if="store.procesoPrincipal?.link_preinscripcion" class="preinscripcion-btn-wrap">
                <a-button
                  type="primary"
                  size="large"
                  :href="store.procesoPrincipal.link_preinscripcion"
                  target="_blank"
                >
                  <template #icon><FormOutlined /></template>
                  Iniciar Preinscripción
                </a-button>
              </div>
            </div>


            </div>

          <a-image
            v-if="store.procesoPrincipal?.imagen_url"
            :src="store.procesoPrincipal.imagen_url"
            alt="Convocatoria"
            :preview="true"
            class="convocatoria-image"
          />

          <a-image
            v-else
            src=""
            alt="Convocatoria"
            :preview="false"
            class="convocatoria-image"
          />
          </div>
        </a-card>

        <div class="secondary-list">

            <a-card class="secondary-convocatoria-card">
            <div class="convocatoria-header">
              <div>
                <h4 class="secondary-title">Extraordinario</h4>
                <p class="convocatoria-date">30 de enero</p>
              </div>

              <a-tag class="status-tag" color="orange">Finalizado</a-tag>
            </div>

            <p class="convocatoria-desc">
              Modalidad extraordinaria para perfiles específicos
            </p>

            <!-- <div class="card-footer">
              <a-button
                type="link"
                size="small"
                @click="emit('show-modal', 'extraordinario')"
              >
                Ver detalles
              </a-button>
              <a-button type="primary" ghost size="small">Consultar</a-button>
            </div> -->
          </a-card>
          <a-card class="secondary-convocatoria-card">
            <div class="convocatoria-header">
              <div>
                <h4 class="secondary-title">CEPREUNA</h4>
                <p class="convocatoria-date">10 y 11 de enero</p>
              </div>

              <a-tag class="status-tag" color="orange">Finalizado</a-tag>
            </div>

            <p class="convocatoria-desc">Postulantes del CEPREUNA</p>

            <!-- <div class="card-footer">
              <a-button type="link" size="small" @click="emit('show-modal', 'cepreuna')">
                Ver detalles
              </a-button>
              <a-button type="primary" ghost size="small">Consultar</a-button>
            </div> -->
          </a-card>


        </div>
      </div>
    </div>
  </section>

    <a-modal
      v-model:open="modalVisible"
      :title="tituloModal"
      width="400px"
      centered
      @ok="modalVisible = false"
      @cancel="modalVisible = false"
    >
    <div
      v-for="detalle in detallesSeleccionados"
      :key="detalle.id"
      style="margin-bottom: 25px"
    >

      <p v-if="detalle.descripcion">
        {{ detalle.descripcion }}
      </p>

      <ul v-if="detalle.listas?.length">
        <li v-for="(item, i) in detalle.listas" :key="i">
          {{ item }}
        </li>
      </ul>

<a-image
  v-if="detalle.imagen_url"
  :src="detalle.imagen_url"
  :preview="true"
  class="detalle-img"
/>
    </div>
  </a-modal>
</template>

<script setup>
import { onMounted, ref } from "vue"
import { useWebAdmisionStore } from "../../store/web"

import {
  FileTextOutlined,
  DollarOutlined,
  TeamOutlined,
  CalendarOutlined,
  FormOutlined,
} from "@ant-design/icons-vue"

const store = useWebAdmisionStore()

const emit = defineEmits(["show-modal", "open-preinscripcion"])

const modalVisible = ref(false)
const detallesSeleccionados = ref([])
const tituloModal = ref("")

onMounted(() => {
  store.cargarProcesos()
})

const formatFecha = (fecha) => {
  if (!fecha) return ""
  return new Date(fecha).toLocaleDateString("es-PE", {
    day: "2-digit",
    month: "short",
    year: "numeric",
  })
}

const tieneTipo = (tipo) => {
  return store.procesoPrincipal?.detalles?.some((d) => d.tipo === tipo)
}

const abrirPorTipo = (tipo) => {
  detallesSeleccionados.value =
    store.procesoPrincipal?.detalles?.filter((d) => d.tipo === tipo) ?? []

  tituloModal.value = tipo.charAt(0).toUpperCase() + tipo.slice(1)
  modalVisible.value = true
}
</script>

<style scoped>
.convocatorias-modern {
  position: relative;
  padding: 40px 0;
  font-family: "Times New Roman", Times, serif;
  background: #fbfcff;
  overflow: hidden;
}

.convocatorias-modern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  background-image: repeating-linear-gradient(
      to right,
      rgba(13, 27, 82, 0.06) 0,
      rgba(13, 27, 82, 0.06) 1px,
      transparent 1px,
      transparent 24px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(13, 27, 82, 0.06) 0,
      rgba(13, 27, 82, 0.06) 1px,
      transparent 1px,
      transparent 24px
    );

  opacity: 0.55;
}
.detalle-img :deep(img) {
  width: 100%;
  max-width: 720px;
  max-height: 420px;
  object-fit: contain;
  border-radius: 12px;
}
.section-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.header-with-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.section-title {
  font-size: 2.6rem;
  font-weight: 700;
  color: #0d1b52;
  margin: 0;
}

.section-subtitle {
  font-size: 1.125rem;
  color: #666;
  max-width: 640px;
  margin: 14px auto 0;
}

.new-badge :deep(.ant-badge-count) {
  background: linear-gradient(45deg, #ff6b6b, #ffd700);
  box-shadow: 0 2px 8px rgba(255, 107, 107, 0.3);
  border-radius: 999px;
}

.convocatorias-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

.main-convocatoria-card {
  position: relative;
  border: none;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
  border-radius: 16px;
}

.main-convocatoria-card :deep(.ant-card-body) {
  padding: 28px;
}

.card-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background: linear-gradient(45deg, #1890ff, #52c41a);
  color: white;
  padding: 6px 16px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
}

.main-card-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
  align-items: start;
}

.main-card-text {
  min-width: 0;
}

.main-card-media {
  display: flex;
  justify-content: flex-end;
}

.convocatoria-image :deep(img) {
  width: 100%;
  max-width: 360px;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 14px;
}

.convocatoria-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

.convocatoria-header h3 {
  margin: 0;
  font-size: 1.55rem;
  color: #1a237e;
}

.secondary-title {
  margin: 0;
  font-size: 1.05rem;
  color: #1a237e;
  text-transform: capitalize;
}

.convocatoria-date {
  color: #666;
  margin: 6px 0 0;
  font-size: 0.95rem;
}

.status-tag {
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.convocatoria-desc {
  color: #666;
  line-height: 1.6;
  margin: 0 0 18px;
}

.custom-divider {
  margin: 18px 0;
}

.subheading {
  margin: 0 0 6px;
  color: #1a237e;
  font-weight: 700;
}

.action-buttons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  border-radius: 10px;
}

.preinscripcion-section {
  display: grid;
  gap: 10px;
  padding: 14px 12px;
  border-radius: 12px;
  background: rgba(24, 144, 255, 0.05);
  border: 1px solid rgba(24, 144, 255, 0.18);
}
.preinscripcion-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.preinscripcion-info p {
  margin: 0;
  color: #666;
}

.preinscripcion-btn-wrap {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

.preinscripcion-btn-light {
  height: 46px;
  padding: 0 18px;
  border-radius: 12px;
  font-weight: 700;

  background: #ffffff;
  border: 1px solid rgba(24, 144, 255, 0.35);
  color: #1890ff;

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.06);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}

.preinscripcion-btn-light:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.10);
  border-color: rgba(24, 144, 255, 0.55);
}


.secondary-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.secondary-convocatoria-card {
  border: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
}

.secondary-convocatoria-card :deep(.ant-card-body) {
  padding: 18px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}

@media (max-width: 992px) {
  .section-title {
    font-size: 2.1rem;
  }

  .main-card-grid {
    grid-template-columns: 1fr;
  }

  .main-card-media {
    justify-content: center;
  }

  .convocatoria-image :deep(img) {
    max-width: 100%;
    max-height: 320px;
  }

  .secondary-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .convocatorias-modern {
    padding: 55px 0;
  }

  .preinscripcion-section {
    flex-direction: column;
    text-align: center;
    align-items: stretch;
  }

  .secondary-list {
    grid-template-columns: 1fr;
  }
}
</style>
