<template>
  <a-card class="card" :bordered="true">
    <template #title>
      <div class="header">
        <div class="headerLeft">
          <div class="title">Mis procesos de admisión</div>
          <div class="subtitle">Resultados registrados por DNI</div>
        </div>

        <div class="headerRight">
          <a-button @click="obtenerProcesos" :loading="loading" class="btn" block>
            Actualizar
          </a-button>
        </div>
      </div>
    </template>

    <a-spin :spinning="loading">
      <!-- Top tools -->
      <div class="tools">
        <div class="counter">
          <span class="counterLabel">Total</span>
          <span class="counterValue">{{ procesosFiltrados.length }}</span>
        </div>

        <a-input
          v-model:value="search"
          allow-clear
          placeholder="Buscar por nombre de proceso…"
          class="search"
        />
      </div>

      <!-- Desktop/tablet: tabla -->
      <div v-if="!isMobile" class="tableWrap">
        <a-table
          class="table"
          :dataSource="procesosFiltrados"
          :columns="columns"
          rowKey="id"
          :pagination="{ pageSize: 7, showSizeChanger: false }"
          :scroll="{ x: 900 }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'nombre'">
              <div class="nombre">{{ record.nombre || "-" }}</div>
              <div class="meta">ID: {{ record.id }}</div>
            </template>

            <template v-else-if="column.key === 'puntaje'">
              <div class="puntaje">{{ record.puntaje ?? "-" }}</div>
              <div class="meta">Puntaje</div>
            </template>

            <template v-else-if="column.key === 'apto'">
              <span class="statusPill" :class="statusClass(record.apto)">
                {{ aptoTexto(record.apto) }}
              </span>
            </template>

            <template v-else-if="column.key === 'acciones'">
              <a-space>
                <a-button size="small" @click="verDetalle(record)">Ver detalle</a-button>
              </a-space>
            </template>
          </template>

          <template #emptyText>
            <a-empty description="No se encontraron procesos" />
          </template>
        </a-table>
      </div>

      <!-- Mobile: cards -->
      <div v-else class="cards">
        <template v-if="procesosFiltrados.length">
          <div v-for="p in procesosFiltrados" :key="p.id" class="itemCard">
            <div class="itemTop">
              <div class="itemTitle">{{ p.nombre || "-" }}</div>
              <span class="statusPill" :class="statusClass(p.apto)">
                {{ aptoTexto(p.apto) }}
              </span>
            </div>

            <div class="itemGrid">
              <div class="kv">
                <div class="k">Puntaje</div>
                <div class="v strong">{{ p.puntaje ?? "-" }}</div>
              </div>
              <div class="kv">
                <div class="k">ID</div>
                <div class="v">{{ p.id }}</div>
              </div>
            </div>

            <div class="itemActions">
              <a-button type="primary" class="btnPrimary" block @click="verDetalle(p)">
                Ver detalle
              </a-button>
            </div>
          </div>
        </template>

        <a-empty v-else description="No se encontraron procesos" />
      </div>
    </a-spin>
  </a-card>
</template>

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

const procesos = ref([]);
const loading = ref(false);
const search = ref("");

const columns = [
  { title: "Proceso", dataIndex: "nombre", key: "nombre", width: 420 },
  { title: "Puntaje", dataIndex: "puntaje", key: "puntaje", width: 140 },
  { title: "Estado", dataIndex: "apto", key: "apto", width: 160 },
  { title: "Acciones", key: "acciones", width: 160 },
];

const obtenerProcesos = async () => {
  loading.value = true;
  try {
    const { data } = await api.get("/postulante/mis-procesos");
    if (data?.success) {
      procesos.value = Array.isArray(data.data) ? data.data : [];
    } else {
      message.error("No se pudieron obtener los procesos");
    }
  } catch (e) {
    console.error(e);
    message.error(e.response?.data?.message || "Error al cargar procesos");
  } finally {
    loading.value = false;
  }
};

const aptoTexto = (apto) => {
  if (apto === 1 || apto === true || apto === "1") return "APTO";
  if (apto === 0 || apto === false || apto === "0") return "NO APTO";
  return String(apto ?? "-").toUpperCase();
};

/** ✅ Un solo color: no usamos verde/rojo; solo estilos neutros + primary sutil */
const statusClass = (apto) => {
  if (apto === 1 || apto === true || apto === "1") return "ok";
  if (apto === 0 || apto === false || apto === "0") return "bad";
  return "neutral";
};

const procesosFiltrados = computed(() => {
  const q = search.value.trim().toLowerCase();
  if (!q) return procesos.value;
  return procesos.value.filter((p) => String(p.nombre || "").toLowerCase().includes(q));
});

const verDetalle = (record) => {
  message.info(`Proceso: ${record.nombre} | Puntaje: ${record.puntaje ?? "-"}`);
};

/* ✅ Responsive real: detecta móvil para cambiar a cards */
const isMobile = ref(false);
let mq = null;

function setMobile() {
  isMobile.value = window.matchMedia("(max-width: 640px)").matches;
}

onMounted(() => {
  obtenerProcesos();
  mq = window.matchMedia("(max-width: 640px)");
  setMobile();
  // addEventListener es lo moderno; fallback por compatibilidad
  if (mq.addEventListener) mq.addEventListener("change", setMobile);
  else mq.addListener(setMobile);
});

onBeforeUnmount(() => {
  if (!mq) return;
  if (mq.removeEventListener) mq.removeEventListener("change", setMobile);
  else mq.removeListener(setMobile);
});
</script>

<style scoped>
/* =========================
   Base (formal 17+, sin degradados)
   1 color acento: primary
   ========================= */
.card {
  max-width: 1100px;
  margin: 16px auto;
  border-radius: 14px;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.headerLeft {
  min-width: 240px;
}
.title {
  margin: 0;
  font-size: 1.85rem;
  font-weight: 700;
  color: #0d1b52;
  line-height: 1.15;
}
.subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ant-colorTextSecondary, #6b7280);
}
.headerRight {
  min-width: 180px;
  display: flex;
  justify-content: flex-end;
}
.btn {
  border-radius: 10px;
}

/* Tools */
.tools {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.counter {
  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
  background: var(--ant-colorFillAlter, #fafafa);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.counterLabel {
  font-size: 12px;
  color: var(--ant-colorTextSecondary, #6b7280);
  font-weight: 700;
}
.counterValue {
  font-size: 18px;
  font-weight: 900;
  color: var(--ant-colorTextHeading, #111827);
}
.search {
  border-radius: 12px;
}

/* Table */
.tableWrap {
  border-radius: 12px;
  overflow: hidden;
}
.table :deep(.ant-table) {
  border-radius: 12px;
  overflow: hidden;
}
.nombre {
  font-weight: 800;
  color: var(--ant-colorTextHeading, #111827);
}
.puntaje {
  font-weight: 900;
  color: var(--ant-colorPrimary, #1677ff); /* ✅ único acento */
}
.meta {
  font-size: 12px;
  color: var(--ant-colorTextSecondary, #6b7280);
  margin-top: 2px;
}

/* Status pill (sin verde/rojo) */
.statusPill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
  background: var(--ant-colorFillAlter, #fafafa);
  color: var(--ant-colorTextHeading, #111827);
}
.statusPill.ok {
  border-color: rgba(22,119,255,.35);
  background: rgba(22,119,255,.08);
}
.statusPill.bad {
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}
.statusPill.neutral {
  opacity: .85;
}

/* Mobile cards */
.cards {
  display: grid;
  gap: 12px;
}

.itemCard {
  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
  background: var(--ant-colorBgContainer, #fff);
  border-radius: 14px;
  padding: 12px;
}

.itemTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.itemTitle {
  font-weight: 900;
  color: var(--ant-colorTextHeading, #111827);
  line-height: 1.2;
}

.itemGrid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.kv {
  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.06));
  background: var(--ant-colorFillAlter, #fafafa);
  border-radius: 12px;
  padding: 10px 12px;
}
.k {
  font-size: 12px;
  color: var(--ant-colorTextSecondary, #6b7280);
  font-weight: 700;
}
.v {
  margin-top: 4px;
  font-weight: 900;
  color: var(--ant-colorTextHeading, #111827);
}
.v.strong {
  color: var(--ant-colorPrimary, #1677ff);
}

.itemActions {
  margin-top: 12px;
}
.btnPrimary {
  height: 42px;
  border-radius: 12px;
  font-weight: 900;
}

/* Responsive tools */
@media (max-width: 640px) {
  .card {
    margin: 0;
    border-radius: 0;
  }
  .headerRight {
    width: 100%;
    min-width: 0;
  }
  .tools {
    grid-template-columns: 1fr;
  }
  .itemGrid {
    grid-template-columns: 1fr;
  }
}
</style>
