document.addEventListener('DOMContentLoaded', () => {
  console.log("🚀 dashboard.js conectado");
  cargarDashboard(); // carga inicial sin filtros

  const btnFiltro = document.getElementById('btnFiltrarFechas');
  if (btnFiltro) {
    btnFiltro.addEventListener('click', () => {
      const inicio = document.getElementById('fechaInicio').value;
      const fin = document.getElementById('fechaFin').value;
      const rangoActivo = document.getElementById('rangoActivo');
      const btnLimpiar = document.getElementById('btnLimpiarFiltro');

      if (btnLimpiar) {
        btnLimpiar.addEventListener('click', () => {
          document.getElementById('fechaInicio').value = '';
          document.getElementById('fechaFin').value = '';
          document.getElementById('rangoActivo').textContent = '';
          cargarDashboard(); // vuelve al estado original sin filtro
        });
      }

      if (rangoActivo) {
        const desde = new Date(inicio).toLocaleDateString('es-MX');
        const hasta = new Date(fin).toLocaleDateString('es-MX');
        rangoActivo.textContent = `🔍 Mostrando registros del ${desde} al ${hasta}`;
      }

      if (!inicio || !fin) {
        alert("Por favor selecciona un rango de fechas válido.");
        return;
      }

      cargarDashboard(inicio, fin);
    });
  }
});

function cargarDashboard(inicio = null, fin = null) {
  let url = '../../backend/dashboard/get_dashboard.php';
  if (inicio && fin) {
    url += `?inicio=${inicio}&fin=${fin}`;
  }

  fetch(url)
    .then(res => {
      if (!res.ok) {
        throw new Error(`HTTP error! status: ${res.status}`);
      }
      return res.text(); // Primero obtenemos texto para debug
    })
    .then(text => {
      console.log("📄 Respuesta cruda del servidor:", text);
      try {
        const data = JSON.parse(text);
        console.log("📦 Respuesta del backend:", data);
        if (!data.success) return;

        const tabla = document.getElementById('tabla-aspirantes');
        const tbody = tabla ? tabla.querySelector('tbody') : null;
      const cardsContainer = document.getElementById('dashboard-cards');

      if (!cardsContainer) return;

      // Función para obtener color según estado
      function getEstadoColor(estado) {
        switch (estado.toLowerCase()) {
          case 'asignado': return 'info';
          case 'revision': return 'warning';
          case 'llamada':
          case 'llamada2': return 'primary';
          case 'entrevista':
          case 'entrevista1':
          case 'entrevista2': return 'secondary';
          case 'contratado': return 'success';
          case 'rechazado': return 'danger';
          default: return 'dark';
        }
      }

      // Siempre vaciamos las tarjetas
      cardsContainer.innerHTML = '';

      // ✅ Mostrar tabla solo cuando NO hay filtro activo
      if (!inicio && !fin && tbody) {
        tbody.innerHTML = '';
        data.data.forEach(asp => {
          const fechaFormateada = asp.ultima_modificacion
            ? new Date(asp.ultima_modificacion).toLocaleDateString('es-MX', {
                year: 'numeric',
                month: 'short',
                day: 'numeric'
              })
            : 'Sin registro';

          const tr = document.createElement('tr');
          tr.innerHTML = `
            <td>${asp.nombre_completo}</td>
            <td>${asp.puesto}</td>
            <td><span class="badge bg-${getEstadoColor(asp.estado)}">${asp.estado}</span></td>
            <td>${fechaFormateada}</td>
          `;
          tbody.appendChild(tr);
        });
      }

      // ✅ Tarjetas (siempre)
      const stats = data.stats;
      const tarjetas = [
        {
          label: 'Asignados',
          color: 'info',
          value: stats.asignados,
          icon: 'fas fa-user-check'
        },
        {
          label: 'En proceso',
          color: 'primary',
          value: stats.en_proceso,
          icon: 'fas fa-spinner'
        },
        {
          label: 'Contratados',
          color: 'success',
          value: stats.contratados,
          icon: 'fas fa-user-tie'
        },
        {
          label: 'Rechazados',
          color: 'danger',
          value: stats.rechazados,
          icon: 'fas fa-user-times'
        }
      ];



      tarjetas.forEach(t => {
        const card = document.createElement('div');
        card.className = 'col-md-6 col-lg-3 mb-4';
        card.innerHTML = `
          <div class="card shadow-sm border-start border-${t.color} border-5 h-100">
            <div class="card-body d-flex align-items-center">
              <div class="me-4">
                <i class="${t.icon} fa-3x text-${t.color}"></i>
              </div>
              <div>
                <h6 class="text-muted mb-1">${t.label}</h6>
                <h2 class="text-${t.color} fw-bold mb-0">${t.value}</h2>
              </div>
            </div>
          </div>
        `;
        cardsContainer.appendChild(card);
      });
      } catch (parseError) {
        console.error('❌ Error al parsear JSON:', parseError);
        console.error('Respuesta recibida:', text);
      }
    })
    .catch(err => console.error('❌ Error al cargar dashboard:', err));
}
