{% extends "base.html" %}

{% block title %}Audit Log - Tessera{% endblock %}

{% block content %}
<section>
  <h2>Audit Log</h2>

  <div class="filters" style="margin-bottom: 1rem; display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.75rem; align-items: end; padding: 0.75rem 1rem; background: var(--light-gray); border: 1px solid #ddd;">
    <div style="display: flex; flex-direction: column; gap: 0.25rem;">
      <label for="filter-entity-type" style="margin: 0; font-size: 0.875rem;">Entity Type</label>
      <select id="filter-entity-type" style="width: 100%; padding: 0.4rem; margin: 0; box-sizing: border-box;" onchange="onEntityTypeChange()">
        <option value="">All</option>
        <option value="team">Teams</option>
        <option value="asset">Assets</option>
        <option value="contract">Contracts</option>
        <option value="proposal">Proposals</option>
        <option value="registration">Registrations</option>
        <option value="api_key">API Keys</option>
        <option value="sync">Sync</option>
      </select>
    </div>
    <div style="display: flex; flex-direction: column; gap: 0.25rem;">
      <label for="filter-action" style="margin: 0; font-size: 0.875rem;">Action</label>
      <select id="filter-action" style="width: 100%; padding: 0.4rem; margin: 0; box-sizing: border-box;">
        <option value="">All actions</option>
      </select>
    </div>
    <div style="display: flex; gap: 0.5rem; padding-bottom: 0.1rem;">
      <button onclick="loadAuditEvents()" style="padding: 0.4rem 1rem;">Filter</button>
      <button class="secondary" onclick="clearFilters()" style="padding: 0.4rem 1rem;">Clear</button>
    </div>
  </div>

  <div id="audit-list">
    <div class="loading">Loading...</div>
  </div>

  <div id="pagination" style="margin-top: 1rem;"></div>
</section>
{% endblock %}

{% block scripts %}
<script>
let currentOffset = 0;
const limit = 50;

// Mapping of entity types to their valid actions
const entityTypeActions = {
  'team': [
    { value: 'team.created', label: 'Team Created' },
    { value: 'team.updated', label: 'Team Updated' },
    { value: 'team.deleted', label: 'Team Deleted' },
  ],
  'asset': [
    { value: 'asset.created', label: 'Asset Created' },
    { value: 'asset.updated', label: 'Asset Updated' },
    { value: 'asset.deleted', label: 'Asset Deleted' },
  ],
  'contract': [
    { value: 'contract.published', label: 'Contract Published' },
    { value: 'contract.deprecated', label: 'Contract Deprecated' },
    { value: 'contract.force_published', label: 'Contract Force Published' },
  ],
  'proposal': [
    { value: 'proposal.created', label: 'Proposal Created' },
    { value: 'proposal.acknowledged', label: 'Proposal Acknowledged' },
    { value: 'proposal.approved', label: 'Proposal Approved' },
    { value: 'proposal.rejected', label: 'Proposal Rejected' },
    { value: 'proposal.force_approved', label: 'Proposal Force Approved' },
    { value: 'proposal.withdrawn', label: 'Proposal Withdrawn' },
  ],
  'registration': [
    { value: 'registration.created', label: 'Registration Created' },
    { value: 'registration.deleted', label: 'Registration Deleted' },
  ],
  'api_key': [
    { value: 'api_key.created', label: 'API Key Created' },
    { value: 'api_key.revoked', label: 'API Key Revoked' },
  ],
  'sync': [
    { value: 'sync.dbt', label: 'dbt Sync' },
    { value: 'sync.dbt_upload', label: 'dbt Upload Sync' },
    { value: 'sync.openapi', label: 'OpenAPI Import' },
    { value: 'sync.graphql', label: 'GraphQL Import' },
  ],
};

// All actions for when no entity type is selected
const allActions = Object.values(entityTypeActions).flat();

function onEntityTypeChange() {
  const entityType = document.getElementById('filter-entity-type').value;
  const actionSelect = document.getElementById('filter-action');

  // Reset action selection
  actionSelect.value = '';

  // Populate action dropdown based on entity type
  if (!entityType) {
    // Show all actions
    actionSelect.innerHTML = '<option value="">All actions</option>' +
      allActions.map(a => `<option value="${a.value}">${escapeHtml(a.label)}</option>`).join('');
  } else {
    // Show only actions for this entity type
    const actions = entityTypeActions[entityType] || [];
    actionSelect.innerHTML = '<option value="">All actions</option>' +
      actions.map(a => `<option value="${a.value}">${escapeHtml(a.label)}</option>`).join('');
  }
}

function clearFilters() {
  document.getElementById('filter-entity-type').value = '';
  document.getElementById('filter-action').value = '';
  currentOffset = 0;
  onEntityTypeChange();
  loadAuditEvents();
}

function getActionClass(action) {
  if (action.includes('force') || action.includes('rejected')) return 'status-deprecated';
  if (action.includes('created') || action.includes('published') || action.includes('approved')) return 'status-active';
  if (action.includes('deleted') || action.includes('revoked') || action.includes('withdrawn')) return 'status-deprecated';
  return 'status-pending';
}

function formatPayload(payload) {
  if (!payload || Object.keys(payload).length === 0) return '-';
  const items = Object.entries(payload)
    .filter(([k, v]) => v !== null && v !== undefined)
    .map(([k, v]) => `<strong>${escapeHtml(k)}:</strong> ${escapeHtml(String(v))}`)
    .join(', ');
  return items || '-';
}

// Cache for resolved names to avoid redundant lookups
const nameCache = {
  users: {},
  teams: {},
  assets: {},
  proposals: {},
  contracts: {}
};

// Resolve user name from ID
async function resolveUserName(userId) {
  if (!userId) return null;
  if (nameCache.users[userId]) return nameCache.users[userId];
  try {
    const user = await api.getUser(userId);
    nameCache.users[userId] = user.name;
    return user.name;
  } catch (e) {
    return null;
  }
}

// Resolve team name from ID
async function resolveTeamName(teamId) {
  if (!teamId) return null;
  if (nameCache.teams[teamId]) return nameCache.teams[teamId];
  try {
    const team = await api.getTeam(teamId);
    nameCache.teams[teamId] = team.name;
    return team.name;
  } catch (e) {
    return null;
  }
}

// Resolve asset FQN from ID
async function resolveAssetFqn(assetId) {
  if (!assetId) return null;
  if (nameCache.assets[assetId]) return nameCache.assets[assetId];
  try {
    const asset = await api.getAsset(assetId);
    nameCache.assets[assetId] = asset.fqn;
    return asset.fqn;
  } catch (e) {
    return null;
  }
}

// Get link for entity based on type
function getEntityLink(entityType, entityId, name) {
  const displayName = name ? escapeHtml(name) : entityId;
  switch (entityType) {
    case 'asset':
      return `<a href="/assets/${entityId}">${displayName}</a>`;
    case 'team':
      return `<a href="/teams/${entityId}">${displayName}</a>`;
    case 'contract':
      return `<a href="/contracts/${entityId}">${displayName}</a>`;
    case 'proposal':
      return `<a href="/proposals/${entityId}">${displayName}</a>`;
    case 'registration':
      return `<a href="/registrations">${displayName}</a>`;
    default:
      return displayName;
  }
}

function formatAuditDetails(event) {
  const parts = [];
  const payload = event.payload || {};

  // For assets and contracts, show FQN prominently (from payload or we'll resolve it)
  if (payload.fqn) {
    const link = event.entity_type === 'asset'
      ? `<a href="/assets/${event.entity_id}">${escapeHtml(payload.fqn)}</a>`
      : (event.entity_type === 'contract'
        ? `<a href="/contracts/${event.entity_id}">${escapeHtml(payload.fqn)}</a>`
        : `<span class="audit-fqn">${escapeHtml(payload.fqn)}</span>`);
    parts.push(`<div class="audit-detail-row"><span class="audit-label">Asset:</span> ${link}</div>`);
  } else if (event.entity_type === 'asset') {
    // We'll show the ID with a placeholder that gets resolved
    parts.push(`<div class="audit-detail-row"><span class="audit-label">Asset:</span> <a href="/assets/${event.entity_id}" data-resolve-asset="${event.entity_id}">${event.entity_id}</a></div>`);
  }

  // For proposals, show proposal link
  if (event.entity_type === 'proposal') {
    parts.push(`<div class="audit-detail-row"><span class="audit-label">Proposal:</span> <a href="/proposals/${event.entity_id}">${event.entity_id}</a></div>`);
  }

  // For contracts, show version and contract link
  if (event.entity_type === 'contract') {
    if (!payload.fqn) {
      parts.push(`<div class="audit-detail-row"><span class="audit-label">Contract:</span> <a href="/contracts/${event.entity_id}">${event.entity_id}</a></div>`);
    }
    if (payload.version) {
      parts.push(`<div class="audit-detail-row"><span class="audit-label">Version:</span> v${escapeHtml(payload.version)}</div>`);
    }
  }

  // For teams, show team name/link
  if (event.entity_type === 'team') {
    const teamName = payload.name ? escapeHtml(payload.name) : event.entity_id;
    parts.push(`<div class="audit-detail-row"><span class="audit-label">Team:</span> <a href="/teams/${event.entity_id}">${teamName}</a></div>`);
  }

  // Actor - show with placeholder for name resolution
  if (event.actor_id) {
    parts.push(`<div class="audit-detail-row"><span class="audit-label">Actor:</span> <span data-resolve-actor="${event.actor_id}">${event.actor_id}</span></div>`);
  }

  // Force flag
  if (payload.force !== undefined && payload.force === true) {
    parts.push(`<div class="audit-detail-row"><span class="audit-label" style="color: #c00;">Force:</span> <strong style="color: #c00;">yes</strong></div>`);
  }

  // Triggered by
  if (payload.triggered_by) {
    parts.push(`<div class="audit-detail-row"><span class="audit-label">Source:</span> ${escapeHtml(payload.triggered_by)}</div>`);
  }

  // Other payload items (exclude ones we already showed)
  const shown = ['fqn', 'version', 'force', 'triggered_by', 'name'];
  const other = Object.entries(payload)
    .filter(([k, v]) => !shown.includes(k) && v !== null && v !== undefined)
    .map(([k, v]) => `<strong>${escapeHtml(k)}:</strong> ${escapeHtml(String(v))}`)
    .join(' &nbsp;|&nbsp; ');
  if (other) {
    parts.push(`<div class="audit-detail-row audit-detail-other" style="margin-top: 0.25rem; color: var(--gray); font-size: 0.75rem;">${other}</div>`);
  }

  return parts.join('');
}

// Resolve all placeholders in the table after loading
async function resolveAuditNames() {
  // Resolve actors (could be users or teams)
  const actorElements = document.querySelectorAll('[data-resolve-actor]');
  for (const el of actorElements) {
    const actorId = el.dataset.resolveActor;
    // Try user first, then team
    let name = await resolveUserName(actorId);
    if (name) {
      el.innerHTML = `<a href="/users/${actorId}">${escapeHtml(name)}</a>`;
    } else {
      name = await resolveTeamName(actorId);
      if (name) {
        el.innerHTML = `<a href="/teams/${actorId}">${escapeHtml(name)}</a>`;
      }
    }
  }

  // Resolve asset FQNs
  const assetElements = document.querySelectorAll('[data-resolve-asset]');
  for (const el of assetElements) {
    const assetId = el.dataset.resolveAsset;
    const fqn = await resolveAssetFqn(assetId);
    if (fqn) {
      el.textContent = fqn;
    }
  }
}

function copyToClipboard(text) {
  navigator.clipboard.writeText(text).then(() => {
    showSuccess('Copied to clipboard');
  }).catch(() => {
    // Fallback for older browsers
    const textArea = document.createElement('textarea');
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    document.execCommand('copy');
    document.body.removeChild(textArea);
    showSuccess('Copied to clipboard');
  });
}

async function loadAuditEvents() {
  const container = document.getElementById('audit-list');
  container.innerHTML = '<div class="loading">Loading...</div>';

  const entityType = document.getElementById('filter-entity-type').value;
  const action = document.getElementById('filter-action').value;

  try {
    const params = { offset: currentOffset, limit };
    if (entityType) params.entity_type = entityType;
    if (action) params.action = action;

    const data = await api.listAuditEvents(params);

    if (!data.results || data.results.length === 0) {
      container.innerHTML = '<div class="empty">No audit events found.</div>';
      document.getElementById('pagination').innerHTML = '';
      return;
    }

    container.innerHTML = `
      <table class="audit-table">
        <thead>
          <tr>
            <th style="width: 180px;">Timestamp</th>
            <th style="width: 120px;">Type</th>
            <th style="width: 160px;">Action</th>
            <th style="min-width: 200px;">Details</th>
          </tr>
        </thead>
        <tbody>
          ${data.results.map(e => `
            <tr>
              <td style="white-space: nowrap; font-size: 0.8rem; padding-right: 1rem;">${formatDate(e.occurred_at)}</td>
              <td><span class="status">${escapeHtml(e.entity_type.toUpperCase())}</span></td>
              <td><span class="status ${getActionClass(e.action)}">${escapeHtml(e.action.toUpperCase())}</span></td>
              <td style="font-size: 0.8rem;">${formatAuditDetails(e)}</td>
            </tr>
          `).join('')}
        </tbody>
      </table>
    `;

    // Pagination and results count
    const paginationContainer = document.getElementById('pagination');
    const totalPages = Math.ceil(data.total / limit);
    const currentPage = Math.floor(currentOffset / limit) + 1;
    const showingStart = currentOffset + 1;
    const showingEnd = Math.min(currentOffset + data.results.length, data.total);

    if (totalPages > 1) {
      paginationContainer.innerHTML = `
        <div style="display: flex; justify-content: space-between; align-items: center;">
          <span style="color: var(--gray);">Showing ${showingStart}-${showingEnd} of ${data.total} results</span>
          <div>
            <button class="secondary" ${currentOffset === 0 ? 'disabled' : ''} onclick="goToPage(${currentPage - 1})">Prev</button>
            <span style="margin: 0 1rem;">Page ${currentPage} of ${totalPages}</span>
            <button class="secondary" ${currentPage >= totalPages ? 'disabled' : ''} onclick="goToPage(${currentPage + 1})">Next</button>
          </div>
        </div>
      `;
    } else {
      paginationContainer.innerHTML = `<span style="color: var(--gray);">Showing ${data.results.length} of ${data.total} results</span>`;
    }

    // Resolve names asynchronously after table is rendered
    resolveAuditNames();
  } catch (error) {
    showError(error.message);
    container.innerHTML = '<div class="error">Failed to load audit events. Admin access required.</div>';
  }
}

function goToPage(page) {
  currentOffset = (page - 1) * limit;
  loadAuditEvents();
}

// Initialize action dropdown with all actions
onEntityTypeChange();
loadAuditEvents();
</script>
{% endblock %}