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

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

    <a-spin :spinning="loading">

      <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>

      <div class="tableWrap desktopOnly">
        <a-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-button size="small" @click="verDetalle(record)">
                Ver detalle
              </a-button>
            </template>

          </template>

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


      <div class="cards mobileOnly">
        <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"
                block
                class="btnPrimary"
                @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 } 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) {
    message.error(e.response?.data?.message || "Error al cargar procesos");
  } finally {
    loading.value = false;
  }
};

const aptoTexto = (apto) => {
  if (apto == 1) return "APTO";
  if (apto == 0) return "NO APTO";
  return "-";
};

const statusClass = (apto) => {
  if (apto == 1) return "ok";
  if (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 ?? "-"}`);
};

onMounted(() => {
  obtenerProcesos();
});
</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;
}

.tools {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.counter {
  background: #fafafa;
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
}

.counterValue {
  font-size: 18px;
}

.search {
  border-radius: 12px;
}


.tableWrap {
  width: 100%;
  overflow-x: auto;
}

.nombre {
  font-weight: 800;
}

.puntaje {
  font-weight: 900;
  color: #1677ff;
}

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


.statusPill {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: #f5f5f5;
}

.statusPill.ok {
  background: rgba(22,119,255,.1);
  border: 1px solid rgba(22,119,255,.3);
}

.statusPill.bad {
  background: rgba(0,0,0,.04);
}

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

.itemCard {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 12px;
}

.itemTop {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.itemTitle {
  font-weight: 900;
}

.itemGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.kv {
  background: #fafafa;
  border-radius: 12px;
  padding: 10px;
}

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

.v {
  font-weight: 900;
}

.v.strong {
  color: #1677ff;
}

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


.desktopOnly { display: block; }
.mobileOnly { display: none; }

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

  .desktopOnly { display: none; }
  .mobileOnly { display: block; }

  .header {
    flex-direction: column;
  }
  .title {
    font-size: 1.3rem;
  }
  .card {
    margin: 0;
    border-radius: 0;
  }
}

</style>
