{% extends "dashboard/base.html" %}
{% from "partials/_macros.html" import empty_state, info_toggle %}

{% block page %}
<div class="page-header">
  <div>
    <div class="page-header__eyebrow">Code graph</div>
    <h1 class="page-header__title">
      Graph
      {% if graph_counts %}
      <span class="muted tabular" style="font-size: var(--fs-lg); font-weight: 500;">
        · {{ graph_counts.nodes }} nodes · {{ graph_counts.edges }} edges
      </span>
      {% endif %}
    </h1>
    <p class="page-header__subtitle">Read-only visualization of visible Phase 8 code graph nodes and edges.</p>
  </div>
</div>

{% call info_toggle(key='graph', title="What is the code graph?") %}
  <p>The <strong>code graph</strong> is the local AST-derived map of files, modules, classes, functions, imports, containment, and calls. This page is read-only and uses the same workspace visibility filters as the graph MCP tools.</p>
  <p>The SVG is rendered server-side in Python. Pan and zoom run locally in a small inline script; no CDN or external graph library is loaded.</p>
{% endcall %}

<style>
  .graph-picker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
  }
  .graph-picker select {
    min-width: min(36rem, 100%);
  }
  .graph-shell {
    height: min(72vh, 760px);
    overflow: hidden;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    touch-action: none;
  }
  .graph-shell svg {
    display: block;
    width: 100%;
    height: 100%;
    cursor: grab;
  }
  .graph-shell.is-dragging svg {
    cursor: grabbing;
  }
</style>

<div class="panel" style="margin-bottom: var(--space-4);">
  <div class="panel__header">
    <div>
      <h2 class="panel__title">{{ icon('database') }} Workspace</h2>
      <p class="panel__subtitle">Only workspaces visible to the current operator are listed.</p>
    </div>
  </div>
  {% if workspaces %}
  <form class="graph-picker" method="get" action="/dashboard/graph">
    <label for="workspace">Workspace</label>
    <select id="workspace" name="workspace">
      {% for workspace in workspaces %}
      <option value="{{ workspace.path }}" {% if workspace.path == selected_workspace %}selected{% endif %}>
        {{ workspace.slug }} — {{ workspace.path }}
      </option>
      {% endfor %}
    </select>
    <button type="submit">Render graph</button>
  </form>
  {% else %}
    {{ empty_state(
        'No visible workspaces',
        body='Register or start a session in a workspace before rendering a code graph.',
        icon_name='database'
    ) }}
  {% endif %}
</div>

<div class="panel">
  <div class="panel__header">
    <div>
      <h2 class="panel__title">{{ icon('network') }} Visualization</h2>
      <p class="panel__subtitle">Scroll to zoom. Drag to pan. Hover a node for path and line number.</p>
    </div>
  </div>
  {% if graph_svg %}
  <div class="graph-shell" data-graph-panzoom>
    {{ graph_svg|safe }}
  </div>
  {% else %}
    {{ empty_state(
        'No code graph rendered',
        body='Build the code graph for the selected workspace with the graph_build MCP tool first.',
        icon_name='network'
    ) }}
  {% endif %}
</div>

<script>
(() => {
  document.querySelectorAll('[data-graph-panzoom]').forEach((shell) => {
    const svg = shell.querySelector('svg');
    if (!svg) return;
    let x = 0, y = 0, scale = 1, dragging = false, lastX = 0, lastY = 0;
    const apply = () => {
      svg.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
      svg.style.transformOrigin = '0 0';
    };
    shell.addEventListener('wheel', (event) => {
      event.preventDefault();
      const factor = event.deltaY < 0 ? 1.12 : 0.89;
      scale = Math.min(6, Math.max(0.2, scale * factor));
      apply();
    }, { passive: false });
    shell.addEventListener('pointerdown', (event) => {
      dragging = true; lastX = event.clientX; lastY = event.clientY;
      shell.classList.add('is-dragging'); shell.setPointerCapture(event.pointerId);
    });
    shell.addEventListener('pointermove', (event) => {
      if (!dragging) return;
      x += event.clientX - lastX; y += event.clientY - lastY;
      lastX = event.clientX; lastY = event.clientY; apply();
    });
    shell.addEventListener('pointerup', () => {
      dragging = false; shell.classList.remove('is-dragging');
    });
  });
})();
</script>
{% endblock %}