{% extends "admin/base.html" %}

{% block title %}Tunnels — cmdop admin{% endblock %}

{% block content %}
{% from 'admin/components/ui.html' import card, input, badge, empty_state, modal, pagination, tooltip, page_header %}

{# Plan 58 — Vercel polish.
   - Copy public URL per row (clipboard API + toast).
   - Truncated session_id with `title=…` for the full UUID.
   - Empty state explains how to open a tunnel from the CLI.
   - Close-confirmation modal replaces blocking confirm(). #}
<div class="space-y-6" x-data="tunnelsPage()" x-init="load()">
  {{ page_header(
    'Tunnels',
    'Active public tunnels for this fleet.',
    help_anchor='tunnels',
    actions=[
      {'label': 'Refresh', 'kind': 'secondary', 'icon': 'refresh-cw',
       'attrs': '@click="load()" :disabled="pagination.loading"'},
      {'label': 'Open tunnel', 'kind': 'primary', 'icon': 'plus',
       'attrs': '@click="openCreate()"'},
    ]
  ) }}

  {# Create modal #}
  {% call modal('showCreate', 'closeCreate()') %}
    <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight mb-1">Open tunnel</h3>
    <p class="text-[12px] text-ink-500 mb-4">Expose a port on an agent machine through the public relay.</p>
    <form @submit.prevent="openTunnel()" class="space-y-4">
      {# Plan 61/2b-W4 A1 — session picker replaces raw UUID input. #}
      <div class="space-y-1.5" x-show="!sessionManualMode" x-cloak>
        <label for="session_select" class="flex items-center gap-1 text-[11px] uppercase tracking-wider font-medium text-ink-500">
          Session
          {{ tooltip("Agent connection hosting the local port. Pick a machine from the dropdown — the UUID is filled in automatically.") }}
        </label>
        <select id="session_select"
                x-model="sessionId"
                :disabled="loadingSessions"
                class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors">
          <option value="" x-text="loadingSessions ? 'Loading sessions…' : (sessions.length ? 'Choose an agent session…' : 'No connected sessions')"></option>
          <template x-for="s in sessions" :key="s.session_id">
            <option :value="s.session_id" x-text="s.label"></option>
          </template>
        </select>
        <button type="button" @click="sessionManualMode = true; sessionId = ''"
                class="text-[11px] text-ink-500 hover:text-ink-300 mt-0.5 underline underline-offset-2">
          Type UUID instead
        </button>
      </div>
      <div class="space-y-1.5" x-show="sessionManualMode" x-cloak>
        <label for="session_id" class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">Session ID</label>
        <input id="session_id"
               x-model="sessionId"
               placeholder="agent session UUID"
               class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 placeholder-ink-600 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors font-mono"
               required>
        <button type="button" @click="sessionManualMode = false; sessionId = ''; loadSessions()"
                class="text-[11px] text-ink-500 hover:text-ink-300 mt-0.5 underline underline-offset-2">
          Back to dropdown
        </button>
      </div>
      <div class="grid grid-cols-2 gap-4">
        {{ input("local_host", label="Local host", value="127.0.0.1", required=true) }}
        {{ input("local_port", label="Local port", type="number", value="8080", required=true) }}
      </div>
      <div class="space-y-1.5">
        <label for="protocol" class="block text-[11px] uppercase tracking-wider font-medium text-ink-500">Protocol</label>
        <select id="protocol" class="w-full px-3 py-2 bg-black border border-white/[0.08] hover:border-white/[0.16] focus:border-cmdop-500 rounded-md text-[13px] text-ink-100 focus:outline-none focus:ring-1 focus:ring-cmdop-500/30 transition-colors">
          <option value="http">HTTP</option>
          <option value="tcp">TCP</option>
        </select>
      </div>
      {{ input("subdomain", label="Subdomain (optional)", placeholder="my-app") }}
      <div class="flex justify-end gap-3 pt-2">
        <button type="button" @click="closeCreate()"
                class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
        <button type="submit" :disabled="submitting || !sessionId"
                class="px-3 py-1.5 bg-white hover:bg-ink-100 text-black text-[13px] font-medium rounded-md disabled:opacity-50">
          <span x-text="submitting ? 'Opening…' : 'Open'">Open</span>
        </button>
      </div>
    </form>
  {% endcall %}

  {# Close confirmation modal #}
  {% call modal('!!pendingClose', 'pendingClose = null') %}
    <h3 class="text-[15px] font-semibold text-ink-100 tracking-tight mb-2">Close tunnel?</h3>
    <p class="text-[13px] text-ink-400 mb-1">The public URL will stop routing immediately.</p>
    <p class="text-[12px] text-ink-500 font-mono break-all mb-4" x-text="pendingClose?.public_url || ''"></p>
    <div class="flex justify-end gap-3">
      <button type="button" @click="pendingClose = null"
              class="px-3 py-1.5 text-[13px] text-ink-400 hover:text-ink-100">Cancel</button>
      <button type="button" @click="confirmClose()" :disabled="submitting"
              class="px-3 py-1.5 border border-red-500/30 hover:border-red-500/50 bg-red-500/[0.06] hover:bg-red-500/[0.10] text-red-300 text-[13px] font-medium rounded-md disabled:opacity-50">
        <span x-text="submitting ? 'Closing…' : 'Close tunnel'">Close tunnel</span>
      </button>
    </div>
  {% endcall %}

  {% call card() %}
  <div class="overflow-x-auto">
    <table class="w-full text-[13px] text-left">
      <thead class="text-[11px] text-ink-500 uppercase tracking-wider border-b border-white/[0.06]">
        <tr>
          <th class="px-4 py-3 font-medium">Subdomain</th>
          <th class="px-4 py-3 font-medium">
            <span class="inline-flex items-center gap-1">Public URL {{ tooltip("Shareable HTTPS URL that proxies to your machine's local port. Revoked if you delete this tunnel.") }}</span>
          </th>
          <th class="px-4 py-3 font-medium">Target</th>
          <th class="px-4 py-3 font-medium">Protocol</th>
          <th class="px-4 py-3 font-medium">
            <span class="inline-flex items-center gap-1">Session {{ tooltip("Agent connection that's hosting this tunnel. Hover to see the full UUID.") }}</span>
          </th>
          <th class="px-4 py-3 font-medium">Created</th>
          <th class="px-4 py-3 font-medium text-right">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-white/[0.06]">
        <template x-if="pagination.loading && pagination.items.length === 0">
          <tr><td colspan="7" class="px-4 py-6 text-center text-ink-500 text-[13px]">Loading…</td></tr>
        </template>
        <template x-if="!pagination.loading && pagination.error">
          <tr><td colspan="7" class="px-4 py-6 text-center text-red-300 text-[13px]" x-text="pagination.error"></td></tr>
        </template>
        <template x-if="!pagination.loading && !pagination.error && pagination.items.length === 0">
          <tr><td colspan="7" class="px-4 py-10">
            <div class="text-center max-w-md mx-auto">
              <i data-lucide="network" class="w-8 h-8 mx-auto text-ink-600 mb-3"></i>
              <h3 class="text-[13px] font-medium text-ink-200">No active tunnels</h3>
              <p class="text-[12px] text-ink-500 mt-1">
                Tunnels expose a local port on an agent machine through the public relay.
              </p>
              <p class="text-[12px] text-ink-500 mt-2">From an agent shell:</p>
              <code class="inline-block mt-1 px-2 py-1 bg-black border border-white/[0.08] rounded text-[12px] text-cmdop-300 font-mono">cmdop tunnel open --port 8080</code>
            </div>
          </td></tr>
        </template>
        <template x-for="t in pagination.items" :key="t.tunnel_id">
          <tr class="hover:bg-white/[0.02] transition-colors">
            <td class="px-4 py-3">
              <code class="text-[12px] bg-black px-2 py-0.5 rounded border border-white/[0.08] text-cmdop-300 font-mono" x-text="t.subdomain"></code>
            </td>
            <td class="px-4 py-3 max-w-[260px]">
              <div class="flex items-center gap-1.5">
                <a :href="t.public_url" target="_blank" rel="noopener noreferrer"
                   :title="t.public_url"
                   class="truncate text-[12px] font-mono text-ink-200 hover:text-cmdop-300 hover:underline" x-text="t.public_url"></a>
                <button @click="copyUrl(t.public_url)"
                        title="Copy public URL" :aria-label="'Copy URL ' + t.public_url"
                        class="inline-flex items-center justify-center w-6 h-6 text-ink-500 hover:text-ink-100 border border-white/[0.08] hover:border-white/[0.16] rounded transition-colors flex-shrink-0">
                  <i data-lucide="copy" class="w-3 h-3"></i>
                </button>
              </div>
            </td>
            <td class="px-4 py-3 text-ink-200 font-mono text-[12px]" x-text="t.local_host + ':' + t.local_port"></td>
            <td class="px-4 py-3">
              <span class="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-medium border"
                    :class="t.protocol === 'http' ? 'border-cmdop-500/30 text-cmdop-300' : 'border-amber-500/30 text-amber-300'"
                    x-text="t.protocol.toUpperCase()"></span>
            </td>
            <td class="px-4 py-3">
              {# Plan 61/2b-W4 — UUID hover utility (Wave 2a `.uuid` class). #}
              <span class="uuid" :data-prefix="t.session_id.slice(0, 8)" :title="t.session_id"></span>
            </td>
            <td class="px-4 py-3 text-ink-500 text-[12px] font-mono whitespace-nowrap" :title="formatTs(t.created_at)" x-text="formatRelative(t.created_at)"></td>
            <td class="px-4 py-3 text-right">
              <button @click="pendingClose = t"
                      class="inline-flex items-center gap-1 px-2 py-0.5 text-[12px] text-red-400 hover:text-red-300 border border-red-500/0 hover:border-red-500/30 rounded transition-colors">
                <i data-lucide="x" class="w-3 h-3"></i>
                Close
              </button>
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
  {{ pagination('pagination') }}
  {% endcall %}
</div>

<script>
function tunnelsPage() {
  return Object.assign(pageHelper({}), {
    showCreate: false,
    submitting: false,
    // Plan 61/2b-W4 A1 — session picker state.
    sessions: [],
    sessionId: '',
    sessionManualMode: false,
    loadingSessions: false,
    // Plan 60 Phase 1.5 — pagination state.
    pagination: paginationState({
      mode: 'offset',
      endpoint: '/api/tunnels',
      perPage: 25,
      storageKey: 'cmdop.pagination.tunnels.perPage',
    }),
    pendingClose: null,

    openCreate() {
      this.sessionId = '';
      this.sessionManualMode = false;
      this.showCreate = true;
      this.loadSessions();
      this.$nextTick(() => window.lucide && window.lucide.createIcons());
    },
    closeCreate() {
      this.showCreate = false;
    },

    async loadSessions() {
      this.loadingSessions = true;
      try {
        const res = await fetch('/api/tunnels/connected-sessions');
        if (res.ok) {
          this.sessions = await res.json();
        } else {
          this.sessions = [];
        }
      } catch (e) {
        this.sessions = [];
      } finally {
        this.loadingSessions = false;
      }
    },

    async load() {
      await this.pagination.fetch();
      this.$nextTick(() => window.lucide && window.lucide.createIcons());
    },

    async openTunnel() {
      this.submitting = true;
      const headers = {'Content-Type': 'application/json'};
      const body = {
        session_id: this.sessionId,
        protocol: document.getElementById('protocol').value,
        local_host: document.getElementById('local_host').value,
        local_port: parseInt(document.getElementById('local_port').value, 10),
        subdomain: document.getElementById('subdomain').value || null,
      };
      try {
        const res = await fetch('/api/tunnels', {method: 'POST', headers, body: JSON.stringify(body)});
        if (res.ok) {
          toast('Tunnel opened', 'success');
          this.closeCreate();
          await this.load();
        } else {
          const data = await res.json().catch(() => ({}));
          toast(data.detail || `Failed to open tunnel (HTTP ${res.status})`, 'error');
        }
      } catch (e) {
        toast(`Network error: ${e.message}`, 'error');
      } finally {
        this.submitting = false;
      }
    },

    async confirmClose() {
      if (!this.pendingClose) return;
      const id = this.pendingClose.tunnel_id;
      this.submitting = true;
      try {
        const res = await fetch(`/api/tunnels/${id}`, {method: 'DELETE'});
        if (res.ok || res.status === 204) {
          toast('Tunnel closed', 'success');
          this.pendingClose = null;
          await this.load();
        } else {
          const data = await res.json().catch(() => ({}));
          toast(data.detail || `Failed to close (HTTP ${res.status})`, 'error');
        }
      } catch (e) {
        toast(`Network error: ${e.message}`, 'error');
      } finally {
        this.submitting = false;
      }
    },

    async copyUrl(url) {
      try {
        await navigator.clipboard.writeText(url);
        toast('URL copied', 'success');
      } catch (e) {
        toast('Copy failed — select text manually', 'error');
      }
    },
  });
}
</script>
{% endblock %}