document.addEventListener('DOMContentLoaded', async () => {
  const container = document.getElementById('detalle-candidato-container');
  const params = new URLSearchParams(window.location.search);
  const id = params.get('id');

  if (!id) {
    container.innerHTML = `<div class="alert alert-danger m-4">ID de aspirante no válido.</div>`;
    return;
  }

  // Mostrar spinner de carga
  container.innerHTML = `<div class="text-center my-5"><div class="spinner-border text-primary"></div> Cargando datos...</div>`;

  try {
    // --- 1. Traer datos del backend
    const res = await fetch(`../../backend/subdistribuidor/obtener_detalle_candidato.php?id=${id}`);
    const data = await res.json();

    if (!data.success) {
      container.innerHTML = `<div class="alert alert-danger">${data.message || 'No se pudo cargar el aspirante.'}</div>`;
      return;
    }

    // --- 2. Desglosar la info recibida
    const c = data.data;
    const nombreCompleto = data.nombreCompleto || 'Sin nombre';
    const estatusOrden = data.estatusOrden || [];
    const estatusLabels = data.estatusLabels || {};
    const historial = data.historial || [];
    const indexActual = data.indexActual || 0;
    const estatusActual = c.estatus_actual;

    // --- 3. Card de información principal
    const cardInfo = `
      <div class="col-lg-4 mb-3">
        <div class="card h-100 text-center">
          <div class="card-body">
            <i class="fas fa-user-circle fa-4x text-primary mb-3"></i>
            <h4 class="mb-1">${nombreCompleto}</h4>
            <p class="text-muted mb-2">${c.puesto || 'No definida'}</p>
            <p class="mb-1"><strong>Email:</strong> ${c.correo || '-'}</p>
            <p class="mb-1"><strong>Teléfono:</strong> ${c.telefono || '-'}</p>
            <p class="mb-1"><strong>Registrado:</strong> ${c.fecha_registro ? new Date(c.fecha_registro).toLocaleDateString('es-MX') : '-'}</p>
            <p class="mb-1"><strong>CURP:</strong> ${c.curp || '-'}</p>
          </div>
        </div>
      </div>
    `;

      // --- 4. Tabs de información

// 🚩 Recupera si ya fue enviado a plantilla:
const enviadoAPlantilla = c.envio_plantilla == 1;

const mostrarBotonVacantes =
  estatusActual !== 'contratado'
    ? `<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalVacantes">
        <i class="fas fa-briefcase me-2"></i>Ver vacantes disponibles
      </button>`
    : `<button class="btn btn-secondary" disabled>
        <i class="fas fa-lock me-2"></i>Vacante bloqueada por contratación
      </button>`;

const mostrarBotonPlantilla =
  estatusActual === 'contratado'
    ? `<button 
        class="btn btn-warning ms-2" 
        data-bs-toggle="modal" 
        data-bs-target="#modalDetalleEmpleado"
        id="btnEnviarPlantilla"
        type="button"
        data-curp="${c.curp || ''}"
        ${enviadoAPlantilla ? "disabled" : ""}
      >
        <i class="fas fa-database me-2"></i>
        ${enviadoAPlantilla ? "Enviado a Plantilla" : "Enviar a Plantilla"}
      </button>`
    : '';

const mostrarBotonPRM =
  estatusActual === 'contratado'
    ? `<button 
        class="btn btn-success ms-2" 
        data-bs-toggle="modal" 
        data-bs-target="#modalSolicitarPRM"
        id="btnSolicitarPRM"
        type="button"
        data-curp="${c.curp || ''}"
        ${!enviadoAPlantilla ? "disabled" : ""}
      >
        <i class="fas fa-certificate me-2"></i>
        Solicitar PRM
      </button>`
    : '';

const tabContent = `
  <div class="col-lg-8 mb-3">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="mb-3 fw-bold text-primary">Información</h5>
        <p><b>Vacante:</b> ${c.vacante_puesto || 'Sin vacante asignada'}</p>
        <p><b>PDV:</b> ${c.vacante_pdv || '-'}</p>
        <div class="mt-4 d-flex flex-wrap gap-2">
          ${mostrarBotonVacantes}
          ${mostrarBotonPlantilla}
          ${mostrarBotonPRM}
        </div>
      </div>
    </div>
  </div>
`;


    // --- 5. Timeline de estatus (cards en grid 3 x fila con hover)
    let timeline = `<div class="row g-3">`;
    estatusOrden.forEach((estatus, idx) => {
      const label = estatusLabels[estatus] || estatus;
      const alcanzado = indexActual >= idx;
      const h = historial.find(h => h.estatus === estatus);

      timeline += `
        <div class="col-12 col-md-4">
          <div class="card border-${alcanzado ? 'success' : 'secondary'} h-100 shadow-sm card-proceso">
            <div class="card-body">
              <span class="badge bg-${alcanzado ? 'success' : 'secondary'} mb-2" style="font-size:1rem">${label}</span>
              <div>
                ${h ? `<small class="text-muted">${h.fecha}</small>` : '<small class="text-muted">Pendiente</small>'}
              </div>
              <div class="mt-2 small text-muted">${h && h.comentario ? h.comentario : ''}</div>
            </div>
          </div>
        </div>
      `;
    });
    timeline += `</div>`;

    // --- 6. Botones de acción
    let botonesAccion = '';
    if (estatusActual === 'referencias') {
      botonesAccion = `
        <div class="d-flex gap-2 mb-3">
          <button class="btn btn-warning" id="btnCambiarEstatus">
            <i class="fas fa-random me-2"></i>Cambiar de estatus
          </button>
          <button class="btn btn-info" id="btnEnviarReferencias">
            <i class="fas fa-share-square me-2"></i>Enviar a referencias
          </button>
        </div>
      `;
    } else if (estatusActual === 'en_pre_alta') {
      // BOTÓN ENVIAR A PRE-ALTA (abre el modal de detalle empleado) y pasamos data-curp
      botonesAccion = `
        <div class="d-flex gap-2 mb-3 justify-content-end flex-wrap">
          <button class="btn btn-primary"
                  data-bs-toggle="modal"
                  data-bs-target="#modalDetalleEmpleado"
                  id="btnPreAlta"
                  data-curp="${c.curp || ''}">
            <i class="fas fa-plus-circle me-1"></i> Enviar a Pre-Alta
          </button>
        </div>
      `;
    } else if (indexActual !== estatusOrden.length - 1) {
      botonesAccion = `
        <div class="text-end mt-4 mb-2">
          <button class="btn btn-warning" id="btnCambiarEstatus">
            <i class="fas fa-random me-2"></i>Cambiar de estatus
          </button>
        </div>
      `;
    }

    // --- 7. Renderizar todo junto
    container.innerHTML = `
      <h2 class="fw-bold mb-2">Detalle del Aspirante</h2>
      <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="dashboard.php">Dashboard</a></li>
          <li class="breadcrumb-item"><a href="candidatos.php">Aspirantes</a></li>
          <li class="breadcrumb-item active">${nombreCompleto}</li>
        </ol>
      </nav>
      ${botonesAccion}
      <div class="row mb-4">
        ${cardInfo}
        ${tabContent}
      </div>
      ${timeline}
    `;

    setTimeout(() => {
      document.dispatchEvent(new Event("detalleCandidatoRenderizado"));
    }, 300);

    // --- 8. Lógica para el cambio de estatus
    if (document.getElementById('btnCambiarEstatus')) {
      document.getElementById('btnCambiarEstatus').addEventListener('click', async () => {
        const siguienteEstatus = estatusOrden[indexActual + 1];
        const siguienteLabel = estatusLabels[siguienteEstatus] || siguienteEstatus;

        // Si el siguiente estatus es "en_pre_alta" desde "referencias", pide resultado con SweetAlert
        if (estatusActual === 'referencias' && siguienteEstatus === 'en_pre_alta') {
          const { value: resultadoReferencia } = await Swal.fire({
            title: 'Resultado de referencias',
            input: 'select',
            inputOptions: {
              'Apto': 'Apto',
              'Recontratable': 'Recontratable',
              'No apto': 'No apto'
            },
            inputPlaceholder: 'Selecciona un resultado',
            showCancelButton: true,
            confirmButtonText: 'Avanzar',
            cancelButtonText: 'Cancelar',
            inputValidator: (value) => {
              if (!value) return 'Debes seleccionar un resultado';
            }
          });

          if (!resultadoReferencia) return; // Cancelado

          // Si es "No apto", salta directo a "contratado"
          let nuevoEstatus = (resultadoReferencia === "Apto" || resultadoReferencia === "Recontratable") ? 'en_pre_alta' : 'contratado';

          const res = await fetch(`../../backend/subdistribuidor/actualizar_estatus.php`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `aspirante_id=${encodeURIComponent(c.id)}&nuevo_estatus=${encodeURIComponent(nuevoEstatus)}&resultado_referencia=${encodeURIComponent(resultadoReferencia)}`
          });
          const dataResp = await res.json();

          if (dataResp.success) {
            if (nuevoEstatus === "en_pre_alta") {
              // Abre el modal y asigna la CURP automáticamente para autollenado
              setTimeout(() => {
                const curpInput = document.getElementById('curpAspirante');
                if (curpInput) curpInput.value = c.curp || '';
                const inputVacante = document.getElementById('vacanteCodigoPreAlta');
                if (inputVacante) inputVacante.value = c.vacante_codigo || '';
                const modal = new bootstrap.Modal(document.getElementById('modalDetalleEmpleado'));
                modal.show();
              }, 250);
              Swal.fire('¡Éxito!', 'El estatus se actualizó correctamente. Completa el pre-alta.', 'success');
            } else {
              Swal.fire('¡Éxito!', 'El estatus se actualizó correctamente.', 'success').then(() => location.reload());
            }
          } else {
            Swal.fire('Error', dataResp.message || 'No se pudo actualizar el estatus', 'error');
          }

        } else {
          // Confirmación simple para avanzar a siguiente estatus
          const ok = await Swal.fire({
            title: '¿Avanzar al siguiente estatus?',
            text: `¿Deseas cambiar el estatus a "${siguienteLabel}"?`,
            icon: 'question',
            showCancelButton: true,
            confirmButtonText: 'Sí, avanzar',
            cancelButtonText: 'Cancelar'
          });

          if (ok.isConfirmed) {
            const res = await fetch(`../../backend/subdistribuidor/actualizar_estatus.php`, {
              method: 'POST',
              headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
              body: `aspirante_id=${encodeURIComponent(c.id)}&nuevo_estatus=${encodeURIComponent(siguienteEstatus)}`
            });
            const data = await res.json();
            if (data.success) {
              Swal.fire('¡Éxito!', 'El estatus se actualizó correctamente.', 'success').then(() => location.reload());
            } else {
              Swal.fire('Error', data.message || 'No se pudo actualizar el estatus', 'error');
            }
          }
        }
      });
    }

    // --- 8.1. Cuando el usuario abra el modal de pre-alta manualmente (estatus "en_pre_alta"), asegúrate de asignar el CURP y vacante_codigo
    document.addEventListener("click", function (e) {
      if (e.target && e.target.id === "btnPreAlta") {
        const curp = e.target.getAttribute("data-curp") || "";
        const curpInput = document.getElementById("curpAspirante");
        if (curpInput) curpInput.value = curp;
        const inputVacante = document.getElementById('vacanteCodigoPreAlta');
        if (inputVacante) inputVacante.value = c.vacante_codigo || '';
      }
    });

    // --- 9. Lógica para enviar a referencias (solo si existe el botón)
    setTimeout(() => {
      const btnEnviarReferencias = document.getElementById("btnEnviarReferencias");
      if (btnEnviarReferencias) {
        btnEnviarReferencias.addEventListener("click", async () => {
          const formData = new FormData();
          formData.append("aspirante_id", id);

          try {
            const response = await fetch("../../backend/subdistribuidor/enviar_referencias_subdistribuidor.php", {
              method: "POST",
              body: formData,
            });
            const result = await response.json();

            if (result.status === "success") {
              Swal.fire({
                icon: 'success',
                title: 'Enviado a referencias',
                text: '✅ El aspirante fue enviado correctamente',
                timer: 2000,
                showConfirmButton: false
              }).then(() => location.reload());
            } else if ((result.message || '').includes('ya fue enviado')) {
              Swal.fire({
                icon: 'warning',
                title: 'Advertencia',
                text: '⚠️ El aspirante ya había sido enviado a referencias.'
              });
            } else {
              Swal.fire({
                icon: 'error',
                title: 'Error',
                text: result.message || '❌ Error al enviar a referencias'
              });
            }
          } catch (error) {
            console.error("Error:", error);
            Swal.fire({
              icon: 'error',
              title: 'Error',
              text: '❌ Error al enviar a referencias, valida que el aspirante tenga CURP capturado'
            });
          }
        });
      }
    }, 100);


  } catch (error) {
    container.innerHTML = `<div class="alert alert-danger">Error de conexión con el servidor.</div>`;
  }
});

// Permite abrir el modal de vacantes desde un botón externo con id "btnEditarVacante"
document.addEventListener('click', function(e) {
  if (e.target && e.target.id === 'btnEditarVacante') {
    var modal = new bootstrap.Modal(document.getElementById('modalVacantes'));
    modal.show();
  }
});
