<template>
  <div class="title">Mis pagos realizados</div>
  <a-card class="card" :bordered="true">
    <template #title>
      <div class="header">
        <div class="headerLeft">
          
          <div class="subtitle">Historial de pagos registrados en el sistema</div>
        </div>

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

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

        <a-input
          v-model:value="search"
          allow-clear
          placeholder="Buscar por código, uso/proceso o tipo…"
          class="search"
        />
      </div>

      <div v-if="!isMobile" class="tableWrap">
        <a-table
          class="table"
          :dataSource="pagosFiltrados"
          :columns="columns"
          rowKey="key"
          :pagination="{ pageSize: 6, showSizeChanger: false }"
          :scroll="{ x: 900 }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'tipo'">
              <span class="pill pill--neutral">{{ tipoLabel(record.tipo) }}</span>
            </template>

            <template v-else-if="column.key === 'codigo'">
              <div class="codigoCell">
                <div class="codigo">{{ record.codigo || "-" }}</div>
                <span v-if="record.estado" class="pill pill--soft">{{ record.estado }}</span>
              </div>
            </template>

            <template v-else-if="column.key === 'uso'">
              <div class="usoCell">
                <div class="usoMain">{{ getUso(record) }}</div>
                <div v-if="record.proceso_nombre || record.proceso" class="usoSub">
                  {{ record.proceso_nombre || record.proceso }}
                </div>
              </div>
            </template>

            <template v-else-if="column.key === 'monto'">
              <div class="monto">S/ {{ Number(record.monto || 0).toFixed(2) }}</div>
            </template>

            <template v-else-if="column.key === 'fecha_pago'">
              <div class="fecha">{{ formatFecha(record.fecha_pago) }}</div>
            </template>
          </template>

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

 
      <div v-else class="cards">
        <template v-if="pagosFiltrados.length">
          <div v-for="p in pagosFiltrados" :key="p.key" class="itemCard">
            <div class="itemTop">
              <div class="itemLeft">
                <div class="itemTitle">{{ getUso(p) }}</div>
                <div class="itemSub" v-if="p.proceso_nombre || p.proceso">
                  {{ p.proceso_nombre || p.proceso }}
                </div>
              </div>

              <span class="pill pill--neutral">{{ tipoLabel(p.tipo) }}</span>
            </div>

            <div class="grid">
              <div class="kv">
                <div class="k">Código</div>
                <div class="v strong">{{ p.codigo || "-" }}</div>
              </div>

              <div class="kv">
                <div class="k">Monto</div>
                <div class="v strong primary">S/ {{ Number(p.monto || 0).toFixed(2) }}</div>
              </div>

              <div class="kv">
                <div class="k">Fecha</div>
                <div class="v">{{ formatFecha(p.fecha_pago) }}</div>
              </div>

              <div class="kv" v-if="p.estado">
                <div class="k">Estado</div>
                <div class="v">
                  <span class="pill pill--soft">{{ p.estado }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>

        <a-empty v-else description="No se encontraron pagos" />
      </div>

      <div class="note">
        <div class="noteTitle">Nota</div>
        <div class="noteText">
          Si un pago no muestra “Uso / Proceso”, es porque aún no está asociado a un proceso en el backend.
        </div>
      </div>
    </a-spin>
  </a-card>
</template>

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

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

const columns = [
  { title: "Tipo", dataIndex: "tipo", key: "tipo", width: 160 },
  { title: "Código", dataIndex: "codigo", key: "codigo", width: 220 },
  { title: "Uso / Proceso", dataIndex: "uso", key: "uso", width: 360 },
  { title: "Monto", dataIndex: "monto", key: "monto", width: 160 },
  { title: "Fecha de pago", dataIndex: "fecha_pago", key: "fecha_pago", width: 220 },
];

const obtenerPagos = async () => {
  loading.value = true;
  try {
    const { data } = await api.get("/postulante/pagos");
    if (data.success) {
      pagos.value = (data.pagos || []).map((pago, index) => ({
        ...pago,
        key: pago.id ?? `${pago.codigo ?? "pago"}-${index}`,
      }));
    } else {
      message.error("No se pudieron obtener los pagos");
    }
  } catch (error) {
    console.error(error);
    message.error("Error al cargar pagos");
  } finally {
    loading.value = false;
  }
};

const tipoLabel = (tipo) => {
  const map = {
    pyto_peru: "PYTO PERÚ",
    banco_nacion: "BANCO NACIÓN",
    caja: "CAJA",
  };
  return map[tipo] || String(tipo || "-").toUpperCase();
};

const formatFecha = (fecha) => {
  if (!fecha) return "-";
  const soloFecha = String(fecha).split(" ")[0];
  const [y, m, d] = soloFecha.split("-");
  return `${Number(d)}/${Number(m)}/${y}`;
};

const getUso = (record) => {
  return (
    record.uso ||
    record.concepto ||
    record.motivo ||
    record.descripcion ||
    record.proceso_nombre ||
    record.proceso ||
    "-"
  );
};

const pagosFiltrados = computed(() => {
  const q = search.value.trim().toLowerCase();
  if (!q) return pagos.value;

  return pagos.value.filter((p) => {
    const texto = [p.tipo, p.codigo, getUso(p), p.proceso_nombre, p.proceso]
      .filter(Boolean)
      .join(" ")
      .toLowerCase();
    return texto.includes(q);
  });
});

const isMobile = ref(false);
let mq = null;

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

onMounted(() => {
  obtenerPagos();
  mq = window.matchMedia("(max-width: 640px)");
  setMobile();
  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>
.card {
  max-width: 1100px;
  margin: 16px auto;
  border-radius: 14px;
}


.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.headerLeft {
  min-width: 240px;
}
.title {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 700;
  color: #0d1b52;
  line-height: 1.2;
  word-break: break-word;
}
.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 {
  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: 800;
}
.counterValue {
  font-size: 18px;
  font-weight: 900;
  color: var(--ant-colorTextHeading, #111827);
}
.search {
  border-radius: 12px;
}

.tableWrap {
  border-radius: 12px;
  overflow: hidden;
}
.table :deep(.ant-table) {
  border-radius: 12px;
  overflow: hidden;
}

.pill {
  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);
  white-space: nowrap;
}
.pill--neutral {
  border-color: rgba(0,0,0,.10);
  background: rgba(0,0,0,.04);
}
.pill--soft {
  border-color: rgba(22,119,255,.25);
  background: rgba(22,119,255,.08); 
  color: var(--ant-colorTextHeading, #111827);
}

.codigoCell {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.codigo {
  font-weight: 900;
  color: var(--ant-colorTextHeading, #111827);
}

.usoCell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.usoMain {
  font-weight: 900;
  color: var(--ant-colorTextHeading, #111827);
  line-height: 1.25;
}
.usoSub {
  font-weight: 700;
  color: var(--ant-colorTextSecondary, #6b7280);
  font-size: 12px;
}

.monto {
  font-weight: 900;
  color: var(--ant-colorPrimary, #1677ff);
}
.fecha {
  font-weight: 800;
  color: var(--ant-colorText, #374151);
}

.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;
}
.itemSub {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ant-colorTextSecondary, #6b7280);
}

.grid {
  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: 800;
}
.v {
  margin-top: 4px;
  font-weight: 900;
  color: var(--ant-colorTextHeading, #111827);
}
.v.strong {
  font-weight: 900;
}
.v.primary {
  color: var(--ant-colorPrimary, #1677ff);
}

.note {
  margin-top: 14px;
  border-radius: 14px;
  border: 1px solid var(--ant-colorBorderSecondary, rgba(0,0,0,.08));
  background: var(--ant-colorFillAlter, #fafafa);
  padding: 12px;
}
.noteTitle {
  font-weight: 900;
  color: var(--ant-colorTextHeading, #111827);
}
.noteText {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ant-colorTextSecondary, #6b7280);
  line-height: 1.5;
}

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