let todasVacantes = [];
let pdvPorZona = {};
let zonasConPDVsGlobal = [];

document.addEventListener('DOMContentLoaded', () => {
  fetch('../../backend/vacantes/get_zonas_pdvs.php')
    .then(res => res.json())
    .then(json => {
      if (json.success) {
        zonasConPDVsGlobal = json.data; // <-- guarda aquí
        generarEstadioSemiCircular(zonasConPDVsGlobal);
      }
    });
});

    fetch('../../backend/vacantes/get_panel_vacantes.php')
    .then(res => res.json())
    .then(json => {
      if (!json.success) {
      document.getElementById('contenedorSillas').innerHTML = '<div class="text-center text-danger">Error al cargar vacantes.</div>';
      return;
    }

    const data = json.data;
    todasVacantes = [];

    const zonas = {};
    data.forEach(sector => {
      const zona = sector.sector;
      sector.vacantes.forEach(v => {
        v.zona = zona;
        todasVacantes.push(v);
        if (!zonas[zona]) zonas[zona] = new Set();
        zonas[zona].add(v.pdv);
      });
    });

    const zonaSelect = document.getElementById('filtroZona');
     Object.keys(zonas).sort((a, b) => a.localeCompare(b)).forEach(z => {
        const opt = document.createElement('option');
        opt.value = z;
        opt.textContent = z;
        zonaSelect.appendChild(opt);
      });


    pdvPorZona = Object.fromEntries(
      Object.entries(zonas).map(([zona, pdvsSet]) => [zona, Array.from(pdvsSet)])
    );

    actualizarPDVs();
    mostrarVacantes();
    generarEstadioSemiCircular(zonasConPDVsGlobal);
     });

  document.getElementById('filtroZona').addEventListener('change', () => {
  actualizarPDVs();
  mostrarVacantes();
});
document.getElementById('filtroSoloVacantes').addEventListener('change', () => {
  actualizarPDVs();
  mostrarVacantes();
  generarEstadioSemiCircular(zonasConPDVsGlobal);
});
document.getElementById('filtroPDV').addEventListener('change', () => {
  mostrarVacantes();
});
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];

    // Si solo queremos vacantes disponibles, filtramos PDVs con al menos una vacante sin CURP
    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));

      // Si no hay PDVs con vacantes en esa zona, mostrar alerta
      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 {
    // Si no hay zona seleccionada, usamos todos los PDVs
    const todos = new Set();
    Object.values(pdvPorZona).forEach(arr => arr.forEach(p => todos.add(p)));
    pdvs = Array.from(todos);
  }

  // Rellenar el select de PDV
    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);
    });
}

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 = '';

// Mostrar vista por zonas si no hay filtros
if (!zonaSeleccionada && !pdvSeleccionado && !soloVacantes) {
  mostrarVistaPorZonas();
  return;
}
  // Filtrar registros
  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;
});

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]++;
    }
  });

  // Mostrar métricas como en el resto del sistema
  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);
}

  // Conteo dinámico
  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;
  }

  // Si no hay zona seleccionada, mostrar lista plana sin agrupación
  if (!zonaSeleccionada) {
    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);
  } else {
    // Agrupar por zona y PDV solo si se seleccionó zona
    const agrupados = {};

    filtradas.forEach(v => {
      if (!agrupados[v.zona]) agrupados[v.zona] = {};
      if (!agrupados[v.zona][v.pdv]) agrupados[v.zona][v.pdv] = [];
      agrupados[v.zona][v.pdv].push(v);
    });

    for (const zona in agrupados) {
      const sectorDiv = document.createElement('div');
      sectorDiv.className = 'sector-block';

      const titulo = document.createElement('div');
      titulo.className = 'sector-title';
      titulo.textContent = zona;
      sectorDiv.appendChild(titulo);

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

      for (const pdv in agrupados[zona]) {
        agrupados[zona][pdv].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);
        });
      }

      sectorDiv.appendChild(pdvRow);
      contenedor.appendChild(sectorDiv);
    }
  }

  // Totales del filtro actual
  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>
  `;
}

// Genera los bloques circulares tipo estadio con zonas y PDVs
function generarEstadioSemiCircular(zonasConPDVs) {
  const estadio = document.getElementById('estadio');
  estadio.innerHTML = '';

  const soloVacantes = document.getElementById('filtroSoloVacantes').checked;
  let letraAscii = 65;
  let todosBloques = [];

  zonasConPDVs.forEach((zona, iZona) => {
    let letraZona;
          if (zona.nombre.toLowerCase() === 'matriz') {
            letraZona = 'M';
          } else if (zona.nombre.toLowerCase() === 'sin sector') {
            letraZona = 'Z'; // Letra especial para sin sector
          } else {
            letraZona = String.fromCharCode(letraAscii + iZona);
          }


         if (zona.nombre.toLowerCase() === 'matriz') {
          const bloqueMatriz = document.createElement('div');
          bloqueMatriz.className = 'bloque-matriz-custom';
          bloqueMatriz.innerHTML = `
            <img src="../assets/img/Logos/LOGO NEGRO Y AZUL.png" alt="Matriz" class="img-matriz">
          `;

          bloqueMatriz.addEventListener('click', () => {
            document.getElementById('filtroZona').value = zona.nombre;
            actualizarPDVs();
            mostrarVacantes();
            window.scrollTo({ top: 300, behavior: 'smooth' });
          });

          estadio.appendChild(bloqueMatriz);
        }
          else {
      zona.pdvs.forEach((pdv, idx) => {
        todosBloques.push({
          zona: zona.nombre,
          letra: letraZona,
          indice: idx + 1,
          pdv
        });
      });
    }
  });

  const total = todosBloques.length;
  const niveles = 3;
  const bloquesPorNivel = Math.ceil(total / niveles);
  const radios = [30, 38, 46];
  const centroX = 50;
  const centroY = 75;

  todosBloques.forEach((item, i) => {
    const nivel = Math.floor(i / bloquesPorNivel);
    const indexEnNivel = i % bloquesPorNivel;
    const totalEnEsteNivel = Math.min(bloquesPorNivel, total - nivel * bloquesPorNivel);
    const angulo = Math.PI * (indexEnNivel / (totalEnEsteNivel - 1 || 1));
    const x = centroX + radios[nivel] * Math.cos(angulo - Math.PI);
    const y = centroY + radios[nivel] * Math.sin(angulo - Math.PI) * 1.4;

    const bloque = document.createElement('div');
    bloque.className = 'bloque-pdv';
    bloque.style.left = `${x}%`;
    bloque.style.top = `${y}%`;

    const letra = item.letra;
    const clasesColor = {
        A: 'color-a',
        B: 'color-b',
        D: 'color-d',
        E: 'color-e',
        F: 'color-f',
        G: 'color-g',
        H: 'color-h',
        I: 'color-i',
        J: 'color-j',
        K: 'color-k',
        Z: 'color-z',
        matriz: 'color-matriz'
      };




    const tieneVacantes = todasVacantes.some(v => v.zona === item.zona && v.pdv === item.pdv && !v.curp);

    if (soloVacantes && !tieneVacantes) {
      // Desactivar y opacar si no tiene vacantes
      bloque.classList.add('bg-secondary');
      bloque.style.opacity = '0.4';
      bloque.style.cursor = 'not-allowed';
      bloque.title = `${item.pdv} [${item.zona}] - Sin vacantes`;
    } else {
      // Estilo normal
      bloque.classList.add(clasesColor[letra] || 'bg-secondary');
      const nombreZona = item.zona.toLowerCase() === 'sin sector' ? 'Sin Sector (no asignado)' : item.zona;
      bloque.title = `${item.pdv} [${nombreZona}]`;


      bloque.addEventListener('click', () => {
        const vacantes = todasVacantes.filter(v => v.zona === item.zona && v.pdv === item.pdv && (!soloVacantes || !v.curp));
        if (soloVacantes && vacantes.length === 0) {
          Swal.fire({
            icon: 'info',
            title: 'PDV sin vacantes',
            text: 'Este PDV no tiene vacantes disponibles actualmente.',
            confirmButtonColor: '#0d6efd'
          });
          return;
        }

        mostrarDetallePDV(item.pdv, item.zona);
      });
    }

        // Verifica si el checkbox está activado
            const soloVacantesChecked = document.getElementById('filtroSoloVacantes').checked;

            // Verifica si el PDV tiene al menos una vacante
            const tieneVacante = todasVacantes.some(v => v.zona === item.zona && v.pdv === item.pdv && !v.curp);

            // Aplicar clase y lógica según si tiene vacante o no
            if (soloVacantesChecked && !tieneVacante) {
            bloque.classList.add('bloque-deshabilitado');
            bloque.innerHTML = `<i class="fas fa-lock"></i> ${item.letra}${item.indice}`;
            bloque.style.cursor = 'not-allowed';
            bloque.style.pointerEvents = 'none';
            } else {
            bloque.textContent = `${item.letra}${item.indice}`;
            }


    const linea = document.createElement('div');
    linea.className = 'linea-conector';
    const anguloGrados = (angulo * 180) / Math.PI;
    const largo = 100 + (nivel * 15);
    linea.style.transform = `rotate(${anguloGrados - 90}deg)`;
    linea.style.width = `${largo}px`;
    linea.style.left = `50%`;
    linea.style.top = `75%`;
    linea.style.transformOrigin = `left`;

    estadio.appendChild(linea);
    estadio.appendChild(bloque);
  });
}
  function mostrarDetallePDV(pdvSeleccionado, zonaSeleccionada) {
  const vacantes = todasVacantes.filter(v => v.zona === zonaSeleccionada && v.pdv === pdvSeleccionado);
  const contenedor = document.getElementById('contenidoDetallePDV');

  if (vacantes.length === 0) {
    contenedor.innerHTML = `<div class="alert alert-warning text-center">No hay registros para este PDV.</div>`;
  } else {
    contenedor.innerHTML = `
      <h5 class="mb-3 text-primary">PDV: ${pdvSeleccionado}</h5>
      <div class="row row-cols-1 row-cols-md-2 g-3">
        ${vacantes.map(v => {
          const ocupado = !!v.curp;
          const clase = ocupado ? 'border-success' : 'border-secondary';
          const icono = ocupado ? 'fa-user-check text-success' : 'fa-user-times text-secondary';
          const titulo = ocupado ? `Ocupado por: ${v.nombre}` : 'Vacante disponible';
          const enlace = ocupado ? `onclick="window.location.href='../plantilla/detalle-empleado.php?curp=${v.curp}'"` : '';

          return `
            <div class="col">
              <div class="card ${clase} border-2 h-100" style="cursor:${ocupado ? 'pointer' : 'default'}" ${enlace}>
                <div class="card-body">
                  <h6 class="card-title"><i class="fas ${icono} me-2"></i>${v.puesto}</h6>
                  <p class="card-text">${titulo}</p>
                </div>
              </div>
            </div>
          `;
        }).join('')}
      </div>
    `;
  }

  const modal = new bootstrap.Modal(document.getElementById('modalDetallePDV'));
  modal.show();
}
  // Cargar zonas y PDVs desde el backend al cargar la página
  document.addEventListener('DOMContentLoaded', () => {
    fetch('../../backend/vacantes/get_zonas_pdvs.php')
      .then(res => res.json())
      .then(json => {
        if (json.success) {
          generarEstadioSemiCircular(json.data);
        }
      });
});

