{{define "title"}}Network — Approovia Portal{{end}}

{{define "content"}}
{{$data := .Data}}
<h1 class="page-title">Network Access</h1>

<div class="card" id="network-card">
  <div class="tab-bar">
    <button class="tab-btn active" onclick="switchTab(this,'vpn')">VPN</button>
    <button class="tab-btn" onclick="switchTab(this,'ssh')">SSH</button>
  </div>

  <!-- VPN tab -->
  <div id="tab-vpn" class="tab-panel">
    <div id="wg-tunnels-section">
      {{template "wg-tunnels-partial" .}}
    </div>

    <div class="section-divider"></div>
    <div class="section-label">Set up or reconfigure on this machine</div>

    <div class="os-tab-bar">
      <button class="os-tab-btn active" onclick="switchOS(this,'linux')">
        <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg>
        Linux
      </button>
      <button class="os-tab-btn" onclick="switchOS(this,'macos')">
        <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M12.152 6.896c-.948 0-2.415-1.078-3.96-1.04-2.04.027-3.91 1.183-4.961 3.014-2.117 3.675-.546 9.103 1.519 12.09 1.013 1.454 2.208 3.09 3.792 3.039 1.52-.065 2.09-.987 3.935-.987 1.831 0 2.35.987 3.96.948 1.637-.026 2.676-1.48 3.676-2.948 1.156-1.688 1.636-3.325 1.662-3.415-.039-.013-3.182-1.221-3.22-4.857-.026-3.04 2.48-4.494 2.597-4.559-1.429-2.09-3.623-2.324-4.39-2.376-2-.156-3.675 1.09-4.61 1.09zM15.53 3.83c.843-1.012 1.4-2.427 1.245-3.83-1.207.052-2.662.805-3.532 1.818-.78.896-1.454 2.338-1.273 3.714 1.338.104 2.715-.688 3.559-1.701"/></svg>
        macOS
      </button>
      <button class="os-tab-btn" onclick="switchOS(this,'win-ps')">
        <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/></svg>
        Windows <span class="dl-ext">.ps1</span>
      </button>
      {{if $data.WindowsInstallerURL}}
      <button class="os-tab-btn" onclick="switchOS(this,'win-exe')">
        <svg viewBox="0 0 24 24" width="15" height="15" fill="currentColor" aria-hidden="true"><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/></svg>
        Windows <span class="dl-ext">.exe</span>
      </button>
      {{end}}
    </div>

    <div id="os-linux" class="os-panel">
      <p class="download-hint">Open a terminal and paste:</p>
      <div class="oneliner-row">
        <code id="cmd-linux" class="oneliner">curl -sSL "https://mgt.approovia.com/network/download/linux" | sudo bash</code>
        <button class="copy-btn" onclick="copyCmd('cmd-linux',this)">Copy</button>
      </div>
    </div>
    <div id="os-macos" class="os-panel" style="display:none">
      <p class="download-hint">Open Terminal and paste:</p>
      <div class="oneliner-row">
        <code id="cmd-macos" class="oneliner">curl -sSL "https://mgt.approovia.com/network/download/macos" | sudo bash</code>
        <button class="copy-btn" onclick="copyCmd('cmd-macos',this)">Copy</button>
      </div>
    </div>
    <div id="os-win-ps" class="os-panel" style="display:none">
      <p class="download-hint">Open PowerShell as Administrator and paste:</p>
      <div class="oneliner-row">
        <code id="cmd-winps" class="oneliner">Set-ExecutionPolicy Bypass -Scope Process -Force; irm "https://mgt.approovia.com/network/download/windows" | iex</code>
        <button class="copy-btn" onclick="copyCmd('cmd-winps',this)">Copy</button>
      </div>
    </div>
    {{if $data.WindowsInstallerURL}}
    <div id="os-win-exe" class="os-panel" style="display:none">
      <a href="{{$data.WindowsInstallerURL}}" class="btn btn-primary download-os-btn">Download ApprooviaVPN-Setup.exe</a>
      {{if $data.Token}}
      <div class="token-display" style="margin-top:1rem">
        <span class="token-label">Registration token</span>
        <div class="token-row">
          <input type="text" id="reg-token" class="token-input mono-sm" readonly value="{{$data.Token}}">
          <button class="btn btn-secondary btn-sm"
            onclick="navigator.clipboard.writeText(document.getElementById('reg-token').value);this.textContent='Copied!';setTimeout(()=>this.textContent='Copy',1500)">Copy</button>
        </div>
        <span class="token-hint">Enter this when the installer prompts for a registration token · valid 24 h</span>
      </div>
      {{end}}
    </div>
    {{end}}
  </div><!-- end tab-vpn -->

  <!-- SSH tab -->
  <div id="tab-ssh" class="tab-panel" style="display:none">
    <p class="ssh-intro">Add your SSH public key here to enable SSH access to the network.</p>
    <div class="ssh-keygen-hint">
      <strong>To print your existing ed25519 public key:</strong><br>
      <code>ssh-keygen -y -f ~/.ssh/id_ed25519</code><br><br>
      <strong>Don't have one? Generate it first:</strong><br>
      <code>ssh-keygen -t ed25519</code> — accept all defaults, then repeat the command above to print the key.
    </div>
    <div id="ssh-keys-section" style="scroll-margin-top:1rem" data-anchor="ssh-keys">
      {{template "ssh-keys-partial" .}}
    </div>
  </div>
</div>

<script>
function switchTab(btn, name) {
  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
  document.querySelectorAll('.tab-panel').forEach(p => p.style.display = 'none');
  btn.classList.add('active');
  document.getElementById('tab-' + name).style.display = '';
}
function copyCmd(id, btn) {
  navigator.clipboard.writeText(document.getElementById(id).textContent);
  btn.textContent = 'Copied!'; btn.classList.add('copied');
  setTimeout(() => { btn.textContent = 'Copy'; btn.classList.remove('copied'); }, 1500);
}
function switchOS(btn, name) {
  btn.closest('.tab-panel').querySelectorAll('.os-tab-btn').forEach(b => b.classList.remove('active'));
  btn.closest('.tab-panel').querySelectorAll('.os-panel').forEach(p => p.style.display = 'none');
  btn.classList.add('active');
  document.getElementById('os-' + name).style.display = '';
}

/* ── VPN tunnel inline editing ───────────────────────────────────────── */
const _orig = {};

function initDirtyTracking() {
  document.querySelectorAll('.tunnel-edit[name="name"]').forEach(el => {
    const id = el.dataset.id;
    if (!_orig[id]) _orig[id] = {};
    _orig[id].name = el.value;
  });
  document.querySelectorAll('.tunnel-edit[name="slug"]').forEach(el => {
    const id = el.dataset.id;
    if (!_orig[id]) _orig[id] = {};
    _orig[id].slug = el.value;
  });
}

// Suppress auto-poll while any row has unsaved changes.
function isDirty() {
  return Array.from(document.querySelectorAll('.tunnel-save-btn'))
              .some(b => b.style.display !== 'none');
}

function markDirty(id) {
  const nameEl = document.querySelector(`.tunnel-edit[data-id="${id}"][name="name"]`);
  const slugEl = document.querySelector(`.tunnel-edit[data-id="${id}"][name="slug"]`);
  const saveBtn = document.getElementById('save-' + id);
  if (!_orig[id] || !nameEl || !slugEl || !saveBtn) return;
  const changed = nameEl.value !== _orig[id].name || slugEl.value !== _orig[id].slug;
  saveBtn.style.display = changed ? '' : 'none';
  if (!changed) {
    nameEl.classList.remove('tunnel-edit-error'); nameEl.title = '';
    slugEl.classList.remove('tunnel-edit-error'); slugEl.title = '';
  }
}

// Auto-save when focus leaves either editable field on a dirty row.
function saveIfDirty(id) {
  const saveBtn = document.getElementById('save-' + id);
  if (saveBtn && saveBtn.style.display !== 'none') {
    // Defer one tick so the browser records the new focused element first.
    setTimeout(() => saveBtn.click(), 0);
  }
}

function handleSaveResponse(id, event) {
  const nameEl = document.querySelector(`.tunnel-edit[data-id="${id}"][name="name"]`);
  const slugEl = document.querySelector(`.tunnel-edit[data-id="${id}"][name="slug"]`);
  const saveBtn = document.getElementById('save-' + id);
  if (!nameEl || !slugEl) return;

  if (event.detail.successful) {
    const text = event.detail.xhr.responseText.trim();
    text.split('\n').forEach(line => {
      const eq = line.indexOf('=');
      if (eq < 0) return;
      const k = line.slice(0, eq), v = line.slice(eq + 1);
      if (k === 'name') nameEl.value = v;
      if (k === 'slug') slugEl.value = v;
    });
    nameEl.classList.remove('tunnel-edit-error'); nameEl.title = '';
    slugEl.classList.remove('tunnel-edit-error'); slugEl.title = '';
    _orig[id] = { name: nameEl.value, slug: slugEl.value };
    if (saveBtn) saveBtn.style.display = 'none';
    // Brief ✓ confirmation so user knows the save happened.
    const confirm = document.getElementById('saved-' + id);
    if (confirm) {
      confirm.classList.add('visible');
      setTimeout(() => confirm.classList.remove('visible'), 1800);
    }
  } else {
    const msg = event.detail.xhr.responseText.trim();
    if (msg.includes('name already in use') && !msg.includes('dns')) {
      nameEl.classList.add('tunnel-edit-error');
      nameEl.title = 'Device name already used by one of your tunnels';
      nameEl.focus();
    } else {
      slugEl.classList.add('tunnel-edit-error');
      slugEl.title = msg || 'DNS name already taken';
      slugEl.focus();
    }
  }
}

function copyText(text, el) {
  navigator.clipboard.writeText(text).then(() => {
    const prev = el.title; el.title = 'Copied!';
    setTimeout(() => el.title = prev, 1500);
  });
}

document.addEventListener('DOMContentLoaded', initDirtyTracking);
</script>
{{end}}

{{define "ssh-keys-partial"}}
{{$data := .Data}}
{{if $data.SSHKeys}}
<ul class="key-list">
  {{range $data.SSHKeys}}
  <li class="key-item">
    <div>
      <div class="key-label">{{.Name}}</div>
      <div class="key-fp">{{.Fingerprint}}</div>
    </div>
    <span class="key-date">{{formatTime .Created}}</span>
    <button class="btn btn-danger"
      hx-delete="/network/ssh-keys/{{.ID}}"
      hx-target="#ssh-keys-section"
      hx-swap="outerHTML"
      hx-confirm="Remove this SSH key?">Remove</button>
  </li>
  {{end}}
</ul>
{{else}}
<p class="text-muted">No SSH keys registered.</p>
{{end}}

<div class="add-key-form mt2">
  <label style="font-size:.875rem;font-weight:500;margin-bottom:.25rem;display:block">Add SSH Public Key</label>
  <textarea name="pubkey" rows="3" placeholder="ssh-ed25519 AAAA..." id="pubkey-input"></textarea>
  <div class="form-row mt1">
    <input type="text" name="name" placeholder="Name (e.g. my-laptop)" id="key-name-input" style="max-width:220px">
    <button class="btn btn-primary"
      hx-post="/network/ssh-keys"
      hx-include="#pubkey-input,#key-name-input"
      hx-target="#ssh-keys-section"
      hx-swap="outerHTML">Add Key</button>
  </div>
</div>
{{end}}

{{define "wg-tunnels-partial"}}
{{$data := .Data}}
<div id="wg-tunnels-section"
     hx-get="/network/wg-tunnels"
     hx-trigger="every 30s"
     hx-swap="outerHTML"
     hx-on::before-request="if(Array.from(document.querySelectorAll('.tunnel-save-btn')).some(b=>b.offsetParent!==null))return false;"
     hx-on::after-settle="initDirtyTracking()">
{{if $data.WGKeys}}
<table class="tunnel-table">
  <colgroup>
    <col class="col-device">
    <col class="col-dns">
    <col class="col-pubkey">
    <col class="col-ipv6">
    <col class="col-status">
    <col class="col-actions">
  </colgroup>
  <thead>
    <tr>
      <th>Device</th>
      <th>DNS</th>
      <th>Key</th>
      <th>IP</th>
      <th>Status</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    {{range $data.WGKeys}}
    <tr class="tunnel-row">
      <td>
        <input class="tunnel-edit" data-id="{{.ID}}" name="name"
               value="{{.Name}}" placeholder="device" autocomplete="off"
               oninput="markDirty({{.ID}})" onblur="saveIfDirty({{.ID}})">
      </td>
      <td>
        <input class="tunnel-edit tunnel-edit-slug" data-id="{{.ID}}" name="slug"
               value="{{.Slug}}" placeholder="dns-name" autocomplete="off"
               oninput="markDirty({{.ID}})" onblur="saveIfDirty({{.ID}})">
      </td>
      <td>
        <code class="mono-xs pubkey-full" title="Click to copy" onclick="copyText('{{.Pubkey}}',this)">{{.Pubkey}}</code>
      </td>
      <td>
        <code class="mono-sm">{{.IPv6Bare}}</code>
      </td>
      <td class="status-cell">
        <span class="status-dot status-{{.StatusClass}}" title="{{.StatusTitle}}"></span>
      </td>
      <td class="tunnel-actions">
        <button class="btn btn-sm btn-primary tunnel-save-btn"
                id="save-{{.ID}}"
                style="display:none"
                hx-patch="/network/wg-keys/{{.ID}}"
                hx-include="[data-id='{{.ID}}']"
                hx-swap="none"
                hx-on::after-request="handleSaveResponse({{.ID}}, event)">Save</button>
        <span class="save-confirm" id="saved-{{.ID}}">✓</span>
        <button class="tunnel-delete-btn"
                title="Delete tunnel"
                hx-delete="/network/wg-keys/{{.ID}}"
                hx-target="#wg-tunnels-section"
                hx-swap="outerHTML"
                hx-confirm="Delete this tunnel? The device will lose VPN access.">
          <svg viewBox="0 0 16 16" width="14" height="14" fill="currentColor" aria-hidden="true">
            <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
            <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
          </svg>
        </button>
      </td>
    </tr>
    {{end}}
  </tbody>
</table>
{{else}}
<p class="text-muted">No VPN tunnels provisioned. Run the setup script on your device to create one.</p>
{{end}}
</div>
{{end}}