{# CUI // SP-CTI #}
{% extends "base.html" %}
{% block title %}Network Infrastructure Migration — ICDEV{% endblock %}

{% block extra_css %}
<style>
.ni-root { padding: 24px 28px; max-width: 1400px; }
.ni-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.ni-header h1 { font-size: 22px; margin: 0; }
.ni-header .cui { font-size: 11px; color: #e74c3c; font-weight: 700; letter-spacing: 1px; }
.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin-bottom: 20px; }
.stat-card { background: #16213e; border: 1px solid #1e3a6e; border-radius: 8px; padding: 16px 20px; }
.stat-num { font-size: 28px; font-weight: 700; color: #27ae60; }
.stat-num.urgent { color: #e74c3c; }
.stat-num.warn { color: #f39c12; }
.stat-label { font-size: 12px; color: #7a8cb0; margin-top: 2px; }
.filter-row { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; align-items: center; }
.filter-row select, .filter-row input { background: #0d1b2e; border: 1px solid #1e3a6e; border-radius: 5px;
  color: #eaeaea; padding: 6px 10px; font-size: 12px; }
.filter-row input[type=text] { flex: 1; min-width: 180px; }
.inv-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.inv-table th { background: #0d1b2e; color: #7a8cb0; text-align: left; padding: 8px 10px;
  border-bottom: 1px solid #1e3a6e; font-size: 11px; text-transform: uppercase; }
.inv-table td { padding: 9px 10px; border-bottom: 1px solid #141f33; vertical-align: middle; }
.inv-table tr:hover td { background: #111f35; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 10px; font-weight: 700; }
.chip-ok { background: #1a5e2d; color: #27ae60; }
.chip-warn { background: #3d2e0d; color: #f39c12; }
.chip-urgent { background: #3d1515; color: #e74c3c; }
.chip-db { background: #1a3a6e; color: #5899e2; }
.chip-upload { background: #2d2d2d; color: #888; }
.chip-active { background: #1a4e3e; color: #27ae60; }
.btn { padding: 6px 14px; border-radius: 5px; border: none; cursor: pointer; font-size: 12px; font-weight: 600; }
.btn-primary { background: #27ae60; color: #fff; }
.btn-primary:hover { background: #219a52; }
.btn-link { background: none; border: none; color: #5899e2; cursor: pointer; font-size: 12px;
  text-decoration: underline; padding: 0; }
.empty-state { text-align: center; color: #4a6080; padding: 40px; font-size: 13px; }
.loading { color: #7a8cb0; font-size: 12px; padding: 20px; text-align: center; }
/* Import panel */
.imp-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:900; }
.imp-overlay.open { display:flex; align-items:center; justify-content:center; }
.imp-panel { background:#0d1b2e; border:1px solid #1e3a6e; border-radius:10px; width:640px;
  max-width:96vw; max-height:90vh; overflow-y:auto; padding:28px 28px 24px; }
.imp-panel h2 { margin:0 0 18px; font-size:17px; }
.imp-tabs { display:flex; gap:0; margin-bottom:20px; border-bottom:2px solid #1e3a6e; }
.imp-tab { padding:8px 18px; cursor:pointer; font-size:12px; font-weight:600; color:#7a8cb0;
  border-bottom:2px solid transparent; margin-bottom:-2px; }
.imp-tab.active { color:#27ae60; border-bottom-color:#27ae60; }
.imp-pane { display:none; }
.imp-pane.active { display:block; }
.imp-field { margin-bottom:14px; }
.imp-field label { display:block; font-size:11px; color:#7a8cb0; margin-bottom:4px; }
.imp-field input[type=file], .imp-field input[type=text],
.imp-field select { width:100%; background:#111f35; border:1px solid #1e3a6e;
  border-radius:5px; color:#eaeaea; padding:7px 10px; font-size:12px; box-sizing:border-box; }
.imp-result { margin-top:14px; padding:10px 14px; border-radius:6px; font-size:12px;
  background:#111f35; border:1px solid #1e3a6e; display:none; }
.imp-result.ok { border-color:#27ae60; color:#27ae60; }
.imp-result.err { border-color:#e74c3c; color:#e74c3c; }
.imp-footer { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
.btn-secondary { background:#1e3a6e; color:#eaeaea; }
.btn-secondary:hover { background:#2a4a8e; }
.drop-zone { border:2px dashed #1e3a6e; border-radius:6px; padding:22px; text-align:center;
  color:#4a6080; font-size:12px; cursor:pointer; transition:border-color .2s; }
.drop-zone.drag-over { border-color:#27ae60; color:#27ae60; }
</style>
{% endblock %}

{% block content %}
<div class="ni-root">
  <div class="ni-header">
    <div>
      <h1>Network Infrastructure Migration</h1>
      <div class="cui">CUI // SP-CTI</div>
    </div>
    <div style="display:flex;gap:10px">
      <button class="btn btn-secondary" onclick="openImport()">&#8659; Import Devices</button>
      <button class="btn btn-primary" onclick="window.location='/migration-canvas/network-migration/new'">+ New Migration (manual)</button>
    </div>
  </div>

  <!-- Import panel overlay -->
  <div class="imp-overlay" id="imp-overlay" onclick="if(event.target===this)closeImport()">
    <div class="imp-panel">
      <h2>Import Device Inventory</h2>
      <div class="imp-tabs">
        <div class="imp-tab active" onclick="switchTab('csv')">CSV / JSON</div>
        <div class="imp-tab" onclick="switchTab('netbox')">NetBox Sync</div>
        <div class="imp-tab" onclick="switchTab('topology')">Topology Diagram</div>
      </div>

      <!-- Tab 1: CSV/JSON -->
      <div class="imp-pane active" id="pane-csv">
        <p style="font-size:12px;color:#7a8cb0;margin-top:0">
          Upload a CSV or JSON file. CSV columns: <code>label, vendor, model, device_type, eol_date, eos_date, site, rack_location, firmware_version, notes</code>
        </p>
        <div class="imp-field">
          <label>Attach to topology (optional — auto-creates "Bulk Import YYYY-MM-DD")</label>
          <select id="csv-topology">
            <option value="">Auto-create dated topology</option>
          </select>
        </div>
        <div class="drop-zone" id="csv-drop" onclick="document.getElementById('csv-file').click()"
             ondragover="event.preventDefault();this.classList.add('drag-over')"
             ondragleave="this.classList.remove('drag-over')"
             ondrop="handleFileDrop(event)">
          Click to browse or drag & drop<br>
          <span style="font-size:10px;color:#4a6080">Accepts .csv, .json</span>
        </div>
        <input type="file" id="csv-file" accept=".csv,.json" style="display:none" onchange="previewFile(this)">
        <div id="csv-preview" style="font-size:11px;color:#5899e2;margin-top:8px"></div>
        <div class="imp-result" id="csv-result"></div>
        <div class="imp-footer">
          <button class="btn btn-secondary" onclick="closeImport()">Cancel</button>
          <button class="btn btn-primary" id="csv-submit" onclick="submitCsv()">Import</button>
        </div>
      </div>

      <!-- Tab 2: NetBox -->
      <div class="imp-pane" id="pane-netbox">
        <p style="font-size:12px;color:#7a8cb0;margin-top:0">
          Sync device inventory directly from your NetBox instance.
          <code>NETBOX_URL</code> and <code>NETBOX_TOKEN</code> must be set in <code>.env</code>.
        </p>
        <div class="imp-field">
          <label>Attach to topology (optional — auto-creates "NetBox Import YYYY-MM-DD")</label>
          <select id="nb-topology">
            <option value="">Auto-create dated topology</option>
          </select>
        </div>
        <div id="nb-conn-status" style="font-size:11px;color:#7a8cb0;margin-bottom:10px"></div>
        <div class="imp-result" id="nb-result"></div>
        <div class="imp-footer">
          <button class="btn btn-secondary" onclick="closeImport()">Cancel</button>
          <button class="btn btn-secondary" onclick="testNetbox()">Test Connection</button>
          <button class="btn btn-primary" onclick="submitNetbox()">Sync Devices</button>
        </div>
      </div>

      <!-- Tab 3: Topology diagram -->
      <div class="imp-pane" id="pane-topology">
        <p style="font-size:12px;color:#7a8cb0;margin-top:0">
          Populate ni_devices from the nodes of an existing topology diagram already in the system.
        </p>
        <div class="imp-field">
          <label>Source topology</label>
          <select id="topo-src">
            <option value="">— select topology —</option>
          </select>
        </div>
        <div class="imp-result" id="topo-result"></div>
        <div class="imp-footer">
          <button class="btn btn-secondary" onclick="closeImport()">Cancel</button>
          <button class="btn btn-primary" onclick="submitTopology()">Import Nodes</button>
        </div>
      </div>
    </div>
  </div>

  <div class="stats-row">
    <div class="stat-card">
      <div class="stat-num" id="stat-total">{{ total }}</div>
      <div class="stat-label">Total Devices</div>
    </div>
    <div class="stat-card">
      <div class="stat-num urgent" id="stat-eol1">{{ eol_1yr }}</div>
      <div class="stat-label">EOL within 12 months</div>
    </div>
    <div class="stat-card">
      <div class="stat-num warn" id="stat-eol2">{{ eol_2yr }}</div>
      <div class="stat-label">EOL within 24 months</div>
    </div>
    <div class="stat-card">
      <div class="stat-num" id="stat-active">{{ active_count }}</div>
      <div class="stat-label">Active Migrations</div>
    </div>
  </div>

  <div class="filter-row">
    <select id="f-type" onchange="applyFilters()">
      <option value="">All Device Types</option>
      <option value="router">Router</option>
      <option value="switch">Switch</option>
      <option value="firewall">Firewall</option>
      <option value="load_balancer">Load Balancer</option>
      <option value="access_point">Access Point</option>
    </select>
    <select id="f-vendor" onchange="applyFilters()">
      <option value="">All Vendors</option>
      <option value="Cisco">Cisco</option>
      <option value="Juniper">Juniper</option>
      <option value="Arista">Arista</option>
      <option value="Palo Alto">Palo Alto</option>
      <option value="F5">F5</option>
    </select>
    <select id="f-eol" onchange="applyFilters()">
      <option value="">All EOL Status</option>
      <option value="urgent">Urgent (&le;12 mo)</option>
      <option value="soon">Soon (&le;24 mo)</option>
      <option value="ok">OK (&gt;24 mo)</option>
      <option value="unknown">Unknown</option>
    </select>
    <select id="f-config" onchange="applyFilters()">
      <option value="">All Config Status</option>
      <option value="db">Config in DB</option>
      <option value="none">No Config</option>
    </select>
    <input type="text" id="f-search" placeholder="Search hostname or model…" oninput="applyFilters()">
  </div>

  <div id="inv-loading" class="loading">Loading device inventory…</div>
  <table class="inv-table" id="inv-table" style="display:none">
    <thead>
      <tr>
        <th>Hostname / Label</th>
        <th>Vendor / Model</th>
        <th>Type</th>
        <th>Firmware</th>
        <th>EOL Date</th>
        <th>Config</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody id="inv-tbody"></tbody>
  </table>
  <div id="inv-empty" class="empty-state" style="display:none">No devices found matching filters.</div>
</div>

<!-- IQE Query Widget -->
{% set iqe_canvas = "migration" %}
{% set iqe_api_route = "/migration-canvas/api/iqe-query" %}
{% set iqe_title = "IQE Query — Network Migration" %}
{% set iqe_examples = [
  {"label": "All devices", "query": "foreach d in mc.designs select d.name, d.migration_type, d.classification"},
  {"label": "High-risk waves", "query": "foreach w in mc.waves where w.risk_score > 7 select w.design_name, w.wave_number, w.strategy, w.risk_score"},
  {"label": "Low readiness scores", "query": "foreach a in mc.assessments where a.readiness_score < 50 select a.design_name, a.grade, a.readiness_score"}
] %}
{% include "includes/iqe_query_widget.html" %}
{% endblock %}

{% block scripts %}
<script>
let _allDevices = [];

async function loadInventory() {
  try {
    const r = await fetch('/migration-canvas/api/network-migration/inventory');
    const d = await r.json();
    _allDevices = d.devices || [];
    document.getElementById('stat-total').textContent = d.total || 0;
    document.getElementById('inv-loading').style.display = 'none';
    applyFilters();
  } catch(e) {
    document.getElementById('inv-loading').textContent = 'Failed to load inventory — ' + e.message;
  }
}

function eolStatus(eolDate) {
  if (!eolDate) return 'unknown';
  const d = new Date(eolDate), now = new Date();
  const days = (d - now) / 86400000;
  if (days < 0) return 'urgent';
  if (days <= 365) return 'urgent';
  if (days <= 730) return 'soon';
  return 'ok';
}

function eolChip(eolDate) {
  const s = eolStatus(eolDate);
  const map = {
    urgent: '<span class="chip chip-urgent">EOL URGENT</span>',
    soon:   '<span class="chip chip-warn">EOL SOON</span>',
    ok:     '<span class="chip chip-ok">OK</span>',
    unknown:'<span class="chip chip-upload">UNKNOWN</span>',
  };
  return (map[s] || '') + (eolDate ? ` <span style="color:#7a8cb0;font-size:10px">${eolDate}</span>` : '');
}

function configChip(dev) {
  if (dev.config_source === 'db') return '<span class="chip chip-db">DB ✓</span>';
  return '<span class="chip chip-upload">Upload Reqd</span>';
}

function applyFilters() {
  const fType = document.getElementById('f-type').value;
  const fVendor = document.getElementById('f-vendor').value;
  const fEol = document.getElementById('f-eol').value;
  const fConfig = document.getElementById('f-config').value;
  const fSearch = document.getElementById('f-search').value.toLowerCase();

  let filtered = _allDevices.filter(d => {
    if (fType && d.device_type !== fType) return false;
    if (fVendor && !(d.vendor||'').toLowerCase().includes(fVendor.toLowerCase())) return false;
    if (fEol && eolStatus(d.eol_date) !== fEol) return false;
    if (fConfig && d.config_source !== fConfig) return false;
    if (fSearch && !(d.label||'').toLowerCase().includes(fSearch) && !(d.model||'').toLowerCase().includes(fSearch)) return false;
    return true;
  });

  const tbody = document.getElementById('inv-tbody');
  const tbl = document.getElementById('inv-table');
  const empty = document.getElementById('inv-empty');

  if (!filtered.length) {
    tbl.style.display = 'none';
    empty.style.display = 'block';
    return;
  }
  tbl.style.display = 'table';
  empty.style.display = 'none';

  tbody.innerHTML = filtered.map(d => {
    const activeLink = d.active_session_id
      ? `<a class="btn-link" href="/migration-canvas/network-migration/${d.active_session_id}" target="_blank">Active ↗</a>`
      : '';
    return `<tr>
      <td style="font-weight:600;color:#eaeaea">${d.label||d.model||d.id}</td>
      <td>${d.vendor||''} ${d.model||''}</td>
      <td><span style="color:#7a8cb0">${d.device_type||''}</span></td>
      <td style="color:#7a8cb0">${d.firmware_version||'—'}</td>
      <td>${eolChip(d.eol_date)}</td>
      <td>${configChip(d)}</td>
      <td style="display:flex;gap:8px;align-items:center">
        <button class="btn btn-primary" onclick="startMigration('${d.id}','${d.model||''}','${(d.label||d.model||'').replace(/'/g,'')}')">&rarr; Migrate</button>
        ${activeLink}
      </td>
    </tr>`;
  }).join('');
}

async function startMigration(deviceId, model, label) {
  const btn = event.target;
  btn.disabled = true;
  btn.textContent = 'Starting…';
  try {
    const r = await fetch('/migration-canvas/api/network-migration/create-from-inventory', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({device_id: deviceId, src_model: model, src_device_name: label}),
    });
    const d = await r.json();
    if (d.id) {
      window.location = `/migration-canvas/network-migration/${d.id}`;
    } else {
      alert('Failed to create session: ' + (d.error || JSON.stringify(d)));
      btn.disabled = false;
      btn.textContent = '→ Migrate';
    }
  } catch(e) {
    alert('Error: ' + e.message);
    btn.disabled = false;
    btn.textContent = '→ Migrate';
  }
}

window.addEventListener('DOMContentLoaded', loadInventory);

// ── Import panel ─────────────────────────────────────────────────────────────

let _topologies = [];
let _csvFile = null;

async function openImport() {
  document.getElementById('imp-overlay').classList.add('open');
  // Load topologies for all 3 selectors
  if (!_topologies.length) {
    try {
      const r = await fetch('/migration-canvas/api/network-migration/import/topologies');
      const d = await r.json();
      _topologies = d.topologies || [];
    } catch(e) { _topologies = []; }
  }
  ['csv-topology', 'nb-topology'].forEach(id => {
    const sel = document.getElementById(id);
    sel.innerHTML = '<option value="">Auto-create dated topology</option>';
    _topologies.forEach(t => {
      const o = document.createElement('option');
      o.value = t.id; o.textContent = t.name;
      sel.appendChild(o);
    });
  });
  const src = document.getElementById('topo-src');
  src.innerHTML = '<option value="">— select topology —</option>';
  _topologies.forEach(t => {
    const o = document.createElement('option');
    o.value = t.id; o.textContent = t.name;
    src.appendChild(o);
  });
}

function closeImport() {
  document.getElementById('imp-overlay').classList.remove('open');
  _csvFile = null;
  document.getElementById('csv-preview').textContent = '';
  ['csv-result','nb-result','topo-result'].forEach(id => {
    const el = document.getElementById(id);
    el.style.display = 'none'; el.className = 'imp-result';
  });
}

function switchTab(name) {
  document.querySelectorAll('.imp-tab').forEach((t,i) => {
    const names = ['csv','netbox','topology'];
    t.classList.toggle('active', names[i] === name);
  });
  document.querySelectorAll('.imp-pane').forEach(p => p.classList.remove('active'));
  document.getElementById('pane-' + name).classList.add('active');
}

function handleFileDrop(e) {
  e.preventDefault();
  document.getElementById('csv-drop').classList.remove('drag-over');
  const file = e.dataTransfer.files[0];
  if (file) previewFile({files:[file]});
}

function previewFile(input) {
  _csvFile = input.files[0];
  if (!_csvFile) return;
  document.getElementById('csv-preview').textContent =
    `Selected: ${_csvFile.name} (${(_csvFile.size/1024).toFixed(1)} KB)`;
}

function showResult(id, ok, msg) {
  const el = document.getElementById(id);
  el.className = 'imp-result ' + (ok ? 'ok' : 'err');
  el.textContent = msg;
  el.style.display = 'block';
}

async function submitCsv() {
  if (!_csvFile) { showResult('csv-result', false, 'Please select a file first.'); return; }
  const topologyId = document.getElementById('csv-topology').value;
  const btn = document.getElementById('csv-submit');
  btn.disabled = true; btn.textContent = 'Importing…';
  try {
    const fd = new FormData();
    fd.append('file', _csvFile);
    if (topologyId) fd.append('topology_id', topologyId);
    const r = await fetch('/migration-canvas/api/network-migration/import/csv', {method:'POST', body:fd});
    const d = await r.json();
    if (d.error) { showResult('csv-result', false, 'Error: ' + d.error); return; }
    showResult('csv-result', true,
      `Done — ${d.created} created, ${d.updated} updated, ${d.skipped||0} skipped (topology: ${d.topology_id})`);
    _allDevices = [];
    loadInventory();
  } catch(e) { showResult('csv-result', false, 'Error: ' + e.message); }
  finally { btn.disabled = false; btn.textContent = 'Import'; }
}

async function testNetbox() {
  const status = document.getElementById('nb-conn-status');
  status.textContent = 'Testing connection…';
  try {
    const r = await fetch('/migration-canvas/api/network-migration/import/netbox',
      {method:'POST', headers:{'Content-Type':'application/json'},
       body: JSON.stringify({test_only: true})});
    const d = await r.json();
    if (d.error) { status.textContent = '✗ ' + d.error; status.style.color='#e74c3c'; return; }
    status.textContent = `✓ Connected — NetBox ${d.netbox_version || 'unknown'} at ${d.url}`;
    status.style.color = '#27ae60';
  } catch(e) { status.textContent = '✗ ' + e.message; status.style.color='#e74c3c'; }
}

async function submitNetbox() {
  const topologyId = document.getElementById('nb-topology').value;
  showResult('nb-result', true, 'Syncing devices from NetBox…');
  try {
    const r = await fetch('/migration-canvas/api/network-migration/import/netbox',
      {method:'POST', headers:{'Content-Type':'application/json'},
       body: JSON.stringify({topology_id: topologyId || null, test_only: false})});
    const d = await r.json();
    if (d.error) { showResult('nb-result', false, 'Error: ' + d.error); return; }
    showResult('nb-result', true,
      `Done — ${d.created} created, ${d.updated} updated of ${d.total} total (topology: ${d.topology_id})`);
    _allDevices = [];
    loadInventory();
  } catch(e) { showResult('nb-result', false, 'Error: ' + e.message); }
}

async function submitTopology() {
  const src = document.getElementById('topo-src').value;
  if (!src) { showResult('topo-result', false, 'Please select a source topology.'); return; }
  showResult('topo-result', true, 'Importing nodes…');
  try {
    const r = await fetch('/migration-canvas/api/network-migration/import/topology',
      {method:'POST', headers:{'Content-Type':'application/json'},
       body: JSON.stringify({topology_id: src})});
    const d = await r.json();
    if (d.error) { showResult('topo-result', false, 'Error: ' + d.error); return; }
    showResult('topo-result', true,
      `Done — ${d.created} created, ${d.updated} updated of ${d.total} nodes from "${d.topology_name}"`);
    _allDevices = [];
    loadInventory();
  } catch(e) { showResult('topo-result', false, 'Error: ' + e.message); }
}
</script>
{% endblock %}