// output_popl_up.js

// Obtener el contenedor del gráfico
const elem = document.getElementById('poplUpContainer');

// Inicializar el gráfico
const graph = ForceGraph3D()(elem)
  .backgroundColor('#000000')
  .nodeLabel('id')
  .nodeAutoColorBy('group')
  .nodeVal(5)
  .linkColor(() => 'green')
  .onNodeClick(node => showNodeContent(node.content))
  .onNodeHover(node => {
    elem.style.cursor = node ? 'pointer' : null;
  })
  .forceEngine('d3')
  .d3Force('charge', d3.forceManyBody().strength(-10))
  .d3Force('link', d3.forceLink().distance(30).strength(1));

// Función para obtener datos del servidor
async function getData(paramsObj = {}) {
  try {
    let url = '/api/data';
    const params = new URLSearchParams();

    // Fijar el tema principal
    params.append('tema', 'movimientos populares y levantamientos');

    // Agregar otros parámetros si se han definido
    for (const key in paramsObj) {
      if (paramsObj[key]) {
        params.append(key, paramsObj[key]);
      }
    }

    url += `?${params.toString()}`;

    const response = await fetch(url);
    const data = await response.json();

    console.log('📦 Datos recibidos:', data);

    // Validar y limpiar links
    const nodeIds = new Set(data.nodes.map(node => node.id));
    data.links = data.links.filter(link => {
      const valid = nodeIds.has(link.source) && nodeIds.has(link.target);
      if (!valid) {
        console.log(`❌ Enlace inválido eliminado: ${link.source} -> ${link.target}`);
      }
      return valid;
    });

    return data;
  } catch (error) {
    console.error('⚠️ Error al obtener datos:', error);
    return { nodes: [], links: [] };
  }
}

// Mostrar contenido del nodo en consola (puedes ampliar esta función)
function showNodeContent(content) {
  console.log('🧠 Contenido del nodo:', content);
}

// Centrar el gráfico tras dibujarlo
function centerGraph() {
  setTimeout(() => {
    const width = elem.clientWidth;
    const height = elem.clientHeight;
    const padding = Math.min(width, height) * 0.1;
    graph.zoomToFit(400, padding);
  }, 500);
}

// Redibujar al cambiar tamaño ventana
window.addEventListener('resize', () => {
  graph.width(elem.clientWidth);
  graph.height(elem.clientHeight);
  centerGraph();
});

// Manejar el formulario
document.getElementById('paramForm').addEventListener('submit', function(event) {
  event.preventDefault();

  const subtematica = document.getElementById('param2').value;
  const palabraClave = document.getElementById('param1').value;
  const fechaInicio = document.getElementById('fecha_inicio').value;
  const fechaFin = document.getElementById('fecha_fin').value;
  const nodos = document.getElementById('nodos').value;
  const complejidad = document.getElementById('complejidad').value;

  const paramsObj = {
    subtematica,
    palabraClave,
    fechaInicio,
    fechaFin,
    nodos,
    complejidad,
  };

  getData(paramsObj).then(graphData => {
    if (graphData) {
      console.log("✅ Redibujando con nuevos datos...");
      graph.graphData(graphData);
      centerGraph();
    }
  });
});

// Obtener datos iniciales
getData().then(graphData => {
  if (graphData && graphData.nodes && graphData.nodes.length > 0) {
    console.log(`✅ Se recibieron ${graphData.nodes.length} nodos.`);
    graph.graphData(graphData);
    centerGraph();
  } else {
    console.warn("⚠️ No se recibieron nodos para mostrar.");
    console.log("🔍 Respuesta completa:", graphData);
  }
});