// output_glob_war.js

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

// Inicializar el gráfico
const graph = ForceGraph3D()(elem)
  .backgroundColor('#000000')
  .nodeLabel('id')
  .nodeAutoColorBy('group')
  .nodeVal(2)
  .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();

    // Tema por defecto: "guerra global"
    params.append('tema', 'guerra global');

    // Agregar parámetros del formulario si existen
    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 del servidor:', data);

    // Filtrar enlaces para nodos existentes
    const nodeIds = new Set(data.nodes.map(n => n.id));
    data.links = data.links.filter(l => nodeIds.has(l.source) && nodeIds.has(l.target));

    console.log('Enlaces tras filtrar:', data.links);
    return data;
  } catch (error) {
    console.error('Error al obtener datos del servidor:', error);
    return { nodes: [], links: [] };
  }
}

// Mostrar contenido del nodo al hacer click
function showNodeContent(content) {
  console.log('Contenido del nodo:', content);
  // aquí podrías mostrarlo en un panel si quieres
}

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

// Al cambiar el tamaño de la ventana, reajustar
window.addEventListener('resize', () => {
  graph.width(elem.clientWidth);
  graph.height(elem.clientHeight);
  centerGraph();
});

// Gestionar el submit del formulario de parámetros
document.getElementById('paramForm').addEventListener('submit', 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(data => {
    graph.graphData(data);
    centerGraph();
  });
});

// Cargar datos iniciales (guerra global) y renderizar
getData().then(data => {
  if (data.nodes && data.nodes.length) {
    console.log(`Se recibieron ${data.nodes.length} nodos.`);
    graph.graphData(data);
    centerGraph();
  } else {
    console.warn('No se recibieron nodos para "guerra global".');
  }
});