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

export function generarEstadioSemiCircular(zonasConPDVs) {
  const estadio = document.getElementById('estadio');
  estadio.innerHTML = '';

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

  zonasConPDVs.forEach((zona, iZona) => {
    let letraZona = (zona.nombre.toLowerCase() === 'matriz') ? 'M' :
                    (zona.nombre.toLowerCase() === 'sin sector') ? 'Z' :
                    String.fromCharCode(letraAscii + iZona);

    if (zona.nombre.toLowerCase() !== 'matriz') {
      zonasConBloques.push({
        letra: letraZona,
        nombre: zona.nombre,
        pdvs: zona.pdvs
      });
    }
  });

  // Crear filas
  const fila1 = document.createElement('div'); // inferior
  const fila2 = document.createElement('div'); // media
  const fila3 = document.createElement('div'); // superior

  fila1.className = 'fila-circular fila-1';
  fila2.className = 'fila-circular fila-2';
  fila3.className = 'fila-circular fila-3';

  estadio.appendChild(fila3);
  estadio.appendChild(fila2);
  estadio.appendChild(fila1);

  // Función generadora de bloques por zona
  function crearBloqueZona(zona) {
    const bloqueZona = document.createElement('div');
    bloqueZona.className = `bloque-zona ${getClaseColor(zona.letra)}`;
    bloqueZona.title = zona.nombre;

    const titulo = document.createElement('div');
    titulo.className = 'zona-letra fw-bold';
    titulo.textContent = `Zona ${zona.letra}`;
    bloqueZona.appendChild(titulo);

    const contenedorPDVs = document.createElement('div');
    contenedorPDVs.className = 'contenedor-pdvs';

    zona.pdvs.forEach((pdv, idx) => {
      const pdvData = todasVacantes.find(v => v.zona === zona.nombre && v.pdv === pdv);
      const ocupado = pdvData?.curp;
      const tieneVacante = !ocupado;
      const pdvLabel = `${zona.letra}${idx + 1}`;

      const divPDV = document.createElement('div');
      divPDV.className = `mini-pdv ${ocupado ? 'ocupado' : 'disponible'}`;
      divPDV.textContent = pdvLabel;
      divPDV.title = `${pdv} [${zona.nombre}]`;

      if (soloVacantes && !tieneVacante) {
        divPDV.classList.add('bloque-deshabilitado');
        divPDV.innerHTML = `<i class="fas fa-lock"></i>`;
        divPDV.style.pointerEvents = 'none';
      } else {
        divPDV.addEventListener('click', () => {
          mostrarDetallePDV(pdv, zona.nombre);
        });
      }

      contenedorPDVs.appendChild(divPDV);
    });

    bloqueZona.appendChild(contenedorPDVs);
    return bloqueZona;
  }

  // Mapeo manual de letras por fila
  const filaSuperior = ['H', 'I', 'J', 'K'];
  const filaMedia = ['C', 'D', 'E', 'F', 'G'];
  const filaInferior = ['A', 'B'];

  filaSuperior.forEach(letra => {
    const zona = zonasConBloques.find(z => z.letra === letra);
    if (zona) fila3.appendChild(crearBloqueZona(zona));
  });

  filaMedia.forEach(letra => {
    const zona = zonasConBloques.find(z => z.letra === letra);
    if (zona) fila2.appendChild(crearBloqueZona(zona));
  });

  // Crear contenedor para fila inferior personalizada
const filaInferiorPersonalizada = document.createElement('div');
filaInferiorPersonalizada.className = 'fila-inferior-especial d-flex justify-content-center align-items-center gap-4 flex-wrap';

// Zona A
const zonaA = zonasConBloques.find(z => z.letra === 'A');
if (zonaA) filaInferiorPersonalizada.appendChild(crearBloqueZona(zonaA));

// Logo centrado
const bloqueMatrizZona = document.createElement('div');
bloqueMatrizZona.className = 'bloque-zona color-matriz text-center';
bloqueMatrizZona.style.padding = '1rem';

const img = document.createElement('img');
img.src = '../assets/img/Logos/LOGO NEGRO Y AZUL.png';
img.alt = 'Matriz';
img.className = 'img-matriz';
img.style.maxWidth = '150px';
img.style.margin = '0 auto';
img.style.display = 'block';

bloqueMatrizZona.appendChild(img);
bloqueMatrizZona.addEventListener('click', () => {
  document.getElementById('filtroZona').value = 'Matriz';
  actualizarPDVs();
  mostrarVacantes();
  window.scrollTo({ top: 300, behavior: 'smooth' });
});
filaInferiorPersonalizada.appendChild(bloqueMatrizZona);


// Zona B
const zonaB = zonasConBloques.find(z => z.letra === 'B');
if (zonaB) filaInferiorPersonalizada.appendChild(crearBloqueZona(zonaB));

fila1.appendChild(filaInferiorPersonalizada);
}

function getClaseColor(letra) {
  const clases = {
    A: 'color-a', B: 'color-b', C: 'color-z', 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', M: 'color-matriz'
  };
  return clases[letra] || 'bg-secondary';
}
