// static/js/graph/wizard/step2_render.js
import { renderAnsible } from './api.js';
import { getTargetHostData } from './step0_target.js';

export function mountStep2Render() {
  const btn   = document.getElementById('btn-create-yaml');
  const badge = document.getElementById('yaml-badge');
  if (!btn) return;

  btn.onclick = null; // Remove any previous handler
  btn.addEventListener('click', async () => {
    const origText = btn.textContent;
    btn.disabled = true;
    btn.textContent = 'Creating…';
    badge.className = 'badge bg-secondary';
    badge.textContent = 'Running';

    try {
      const val = (id) => (document.getElementById(id)?.value || '').trim();
      // Target IP priority: localStorage → helper → DOM
      const lsIp   = localStorage.getItem('targetHostIp') || '';
      const target = (typeof getTargetHostData === 'function' ? getTargetHostData() : {}) || {};
      const domIp  = (document.querySelector('#target-host-row input')?.value || '').trim();
      const ansibleHostIp = (lsIp || target.ip || domIp || '').trim();

  // Get eth0 info from Stage 1 UI fields
  const eth0Cidr = val('ip-core-mgmt');
  const eth0Gw = val('ip-core-mgmt-gw');

      const payload = {
        hostname: val('network-name-input') || 'AIO-1',
        network_name: val('network-name-input'),
        plmn: val('plmn-input') || '315-010',
        dns: (val('dns-input') || '8.8.8.8').split(',').map(s => s.trim()).filter(Boolean),
        ntp: (val('ntp-input') || '0.pool.ntp.org, 1.pool.ntp.org').split(',').map(s => s.trim()).filter(Boolean),
        ran: { cidr: val('ip-core-ran'), gw: val('ip-core-ran-gw') },
  mgmt: { cidr: eth0Cidr, gw: eth0Gw },
        dn: {
          cidr: val('ip-core-dn'),
          gw: val('ip-core-dn-gw'),
          vlan: val('ip-core-dn-vlan') ? Number(val('ip-core-dn-vlan')) : undefined,
          ue_pool: val('ip-core-dn-uepool'),
          dnn: 'internet'
        },
        inventory_host: 'GBP08-AIO-1',
        esxi_host: 'ESXI-1',
        version: '25.1',
        ova_file: '/home/mjensen/OVA/HPE_ANW_P5G_Core-1.25.1.1-qemux86-64.ova',
        ansible_host_ip: ansibleHostIp
      };

      const res = await renderAnsible(payload);

      badge.className = 'badge bg-success';
      badge.textContent = 'Created';
      btn.textContent = origText;
      btn.disabled = false;

      // Show YAML context in the UI for debug
      let debugDiv = document.getElementById('yaml-debug-info');
      if (!debugDiv) {
        debugDiv = document.createElement('div');
        debugDiv.id = 'yaml-debug-info';
        debugDiv.className = 'mt-3 alert alert-info';
        btn.parentNode.appendChild(debugDiv);
      }
      debugDiv.innerHTML = `<strong>YAML files created in:</strong> ${res.staging}<br><strong>Payload used:</strong><pre>${JSON.stringify(payload, null, 2)}</pre>`;

    } catch (err) {
      badge.className = 'badge bg-danger';
      badge.textContent = 'Failed';
      btn.textContent = origText;
      btn.disabled = false;
      alert(`Failed to create YAML files:\n${err.message || err}`);
    }
  });
}