{% extends "base.html" %}
{% import "macros/ui.html" as m %}

{% block title %}API Catalog — Ontoref{% endblock title %}
{% block nav_api %}active{% endblock nav_api %}
{% block nav_group_dev %}active{% endblock nav_group_dev %}

{% block head %}
<style>
  .method-get    { color: #4ade80; }
  .method-post   { color: #60a5fa; }
  .method-put    { color: #f59e0b; }
  .method-delete { color: #f87171; }
  .method-patch  { color: #c084fc; }
</style>
{% endblock head %}

{% block content %}
<div class="mb-6 flex items-center justify-between">
  <div>
    <h1 class="text-2xl font-bold">API Catalog</h1>
    {% if is_primary %}
    <p class="text-base-content/50 text-sm mt-1">Ontoref daemon HTTP surface — generated from <code>#[onto_api]</code> annotations</p>
    {% else %}
    <p class="text-base-content/50 text-sm mt-1">Project HTTP surface — routes declared in this project's ontology</p>
    {% endif %}
  </div>
  <span class="badge badge-lg badge-neutral">{{ route_count }} routes</span>
</div>

{% if not is_primary and route_count == 0 %}
<div class="flex flex-col items-center justify-center py-16 text-base-content/40 text-sm">
  <p>No API surface declared for <code class="font-mono">{{ slug }}</code>.</p>
  <p class="mt-2">Add route declarations to the project's ontology to surface them here.</p>
</div>
{% else %}

<!-- Filter bar -->
<div class="flex flex-wrap gap-2 mb-4" id="filter-bar">
  <input id="filter-input" type="text" placeholder="Filter by path or description…"
         class="input input-sm input-bordered flex-1 min-w-48 font-mono"
         oninput="filterRoutes()">
  <select id="filter-auth" class="select select-sm select-bordered" onchange="filterRoutes()">
    <option value="">All auth</option>
    <option value="none">none</option>
    <option value="viewer">viewer</option>
    <option value="admin">admin</option>
  </select>
  <select id="filter-method" class="select select-sm select-bordered" onchange="filterRoutes()">
    <option value="">All methods</option>
    <option value="GET">GET</option>
    <option value="POST">POST</option>
    <option value="PUT">PUT</option>
    <option value="DELETE">DELETE</option>
  </select>
</div>

<!-- Routes table -->
<div class="overflow-x-auto" id="routes-container">
  <table class="table table-sm w-full bg-base-200 rounded-lg" id="routes-table">
    <thead>
      <tr class="text-base-content/50 text-xs uppercase tracking-wider">
        <th class="w-16">Method</th>
        <th>Path</th>
        <th>Description</th>
        <th class="w-20">Auth</th>
        <th>Actors</th>
        <th>Tags</th>
      </tr>
    </thead>
    <tbody id="routes-body">
    </tbody>
  </table>
</div>

<!-- Route detail modal -->
<dialog id="route-modal" class="modal">
  <div class="modal-box w-full max-w-2xl">
    <form method="dialog">
      <button class="btn btn-sm btn-circle btn-ghost absolute right-3 top-3">✕</button>
    </form>
    <div class="flex items-baseline gap-2 mb-3 pr-8">
      <span id="detail-method" class="font-mono font-bold text-lg"></span>
      <span id="detail-path" class="font-mono text-base-content/60 text-sm break-all"></span>
    </div>
    <p id="detail-desc" class="text-sm text-base-content/80 mb-4"></p>
    <div id="detail-params" class="hidden mb-4">
      <h3 class="text-xs font-semibold uppercase tracking-wider text-base-content/50 mb-2">Parameters</h3>
      <table class="table table-xs w-full">
        <thead><tr class="text-base-content/40 text-xs"><th>Name</th><th>Type</th><th>Constraint</th><th>Description</th></tr></thead>
        <tbody id="detail-params-body"></tbody>
      </table>
    </div>
    <div class="flex gap-4 text-xs text-base-content/40 border-t border-base-content/10 pt-3">
      <span>Feature: <code id="detail-feature" class="font-mono"></code></span>
      <span id="detail-auth-wrap">Auth: <span id="detail-auth"></span></span>
    </div>
  </div>
  <form method="dialog" class="modal-backdrop">
    <button>close</button>
  </form>
</dialog>

<script>
const ROUTES = {{ catalog_json | safe }};

function methodClass(m) {
  return `method-${m.toLowerCase()}`;
}

function authBadge(auth) {
  const cls = {
    none:   'badge badge-ghost badge-xs font-mono',
    viewer: 'badge badge-info badge-xs font-mono',
    admin:  'badge badge-error badge-xs font-mono',
  }[auth] ?? 'badge badge-ghost badge-xs font-mono';
  return `<span class="${cls}">${auth}</span>`;
}

function actorBadges(actors) {
  if (!actors || actors.length === 0) return '<span class="text-base-content/30">—</span>';
  return actors.map(a => `<span class="badge badge-xs badge-ghost font-mono">${a}</span>`).join(' ');
}

function tagBadges(tags) {
  if (!tags || tags.length === 0) return '';
  return tags.map(t => `<span class="badge badge-xs badge-outline">${t}</span>`).join(' ');
}

let visibleRoutes = ROUTES;

function renderRoutes(routes) {
  visibleRoutes = routes;
  const tbody = document.getElementById('routes-body');
  tbody.innerHTML = routes.map((r, i) => `
    <tr class="hover cursor-pointer route-row" onclick="showDetail(${i})">
      <td class="font-mono font-bold ${methodClass(r.method)}">${r.method}</td>
      <td class="font-mono text-sm">${r.path}</td>
      <td class="text-sm text-base-content/70">${r.description}</td>
      <td>${authBadge(r.auth)}</td>
      <td class="flex flex-wrap gap-1">${actorBadges(r.actors)}</td>
      <td>${tagBadges(r.tags)}</td>
    </tr>
  `).join('');
}

function showDetail(index) {
  const r = visibleRoutes[index];
  if (!r) return;
  document.getElementById('detail-method').textContent = r.method;
  document.getElementById('detail-method').className = `font-mono font-bold text-lg ${methodClass(r.method)}`;
  document.getElementById('detail-path').textContent = r.path;
  document.getElementById('detail-desc').textContent = r.description;
  document.getElementById('detail-feature').textContent = r.feature || 'default';
  document.getElementById('detail-auth').innerHTML = authBadge(r.auth);

  const paramsDiv = document.getElementById('detail-params');
  const tbody = document.getElementById('detail-params-body');
  if (r.params && r.params.length > 0) {
    tbody.innerHTML = r.params.map(p => `
      <tr>
        <td class="font-mono text-xs">${p.name}</td>
        <td class="text-xs text-base-content/60">${p.type || ''}</td>
        <td class="text-xs text-base-content/50">${p.constraint || ''}</td>
        <td class="text-xs">${p.description || ''}</td>
      </tr>
    `).join('');
    paramsDiv.classList.remove('hidden');
  } else {
    paramsDiv.classList.add('hidden');
  }
  document.getElementById('route-modal').showModal();
}

function filterRoutes() {
  const text = document.getElementById('filter-input').value.toLowerCase();
  const auth = document.getElementById('filter-auth').value;
  const method = document.getElementById('filter-method').value;
  const filtered = ROUTES.filter(r => {
    const textMatch = !text || r.path.toLowerCase().includes(text) || r.description.toLowerCase().includes(text);
    const authMatch = !auth || r.auth === auth;
    const methodMatch = !method || r.method === method;
    return textMatch && authMatch && methodMatch;
  });
  renderRoutes(filtered);
}

renderRoutes(ROUTES);
</script>
{% endif %}
{% endblock content %}
