{% extends "network/base.html" %}
{% block title %}Device Profiles — Network Design Canvas{% endblock %}
{% block content %}
<div class="page-header">
  <div>
    <h1 class="page-title">Device Command Profiles</h1>
    <p class="page-subtitle">Multi-vendor command profiles for non-intrusive discovery — built-in + user-defined</p>
  </div>
  <div class="page-actions">
    <button class="btn btn-primary" onclick="document.getElementById('prof-modal').style.display='flex'">+ Custom Profile</button>
  </div>
</div>
<div id="profiles-list"></div>

<!-- Create Profile Modal -->
<div id="prof-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Create Custom Device Profile</h3>
    <form onsubmit="return createProfile(event)">
      <div class="form-grid">
        <label>Vendor <input name="vendor" required placeholder="e.g., Huawei, MikroTik, Ubiquiti"></label>
        <label>Platform <input name="platform" required placeholder="e.g., VRP, RouterOS, EdgeOS"></label>
        <label style="grid-column:span 2">Description <input name="description" placeholder="Description of this platform"></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Create</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button>
      </div>
    </form>
  </div>
</div>

<!-- Add Command Modal -->
<div id="cmd-modal" class="modal" style="display:none;">
  <div class="modal-content">
    <h3>Add Command to Profile</h3>
    <form onsubmit="return addCommand(event)">
      <input type="hidden" id="cmd-profile-id">
      <div class="form-grid">
        <label>Command Name <input name="cmd_name" required placeholder="e.g., routing_table_v4, bgp_summary"></label>
        <label>CLI Command <input name="command" required placeholder="e.g., show ip route, display ip routing-table"></label>
        <label>Parser <input name="parser" placeholder="e.g., ios_ip_route (optional)"></label>
        <label>Timeout (sec) <input name="timeout_sec" type="number" value="10"></label>
      </div>
      <div class="form-actions">
        <button type="submit" class="btn btn-primary">Add Command</button>
        <button type="button" class="btn btn-secondary" onclick="this.closest('.modal').style.display='none'">Cancel</button>
      </div>
    </form>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script>
let _allProfiles = [];

async function loadProfiles() {
  _allProfiles = await fetch(NC_BASE + '/api/device-profiles').then(r => r.json());
  render();
}

async function render() {
  const el = document.getElementById('profiles-list');
  let html = '';
  for (const p of _allProfiles) {
    const detail = await fetch(NC_BASE + '/api/device-profiles/' + p.id).then(r => r.json());
    const cmds = detail.commands || {};
    const cmdCount = Object.keys(cmds).length;
    html += `
    <section class="panel panel-wide" style="margin-bottom:12px;">
      <div class="panel-header">
        <h2 class="panel-title">${p.vendor} ${p.platform}
          ${p.is_builtin ? '<span class="health-pill pill-blue" style="font-size:9px;">Built-in</span>' : '<span class="health-pill pill-green" style="font-size:9px;">Custom</span>'}
          <span style="color:var(--text-dim);font-size:11px;margin-left:8px;">${cmdCount} commands</span>
        </h2>
        <div style="display:flex;gap:6px;">
          <button class="btn btn-secondary" style="font-size:10px;padding:3px 8px;" onclick="openAddCmd('${p.id}')">+ Add Command</button>
          ${!p.is_builtin ? '<button class="action-btn danger" onclick="deleteProfile(\'' + p.id + '\')">&#x2715;</button>' : ''}
        </div>
      </div>
      <div style="padding:0 12px 8px;font-size:11px;color:var(--text-dim);">${p.description || ''}</div>
      <table class="data-table">
        <thead><tr><th>Command Name</th><th>CLI Command</th><th>Parser</th><th>Timeout</th><th>Actions</th></tr></thead>
        <tbody>
          ${Object.entries(cmds).map(([name, info]) => `
            <tr>
              <td><strong>${name}</strong></td>
              <td><code style="color:var(--red);">${info.command}</code></td>
              <td>${info.parser || '—'}</td>
              <td>${info.timeout_sec || 10}s</td>
              <td class="actions">
                <button class="action-btn danger" style="font-size:10px;" onclick="removeCmd('${p.id}','${name}',${p.is_builtin})" title="Remove command">&#x2715;</button>
              </td>
            </tr>
          `).join('')}
        </tbody>
      </table>
    </section>`;
  }
  el.innerHTML = html;
}

function openAddCmd(profileId) {
  document.getElementById('cmd-profile-id').value = profileId;
  document.getElementById('cmd-modal').style.display = 'flex';
}

function addCommand(e) {
  e.preventDefault();
  const fd = new FormData(e.target);
  const profileId = document.getElementById('cmd-profile-id').value;
  const cmdName = fd.get('cmd_name');
  const commands = {};
  commands[cmdName] = {
    command: fd.get('command'),
    parser: fd.get('parser') || cmdName,
    timeout_sec: parseInt(fd.get('timeout_sec')) || 10,
  };
  fetch(NC_BASE + '/api/device-profiles/' + profileId, {
    method: 'PUT', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({commands: commands})
  }).then(() => { document.getElementById('cmd-modal').style.display = 'none'; loadProfiles(); });
  return false;
}

async function removeCmd(profileId, cmdName, isBuiltin) {
  if (!confirm('Remove command "' + cmdName + '"?')) return;
  // Get current commands, remove the one, update
  const d = await fetch(NC_BASE + '/api/device-profiles/' + profileId).then(r => r.json());
  const cmds = d.commands || {};
  delete cmds[cmdName];
  // For built-in profiles, use the commands update mechanism
  await fetch(NC_BASE + '/api/device-profiles/' + profileId, {
    method: 'PUT', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(isBuiltin ? {commands: cmds} : {commands_json: cmds})
  });
  loadProfiles();
}

function createProfile(e) {
  e.preventDefault();
  const fd = new FormData(e.target), d = {};
  fd.forEach((v, k) => d[k] = v);
  d.commands = {};
  fetch(NC_BASE + '/api/device-profiles', {
    method: 'POST', headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(d)
  }).then(() => { document.getElementById('prof-modal').style.display = 'none'; loadProfiles(); });
  return false;
}

async function deleteProfile(id) {
  if (!confirm('Delete this profile?')) return;
  await fetch(NC_BASE + '/api/device-profiles/' + id, {method: 'DELETE'});
  loadProfiles();
}

loadProfiles();
</script>
{% endblock %}