{% extends "base.html" %}

{% block title %}Asset - Tessera{% endblock %}

{% block content %}
<section>
  <div id="asset-detail">
    <div class="loading">Loading...</div>
  </div>
</section>

<section>
  <h2>Current Schema</h2>
  <div id="current-schema">
    <div class="loading">Loading...</div>
  </div>
</section>

<section>
  <h2>Contract Guarantees</h2>
  <div id="guarantees">
    <div class="loading">Loading...</div>
  </div>
</section>

<section id="audit-history-section">
  <h2>Audit History (Data Quality)</h2>
  <div id="audit-history">
    <div class="loading">Loading...</div>
  </div>
</section>

<section>
  <h2>Active Proposals</h2>
  <div id="active-proposals">
    <div class="loading">Loading...</div>
  </div>
</section>

<section>
  <h2>Proposal History</h2>
  <div id="proposal-history">
    <div class="loading">Loading...</div>
  </div>
</section>

<section>
  <h2>Consumers</h2>
  <div id="consumers">
    <div class="loading">Loading...</div>
  </div>
</section>

<section>
  <h2>Contract History</h2>
  <div id="asset-contracts">
    <div class="loading">Loading...</div>
  </div>
</section>

<section id="asset-dependencies-section">
  <h2>Dependencies (Upstream)</h2>
  <div id="asset-dependencies">
    <div class="loading">Loading...</div>
  </div>
</section>

<section id="asset-dependents-section">
  <h2>Dependents (Downstream)</h2>
  <div id="asset-dependents">
    <div class="loading">Loading...</div>
  </div>
</section>

<!-- Modal Dialogs -->
<div id="modal-overlay" class="modal-overlay" style="display: none;" onclick="closeModal()"></div>

<div id="schema-modal" class="modal" style="display: none;">
  <div class="modal-content">
    <h3>Edit Schema</h3>
    <form onsubmit="submitSchemaChange(event)">
      <label for="schema-editor">JSON Schema</label>
      <textarea id="schema-editor" rows="15" style="font-family: monospace; width: 100%;" required></textarea>

      <label for="schema-team">Publish as Team</label>
      <select id="schema-team" required></select>

      <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
        <button type="submit">Propose Change</button>
        <button type="button" class="secondary" onclick="closeModal()">Cancel</button>
      </div>
    </form>
  </div>
</div>

<div id="register-modal" class="modal" style="display: none;">
  <div class="modal-content">
    <h3>Register as Consumer</h3>
    <p>Register a team as a consumer of this asset. When breaking changes are proposed, your team will be notified and must acknowledge before the change is published.</p>
    <form onsubmit="submitRegistration(event)">
      <label for="register-team">Team to Register</label>
      <select id="register-team" required></select>

      <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
        <button type="submit">Register</button>
        <button type="button" class="secondary" onclick="closeModal()">Cancel</button>
      </div>
    </form>
  </div>
</div>

<div id="guarantees-modal" class="modal" style="display: none;">
  <div class="modal-content">
    <h3>Edit Guarantees</h3>
    <form onsubmit="submitGuarantees(event)">
      <fieldset>
        <legend>Freshness SLA</legend>
        <label for="freshness-minutes">Max Staleness (minutes)</label>
        <input type="number" id="freshness-minutes" min="1" placeholder="e.g., 60">
      </fieldset>

      <fieldset>
        <legend>Volume Requirements</legend>
        <label for="volume-min-rows">Minimum Rows</label>
        <input type="number" id="volume-min-rows" min="0" placeholder="e.g., 1">

        <label for="volume-max-delta">Max Row Delta (%)</label>
        <input type="number" id="volume-max-delta" min="0" max="100" placeholder="e.g., 50">
      </fieldset>

      <label for="guarantees-team">Publish as Team</label>
      <select id="guarantees-team" required></select>

      <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
        <button type="submit">Update Guarantees</button>
        <button type="button" class="secondary" onclick="closeModal()">Cancel</button>
      </div>
    </form>
  </div>
</div>

<div id="publish-modal" class="modal" style="display: none;">
  <div class="modal-content">
    <h3>Publish Initial Contract</h3>
    <form onsubmit="submitInitialContract(event)">
      <label for="initial-schema">JSON Schema</label>
      <textarea id="initial-schema" rows="10" style="font-family: monospace; width: 100%;" required placeholder='{"type": "object", "properties": {"id": {"type": "integer"}, "name": {"type": "string"}}}'></textarea>

      <label for="initial-team">Publish as Team</label>
      <select id="initial-team" required></select>

      <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
        <button type="submit">Publish Contract</button>
        <button type="button" class="secondary" onclick="closeModal()">Cancel</button>
      </div>
    </form>
  </div>
</div>

<div id="owner-change-modal" class="modal" style="display: none;">
  <div class="modal-content">
    <h3>Change Asset Owner</h3>
    <form onsubmit="submitOwnerChange(event)">
      <label for="owner-user-select">Select New Owner</label>
      <select id="owner-user-select" required>
        <option value="">Loading users...</option>
      </select>
      <p id="owner-help-text" style="color: var(--gray); font-size: 0.9em; margin-top: 0.5rem;">
        Only showing users from this asset's team.
        Choose "(Unassign)" to remove the current owner.
      </p>
      <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
        <button type="submit">Update Owner</button>
        <button type="button" class="secondary" onclick="closeModal()">Cancel</button>
      </div>
    </form>
  </div>
</div>

<style>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  backdrop-filter: blur(2px);
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  z-index: 1001;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.modal-content h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}
.modal fieldset {
  border: 1px solid var(--border);
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: 4px;
}
.modal fieldset legend {
  padding: 0 0.5rem;
}
</style>
{% endblock %}

{% block scripts %}
<script>
const assetId = '{{ asset_id }}';
let teamsCache = [];
let activeContractCache = null;
let assetCache = null;

// Recursively collect all properties from a schema, including nested objects
function collectSchemaFields(schema, prefix = '') {
  const results = [];
  const props = schema?.properties || {};
  const required = new Set(schema?.required || []);

  for (const [key, prop] of Object.entries(props)) {
    const fullPath = prefix ? `${prefix}.${key}` : key;
    const isRequired = required.has(key);

    results.push({
      path: fullPath,
      key: key,
      depth: prefix.split('.').filter(Boolean).length,
      prop: prop,
      required: isRequired
    });

    // Recurse into nested objects
    if (prop.type === 'object' && prop.properties) {
      results.push(...collectSchemaFields(prop, fullPath));
    }

    // Handle items in arrays
    if (prop.type === 'array' && prop.items && prop.items.type === 'object' && prop.items.properties) {
      results.push(...collectSchemaFields(prop.items, `${fullPath}[]`));
    }
  }

  return results;
}

function closeModal() {
  document.getElementById('modal-overlay').style.display = 'none';
  document.querySelectorAll('.modal').forEach(m => m.style.display = 'none');
}

function toggleSql(id) {
  const el = document.getElementById(id);
  if (el) {
    el.style.display = el.style.display === 'none' ? 'block' : 'none';
  }
}

// Asset types that support dbt test audit history
const DBT_RESOURCE_TYPES = ['model', 'source', 'seed', 'snapshot'];

// Asset types that have lineage relationships (dependencies/dependents)
const LINEAGE_RESOURCE_TYPES = ['model', 'source', 'seed', 'snapshot'];

function isAuditableAssetType(resourceType) {
  return DBT_RESOURCE_TYPES.includes(resourceType);
}

function hasLineage(resourceType) {
  return LINEAGE_RESOURCE_TYPES.includes(resourceType);
}

async function loadAuditHistory(resourceType) {
  const section = document.getElementById('audit-history-section');
  const container = document.getElementById('audit-history');

  // Hide audit history section for non-dbt asset types
  if (!isAuditableAssetType(resourceType)) {
    section.style.display = 'none';
    return;
  }

  section.style.display = 'block';

  try {
    const response = await fetch(`/api/v1/assets/${assetId}/audit-history?limit=10`);
    if (!response.ok) {
      container.innerHTML = '<div class="empty">No audit history available.</div>';
      return;
    }
    const data = await response.json();
    const runs = data.runs || [];

    if (runs.length === 0) {
      container.innerHTML = `
        <div class="empty">
          No audit runs recorded yet.
          <p style="margin-top: 0.5rem; color: var(--gray); font-size: 0.9em;">
            Configure dbt to report test results using <code>scripts/report_to_tessera.py</code>
          </p>
        </div>
      `;
      return;
    }

    // Calculate stats
    const passCount = runs.filter(r => r.status === 'passed').length;
    const failCount = runs.filter(r => r.status === 'failed').length;
    const passRate = runs.length > 0 ? Math.round((passCount / runs.length) * 100) : 0;

    container.innerHTML = `
      <div class="card" style="margin-bottom: 1rem;">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 1rem; text-align: center;">
          <div>
            <div style="font-size: 2rem; font-weight: bold; color: var(--success);">${passCount}</div>
            <div style="color: var(--gray);">Passed</div>
          </div>
          <div>
            <div style="font-size: 2rem; font-weight: bold; color: var(--error);">${failCount}</div>
            <div style="color: var(--gray);">Failed</div>
          </div>
          <div>
            <div style="font-size: 2rem; font-weight: bold;">${passRate}%</div>
            <div style="color: var(--gray);">Pass Rate</div>
          </div>
          <div>
            <div style="font-size: 2rem; font-weight: bold;">${data.total_runs}</div>
            <div style="color: var(--gray);">Total Runs</div>
          </div>
        </div>
      </div>
      <table>
        <thead>
          <tr>
            <th>Status</th>
            <th>Checked</th>
            <th>Passed</th>
            <th>Failed</th>
            <th>Source</th>
            <th>Run ID</th>
            <th>When</th>
          </tr>
        </thead>
        <tbody>
          ${runs.map(r => `
            <tr>
              <td>
                <span class="status ${r.status === 'passed' ? 'status-active' : 'status-deprecated'}" style="font-weight: bold;">
                  ${r.status === 'passed' ? '✓' : '✗'} ${r.status}
                </span>
              </td>
              <td>${r.guarantees_checked}</td>
              <td style="color: var(--success);">${r.guarantees_passed}</td>
              <td style="color: ${r.guarantees_failed > 0 ? 'var(--error)' : 'inherit'};">${r.guarantees_failed}</td>
              <td><code>${escapeHtml(r.triggered_by)}</code></td>
              <td><code style="font-size: 0.8em;">${r.run_id ? escapeHtml(r.run_id.substring(0, 12)) : '-'}</code></td>
              <td>${formatDate(r.run_at)}</td>
            </tr>
          `).join('')}
        </tbody>
      </table>
    `;
  } catch (e) {
    container.innerHTML = '<div class="empty">Failed to load audit history.</div>';
  }
}

function showModal(id) {
  document.getElementById('modal-overlay').style.display = 'block';
  document.getElementById(id).style.display = 'block';
}

async function loadTeams() {
  if (teamsCache.length === 0) {
    const data = await api.listTeams({ limit: 100 });
    teamsCache = data.results || [];
  }
  return teamsCache;
}

function populateTeamSelect(selectId) {
  const select = document.getElementById(selectId);
  select.innerHTML = teamsCache.map(t =>
    `<option value="${t.id}">${escapeHtml(t.name)}</option>`
  ).join('');
}

async function proposeSchemaChange() {
  const contracts = await api.getAssetContracts(assetId);
  activeContractCache = contracts.results?.find(c => c.status === 'active');

  if (!activeContractCache) {
    showError('No active contract to modify. Publish a contract first.');
    return;
  }

  await loadTeams();
  populateTeamSelect('schema-team');

  document.getElementById('schema-editor').value = JSON.stringify(activeContractCache.schema_def, null, 2);
  showModal('schema-modal');
}

async function submitSchemaChange(event) {
  event.preventDefault();

  const schemaStr = document.getElementById('schema-editor').value;
  const teamId = document.getElementById('schema-team').value;

  let newSchema;
  try {
    newSchema = JSON.parse(schemaStr);
  } catch (e) {
    showError('Invalid JSON: ' + e.message);
    return;
  }

  try {
    // Don't specify version - API will auto-increment based on change type
    const result = await api.publishContract(assetId, {
      schema: newSchema,
      compatibility_mode: activeContractCache.compatibility_mode,
    }, teamId);

    closeModal();

    if (result.action === 'proposal_created') {
      showSuccess('Breaking change detected! Proposal created.');
      window.location.href = `/proposals/${result.proposal.id}`;
    } else {
      showSuccess('Schema updated successfully!');
      loadAssetDetail();
    }
  } catch (error) {
    showError(error.message);
  }
}

async function registerAsConsumer() {
  const contracts = await api.getAssetContracts(assetId);
  activeContractCache = contracts.results?.find(c => c.status === 'active');

  if (!activeContractCache) {
    showError('No active contract to register for. Asset needs a published contract first.');
    return;
  }

  await loadTeams();
  populateTeamSelect('register-team');
  showModal('register-modal');
}

async function submitRegistration(event) {
  event.preventDefault();

  const teamId = document.getElementById('register-team').value;
  const team = teamsCache.find(t => t.id === teamId);

  try {
    await api.createRegistration(activeContractCache.id, {
      consumer_team_id: teamId,
    });
    closeModal();
    showSuccess(`${team.name} is now registered as a consumer and will be notified of breaking changes!`);
    loadAssetDetail();
  } catch (error) {
    showError(error.message);
  }
}

async function editGuarantees() {
  const contracts = await api.getAssetContracts(assetId);
  activeContractCache = contracts.results?.find(c => c.status === 'active');

  if (!activeContractCache) {
    showError('No active contract. Publish a contract first before adding guarantees.');
    return;
  }

  await loadTeams();
  populateTeamSelect('guarantees-team');

  const g = activeContractCache.guarantees || {};
  const freshness = g.freshness || {};
  const volume = g.volume || {};

  document.getElementById('freshness-minutes').value = freshness.max_staleness_minutes || '';
  document.getElementById('volume-min-rows').value = volume.min_rows || '';
  document.getElementById('volume-max-delta').value = volume.max_row_delta_pct || '';

  showModal('guarantees-modal');
}

async function submitGuarantees(event) {
  event.preventDefault();

  const freshnessMinutes = document.getElementById('freshness-minutes').value;
  const volumeMinRows = document.getElementById('volume-min-rows').value;
  const volumeMaxDelta = document.getElementById('volume-max-delta').value;
  const teamId = document.getElementById('guarantees-team').value;

  const newGuarantees = {};
  if (freshnessMinutes) {
    newGuarantees.freshness = { max_staleness_minutes: parseInt(freshnessMinutes, 10) };
  }
  if (volumeMinRows || volumeMaxDelta) {
    newGuarantees.volume = {};
    if (volumeMinRows) newGuarantees.volume.min_rows = parseInt(volumeMinRows, 10);
    if (volumeMaxDelta) newGuarantees.volume.max_row_delta_pct = parseInt(volumeMaxDelta, 10);
  }

  try {
    // Don't specify version - API will auto-increment
    const result = await api.publishContract(assetId, {
      schema: activeContractCache.schema_def,
      compatibility_mode: activeContractCache.compatibility_mode,
      guarantees: newGuarantees,
    }, teamId);
    closeModal();
    const newVersion = result.contract?.version || 'new version';
    showSuccess(`Guarantees updated! New contract version: ${newVersion}`);
    loadAssetDetail();
  } catch (error) {
    showError(error.message);
  }
}

async function publishInitialContract() {
  await loadTeams();
  populateTeamSelect('initial-team');
  document.getElementById('initial-schema').value = '';
  showModal('publish-modal');
}

async function submitInitialContract(event) {
  event.preventDefault();

  const schemaStr = document.getElementById('initial-schema').value;
  const teamId = document.getElementById('initial-team').value;

  let schema;
  try {
    schema = JSON.parse(schemaStr);
  } catch (e) {
    showError('Invalid JSON: ' + e.message);
    return;
  }

  try {
    // Don't specify version - API will auto-generate (1.0.0 for first contract)
    await api.publishContract(assetId, {
      schema: schema,
      compatibility_mode: 'backward',
    }, teamId);
    closeModal();
    showSuccess('Contract published!');
    loadAssetDetail();
  } catch (error) {
    showError(error.message);
  }
}

async function loadAssetDetail() {
  try {
    const asset = await api.getAsset(assetId);
    assetCache = asset;  // Store for later use (e.g., Change Owner modal)
    const contracts = await api.getAssetContracts(assetId);
    const activeContract = contracts.results?.find(c => c.status === 'active');

    // Extract metadata
    const metadata = asset.metadata_ || asset.metadata || {};
    const tags = metadata.tags || [];
    const description = metadata.description || asset.description || '';
    const dbtFqn = metadata.dbt_fqn || [];
    const path = metadata.path || '';
    // Resource type is on the asset object, not metadata
    const resourceType = asset.resource_type || metadata.resource_type || 'model';
    const isSeed = resourceType === 'seed';

    // Resource type badge styling - support all asset types
    const typeColors = {
      'model': { bg: '#e3f2fd', color: '#1565c0', icon: '📊' },
      'seed': { bg: '#fff3e0', color: '#e65100', icon: '📁' },
      'source': { bg: '#f3e5f5', color: '#7b1fa2', icon: '🔌' },
      'snapshot': { bg: '#e8f5e9', color: '#2e7d32', icon: '📸' },
      'api_endpoint': { bg: '#fff8e1', color: '#f57c00', icon: '🔗' },
      'graphql_query': { bg: '#fce4ec', color: '#c2185b', icon: '◈' },
      'kafka_topic': { bg: '#e0f2f1', color: '#00796b', icon: '📨' },
    };
    const typeStyle = typeColors[resourceType] || { bg: '#f5f5f5', color: '#616161', icon: '📦' };

    document.getElementById('asset-detail').innerHTML = `
      <div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;">
        <div>
          <h2 style="margin-bottom: 0.5rem;">
            ${escapeHtml(asset.fqn)}
            <span style="display: inline-block; padding: 0.25rem 0.6rem; margin-left: 0.5rem; font-size: 0.7em; font-weight: normal; background: ${typeStyle.bg}; color: ${typeStyle.color}; border-radius: 4px; vertical-align: middle;">
              ${typeStyle.icon} ${resourceType}
            </span>
          </h2>
          <p style="color: var(--gray); margin-top: 0;">
            Owned by <a href="/teams/${asset.owner_team_id}">${escapeHtml(asset.owner_team_name || asset.owner_team_id)}</a>
            ${asset.owner_user_name
              ? ` (<a href="/users/${asset.owner_user_id}">${escapeHtml(asset.owner_user_name)}</a>)`
              : ' <span style="color: var(--warning);">(No individual owner)</span>'
            }
            <button class="secondary" onclick="showChangeOwnerModal()" style="margin-left: 0.5rem; padding: 0.2rem 0.5rem; font-size: 0.85em;">Change Owner</button>
          </p>
        </div>
        <div style="display: flex; gap: 0.5rem;">
          ${activeContract
            ? `<button onclick="proposeSchemaChange()">Propose Schema Change</button>`
            : `<button onclick="publishInitialContract()">Publish First Contract</button>`
          }
        </div>
      </div>

      <div class="card">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
          <div>
            <strong>Active Version</strong><br>
            ${activeContract
              ? `<a href="/contracts/${activeContract.id}">${escapeHtml(activeContract.version)}</a>`
              : '<span style="color: var(--gray);">No contract</span>'
            }
          </div>
          <div>
            <strong>Compatibility Mode</strong><br>
            ${activeContract ? escapeHtml(activeContract.compatibility_mode) : 'N/A'}
          </div>
          <div>
            <strong>Environment</strong><br>
            ${escapeHtml(asset.environment || 'production')}
          </div>
          <div>
            <strong>Created</strong><br>
            ${formatDate(asset.created_at)}
          </div>
          <div>
            <strong>Last Modified</strong><br>
            ${activeContract ? formatDate(activeContract.published_at) : formatDate(asset.created_at)}
          </div>
        </div>

        ${description ? `<p style="margin-top: 1rem;"><strong>Description:</strong> ${escapeHtml(description)}</p>` : ''}

        ${tags.length > 0 ? `
          <div style="margin-top: 1rem;">
            <strong>Tags:</strong>
            ${tags.map(t => `<span class="tag" style="background: var(--bg-secondary); padding: 0.2rem 0.5rem; margin: 0.2rem; border-radius: 3px; display: inline-block;">${escapeHtml(t)}</span>`).join('')}
          </div>
        ` : ''}

        ${path ? `<p style="margin-top: 0.5rem; color: var(--gray);"><strong>Path:</strong> <code>${escapeHtml(path)}</code></p>` : ''}
      </div>

      <div style="margin-top: 1rem;">
        <a href="/assets">&larr; Back to Assets</a>
      </div>
    `;

    // Current schema
    const schemaContainer = document.getElementById('current-schema');
    if (activeContract && activeContract.schema_def) {
      const fields = collectSchemaFields(activeContract.schema_def);

      if (fields.length > 0) {
        schemaContainer.innerHTML = `
          <table>
            <thead>
              <tr>
                <th>Field</th>
                <th>Type</th>
                <th>Required</th>
                <th>Details</th>
              </tr>
            </thead>
            <tbody>
              ${fields.map(field => {
                const depth = (field.path.match(/\./g) || []).length;
                const indent = '&nbsp;&nbsp;'.repeat(depth);
                const displayName = field.path.split('.').pop().replace('[]', '');

                let typeStr = field.prop.type || 'unknown';
                if (field.prop.type === 'array' && field.prop.items) {
                  typeStr = 'array[' + (field.prop.items.type || 'any') + ']';
                }

                const details = [];
                if (field.prop.description) details.push(field.prop.description);
                if (field.prop.format) details.push('format: ' + field.prop.format);
                if (field.prop.enum) details.push('enum: [' + field.prop.enum.join(', ') + ']');
                if (field.prop.minimum !== undefined) details.push('min: ' + field.prop.minimum);
                if (field.prop.maximum !== undefined) details.push('max: ' + field.prop.maximum);

                const bgStyle = depth > 0 ? ' style="background: #fafafa;"' : '';
                const pathLabel = depth > 0 ? '<small style="color: var(--gray); margin-left: 0.5rem;">' + escapeHtml(field.path) + '</small>' : '';
                const reqHtml = field.required ? '<span style="color: red;">Yes</span>' : 'No';
                const detailsHtml = details.length > 0 ? '<small>' + escapeHtml(details.join(' | ')) + '</small>' : '<em>-</em>';

                return '<tr' + bgStyle + '>' +
                  '<td>' + indent + '<code>' + escapeHtml(displayName) + '</code>' + pathLabel + '</td>' +
                  '<td><code>' + escapeHtml(typeStr) + '</code></td>' +
                  '<td>' + reqHtml + '</td>' +
                  '<td>' + detailsHtml + '</td>' +
                  '</tr>';
              }).join('')}
            </tbody>
          </table>
        `;
      } else {
        schemaContainer.innerHTML = '<div class="empty">No columns defined in schema.</div>';
      }
    } else {
      if (isSeed) {
        schemaContainer.innerHTML = `
          <div class="empty" style="background: ${typeStyle.bg}; border: 1px solid ${typeStyle.color}33;">
            <strong>${typeStyle.icon} This is a seed (raw data file)</strong>
            <p style="margin-top: 0.5rem; color: var(--gray);">
              Seeds are CSV files without schema definitions in dbt. They can be referenced by downstream models but don't have formal contracts.
            </p>
          </div>
        `;
      } else {
        schemaContainer.innerHTML = '<div class="empty">No active contract. <button class="secondary" onclick="publishInitialContract()">Publish First Contract</button></div>';
      }
    }

    // Guarantees - split into dbt-extracted (read-only) and SLAs (editable)
    const guaranteesContainer = document.getElementById('guarantees');
    if (activeContract && activeContract.guarantees) {
      const g = activeContract.guarantees;
      let html = '';

      // SLAs section (editable)
      const hasSLAs = g.freshness || g.volume;
      html += `
        <div class="card" style="margin-bottom: 1rem;">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
            <strong>SLA Configuration</strong>
            <button class="secondary" onclick="editGuarantees()" style="padding: 0.25rem 0.5rem; font-size: 0.85em;">Edit SLAs</button>
          </div>
          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
            ${g.freshness ? `
              <div>
                <strong>Freshness</strong><br>
                Max staleness: ${g.freshness.max_staleness_minutes || '?'} minutes
              </div>
            ` : '<div><span style="color: var(--gray);">No freshness SLA</span></div>'}
            ${g.volume ? `
              <div>
                <strong>Volume</strong><br>
                Min rows: ${g.volume.min_rows || '?'}<br>
                Max delta: ${g.volume.max_row_delta_pct || '?'}%
              </div>
            ` : '<div><span style="color: var(--gray);">No volume requirements</span></div>'}
          </div>
        </div>
      `;

      // dbt-extracted guarantees (read-only) - only show for dbt asset types
      const DBT_RESOURCE_TYPES = ['model', 'source', 'seed', 'snapshot'];
      const isDbtAsset = DBT_RESOURCE_TYPES.includes(resourceType);
      const hasDbtGuarantees = g.nullability || g.accepted_values || (g.custom && g.custom.length > 0);

      // Only show this section for dbt assets with guarantees
      if (hasDbtGuarantees && isDbtAsset) {
        html += `
          <div class="card">
            <div style="margin-bottom: 0.75rem;">
              <strong>From dbt Tests</strong>
              <span style="color: var(--gray); font-size: 0.85em; margin-left: 0.5rem;">(read-only - managed in dbt)</span>
            </div>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem;">
        `;

        if (g.nullability) {
          html += `
            <div>
              <strong style="color: var(--primary);">not_null</strong><br>
              ${Object.entries(g.nullability).map(([col, val]) => `<code>${escapeHtml(col)}</code>: ${val}`).join('<br>')}
            </div>
          `;
        }
        if (g.accepted_values) {
          html += `
            <div>
              <strong style="color: var(--primary);">accepted_values</strong><br>
              ${Object.entries(g.accepted_values).map(([col, vals]) => `<code>${escapeHtml(col)}</code>: [${vals.map(v => escapeHtml(v)).join(', ')}]`).join('<br>')}
            </div>
          `;
        }
        if (g.custom && g.custom.length > 0) {
          html += `<div style="grid-column: 1 / -1;"><strong style="color: var(--primary);">Custom Tests</strong>`;
          for (const t of g.custom) {
            if (t.type === 'singular' && t.sql) {
              // Singular test with expandable SQL
              const testId = 'sql-' + (t.name || 'test').replace(/[^a-z0-9]/gi, '_');
              html += `
                <div style="margin-top: 0.5rem; padding: 0.5rem; background: var(--bg-secondary); border-radius: 4px;">
                  <div style="display: flex; justify-content: space-between; align-items: center;">
                    <span><strong>${escapeHtml(t.name || 'Singular Test')}</strong></span>
                    <button class="secondary" onclick="toggleSql('${testId}')" style="padding: 0.2rem 0.5rem; font-size: 0.8em;">Show SQL</button>
                  </div>
                  ${t.description ? `<div style="color: var(--gray); font-size: 0.9em;">${escapeHtml(t.description)}</div>` : ''}
                  <pre id="${testId}" style="display: none; margin-top: 0.5rem; padding: 0.5rem; background: #1e1e1e; color: #d4d4d4; border-radius: 4px; overflow-x: auto; font-size: 0.85em;"><code>${escapeHtml(t.sql)}</code></pre>
                </div>
              `;
            } else {
              // Regular custom test
              html += `
                <div style="margin-top: 0.5rem;">
                  <code>${escapeHtml(t.type)}</code>${t.column ? ` on <code>${escapeHtml(t.column)}</code>` : ''}
                  ${t.config && t.config.expression ? `<br><span style="color: var(--gray); font-size: 0.9em;">Expression: ${escapeHtml(t.config.expression)}</span>` : ''}
                </div>
              `;
            }
          }
          html += `</div>`;
        }
        html += '</div></div>';
      }

      guaranteesContainer.innerHTML = html;
    } else if (activeContract) {
      guaranteesContainer.innerHTML = '<div class="empty">No guarantees defined for this contract. <button class="secondary" onclick="editGuarantees()">Add SLAs</button></div>';
    } else {
      guaranteesContainer.innerHTML = '<div class="empty">No active contract. Publish a contract first to add guarantees.</div>';
    }

    // Audit History - only shown for dbt asset types
    await loadAuditHistory(asset.resource_type);

    // Active Proposals
    const proposalsContainer = document.getElementById('active-proposals');
    try {
      const proposalsData = await api.listProposals({ asset_id: assetId, status: 'pending' });
      const proposals = proposalsData.results || [];

      if (proposals.length > 0) {
        proposalsContainer.innerHTML = `
          <div class="card" style="background: #fff3cd; border-color: #ffc107;">
            <p style="margin-bottom: 0.5rem;"><strong>${proposals.length}</strong> pending proposal(s) for this asset:</p>
            <table>
              <thead>
                <tr>
                  <th>Change Type</th>
                  <th>Breaking Changes</th>
                  <th>Acknowledgments</th>
                  <th>Proposed</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                ${proposals.map(p => {
                  const changes = p.breaking_changes || [];
                  const changeCount = p.breaking_changes_count || changes.length || 0;
                  const changeSummary = changes.slice(0, 3).map(c =>
                    `${c.type || c.change_type}: ${c.path || c.column || 'schema'}`
                  ).join(', ');
                  return `
                  <tr>
                    <td><span class="status status-deprecated">${escapeHtml(p.change_type || 'major')}</span></td>
                    <td>
                      <strong style="color: var(--error);">${changeCount}</strong>
                      ${changeSummary ? `<br><small style="color: var(--gray);">${escapeHtml(changeSummary)}${changes.length > 3 ? '...' : ''}</small>` : ''}
                    </td>
                    <td>
                      ${p.total_consumers > 0
                        ? `<span style="color: ${p.acknowledgment_count >= p.total_consumers ? 'green' : 'orange'};">${p.acknowledgment_count || 0}/${p.total_consumers}</span>`
                        : '<span style="color: var(--gray);">N/A</span>'
                      }
                    </td>
                    <td>${formatDate(p.proposed_at)}</td>
                    <td><a href="/proposals/${p.id}">Review</a></td>
                  </tr>
                `}).join('')}
              </tbody>
            </table>
          </div>
        `;
      } else {
        proposalsContainer.innerHTML = '<div class="empty">No pending proposals for this asset.</div>';
      }
    } catch (e) {
      proposalsContainer.innerHTML = '<div class="empty">No proposals.</div>';
    }

    // Proposal History (approved/rejected)
    const proposalHistoryContainer = document.getElementById('proposal-history');
    try {
      // Fetch all proposals for this asset (no status filter)
      const allProposalsData = await api.listProposals({ asset_id: assetId });
      const allProposals = allProposalsData.results || [];

      // Filter to only show resolved proposals (approved/rejected)
      const resolvedProposals = allProposals.filter(p => p.status === 'approved' || p.status === 'rejected');

      if (resolvedProposals.length > 0) {
        proposalHistoryContainer.innerHTML = `
          <table>
            <thead>
              <tr>
                <th>Status</th>
                <th>Change Type</th>
                <th>Breaking Changes</th>
                <th>Proposed</th>
                <th>Resolved</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              ${resolvedProposals.map(p => {
                const statusColor = p.status === 'approved' ? 'var(--success)' : 'var(--error)';
                const statusIcon = p.status === 'approved' ? '✓' : '✗';
                const changeCount = p.breaking_changes_count || (p.breaking_changes || []).length || 0;
                return `
                <tr>
                  <td>
                    <span style="color: ${statusColor}; font-weight: bold;">
                      ${statusIcon} ${p.status}
                    </span>
                  </td>
                  <td><span class="status status-deprecated">${escapeHtml(p.change_type || 'major')}</span></td>
                  <td><strong>${changeCount}</strong></td>
                  <td>${formatDate(p.proposed_at)}</td>
                  <td>${p.resolved_at ? formatDate(p.resolved_at) : '-'}</td>
                  <td><a href="/proposals/${p.id}">View</a></td>
                </tr>
              `}).join('')}
            </tbody>
          </table>
        `;
      } else {
        proposalHistoryContainer.innerHTML = '<div class="empty">No resolved proposals.</div>';
      }
    } catch (e) {
      proposalHistoryContainer.innerHTML = '<div class="empty">No proposal history.</div>';
    }

    // Consumers (registrations)
    const consumersContainer = document.getElementById('consumers');
    if (activeContract) {
      try {
        const regs = await api.getContractRegistrations(activeContract.id);
        if (regs.results && regs.results.length > 0) {
          consumersContainer.innerHTML = `
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
              <span><strong>${regs.results.length}</strong> team(s) depend on this asset:</span>
              <button class="secondary" onclick="registerAsConsumer()">+ Register Team as Consumer</button>
            </div>
            <table>
              <thead>
                <tr>
                  <th>Consumer Team</th>
                  <th>Registered</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                ${regs.results.map(r => `
                  <tr>
                    <td><a href="/teams/${r.consumer_team_id}">${escapeHtml(r.consumer_team_name || r.consumer_team_id)}</a></td>
                    <td>${formatDate(r.registered_at)}</td>
                    <td><span class="status status-${r.status}">${r.status}</span></td>
                  </tr>
                `).join('')}
              </tbody>
            </table>
          `;
        } else {
          consumersContainer.innerHTML = '<div class="empty">No teams have registered as consumers of this asset. <button class="secondary" onclick="registerAsConsumer()">+ Register Team as Consumer</button></div>';
        }
      } catch (e) {
        consumersContainer.innerHTML = '<div class="empty">No consumers. <button class="secondary" onclick="registerAsConsumer()">+ Register Team as Consumer</button></div>';
      }
    } else {
      consumersContainer.innerHTML = '<div class="empty">No active contract - publish a contract first to enable consumer registration.</div>';
    }

    // Contract history
    const contractsContainer = document.getElementById('asset-contracts');
    if (!contracts.results || contracts.results.length === 0) {
      contractsContainer.innerHTML = '<div class="empty">No contracts published for this asset.</div>';
    } else {
      contractsContainer.innerHTML = `
        <table>
          <thead>
            <tr>
              <th>Version</th>
              <th>Status</th>
              <th>Compatibility</th>
              <th>Published</th>
              <th>Publisher</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
            ${contracts.results.map(c => `
              <tr>
                <td><a href="/contracts/${c.id}">${escapeHtml(c.version)}</a></td>
                <td><span class="status status-${c.status}">${c.status}</span></td>
                <td>${escapeHtml(c.compatibility_mode)}</td>
                <td>${formatDate(c.published_at)}</td>
                <td>
                  <a href="/teams/${c.published_by}">${escapeHtml(c.published_by_team_name || c.published_by)}</a>
                  ${c.published_by_user_name
                    ? `<br><small style="color: var(--gray);">by <a href="/users/${c.published_by_user_id}">${escapeHtml(c.published_by_user_name)}</a></small>`
                    : ''
                  }
                </td>
                <td><a href="/contracts/${c.id}">View</a></td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      `;
    }

    // Dependencies - only show for asset types with lineage
    const depsSection = document.getElementById('asset-dependencies-section');
    const depsContainer = document.getElementById('asset-dependencies');

    if (!hasLineage(resourceType)) {
      depsSection.style.display = 'none';
    } else {
      depsSection.style.display = 'block';
      try {
        const depsData = await api.getAssetDependencies(assetId);
        const deps = depsData.results || [];

        if (deps.length === 0) {
          // Try to get dependencies from metadata
          const metaDeps = metadata.depends_on || [];
          if (metaDeps.length > 0) {
            // Search for assets by FQN to make them clickable
            const depLinks = await Promise.all(metaDeps.map(async (fqn) => {
              try {
                const searchResult = await api.listAssets({ fqn: fqn, limit: 1 });
                if (searchResult.results && searchResult.results.length > 0) {
                  const depAsset = searchResult.results[0];
                  return `<li><a href="/assets/${depAsset.id}"><code>${escapeHtml(fqn)}</code></a></li>`;
                }
              } catch (e) { /* ignore */ }
              return `<li><code>${escapeHtml(fqn)}</code> <span style="color: var(--gray);">(not in Tessera)</span></li>`;
            }));
            depsContainer.innerHTML = `
              <ul>
                ${depLinks.join('')}
              </ul>
            `;
          } else {
            depsContainer.innerHTML = '<div class="empty">No upstream dependencies.</div>';
          }
        } else {
          depsContainer.innerHTML = `
            <table>
              <thead>
                <tr>
                  <th>Depends On</th>
                  <th>Type</th>
                  <th>Created</th>
                </tr>
              </thead>
              <tbody>
                ${deps.map(d => `
                  <tr>
                    <td><a href="/assets/${d.depends_on_asset_id}">${escapeHtml(d.depends_on_fqn || d.depends_on_asset_id)}</a></td>
                    <td>${escapeHtml(d.dependency_type)}</td>
                    <td>${formatDate(d.created_at)}</td>
                  </tr>
                `).join('')}
              </tbody>
            </table>
          `;
        }
      } catch (e) {
        depsContainer.innerHTML = '<div class="empty">No dependencies.</div>';
      }
    }

    // Downstream dependents - only show for asset types with lineage
    const dependentsSection = document.getElementById('asset-dependents-section');
    const dependentsContainer = document.getElementById('asset-dependents');

    if (!hasLineage(resourceType)) {
      dependentsSection.style.display = 'none';
    } else {
      dependentsSection.style.display = 'block';
      try {
        const lineageData = await api.getAssetLineage(assetId);
        const downstreamAssets = lineageData.downstream_assets || [];

        if (downstreamAssets.length === 0) {
          dependentsContainer.innerHTML = '<div class="empty">No downstream dependents. No models reference this asset.</div>';
        } else {
          dependentsContainer.innerHTML = `
            <p style="margin-bottom: 0.5rem;"><strong>${downstreamAssets.length}</strong> model(s) depend on this asset:</p>
            <table>
              <thead>
                <tr>
                  <th>Dependent Asset</th>
                  <th>Type</th>
                  <th>Owner Team</th>
                </tr>
              </thead>
              <tbody>
                ${downstreamAssets.map(d => `
                  <tr>
                    <td><a href="/assets/${d.asset_id}">${escapeHtml(d.asset_fqn || d.asset_id)}</a></td>
                    <td>${escapeHtml(d.dependency_type || 'consumes')}</td>
                    <td>${escapeHtml(d.owner_team || 'Unknown')}</td>
                  </tr>
                `).join('')}
              </tbody>
            </table>
          `;
        }
      } catch (e) {
        dependentsContainer.innerHTML = '<div class="empty">No downstream dependents.</div>';
      }
    }
  } catch (error) {
    showError(error.message);
    document.getElementById('asset-detail').innerHTML = '<div class="error">Asset not found</div>';
  }
}

async function showChangeOwnerModal() {
  if (!assetCache) {
    showError('Asset not loaded. Please refresh the page.');
    return;
  }
  // Fetch users filtered by the asset's team
  const data = await api.listUsers({ team_id: assetCache.owner_team_id, limit: 100 });
  const teamUsers = data.results || [];
  const teamName = assetCache.owner_team_name || 'this team';

  const select = document.getElementById('owner-user-select');
  select.innerHTML = '<option value="">(Unassign - no owner)</option>' +
    teamUsers.map(u => `<option value="${u.id}">${escapeHtml(u.name)}</option>`).join('');

  // Update help text with team name
  document.getElementById('owner-help-text').innerHTML =
    `Only showing users from <strong>${escapeHtml(teamName)}</strong>. Choose "(Unassign)" to remove the current owner.`;

  showModal('owner-change-modal');
}

async function submitOwnerChange(event) {
  event.preventDefault();
  const userId = document.getElementById('owner-user-select').value;

  try {
    await api.updateAsset(assetId, {
      owner_user_id: userId || null
    });
    closeModal();
    showSuccess('Owner updated successfully!');
    loadAssetDetail();
  } catch (error) {
    showError(error.message);
  }
}

loadAssetDetail();
</script>
{% endblock %}