{% extends "network/base.html" %}
{% block title %}Connect & Collect — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Connect &amp; Collect</h1>
    <p class="page-subtitle">Ingest device configs via SSH or manual paste &mdash; plus import diagrams with data extraction</p>
  </div>
</div>

<div class="dashboard-grid">
  <div>
    <!-- Tab Buttons -->
    <div style="display:flex;gap:8px;margin-bottom:16px;">
      <button class="btn btn-primary" id="tab-ssh" onclick="showTab('ssh')">SSH Collect</button>
      <button class="btn btn-secondary" id="tab-paste" onclick="showTab('paste')">Manual Paste</button>
      <button class="btn btn-secondary" id="tab-import" onclick="showTab('import')">Import Diagram</button>
    </div>

    <!-- SSH Tab -->
    <section class="panel panel-wide" id="panel-ssh">
      <div class="panel-header"><h2 class="panel-title">SSH Connect &amp; Collect</h2></div>
      <div style="padding:12px;">
        <p style="color:var(--text-dim);font-size:12px;margin-bottom:12px;">Connects to device in <strong>read-only mode</strong>, runs commands from the selected profile, stores outputs.</p>
        <div class="form-grid">
          <label>Device IP <input id="ssh-ip" placeholder="10.0.0.1"></label>
          <label>Hostname <input id="ssh-host" placeholder="core-r1 (optional)"></label>
          <label>Device Profile <select id="ssh-profile"></select></label>
          <label>Netmiko Device Type <select id="ssh-devtype">
            <option value="cisco_ios">Cisco IOS / IOS-XE</option>
            <option value="cisco_nxos">Cisco NX-OS</option>
            <option value="arista_eos">Arista EOS</option>
            <option value="juniper_junos">Juniper JunOS</option>
            <option value="paloalto_panos">Palo Alto PAN-OS</option>
            <option value="fortinet">Fortinet FortiOS</option>
            <option value="nokia_sros">Nokia SR-OS</option>
            <option value="linux">Linux / Generic</option>
          </select></label>
          <label>Username <input id="ssh-user" placeholder="admin"></label>
          <label>Password <input id="ssh-pass" type="password" placeholder="(session only, never stored)"></label>
        </div>
        <button class="btn btn-primary" style="margin-top:12px;" onclick="runSSHCollect()">Connect &amp; Collect</button>
        <div id="ssh-result" style="margin-top:12px;"></div>
      </div>
    </section>

    <!-- Paste Tab -->
    <section class="panel panel-wide" id="panel-paste" style="display:none;">
      <div class="panel-header"><h2 class="panel-title">Manual Paste</h2></div>
      <div style="padding:12px;">
        <p style="color:var(--text-dim);font-size:12px;margin-bottom:12px;">Paste command outputs from a terminal session. Works in air-gapped environments.</p>
        <div class="form-grid">
          <label>Device IP <input id="paste-ip" placeholder="10.0.0.1"></label>
          <label>Hostname <input id="paste-host" placeholder="core-r1"></label>
          <label>Device Profile <select id="paste-profile"></select></label>
        </div>
        <div id="paste-commands" style="margin-top:12px;"></div>
        <button class="btn btn-primary" style="margin-top:12px;" onclick="runPasteCollect()">Store All Outputs</button>
        <div id="paste-result" style="margin-top:12px;"></div>
      </div>
    </section>

    <!-- Import Tab -->
    <section class="panel panel-wide" id="panel-import" style="display:none;">
      <div class="panel-header"><h2 class="panel-title">Import Diagram with Data Extraction</h2></div>
      <div style="padding:12px;">
        <p style="color:var(--text-dim);font-size:12px;margin-bottom:12px;">Import a DrawIO/Visio/SVG diagram &mdash; auto-classifies devices, extracts IPs to IPAM, links to circuits, runs compliance audit.</p>
        <div class="form-grid">
          <label>Name <input id="imp-name" placeholder="Imported Network"></label>
          <label>Format <select id="imp-format"><option value="drawio">DrawIO (.drawio)</option><option value="vdx">Visio VDX</option><option value="svg">SVG</option></select></label>
          <label style="grid-column:span 2">Diagram Content <textarea id="imp-content" rows="6" style="width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px;font-family:var(--mono);font-size:11px;" placeholder="Paste XML/SVG content here..."></textarea></label>
        </div>
        <button class="btn btn-primary" style="margin-top:12px;" onclick="runImportExtract()">Import &amp; Extract Data</button>
        <div id="imp-result" style="margin-top:12px;"></div>
      </div>
    </section>
  </div>

  <!-- Right: Collected Configs -->
  <div class="panel-stack">
    <section class="panel">
      <div class="panel-header"><h2 class="panel-title">Recent Collections</h2></div>
      <div id="recent-collections" style="padding:8px;max-height:500px;overflow-y:auto;">
        <p style="color:var(--text-dim);font-size:12px;">Loading...</p>
      </div>
    </section>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
function showTab(tab) {
  ['ssh','paste','import'].forEach(t => {
    document.getElementById('panel-' + t).style.display = t === tab ? 'block' : 'none';
    document.getElementById('tab-' + t).className = t === tab ? 'btn btn-primary' : 'btn btn-secondary';
  });
  if (tab === 'paste') loadPasteCommands();
}

async function loadProfiles() {
  const d = await fetch(NC_BASE + '/api/device-profiles').then(r => r.json());
  ['ssh-profile','paste-profile'].forEach(id => {
    const sel = document.getElementById(id);
    sel.innerHTML = d.map(p => `<option value="${p.id}">${p.vendor} ${p.platform}</option>`).join('');
  });
}

async function loadPasteCommands() {
  const profId = document.getElementById('paste-profile').value;
  if (!profId) return;
  const d = await fetch(NC_BASE + '/api/device-profiles/' + profId).then(r => r.json());
  const cmds = d.commands || {};
  const el = document.getElementById('paste-commands');
  el.innerHTML = Object.entries(cmds).map(([name, info]) => `
    <div style="margin-bottom:10px;">
      <label style="font-size:12px;font-weight:600;color:var(--text);">${name} <code style="color:var(--text-dim);font-size:10px;">${info.command}</code></label>
      <textarea id="paste-cmd-${name}" rows="4" style="width:100%;background:var(--bg3);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:6px;font-family:var(--mono);font-size:11px;" placeholder="Paste output of: ${info.command}"></textarea>
    </div>
  `).join('');
}

async function runSSHCollect() {
  const el = document.getElementById('ssh-result');
  el.innerHTML = '<span style="color:var(--warning);">Connecting...</span>';
  const body = {
    device_ip: document.getElementById('ssh-ip').value,
    hostname: document.getElementById('ssh-host').value || document.getElementById('ssh-ip').value,
    profile_id: document.getElementById('ssh-profile').value,
    device_type: document.getElementById('ssh-devtype').value,
    username: document.getElementById('ssh-user').value,
    password: document.getElementById('ssh-pass').value,
    mode: 'ssh',
  };
  // Clear password from UI immediately
  document.getElementById('ssh-pass').value = '';
  try {
    const r = await fetch(NC_BASE + '/api/connect-collect', {
      method: 'POST', headers: {'Content-Type': 'application/json'},
      body: JSON.stringify(body)
    });
    const d = await r.json();
    if (d.error) {
      el.innerHTML = `<div style="color:var(--danger);font-size:12px;"><strong>Error:</strong> ${d.error}</div>
        ${d.hint ? '<div style="color:var(--text-dim);font-size:11px;">' + d.hint + '</div>' : ''}`;
      return;
    }
    el.innerHTML = `<div style="color:var(--success);font-size:13px;font-weight:600;">Collected ${d.commands_executed} commands from ${d.hostname}</div>` +
      d.results.map(r => `<div style="font-size:11px;margin:2px 0;"><span class="health-pill ${r.status === 'collected' ? 'pill-green' : r.status === 'stored' ? 'pill-blue' : 'pill-red'}">${r.status}</span> ${r.command} (${r.lines || 0} lines)</div>`).join('');
    loadRecent();
  } catch (e) {
    el.innerHTML = '<span style="color:var(--danger);">Request failed: ' + e.message + '</span>';
  }
}

async function runPasteCollect() {
  const el = document.getElementById('paste-result');
  const profId = document.getElementById('paste-profile').value;
  const profResp = await fetch(NC_BASE + '/api/device-profiles/' + profId).then(r => r.json());
  const cmds = profResp.commands || {};
  const manual_outputs = {};
  Object.keys(cmds).forEach(name => {
    const ta = document.getElementById('paste-cmd-' + name);
    if (ta && ta.value.trim()) manual_outputs[name] = ta.value;
  });
  if (Object.keys(manual_outputs).length === 0) { el.innerHTML = '<span style="color:var(--warning);">Paste at least one command output</span>'; return; }
  const r = await fetch(NC_BASE + '/api/connect-collect', {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      device_ip: document.getElementById('paste-ip').value,
      hostname: document.getElementById('paste-host').value,
      profile_id: profId, mode: 'manual',
      manual_outputs: manual_outputs,
    })
  }).then(r => r.json());
  if (r.error) { el.innerHTML = '<span style="color:var(--danger);">' + r.error + '</span>'; return; }
  el.innerHTML = `<div style="color:var(--success);font-size:13px;">Stored ${r.commands_executed} command outputs</div>`;
  loadRecent();
}

async function runImportExtract() {
  const el = document.getElementById('imp-result');
  el.innerHTML = '<span style="color:var(--warning);">Importing &amp; extracting...</span>';
  const r = await fetch(NC_BASE + '/api/import/extract-data', {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({
      name: document.getElementById('imp-name').value || 'Imported',
      format: document.getElementById('imp-format').value,
      content: document.getElementById('imp-content').value,
    })
  }).then(r => r.json());
  if (r.error) { el.innerHTML = '<span style="color:var(--danger);">' + r.error + '</span>'; return; }
  const ext = r.extracted || {};
  el.innerHTML = `
    <div style="color:var(--success);font-size:13px;font-weight:600;">Imported: ${r.nodes} nodes, ${r.edges} edges</div>
    <div style="font-size:12px;margin-top:6px;">
      <div>Devices extracted: <strong>${ext.devices}</strong></div>
      <div>IPAM blocks: <strong>${ext.ipam_blocks}</strong></div>
      <div>Circuits: <strong>${ext.circuits}</strong></div>
      <div>Compliance: ${r.compliance.passed} passed / ${r.compliance.failed} failed (${r.compliance.findings} findings)</div>
    </div>
    <div style="margin-top:8px;"><a href="${NC_BASE}/canvas/${r.id}" class="btn btn-secondary" style="font-size:11px;">Open in Canvas</a></div>
  `;
}

async function loadRecent() {
  const d = await fetch(NC_BASE + '/api/collected-configs').then(r => r.json());
  const el = document.getElementById('recent-collections');
  if (!d.length) { el.innerHTML = '<p style="color:var(--text-dim);font-size:12px;">No collected configs yet.</p>'; return; }
  el.innerHTML = d.slice(0, 20).map(c => `
    <div style="padding:4px 0;border-bottom:1px solid var(--border);font-size:11px;">
      <strong>${c.hostname || c.device_ip}</strong> &mdash; ${c.command_name}
      <span style="color:var(--text-dim);margin-left:8px;">${(c.collected_at || '').substring(0, 16)}</span>
    </div>
  `).join('');
}

document.getElementById('paste-profile').addEventListener('change', loadPasteCommands);
loadProfiles();
loadRecent();
</script>
{% endblock %}