<template>
  <div class="title">Seguimiento del proceso</div>

  <a-card class="card" :bordered="true">
    <template #title>
      <div class="header">
        <div class="headerLeft">
          <div class="subtitle">
            Proceso: <b>Examen General 2026-I</b>
          </div>
        </div>

        <div class="headerRight">
          <a-button @click="cargarAvance" :loading="loading" type="primary">
            Actualizar
          </a-button>
        </div>
      </div>
    </template>

    <a-spin :spinning="loading">
      <!-- NO PARTICIPA -->
      <div v-if="noParticipa" class="noBox">
        <div class="noTitle">Actualmente no estás participando en ningún proceso</div>
        <div class="noDesc">
          Si crees que esto es un error, verifica que hayas realizado tu preinscripción o inicia sesión con el DNI correcto.
        </div>
      </div>

      <!-- PARTICIPA -->
      <template v-else>
        <a-alert
          v-if="avance"
          :message="`Actualmente estás en la etapa de: ${avance.estado || '-'}`"
          :description="indicador"
          type="info"
          show-icon
          class="alertState"
        />

        <div class="timelineWrap" v-if="avance">
          <div class="timelineHeader">
            <div class="chip">
              <span class="chipLabel">Proceso</span>
              <span class="chipValue">Examen General 2026-I</span>
            </div>
            <div class="chip">
              <span class="chipLabel">Etapa</span>
              <span class="chipValue strong">{{ avance.estado || "-" }}</span>
            </div>
          </div>

          <div class="simpleBox">
            <div class="k">Indicador</div>
            <div class="v">{{ indicador }}</div>

            <div v-if="avance.observacion" class="obs">
              <div class="obsTitle">Observación</div>
              <div class="obsText">{{ avance.observacion }}</div>
            </div>
          </div>
        </div>
      </template>
    </a-spin>
  </a-card>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { message } from "ant-design-vue";
import api from "../../axiosPostulante";

const loading = ref(false);
const avance = ref(null);

// cuando el backend no devuelve nada / 404 / estado false
const noParticipa = ref(false);

// fijo: Proceso 31
const idProceso = 31;

const cargarAvance = async () => {
  loading.value = true;
  avance.value = null;
  noParticipa.value = false;

  try {
    const { data } = await api.get(`/mis-procesos/${idProceso}/avance`);

    // Caso OK con datos
    if (data?.success && data?.data) {
      avance.value = data.data;
      noParticipa.value = false;
      return;
    }

    // Caso: success false o data vacío
    avance.value = null;
    noParticipa.value = true;

  } catch (e) {
    // 404 => no participa
    if (e?.response?.status === 404) {
      avance.value = null;
      noParticipa.value = true;
      return;
    }

    // Si tu backend manda 200 pero { success:false, message:"..." } no cae aquí.
    message.error(e.response?.data?.message || "Error al cargar seguimiento");
    // ante error real, decide si mostrar "no participa" o no:
    noParticipa.value = true;
  } finally {
    loading.value = false;
  }
};

const normalizar = (txt) =>
  String(txt || "")
    .toLowerCase()
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "")
    .trim();

const indicador = computed(() => {
  const st = normalizar(avance.value?.estado);

  if (!st) return "Sigue revisando esta sección para ver el siguiente paso.";

  if (st.includes("preins")) {
    return "Ya realizaste la preinscripción. Por ahora, espera que el sistema habilite el siguiente paso.";
  }

  // Registro + foto + huella (1 solo paso)
  if (st.includes("registro") || st.includes("huella") || st.includes("foto") || st.includes("biometr")) {
    return "Estás en inscripción final (registro, foto y huella). Completa lo solicitado para obtener tu constancia.";
  }

  // Constancia generada -> recién aquí mostrar examen
  if (st.includes("constancia")) {
    return "Ya generaste tu constancia. Prepárate para rendir el examen el 14 de febrero. Debes estar antes de las 9:30 a. m.; un minuto tarde y no podrás ingresar.";
  }

  return "Sigue revisando esta sección para ver el siguiente paso.";
});

onMounted(() => {
  cargarAvance();
});
</script>

<style scoped>
.card {
  width: 100%;
  max-width: 1100px;
  margin: 16px auto;
  border-radius: 14px;
}

.header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.title {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 700;
  color: #0d1b52;
  line-height: 1.2;
  word-break: break-word;
}

.subtitle {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.alertState {
  margin-bottom: 14px;
  border-radius: 14px;
}

.timelineWrap {
  display: grid;
  gap: 12px;
}

.timelineHeader {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  background: #fafafa;
  border-radius: 999px;
  padding: 8px 12px;
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.chipLabel {
  font-size: 12px;
  color: #6b7280;
  font-weight: 700;
}
.chipValue {
  font-weight: 900;
}
.chipValue.strong {
  color: #1677ff;
}

.simpleBox {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: 12px;
}

.k {
  font-size: 12px;
  color: #6b7280;
  font-weight: 700;
}

.v {
  font-weight: 900;
  margin-top: 6px;
  color: #111827;
}

.obs {
  margin-top: 12px;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  border: 1px dashed rgba(22, 119, 255, 0.35);
}

.obsTitle {
  font-size: 12px;
  color: #6b7280;
  font-weight: 800;
}

.obsText {
  font-weight: 900;
  margin-top: 4px;
}

/* Caja “no participa” */
.noBox {
  border-radius: 14px;
  padding: 14px;
  background: rgba(107, 114, 128, 0.06);
  border: 1px solid rgba(107, 114, 128, 0.18);
}

.noTitle {
  font-weight: 900;
  color: #111827;
  margin-bottom: 6px;
}

.noDesc {
  font-size: 12px;
  color: #6b7280;
}

@media (max-width: 768px) {
  .card {
    margin: 0;
    border-radius: 0;
  }
}
</style>