import { todasVacantes, pdvPorZona } from './carga.js';
import { mostrarVistaPorZonas } from './vistaZonas.js';

export function actualizarPDVs() {
  const zona = document.getElementById('filtroZona').value;
  const soloVacantes = document.getElementById('filtroSoloVacantes').checked;
  const pdvSelect = document.getElementById('filtroPDV');
  pdvSelect.innerHTML = '<option value="">Todos los PDVs</option>';

  let pdvs = [];

  if (zona && pdvPorZona[zona]) {
    pdvs = pdvPorZona[zona];

    if (soloVacantes) {
      const pdvsConVacantes = new Set();
      todasVacantes.forEach(v => {
        if (v.zona === zona && !v.curp) {
          pdvsConVacantes.add(v.pdv);
        }
      });
      pdvs = pdvs.filter(p => pdvsConVacantes.has(p));

      if (pdvs.length === 0) {
        Swal.fire({
          icon: 'info',
          title: 'Sin vacantes disponibles',
          text: 'No hay PDVs con vacantes abiertas en esta zona.',
          confirmButtonColor: '#0d6efd'
        });
      }
    }

  } else {
    const todos = new Set();
    Object.values(pdvPorZona).forEach(arr => arr.forEach(p => todos.add(p)));
    pdvs = Array.from(todos);
  }

  pdvs.sort((a, b) => a.localeCompare(b));
  pdvSelect.disabled = pdvs.length === 0;
  pdvs.forEach(p => {
    const opt = document.createElement('option');
    opt.value = p;
    opt.textContent = p;
    pdvSelect.appendChild(opt);
  });
}

export function mostrarVacantes() {
  const zonaSeleccionada = document.getElementById('filtroZona').value;
  const soloVacantes = document.getElementById('filtroSoloVacantes').checked;
  const pdvSeleccionado = document.getElementById('filtroPDV').value;
  const contenedor = document.getElementById('contenedorSillas');
  contenedor.innerHTML = '';

  const filtradas = todasVacantes.filter(v => {
    const coincideZona = !zonaSeleccionada || v.zona === zonaSeleccionada;
    const coincidePDV = !pdvSeleccionado || v.pdv === pdvSeleccionado;
    const estaDisponible = !soloVacantes || !v.curp;
    return coincideZona && coincidePDV && estaDisponible;
  });

  if (!zonaSeleccionada && !pdvSeleccionado && !soloVacantes) {
    mostrarVistaPorZonas();
    return;
  }

  let totalOcupados = 0;
  let totalDisponibles = 0;

  filtradas.forEach(v => {
    if (v.curp) totalOcupados++;
    else totalDisponibles++;
  });

  if (filtradas.length === 0) {
    contenedor.innerHTML = '<div class="text-center text-danger">No se encontraron vacantes.</div>';
    document.getElementById('contenedorTotales').innerHTML = `
      <div class="col-md-12"><div class="alert alert-warning">Sin resultados para el filtro seleccionado.</div></div>
    `;
    return;
  }

  document.getElementById('contenedorTotales').innerHTML = `
    <div class="col-md-4"><div class="alert alert-success">Ocupados: <strong>${totalOcupados}</strong></div></div>
    <div class="col-md-4"><div class="alert alert-secondary">Vacantes: <strong>${totalDisponibles}</strong></div></div>
    <div class="col-md-4"><div class="alert alert-dark">Total: <strong>${totalOcupados + totalDisponibles}</strong></div></div>
  `;

  // Aquí podrías importar desde otro archivo `vistaCards.js` si quieres separar también esta parte
  const pdvRow = document.createElement('div');
  pdvRow.className = 'pdv-row';

  filtradas.forEach(item => {
    const ocupado = !!item.curp;
    const estadoTexto = ocupado ? 'Ocupado' : 'Vacante';
    const clase = ocupado ? 'vacante-ocupado' : 'vacante-disponible';

    const card = document.createElement('div');
    card.className = 'pdv-card';

    card.innerHTML = `
      <i class="fas fa-briefcase text-${ocupado ? 'success' : 'secondary'}"></i>
      <div class="pdv-title">${item.puesto}</div>
      <div class="${clase}">${estadoTexto}</div>
      <div class="text-muted small">${item.pdv}</div>
    `;

    if (ocupado) {
      card.title = item.nombre;
      card.onclick = () => window.location.href = `../plantilla/detalle-empleado.php?curp=${item.curp}`;
      card.style.cursor = 'pointer';
    }

    pdvRow.appendChild(card);
  });

  contenedor.appendChild(pdvRow);
}
