{{define "title"}}Admin — Approovia Portal{{end}}
{{define "content"}}
{{$data := .Data}}
<script>
function apToggleUser(uid) {
  var panel = document.getElementById('user-keys-'+uid);
  if (!panel) return;
  var td = panel.querySelector('td');
  if (panel.style.display !== 'none' && td.innerHTML.trim() !== '') {
    panel.style.display = 'none';
    return;
  }
  panel.style.display = '';
  if (td.innerHTML.trim() === '') {
    htmx.ajax('GET', '/admin/users/'+uid+'/keys', {target: '#user-keys-'+uid+' td', swap: 'innerHTML'});
  }
}
function apTabSwitch(uid, tab) {
  ['general','ssh','wg'].forEach(function(t) {
    var pane = document.getElementById('pane-'+t+'-'+uid);
    var btn  = document.getElementById('tab-'+t+'-'+uid);
    if (!pane || !btn) return;
    var active = t === tab;
    pane.style.display = active ? '' : 'none';
    btn.style.borderBottomColor = active ? 'var(--primary,#3b82f6)' : 'transparent';
    btn.style.fontWeight = active ? '600' : '400';
    btn.style.color = active ? 'var(--primary,#3b82f6)' : 'var(--text-muted,#6b7280)';
  });
}
</script>
<h1 class="page-title">
  {{if eq $data.Tab "users"}}Users
  {{else if eq $data.Tab "playbooks"}}Playbooks
  {{else if eq $data.Tab "wireguard"}}WireGuard Peers
  {{else if eq $data.Tab "ssh"}}SSH Keys
  {{else}}Admin{{end}}
</h1>

{{if eq $data.Tab "playbooks"}}
<div class="card">
  <div class="card-title">Ansible Playbooks</div>
  <p class="text-muted">Trigger a playbook run via Semaphore. Status updates automatically.</p>
  <table>
    <thead>
      <tr>
        <th>Playbook</th>
        <th>Action</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody>
      {{range $data.Playbooks}}
      <tr>
        <td>{{.Name}}</td>
        <td>
          <button class="btn btn-primary"
            hx-post="/admin/playbooks/run"
            hx-vals='{"template_id": "{{.TemplateID}}"}'
            hx-target="closest tr td:last-child"
            hx-swap="innerHTML">Run</button>
        </td>
        <td><span class="text-muted">—</span></td>
      </tr>
      {{else}}
      <tr><td colspan="3" class="empty-state">No playbooks configured.</td></tr>
      {{end}}
    </tbody>
  </table>
</div>
{{end}}

{{if eq $data.Tab "users"}}
<div class="card">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Status</th>
      </tr>
    </thead>
    <tbody id="users-tbody">
      {{range $data.Users}}
        {{template "admin-user-row" .}}
        <tr id="user-keys-{{.ID}}" style="display:none"><td colspan="3" style="padding:0"></td></tr>
      {{else}}
      <tr><td colspan="3" class="empty-state">No users yet.</td></tr>
      {{end}}
    </tbody>
  </table>
</div>

<div class="card mt2">
  <div class="card-title">Add User</div>
  <p class="text-muted" style="margin-bottom:.75rem">
    Leave email blank for a machine account (automation, service tokens).
  </p>
  <div class="form-row">
    <input type="text" id="new-user-name" name="name" placeholder="Name (e.g. deploy-bot)" style="max-width:200px">
    <input type="email" id="new-user-email" name="email" placeholder="Email (optional)" style="max-width:220px">
    <button class="btn btn-primary"
      hx-post="/admin/users"
      hx-include="#new-user-name,#new-user-email"
      hx-target="#users-tbody"
      hx-swap="afterbegin"
      hx-on::after-request="if(event.detail.successful){document.getElementById('new-user-name').value='';document.getElementById('new-user-email').value=''}">
      Add
    </button>
  </div>
</div>
{{end}}

{{if eq $data.Tab "wireguard"}}
<div class="card">
  <table>
    <thead>
      <tr>
        <th>Owner</th>
        <th>Key Name</th>
        <th>Pubkey</th>
        <th>IPv4</th>
        <th>IPv6</th>
        <th>Slug</th>
        <th>Status</th>
        <th>Last Handshake</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {{range $data.WGPeers}}
      <tr>
        <td>
          {{if .OwnerID}}
            {{if .OwnerName}}{{.OwnerName}}{{end}}
            {{if .OwnerEmail}}<span class="text-muted" style="font-size:.8125rem">{{.OwnerEmail}}</span>{{end}}
          {{else}}
            <span class="badge badge-disconnected">unassigned</span>
          {{end}}
        </td>
        <td>{{.KeyName}}</td>
        <td><code class="mono-sm">{{.PubkeyShort}}</code></td>
        <td>{{if .IPv4}}{{.IPv4}}{{else}}<span class="text-muted">—</span>{{end}}</td>
        <td class="mono-sm text-muted">{{if .IPv6}}{{.IPv6}}{{else}}—{{end}}</td>
        <td><code class="mono-sm">{{.Slug}}</code></td>
        <td>
          {{if .Connected}}
            <span class="badge badge-connected">connected</span>
          {{else}}
            <span class="badge badge-disconnected">offline</span>
          {{end}}
        </td>
        <td class="text-muted">{{timeSince .LastHandshake}}</td>
        <td>
          {{if eq .OwnerID 0}}
          <form method="POST" action="/admin/wg-keys/{{.ID}}/assign" style="display:flex;gap:.25rem;align-items:center">
            <select name="user_id" style="font-size:.8125rem;padding:.2rem .4rem;border:1px solid var(--border,#e0e0e0);border-radius:3px">
              <option value="0">— assign to —</option>
              {{range $data.Principals}}
              <option value="{{.ID}}">{{.Label}}</option>
              {{end}}
            </select>
            <button type="submit" class="btn btn-sm btn-primary">Assign</button>
          </form>
          {{end}}
        </td>
      </tr>
      {{else}}
      <tr><td colspan="9" class="empty-state">No active WireGuard peers.</td></tr>
      {{end}}
    </tbody>
  </table>
</div>
{{end}}

{{if eq $data.Tab "ssh"}}
<div class="card">
  <table>
    <thead>
      <tr>
        <th>Owner</th>
        <th>Key Name</th>
        <th>Fingerprint</th>
        <th>Added</th>
      </tr>
    </thead>
    <tbody>
      {{range $data.SSHKeys}}
      <tr>
        <td>
          {{if .OwnerEmail}}{{.OwnerEmail}}{{else}}<span class="text-muted">{{.OwnerName}}</span>{{end}}
        </td>
        <td>{{.KeyName}}</td>
        <td><code class="mono-sm text-muted">{{.Fingerprint}}</code></td>
        <td class="text-muted">{{formatTime .Created}}</td>
      </tr>
      {{else}}
      <tr><td colspan="4" class="empty-state">No SSH keys registered.</td></tr>
      {{end}}
    </tbody>
  </table>
</div>
{{end}}

{{end}}

{{define "admin-user-row-cells"}}
  <td>
    {{if .Name}}{{.Name}}{{else}}<span class="text-muted">—</span>{{end}}
  </td>
  <td>
    {{if .Email}}<span class="text-muted" style="font-size:.8125rem">{{.Email}}</span>{{else}}<span class="text-muted">—</span>{{end}}
  </td>
  <td><span class="badge badge-{{.Status}}">{{.Status}}</span></td>
{{end}}

{{define "admin-user-row"}}
<tr id="user-row-{{.ID}}" onclick="apToggleUser({{.ID}})" style="cursor:pointer">
  {{template "admin-user-row-cells" .}}
</tr>
{{end}}

{{define "admin-user-row-oob"}}
<tr id="user-row-{{.ID}}" hx-swap-oob="true" onclick="apToggleUser({{.ID}})" style="cursor:pointer">
  {{template "admin-user-row-cells" .}}
</tr>
{{end}}

{{define "admin-user-keys"}}
<div style="background:var(--bg-alt,#f8f9fa);border-top:1px solid var(--border,#e0e0e0)">

  {{/* Tab bar */}}
  <div style="display:flex;border-bottom:1px solid var(--border,#e0e0e0);padding:0 1rem">
    <button id="tab-general-{{.UserID}}" onclick="apTabSwitch({{.UserID}},'general')"
      style="padding:.5rem .875rem;border:none;background:none;cursor:pointer;font-size:.875rem;border-bottom:2px solid var(--primary,#3b82f6);font-weight:600;color:var(--primary,#3b82f6)">
      General
    </button>
    <button id="tab-ssh-{{.UserID}}" onclick="apTabSwitch({{.UserID}},'ssh')"
      style="padding:.5rem .875rem;border:none;background:none;cursor:pointer;font-size:.875rem;border-bottom:2px solid transparent;color:var(--text-muted,#6b7280)">
      SSH Keys ({{len .SSHKeys}})
    </button>
    <button id="tab-wg-{{.UserID}}" onclick="apTabSwitch({{.UserID}},'wg')"
      style="padding:.5rem .875rem;border:none;background:none;cursor:pointer;font-size:.875rem;border-bottom:2px solid transparent;color:var(--text-muted,#6b7280)">
      WireGuard ({{len .WGKeys}})
    </button>
  </div>

  {{/* General pane */}}
  <div id="pane-general-{{.UserID}}" style="padding:.75rem 1rem">
    <div style="display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-start">
      <div>
        <div class="text-muted" style="font-size:.75rem;margin-bottom:.25rem">Email</div>
        <div>{{if .Email}}{{.Email}}{{else}}<span class="text-muted">—</span>{{end}}</div>
      </div>
      <div>
        <div class="text-muted" style="font-size:.75rem;margin-bottom:.25rem">Status</div>
        <div><span class="badge badge-{{.Status}}">{{.Status}}</span></div>
      </div>
      <div style="flex:1;min-width:200px">
        <div class="text-muted" style="font-size:.75rem;margin-bottom:.25rem">Display name</div>
        <div class="form-row" style="margin:0">
          <input type="text" id="edit-name-{{.UserID}}" name="name" value="{{.Name}}" placeholder="Display name" style="max-width:200px">
          <button class="btn btn-sm btn-primary"
            hx-post="/admin/users/{{.UserID}}/edit"
            hx-include="#edit-name-{{.UserID}}"
            hx-target="#user-keys-{{.UserID}} td"
            hx-swap="innerHTML">Save</button>
        </div>
      </div>
    </div>
    <div style="margin-top:1rem;display:flex;gap:.5rem">
      {{if eq .Status "active"}}
      <button class="btn btn-sm btn-danger"
        hx-post="/admin/users/{{.UserID}}/revoke"
        hx-target="#user-keys-{{.UserID}} td"
        hx-swap="innerHTML"
        hx-confirm="Revoke all access for {{if .Email}}{{.Email}}{{else}}{{.Name}}{{end}}?">Revoke</button>
      {{else}}
      <button class="btn btn-sm"
        hx-post="/admin/users/{{.UserID}}/restore"
        hx-target="#user-keys-{{.UserID}} td"
        hx-swap="innerHTML">Restore</button>
      {{end}}
      <button class="btn btn-sm btn-danger"
        hx-delete="/admin/users/{{.UserID}}"
        hx-target="#user-row-{{.UserID}}"
        hx-swap="outerHTML"
        hx-confirm="Permanently delete {{if .Email}}{{.Email}}{{else}}{{.Name}}{{end}} and all their keys?">Delete</button>
    </div>
  </div>

  {{/* SSH pane */}}
  <div id="pane-ssh-{{.UserID}}" style="display:none;padding:.75rem 1rem">
    <table style="width:100%">
      <thead><tr><th>Name</th><th>Fingerprint</th><th>Added</th><th></th></tr></thead>
      <tbody>
        {{range .SSHKeys}}
        <tr>
          <td>{{.Name}}</td>
          <td><code class="mono-sm text-muted">{{.Fingerprint}}</code></td>
          <td class="text-muted">{{formatTime .Created}}</td>
          <td>
            <button class="btn btn-sm btn-danger"
              hx-delete="/admin/users/{{$.UserID}}/ssh-keys/{{.ID}}"
              hx-target="#user-keys-{{$.UserID}} td"
              hx-swap="innerHTML"
              hx-confirm="Delete this SSH key?">Del</button>
          </td>
        </tr>
        {{else}}
        <tr><td colspan="4" class="empty-state">No SSH keys.</td></tr>
        {{end}}
      </tbody>
    </table>
    <div class="form-row" style="margin-top:.5rem">
      <input type="text" id="ssh-name-{{.UserID}}" name="name" placeholder="Key name" style="max-width:130px">
      <textarea id="ssh-pubkey-{{.UserID}}" name="pubkey" placeholder="ssh-ed25519 AAAA..." rows="2"
        style="flex:1;min-width:200px;font-family:monospace;font-size:.75rem;resize:vertical"></textarea>
      <button class="btn btn-sm btn-primary"
        hx-post="/admin/users/{{.UserID}}/ssh-keys"
        hx-include="#ssh-name-{{.UserID}},#ssh-pubkey-{{.UserID}}"
        hx-target="#user-keys-{{.UserID}} td"
        hx-swap="innerHTML"
        hx-on::after-request="if(event.detail.successful){document.getElementById('ssh-pubkey-{{.UserID}}').value='';document.getElementById('ssh-name-{{.UserID}}').value=''}">Add</button>
    </div>
  </div>

  {{/* WireGuard pane */}}
  <div id="pane-wg-{{.UserID}}" style="display:none;padding:.75rem 1rem">
    {{range .WGKeys}}
    <div style="border:1px solid var(--border,#e0e0e0);border-radius:4px;padding:.75rem;margin-bottom:.75rem">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem">
        <span style="font-weight:600">{{.Name}}</span>
        <div style="display:flex;gap:.5rem;align-items:center">
          {{if .Connected}}<span class="badge badge-connected">connected</span>{{else}}<span class="badge badge-disconnected">offline</span>{{end}}
          <span class="text-muted" style="font-size:.8125rem">{{timeSince .LastHandshake}}</span>
          <button class="btn btn-sm btn-danger"
            hx-delete="/admin/users/{{$.UserID}}/wg-keys/{{.ID}}"
            hx-target="#user-keys-{{$.UserID}} td"
            hx-swap="innerHTML"
            hx-confirm="Revoke this WireGuard key?">Revoke</button>
        </div>
      </div>
      <div style="display:grid;grid-template-columns:auto 1fr;gap:.25rem .75rem;font-size:.8125rem">
        <span class="text-muted">IPv4</span><code class="mono-sm">{{if .IPv4}}{{.IPv4}}{{else}}—{{end}}</code>
        <span class="text-muted">IPv6</span><code class="mono-sm">{{if .IPv6}}{{.IPv6}}{{else}}—{{end}}</code>
        <span class="text-muted">Public key</span><code class="mono-sm" style="word-break:break-all">{{.Pubkey}}</code>
        {{if .PSK}}<span class="text-muted">PSK</span><code class="mono-sm" style="word-break:break-all">{{.PSK}}</code>{{end}}
      </div>
    </div>
    {{else}}
    <p class="empty-state">No WireGuard tunnels.</p>
    {{end}}
  </div>

</div>
{{end}}