import { todasVacantes } from './carga.js';
import { actualizarPDVs, mostrarVacantes } from './filtros.js';

export function mostrarVistaPorZonas() {
  const contenedor = document.getElementById('contenedorSillas');
  contenedor.innerHTML = '';

  const zonasDisponibles = {};
  let totalOcupados = 0;
  let totalVacantes = 0;

  todasVacantes.forEach(v => {
    if (v.curp) {
      totalOcupados++;
    } else {
      totalVacantes++;
      if (!zonasDisponibles[v.zona]) zonasDisponibles[v.zona] = 0;
      zonasDisponibles[v.zona]++;
    }
  });

  document.getElementById('contenedorTotales').innerHTML = `
    <div class="col-md-4"><div class="alert alert-success text-center">Ocupados: <strong>${totalOcupados}</strong></div></div>
    <div class="col-md-4"><div class="alert alert-secondary text-center">Vacantes: <strong>${totalVacantes}</strong></div></div>
    <div class="col-md-4"><div class="alert alert-dark text-center">Total: <strong>${totalOcupados + totalVacantes}</strong></div></div>
    <div class="col-md-12"><div class="alert alert-info text-center mt-2">Selecciona una zona para ver sus vacantes detalladas</div></div>
  `;

  const contenedorZonas = document.createElement('div');
  contenedorZonas.className = 'row g-4 justify-content-center';

  Object.entries(zonasDisponibles)
    .sort((a, b) => a[0].localeCompare(b[0]))
    .forEach(([zona, cantidad]) => {
      const card = document.createElement('div');
      card.className = 'col-md-4';
      card.innerHTML = `
        <div class="card shadow-sm h-100 border-0 text-center p-4 zone-card" style="cursor:pointer;">
          <h5 class="mb-3 text-primary"><i class="fas fa-map-marker-alt me-2"></i>${zona}</h5>
          <p class="mb-3 text-muted">Vacantes disponibles:</p>
          <h4 class="fw-bold text-success">${cantidad}</h4>
        </div>
      `;
      card.querySelector('.zone-card').addEventListener('click', () => {
        document.getElementById('filtroZona').value = zona;
        actualizarPDVs();
        mostrarVacantes();
      });

      contenedorZonas.appendChild(card);
    });

  contenedor.appendChild(contenedorZonas);
}
