<script setup>
import { ref, computed, reactive, onMounted, watch } from "vue";
import { useRouter } from "vue-router";
import { useExamenStore } from "../../store/examen.store";
import { message } from "ant-design-vue";
import voucherCaja from "../../assets/images/caja.png";
import voucherPagalo from "../../assets/images/pagalo.png";
import voucherBn from "../../assets/images/boletabn.jpg";

const router = useRouter();
const examenStore = useExamenStore();

const showModal = ref(false);
const iniciandoExamen = ref(false);
const creandoExamen = ref(false);
const formRef = ref(null);


const loadingPage = ref(false);
const loadingAreas = ref(false);


const formState = reactive({
  proceso_id: undefined,
  area_proceso_id: undefined,
  tipo_pago: undefined,
  codigo_pago: "",
});


const secuenciaModalOpen = ref(false);
const secuenciaTipo = ref("caja");

const secuenciaTitle = computed(() => {
  const map = {
    caja: "Secuencia en Caja",
    pagalo: "Secuencia en pagalo.pe",
    bn: "Secuencia en Banco de la Nación",
  };
  return map[secuenciaTipo.value] || "Secuencia de pago";
});

const voucherSrc = computed(() => {
  const map = {
    caja: voucherCaja,
    pagalo: voucherPagalo,
    bn: voucherBn,
  };

  return map[secuenciaTipo.value] || "";
});

const habilitacionTexto = computed(() =>
  secuenciaTipo.value === "caja"
    ? "En Caja se habilita al instante."
    : "En Banco de la Nación o pagalo.pe puede demorar hasta 24 horas."
);

const openSecuencia = (tipo) => {
  secuenciaTipo.value = tipo;
  secuenciaModalOpen.value = true;
};

const modalBodyStyle = computed(() => ({ maxHeight: "72vh", overflowY: "auto" }));

const hasExamen = computed(() => !!examenStore.examenActual);

const procesoNombre = computed(() => examenStore.examenActual?.proceso?.nombre || "No asignado");
const areaNombre = computed(() => examenStore.examenActual?.area?.nombre || "No seleccionada");
const intentosActuales = computed(() => examenStore.examenActual?.intentos || 0);
const intentosMax = computed(() => examenStore.examenActual?.intentos_max || 1);
const yaDioTest = computed(() => intentosActuales.value > 0);

const estadoTexto = computed(() => {
  if (!hasExamen.value) return "Aún sin asignar";
  return yaDioTest.value ? "Completado" : "Listo para iniciar";
});


const stepCurrent = computed(() => {
  if (!hasExamen.value) return 0;
  return yaDioTest.value ? 2 : 1;
});

const estadoAlertType = computed(() => {
  if (!hasExamen.value) return "info";
  return yaDioTest.value ? "success" : "info";
});

const estadoAlertMessage = computed(() => {
  if (!hasExamen.value) return "Paso 1: elige tu área";
  return yaDioTest.value ? "¡Listo! Ya completaste tu test" : "Cuando quieras, puedes iniciar";
});

const estadoAlertDesc = computed(() => {
  if (!hasExamen.value) return "Selecciona el proceso y el área para generar tu test diagnóstico.";
  return yaDioTest.value
    ? "Puedes ver tus resultados cuando lo necesites."
    : "Son 10 preguntas. Al finalizar verás tu resultado al instante.";
});

const canIniciar = computed(() => hasExamen.value && !yaDioTest.value);
const canVerResultados = computed(() => hasExamen.value && yaDioTest.value);
const openSeleccionArea = () => {
  showModal.value = true;
};

const procesoOptions = computed(() =>
  (examenStore.procesos || []).map((p) => ({
    value: p.id,
    label: p.nombre,
    requiere_pago: p.requiere_pago,
  }))
);

const areaOptions = computed(() =>
  (examenStore.areas || []).map((a) => ({
    value: a.area_proceso_id,
    label: a.nombre,
  }))
);

const tipoPagoOptions = [
  { value: "pyto_peru", label: "Pago por Pytoperú" },
  { value: "banco_nacion", label: "Banco de la Nación" },
  { value: "caja", label: "Caja" },
];


const normalizeRequierePago = (v) => v === 1 || v === "1" || v === true || v === "true";

const procesoRequierePago = computed(() => {
  const pid = formState.proceso_id;
  if (pid === undefined || pid === null || pid === "") return false;

  const proceso = (examenStore.procesos || []).find((p) => String(p.id) === String(pid));
  if (!proceso) return false;

  return normalizeRequierePago(proceso.requiere_pago);
});




const rules = {
  proceso_id: [{ required: true, message: "Selecciona un proceso", trigger: "change" }],
  area_proceso_id: [{ required: true, message: "Selecciona un área", trigger: "change" }],
  tipo_pago: [
    {
      trigger: "change",
      validator: (_, value) => {
        if (!procesoRequierePago.value) return Promise.resolve();
        if (!value) return Promise.reject("Selecciona tipo de pago");
        return Promise.resolve();
      },
    },
  ],
  codigo_pago: [
    {
      trigger: "blur",
      validator: (_, value) => {
        if (!procesoRequierePago.value) return Promise.resolve();
        if (!value || !String(value).trim()) return Promise.reject("Ingresa el código de pago");
        return Promise.resolve();
      },
    },
  ],
};


const refrescar = async () => {
  try {
    await examenStore.fetchExamenActual();
    message.success("Actualizado");
  } catch {
    message.error("No se pudo actualizar");
  }
};


const handleProcesoChange = async (procesoId) => {

  formState.area_proceso_id = undefined;

  formState.tipo_pago = undefined;
  formState.codigo_pago = "";

  formRef.value?.clearValidate?.(["area_proceso_id", "tipo_pago", "codigo_pago"]);

  if (!procesoId) {
    examenStore.areas = [];
    return;
  }

  loadingAreas.value = true;
  try {
    await examenStore.fetchAreas(procesoId);
  } finally {
    loadingAreas.value = false;
  }
};

const crearExamen = async () => {
  if (hasExamen.value) {
    message.warning("Ya tienes un test asignado. No puedes cambiar el área.");
    return;
  }

  try {
    creandoExamen.value = true;

    if (formRef.value) await formRef.value.validate();

    const pagoData = procesoRequierePago.value
      ? { tipo_pago: formState.tipo_pago, codigo_pago: formState.codigo_pago }
      : null;

    const result = await examenStore.crearExamen(formState.area_proceso_id, pagoData);

    if (result?.success) {
      message.success("Área asignada");
      showModal.value = false;
      resetModal();
      await examenStore.fetchExamenActual();
    } else {
      const msg =
        result?.message ||
        (result?.errors ? Object.values(result.errors).flat().join(" ") : "No se pudo asignar el área");
      message.error(msg);
    }
  } catch (e) {
    message.error("No se pudo asignar el área");
  } finally {
    creandoExamen.value = false;
  }
};

const irAlExamen = async () => {
  if (iniciandoExamen.value) return;

  if (!examenStore.examenActual?.id) {
    message.error("Primero selecciona un área");
    return;
  }

  if (yaDioTest.value) {
    message.info("Ya realizaste el test. Revisa tus resultados.");
    return;
  }

  try {
    iniciandoExamen.value = true;

    const id = examenStore.examenActual.id;
    const generarResult = await examenStore.generarPreguntas(id);

    if (!generarResult.success && !generarResult.ya_tiene_preguntas) {
      message.error(generarResult.message || "Error al generar preguntas");
      return;
    }

    router.replace({ name: "PanelExamen", params: { examenId: id } });
  } catch (error) {
    console.error(error);
    message.error("No se pudo iniciar el test");
  } finally {
    iniciandoExamen.value = false;
  }
};

const verResultado = async () => {
  if (!examenStore.examenActual?.id) return;
  await examenStore.fetchExamenActual();
  router.push({ name: "PanelResultados", params: { examenId: examenStore.examenActual?.id } });
};

const resetModal = () => {
  formState.proceso_id = undefined;
  formState.area_proceso_id = undefined;
  formState.tipo_pago = undefined;
  formState.codigo_pago = "";
  examenStore.areas = [];
  formRef.value?.clearValidate?.();
};

watch(showModal, (open) => {
  if (!open) resetModal();
});

onMounted(async () => {
  loadingPage.value = true;
  try {
    await examenStore.fetchProcesos();
    await examenStore.fetchExamenActual();
  } finally {
    loadingPage.value = false;
  }
});
</script>

<template>

<div class="heroKicker">Test diagnóstico</div>
          <div class="heroTitle">Practica y conoce tu nivel</div>
          <div class="heroText">10 preguntas • 10 min aprox. • Resultado inmediato</div>

      <section class="hero">
        <div class="heroLeft">
          
          <a-space direction="vertical" size="middle" class="mt16" style="width: 100%">
            <a-card size="small">
              <a-space align="start">
                <div>
                  <div style="font-weight: 700; color:#1a237e;">Test referencial (no afecta tu postulación)</div>
                  <div class="muted">
                    Este test te ayuda a medir tu nivel y practicar. No cambia tu puntaje ni tu postulación oficial.
                  </div>
                  
                </div>
              </a-space>
            </a-card>
          </a-space>

         <div class="heroFacts hide-mobile">

            <div class="fact">
              <div class="factK">Nombre:</div>
              <div class="factV">{{ procesoNombre }}</div>
            </div>
            <div class="fact">
              <div class="factK">Área:</div>
              <div class="factV">{{ areaNombre }}</div>
            </div>
            <div class="fact">
              <div class="factK">Intentos:</div>
              <div class="factV">{{ intentosActuales }} / {{ intentosMax }}</div>
            </div>
          </div>

          <div class="bankActions">
            <div class="bankHead">
              <div class="bankTitle">Requisito de acceso”</div>
              <div class="bankSub">
               Este test es completamente GRATUITO.
No se realiza ningún pago adicional.

Únicamente debes ingresar el número de secuencia del pago de tu Carpeta de Postulante, el cual ya realizaste previamente para el proceso de admisión.
              </div>
            </div>
<div style="font-weight: 700; color:#1a237e;">Ver Secuencia</div>
            <a-space wrap>
              <a-button class="bankBtn" @click="openSecuencia('caja')">Caja</a-button>
              <a-button class="bankBtn" @click="openSecuencia('pagalo')">pagalo.pe</a-button>
              <a-button class="bankBtn" @click="openSecuencia('bn')">Banco Nación</a-button>
            </a-space>
          </div>
        </div>

        <div class="heroRight">
          <div class="ctaCard">
            <div class="ctaHeader">
              <div>
                <div class="ctaTitle">Acción rápida</div>
                <div class="ctaHint">
                  <span v-if="!hasExamen">Elige tu área y genera tu test.</span>
                  <span v-else-if="hasExamen && !yaDioTest">Cuando estés listo, empieza.</span>
                  <span v-else>Revisa tu resultado cuando quieras.</span>
                </div>
              </div>

              <div class="statusTag" :class="{ ok: yaDioTest, pending: hasExamen && !yaDioTest, empty: !hasExamen }">
                {{ estadoTexto }}
              </div>
            </div>

            <a-button type="default" size="large" @click="openSeleccionArea" class="ctaBtn ghostBtn" block>
              Seleccionar área
            </a-button>

            <a-button
              v-if="canIniciar"
              type="primary"
              size="large"
              :loading="iniciandoExamen"
              @click="irAlExamen"
              class="ctaBtn primaryBtn"
              block
            >
              Iniciar test
            </a-button>

            <a-button
              v-if="canVerResultados"
              type="primary"
              size="large"
              @click="verResultado"
              class="ctaBtn primaryBtn"
              block
            >
              Ver resultados
            </a-button>

            <a-divider class="ctaDivider" />

            <a-alert
              class="mt12"
              :type="estadoAlertType"
              show-icon
              :message="estadoAlertMessage"
              :description="estadoAlertDesc"
            />
          </div>
        </div>
      </section>

      <a-divider />

      <section class="section">
        <div class="sectionTitle">Tu camino</div>
        <div class="sectionSub">Simple, rápido y sin estrés.</div>

        <a-steps :current="stepCurrent" size="small" class="mt12">
          <a-step title="Selecciona área" description="Elige proceso y área." />
          <a-step title="Resuelve el test" description="10 preguntas." />
          <a-step title="Mira tu resultado" description="Recomendaciones." />
        </a-steps>

        <div class="hint mt12">
          <span v-if="!hasExamen">Tip: elige tu área para generar el test.</span>
          <span v-else-if="hasExamen && !yaDioTest">Tip: responde tranquilo, sin apuro.</span>
          <span v-else>Tip: puedes volver a ver tus resultados cuando quieras.</span>
        </div>
      </section>

      <a-divider />

      <a-modal
        v-model:open="secuenciaModalOpen"
        :title="secuenciaTitle"
        :footer="null"
        width="920px"
        :centered="true"
        :bodyStyle="modalBodyStyle"
        class="voucher-modal"
      >
        <a-row :gutter="[16, 16]" align="top">
          <a-col :xs="24" :md="14">
            <a-card :bordered="true">
              <div class="voucher-caption">
                Busca el campo <b>“Secuencia”</b> o <b>“N° operación”</b>.
              </div>

              <div class="voucher-img-wrap">
                <a-image :src="voucherSrc" :preview="true" alt="Voucher de ejemplo" />
              </div>

              <a-alert class="mt12" type="warning" show-icon message="Habilitación" :description="habilitacionTexto" />
            </a-card>
          </a-col>

          <a-col :xs="24" :md="10">
            <a-card :bordered="true">
              <div class="sectionTitle">¿Qué hago?</div>

              <ol class="ordered mt12">
                <li>Ubica el número de secuencia en tu voucher/boleta.</li>
                <li>Ingresa ese número cuando el sistema lo pida.</li>
                <li>Si pagaste hoy y no aparece, espera el tiempo de habilitación.</li>
              </ol>

              <a-divider />

              <a-alert type="info" show-icon message="Tranquilo" description="No tienes que pagar nada extra por este test." />

              <div class="modal-actions">
                <a-button @click="secuenciaModalOpen = false">Cerrar</a-button>
                <a-button type="primary" @click="secuenciaModalOpen = false">Entendido</a-button>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </a-modal>

      <a-modal
        v-model:open="showModal"
        title="Seleccionar área"
        :mask-closable="false"
        width="640px"
        @cancel="showModal = false"
        class="select-modal"
      >
        <a-alert
          v-if="hasExamen"
          type="warning"
          show-icon
          message="No permitido"
          description="Ya tienes un test asignado. No se puede cambiar el área."
          class="mb12"
        />

        <a-form v-else ref="formRef" :model="formState" :rules="rules" layout="vertical">
          <a-form-item label="Proceso" name="proceso_id" required>
            <a-select
              v-model:value="formState.proceso_id"
              placeholder="Selecciona un proceso"
              :options="procesoOptions"
              @change="handleProcesoChange"
              :loading="loadingPage"
            />
          </a-form-item>

          <a-form-item label="Área" name="area_proceso_id" required>
            <a-select
              v-model:value="formState.area_proceso_id"
              placeholder="Selecciona un área"
              :options="areaOptions"
              :disabled="!formState.proceso_id"
              :loading="loadingAreas"
            />
          </a-form-item>

          <div v-if="procesoRequierePago" class="pay-block">
            <a-alert
              message="Este proceso requiere secuencia"
              type="info"
              show-icon
              class="mb12"
              description="Puedes usar la secuencia del pago de tu Carpeta de Postulante (si ya la pagaste)."
            />
            <a-form-item label="Tipo de Pago" name="tipo_pago">
              <a-select v-model:value="formState.tipo_pago" placeholder="Selecciona tipo de pago" :options="tipoPagoOptions" />
            </a-form-item>
            <a-form-item label="Código de Pago" name="codigo_pago">
              <a-input v-model:value="formState.codigo_pago" placeholder="Escribe la secuencia / código" />
            </a-form-item>
          </div>
        </a-form>

        <template #footer>
          <a-space>
            <a-button @click="showModal = false">Cerrar</a-button>
            <a-button v-if="!hasExamen" type="primary" :loading="creandoExamen" @click="crearExamen">
              Confirmar
            </a-button>
          </a-space>
        </template>
      </a-modal>


</template>

<style scoped>

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

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

.section-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}


.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }
.mb12 { margin-bottom: 12px; }
.muted { color: #666; line-height: 1.6; }


.hero {
  position: relative;
  border: none;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
  padding: 28px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 22px;
  align-items: start;
  background: #fff;
  overflow: hidden;
}

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

.heroLeft, .heroRight { min-width: 0; }

.heroKicker {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 6px;
}

.heroTitle {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 700;
  color: #0d1b52;
  line-height: 1.15;
}

.heroText {
  margin-top: 10px;
  font-size: 1.05rem;
  color: #666;
}

.heroFacts {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.fact {
  border: 1px solid rgba(13, 27, 82, 0.10);
  background: rgba(13, 27, 82, 0.03);
  border-radius: 12px;
  padding: 12px;
}

.factK {
  font-size: 0.9rem;
  color: #666;
  font-weight: 700;
}

.factV {
  margin-top: 6px;
  font-weight: 700;
  font-size: 0.95rem;
  color: #1a237e;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.bankActions {
  margin-top: 18px;
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(26, 35, 126, 0.12);
  background: linear-gradient(180deg, rgba(26, 35, 126, 0.06), rgba(13, 27, 82, 0.03));
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.bankHead { margin-bottom: 10px; }

.bankTitle {
  margin: 0;
  font-size: 1.05rem;
  color: #1a237e;
  font-weight: 700;
}

.bankSub {
  margin-top: 6px;
  font-size: 0.95rem;
  color: #666;
  line-height: 1.45;
}

.bankBtn {
  height: 44px;
  border-radius: 10px;
  font-weight: 700;
}

.ctaCard {
  border: none;
  border-radius: 16px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.08);
  background: #fff;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ctaHeader {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.ctaTitle {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #0d1b52;
}

.ctaHint {
  margin-top: 6px;
  font-size: 0.95rem;
  color: #666;
  line-height: 1.45;
}

.statusTag {
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid rgba(0,0,0,0.06);
  background: rgba(0,0,0,0.03);
  color: #666;
}

.statusTag.ok {
  border-color: rgba(82, 196, 26, 0.30);
  background: rgba(82, 196, 26, 0.12);
  color: rgba(32, 120, 16, 1);
}

.statusTag.pending {
  border-color: rgba(24, 144, 255, 0.30);
  background: rgba(24, 144, 255, 0.12);
  color: rgba(9, 74, 168, 1);
}

.statusTag.empty {
  border-color: rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.04);
  color: #777;
}

.ctaBtn {
  height: 52px;
  border-radius: 12px;
  font-weight: 700;
}

.primaryBtn {
  background: linear-gradient(135deg, #1a237e 0%, #283593 100%);
  border: none;
}

.ghostBtn {
  background: rgba(13, 27, 82, 0.04);
  border: 1px solid rgba(13, 27, 82, 0.14);
}

.ctaDivider { margin: 14px 0 0; }

.sectionTitle {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0d1b52;
  margin: 0;
}

.sectionSub {
  margin-top: 8px;
  font-size: 1rem;
  color: #666;
}

.hint {
  margin-top: 10px;
  font-size: 0.95rem;
  color: #666;
}

:deep(.voucher-modal .ant-modal-content),
:deep(.select-modal .ant-modal-content) {
  border-radius: 16px;
}

:deep(.voucher-modal .ant-modal),
:deep(.select-modal .ant-modal) {
  max-width: 92vw;
}

.pay-block {
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(13, 27, 82, 0.12);
  background: rgba(13, 27, 82, 0.03);
}

.voucher-caption {
  margin-bottom: 10px;
  color: #666;
  line-height: 1.6;
}

.voucher-img-wrap {
  background: rgba(13, 27, 82, 0.03);
  border: 1px solid rgba(13, 27, 82, 0.10);
  padding: 10px;
  border-radius: 14px;
}

.modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

:deep(.ant-card) { border-radius: 12px; }
:deep(.ant-card-bordered) { border: 1px solid rgba(13, 27, 82, 0.10); }


@media (max-width: 768px) {
.hide-mobile{
    display: none !important;
  }
  .test-modern{
    padding-top: 0 !important;
    padding-bottom: 24px; /* opcional */
  }

  .section-container{
    max-width: none;
    padding: 0 !important;
    margin: 0 !important;
  }

  .hero{
    grid-template-columns: 1fr;
    width: 100%;
    margin: 0 !important;
    border-radius: 0 !important;

    padding: 14px 16px 18px !important;
  }

  .heroKicker{ margin-top: 0 !important; }
  .heroTitle{ margin-top: 6px !important; }
  .heroText{ margin-top: 8px !important; }

  .section{
    padding: 0 16px;
  }

  .heroFacts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px){
  .heroFacts{
    grid-template-columns: 1fr;
  }
}

</style>
