{% extends "base.html" %}

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

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

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

<section>
  <h2>Breaking Changes</h2>
  <div id="breaking-changes">
    <div class="loading">Loading...</div>
  </div>
</section>

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

<section>
  <h2>Affected Downstream Teams (via Lineage)</h2>
  <div id="affected-parties">
    <div class="loading">Loading...</div>
  </div>
</section>

<section>
  <h2>Objections</h2>
  <div id="objections">
    <div class="loading">Loading...</div>
  </div>
</section>

<section>
  <h2>Acknowledgments</h2>
  <div id="acknowledgments">
    <div class="loading">Loading...</div>
  </div>
</section>

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

<div id="publish-modal" class="modal" style="display: none;">
  <div class="modal-content">
    <h3>Publish Contract</h3>
    <form onsubmit="submitPublish(event)">
      <label for="publish-version">Version</label>
      <input type="text" id="publish-version" pattern="^\d+\.\d+\.\d+.*$" placeholder="e.g., 2.0.0" required>
      <small style="color: var(--gray);">Use semantic versioning (e.g., 2.0.0)</small>

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

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

<div id="force-modal" class="modal" style="display: none;">
  <div class="modal-content">
    <h3>Force Approve Proposal</h3>
    <p style="color: var(--error);">This will approve the breaking change WITHOUT all consumer acknowledgments. Consumers may experience breaking changes!</p>
    <form onsubmit="submitForceApprove(event)">
      <label for="force-team">Approve as Team</label>
      <select id="force-team" required></select>

      <div style="margin-top: 1rem; display: flex; gap: 0.5rem;">
        <button type="submit" style="background: var(--error);">Force Approve</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.5);
  z-index: 1000;
}
.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.5rem;
  z-index: 1001;
  max-width: 500px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}
.modal-content h3 {
  margin-top: 0;
  margin-bottom: 1rem;
}
</style>
{% endblock %}

{% block scripts %}
<script>
const proposalId = '{{ proposal_id }}';
let teamsCache = [];

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

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 withdrawProposal() {
  if (!confirm('Withdraw this proposal?')) return;

  try {
    await api.withdrawProposal(proposalId);
    loadProposalDetail();
  } catch (error) {
    showError(error.message);
  }
}

async function acknowledgeProposal(teamId, teamName, response = 'approved') {
  const action = response === 'blocked' ? 'BLOCK' : 'acknowledge';
  const message = response === 'blocked'
    ? `Block this proposal as team "${teamName}"?\n\nThis will REJECT the proposal and prevent the breaking change.`
    : `Acknowledge this breaking change as team "${teamName}"?\n\nThis confirms your team accepts the impact.`;

  if (!confirm(message)) return;

  try {
    await api.acknowledgeProposal(proposalId, teamId, response);
    loadProposalDetail();
  } catch (error) {
    showError(error.message);
  }
}

async function approveAndPublish() {
  await loadTeams();
  populateTeamSelect('publish-team');
  document.getElementById('publish-version').value = '2.0.0';
  showModal('publish-modal');
}

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

  const version = document.getElementById('publish-version').value;
  const teamId = document.getElementById('publish-team').value;

  if (!/^\d+\.\d+\.\d+/.test(version)) {
    showError('Invalid version format. Use semantic versioning (e.g., 2.0.0)');
    return;
  }

  try {
    await api.publishFromProposal(proposalId, version, teamId);
    closeModal();
    showSuccess('Contract published successfully!');
    loadProposalDetail();
  } catch (error) {
    showError(error.message);
  }
}

async function forceApprove() {
  await loadTeams();
  populateTeamSelect('force-team');
  showModal('force-modal');
}

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

  const teamId = document.getElementById('force-team').value;

  try {
    await api.forceApproveProposal(proposalId, teamId);
    closeModal();
    loadProposalDetail();
  } catch (error) {
    showError(error.message);
  }
}

// Icons for different change types
const CHANGE_ICONS = {
  added: '+',
  removed: '-',
  modified: '~',
  type_changed: 'T',
  required_added: '!',
  required_removed: '?',
  enum_removed: 'E',
  unchanged: '='
};

function getChangeBadge(type, label) {
  const icon = CHANGE_ICONS[type] || '';
  const cssClass = {
    added: 'change-new',
    removed: 'change-removed',
    modified: 'change-modified',
    type_changed: 'change-breaking',
    required_added: 'change-breaking',
    required_removed: 'change-compatible',
    enum_removed: 'change-breaking',
    unchanged: 'change-unchanged'
  }[type] || 'change-unchanged';

  return `<span class="change-badge ${cssClass}">${icon} ${label}</span>`;
}

// Recursively collect all properties from a schema, including nested objects
function collectSchemaProperties(schema, prefix = '', requiredSet = new Set()) {
  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(...collectSchemaProperties(prop, fullPath, new Set(prop.required || [])));
    }

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

  return results;
}

function renderSchemaDiff(currentSchema, proposedSchema) {
  const currentFlat = collectSchemaProperties(currentSchema);
  const proposedFlat = collectSchemaProperties(proposedSchema);

  const currentMap = new Map(currentFlat.map(p => [p.path, p]));
  const proposedMap = new Map(proposedFlat.map(p => [p.path, p]));

  const allPaths = new Set([...currentMap.keys(), ...proposedMap.keys()]);
  const sortedPaths = [...allPaths].sort();

  let html = '<table class="schema-diff-table"><thead><tr><th>Field Path</th><th>Current Type</th><th>Proposed Type</th><th>Change</th></tr></thead><tbody>';

  for (const path of sortedPaths) {
    const current = currentMap.get(path);
    const proposed = proposedMap.get(path);

    const depth = (path.match(/\./g) || []).length;
    const indent = '&nbsp;&nbsp;'.repeat(depth);

    let rowClass = '';
    let changeLabel = '';

    if (!current && proposed) {
      rowClass = 'row-added';
      changeLabel = getChangeBadge('added', 'Added');
    } else if (current && !proposed) {
      rowClass = 'row-removed';
      changeLabel = getChangeBadge('removed', 'Removed');
    } else if (current && proposed) {
      const typeChanged = current.prop.type !== proposed.prop.type;
      const otherChanges = JSON.stringify(current.prop) !== JSON.stringify(proposed.prop);
      const reqChanged = current.required !== proposed.required;

      if (typeChanged) {
        rowClass = 'row-modified';
        changeLabel = getChangeBadge('type_changed', 'Type Changed');
      } else if (!current.required && proposed.required) {
        rowClass = 'row-modified';
        changeLabel = getChangeBadge('required_added', 'Now Required');
      } else if (current.required && !proposed.required) {
        rowClass = 'row-modified';
        changeLabel = getChangeBadge('required_removed', 'Now Optional');
      } else if (otherChanges) {
        rowClass = 'row-modified';
        changeLabel = getChangeBadge('modified', 'Modified');
      } else {
        changeLabel = getChangeBadge('unchanged', 'Unchanged');
      }
    }

    const formatType = (item) => {
      if (!item) return '<em style="color: var(--gray);">-</em>';
      const prop = item.prop;
      const reqBadge = item.required ? '<span style="color: #c00; font-weight: bold;" title="Required">*</span>' : '';
      let typeStr = prop.type || 'unknown';
      if (prop.type === 'array' && prop.items) {
        typeStr = `array[${prop.items.type || 'any'}]`;
      }
      return `<span class="type-value">${escapeHtml(typeStr)}</span>${reqBadge}`;
    };

    // Show last part of path but with visual indentation
    const displayName = path.split('.').pop().replace('[]', '');

    html += `<tr class="${rowClass}">
      <td class="column-name">${indent}<code>${escapeHtml(displayName)}</code>${depth > 0 ? `<small style="color: var(--gray); margin-left: 0.5rem;">${escapeHtml(path)}</small>` : ''}</td>
      <td>${formatType(current)}</td>
      <td>${formatType(proposed)}</td>
      <td>${changeLabel}</td>
    </tr>`;
  }

  html += '</tbody></table>';
  return html;
}

async function loadProposalDetail() {
  try {
    const proposal = await api.getProposal(proposalId);
    const status = await api.getProposalStatus(proposalId);

    // Try to get current contract for diff
    let currentSchema = null;
    try {
      const contracts = await api.getAssetContracts(proposal.asset_id);
      const activeContract = contracts.results?.find(c => c.status === 'active');
      if (activeContract) {
        currentSchema = activeContract.schema_def;
      }
    } catch (e) { /* ignore */ }

    const isPending = proposal.status === 'pending';
    const isApproved = proposal.status === 'approved';
    const allAcknowledged = status?.consumers?.pending === 0 && status?.consumers?.total > 0;

    // Show warning banner for pending proposals with breaking changes
    const breakingChanges = status?.breaking_changes || proposal.breaking_changes || [];
    const warningBanner = isPending && breakingChanges.length > 0 ? `
      <div class="warning-banner">
        <div class="warning-banner-icon">!</div>
        <div class="warning-banner-content">
          <div class="warning-banner-title">Breaking Change Requires Acknowledgment</div>
          <div class="warning-banner-message">
            This proposal contains ${breakingChanges.length} breaking change${breakingChanges.length !== 1 ? 's' : ''}.
            ${status?.consumers?.pending > 0
              ? `Waiting for ${status.consumers.pending} of ${status.consumers.total} consumer${status.consumers.total !== 1 ? 's' : ''} to acknowledge.`
              : 'All consumers have been notified.'
            }
          </div>
        </div>
      </div>
    ` : '';

    // Build impacted parties summary
    const consumerCount = status?.consumers?.total || 0;
    const affectedAssets = proposal.affected_assets || [];
    const downstreamCount = affectedAssets.length;
    const impactedParties = [];
    if (consumerCount > 0) impactedParties.push(`${consumerCount} registered consumer${consumerCount !== 1 ? 's' : ''}`);
    if (downstreamCount > 0) impactedParties.push(`${downstreamCount} downstream asset${downstreamCount !== 1 ? 's' : ''}`);

    document.getElementById('proposal-detail').innerHTML = `
      ${warningBanner}
      <div style="display: flex; justify-content: space-between; align-items: flex-start;">
        <div>
          <h2 style="margin-bottom: 0.5rem;">Breaking Change Proposal</h2>
        </div>
        <span class="status status-${proposal.status}" style="font-size: 1rem; padding: 0.5rem 1rem;">${proposal.status.toUpperCase()}</span>
      </div>

      <div class="card" style="background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%); border-left: 4px solid #5555ff; margin-bottom: 1.5rem;">
        <div style="display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;">
          <div style="flex: 1; min-width: 250px;">
            <div style="font-size: 0.85rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.05em;">Producer</div>
            <div style="font-size: 1.1rem; font-weight: 600;">
              <a href="/teams/${status?.proposed_by?.team_id}">${escapeHtml(status?.proposed_by?.team_name || 'Unknown Team')}</a>
              ${status?.proposed_by?.user_name ? `<span style="color: var(--gray); font-weight: normal;"> via ${escapeHtml(status.proposed_by.user_name)}</span>` : ''}
            </div>
          </div>

          <div style="font-size: 2rem; color: var(--gray);">→</div>

          <div style="flex: 1; min-width: 250px;">
            <div style="font-size: 0.85rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.05em;">Proposes changes to</div>
            <div style="font-size: 1.1rem; font-weight: 600;">
              <a href="/assets/${proposal.asset_id}"><code>${escapeHtml(status?.asset_fqn || proposal.asset_id)}</code></a>
            </div>
          </div>

          <div style="font-size: 2rem; color: var(--gray);">→</div>

          <div style="flex: 1; min-width: 250px;">
            <div style="font-size: 0.85rem; color: var(--gray); text-transform: uppercase; letter-spacing: 0.05em;">Impacting</div>
            <div style="font-size: 1.1rem; font-weight: 600;">
              ${impactedParties.length > 0 ? impactedParties.join(' + ') : '<span style="color: #080;">No downstream impact</span>'}
            </div>
          </div>
        </div>

        <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border);">
          <strong style="color: #c00;">What's changing:</strong>
          ${breakingChanges.length > 0
            ? breakingChanges.slice(0, 3).map(bc => `<span class="change-badge change-breaking" style="margin-left: 0.5rem;">${escapeHtml(bc.message || bc.path || bc.type || 'schema change')}</span>`).join('')
              + (breakingChanges.length > 3 ? `<span style="color: var(--gray); margin-left: 0.5rem;">+${breakingChanges.length - 3} more</span>` : '')
            : '<span style="color: var(--gray); margin-left: 0.5rem;">Schema modification (see details below)</span>'
          }
        </div>
      </div>

      <div class="card" style="background: var(--bg-secondary);">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem;">
          <div>
            <strong>Change Type</strong><br>
            <span class="status status-${proposal.change_type === 'major' ? 'deprecated' : 'active'}">${proposal.change_type?.toUpperCase() || 'Unknown'}</span>
          </div>
          <div>
            <strong>Created</strong><br>
            ${formatDate(proposal.proposed_at)}
          </div>
          ${proposal.resolved_at ? `
          <div>
            <strong>Resolved</strong><br>
            ${formatDate(proposal.resolved_at)}
          </div>
          ` : ''}
          <div>
            <strong>Proposal ID</strong><br>
            <code style="font-size: 0.8rem;">${proposal.id.substring(0, 8)}...</code>
          </div>
        </div>
      </div>

      <div style="margin-top: 1.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap;">
        ${isPending && allAcknowledged ? `
          <button onclick="approveAndPublish()" style="background: green;">Approve & Publish</button>
        ` : ''}
        ${isApproved ? `
          <button onclick="approveAndPublish()" style="background: green;">Publish Contract</button>
        ` : ''}
        ${isPending ? `
          <button class="secondary" onclick="forceApprove()">Force Approve (Skip Acknowledgments)</button>
          <button class="secondary" onclick="withdrawProposal()">Withdraw</button>
        ` : ''}
        <a href="/proposals" class="button secondary">&larr; Back to Proposals</a>
      </div>
    `;

    // Schema diff
    const diffContainer = document.getElementById('schema-diff');
    if (currentSchema && proposal.proposed_schema) {
      diffContainer.innerHTML = renderSchemaDiff(currentSchema, proposal.proposed_schema);
    } else if (proposal.proposed_schema) {
      diffContainer.innerHTML = `
        <p><em>No current schema to compare against.</em></p>
        <details>
          <summary>View Proposed Schema</summary>
          <pre style="background: var(--bg-secondary); padding: 1rem; overflow-x: auto;">${escapeHtml(JSON.stringify(proposal.proposed_schema, null, 2))}</pre>
        </details>
      `;
    } else {
      diffContainer.innerHTML = '<div class="empty">No schema information available.</div>';
    }

    // Breaking changes (with improved visual styling)
    const changesContainer = document.getElementById('breaking-changes');
    // Re-reference breakingChanges since it was already computed above for the warning banner
    const displayedBreakingChanges = breakingChanges;
    if (displayedBreakingChanges.length > 0) {
      // Map change types to icons
      const changeTypeIcons = {
        'property_removed': '-',
        'type_changed': 'T',
        'type_narrowed': 'T',
        'required_added': '!',
        'enum_removed': 'E',
        'constraint_added': 'C',
        'removed': '-',
        'modified': '~'
      };

      changesContainer.innerHTML = `
        <div class="card" style="border-left: 6px solid #c00; background: #fff5f5;">
          <div style="margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
            <span style="font-size: 1.25rem; color: #c00;">!</span>
            <strong style="color: #c00;">${displayedBreakingChanges.length} Breaking Change${displayedBreakingChanges.length !== 1 ? 's' : ''} Detected</strong>
          </div>
          <table>
            <thead>
              <tr>
                <th style="width: 120px;">Type</th>
                <th style="width: 150px;">Location</th>
                <th>Description</th>
                <th style="width: 180px;">Value Change</th>
              </tr>
            </thead>
            <tbody>
              ${displayedBreakingChanges.map(c => {
                const changeType = c.type || c.change_type || 'unknown';
                const icon = changeTypeIcons[changeType] || '!';
                return `
                <tr>
                  <td><span class="change-badge change-breaking">${icon} ${escapeHtml(changeType.replace(/_/g, ' '))}</span></td>
                  <td><code style="font-weight: 600;">${escapeHtml(c.path || c.column || 'N/A')}</code></td>
                  <td>${escapeHtml(c.message || c.description || '')}</td>
                  <td>${c.old_value !== undefined || c.new_value !== undefined
                    ? `<span class="type-value">${escapeHtml(String(c.old_value ?? '-'))}</span> → <span class="type-value">${escapeHtml(String(c.new_value ?? 'removed'))}</span>`
                    : '<em style="color: var(--gray);">-</em>'
                  }</td>
                </tr>
              `}).join('')}
            </tbody>
          </table>
        </div>
      `;
    } else {
      changesContainer.innerHTML = '<div class="card" style="border-left: 6px solid #080; background: #f5fff5;"><div style="display: flex; align-items: center; gap: 0.5rem;"><span style="font-size: 1.25rem; color: #080;">+</span><strong style="color: #080;">No Breaking Changes</strong></div><p style="margin: 0.5rem 0 0 2rem; color: var(--gray);">This proposal does not contain any breaking changes.</p></div>';
    }

    // Impacted consumers
    const consumersContainer = document.getElementById('impacted-consumers');
    const pendingConsumers = status?.pending_consumers || [];
    const acknowledgedConsumers = status?.acknowledgments || [];

    if (pendingConsumers.length === 0 && acknowledgedConsumers.length === 0) {
      consumersContainer.innerHTML = '<div class="card"><p>No consumers are registered for this asset. The change can be published immediately.</p></div>';
    } else {
      consumersContainer.innerHTML = `
        <div class="card">
          <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; margin-bottom: 1rem;">
            <div>
              <div style="font-size: 2rem; font-weight: bold;">${status?.consumers?.total || 0}</div>
              <div style="color: var(--gray);">Total Consumers</div>
            </div>
            <div>
              <div style="font-size: 2rem; font-weight: bold; color: green;">${status?.consumers?.acknowledged || 0}</div>
              <div style="color: var(--gray);">Acknowledged</div>
            </div>
            <div>
              <div style="font-size: 2rem; font-weight: bold; color: orange;">${status?.consumers?.pending || 0}</div>
              <div style="color: var(--gray);">Awaiting</div>
            </div>
          </div>
          ${pendingConsumers.length > 0 ? `
            <h4 style="margin: 1rem 0 0.5rem 0;">Awaiting Acknowledgment</h4>
            <table>
              <thead><tr><th>Team</th><th>Registered</th><th>Action</th></tr></thead>
              <tbody>
                ${pendingConsumers.map(c => `
                  <tr>
                    <td><a href="/teams/${c.team_id}">${escapeHtml(c.team_name)}</a></td>
                    <td>${formatDate(c.registered_at)}</td>
                    <td>${isPending ? `
                      <button class="secondary" onclick="acknowledgeProposal('${c.team_id}', '${escapeHtml(c.team_name)}', 'approved')">Approve</button>
                      <button class="secondary" style="background: var(--error); color: white;" onclick="acknowledgeProposal('${c.team_id}', '${escapeHtml(c.team_name)}', 'blocked')">Block</button>
                    ` : '-'}</td>
                  </tr>
                `).join('')}
              </tbody>
            </table>
          ` : ''}
        </div>
      `;
    }

    // Affected Parties (lineage-discovered teams)
    const affectedContainer = document.getElementById('affected-parties');
    const affectedTeams = proposal.affected_teams || [];
    // affectedAssets already defined above

    if (affectedTeams.length > 0 || affectedAssets.length > 0) {
      affectedContainer.innerHTML = `
        <div class="card" style="border-left: 6px solid #5555ff; background: #f5f5ff;">
          <p style="margin-top: 0;">
            <strong>${affectedTeams.length}</strong> team${affectedTeams.length !== 1 ? 's' : ''} own
            <strong>${affectedAssets.length}</strong> downstream asset${affectedAssets.length !== 1 ? 's' : ''}
            that depend on this asset and may be affected by this change.
          </p>
          <p style="color: var(--gray); font-size: 0.9rem;">
            These teams will be notified and can file objections, but their approval is not required.
          </p>

          ${affectedAssets.length > 0 ? `
            <h4 style="margin: 1rem 0 0.5rem 0;">Affected Downstream Assets</h4>
            <table>
              <thead>
                <tr>
                  <th>Asset</th>
                  <th>Owner Team</th>
                  <th>Owner User</th>
                </tr>
              </thead>
              <tbody>
                ${affectedAssets.map(a => `
                  <tr>
                    <td><a href="/assets/${a.asset_id}"><code>${escapeHtml(a.asset_fqn)}</code></a></td>
                    <td><a href="/teams/${a.owner_team_id}">${escapeHtml(a.owner_team_name || 'Unknown')}</a></td>
                    <td>${a.owner_user_name
                      ? `<a href="/users/${a.owner_user_id}">${escapeHtml(a.owner_user_name)}</a>`
                      : '<em style="color: var(--gray);">-</em>'
                    }</td>
                  </tr>
                `).join('')}
              </tbody>
            </table>
          ` : ''}
        </div>
      `;
    } else {
      affectedContainer.innerHTML = '<div class="empty">No downstream assets depend on this asset via lineage.</div>';
    }

    // Objections (non-blocking but prominently displayed)
    const objectionsContainer = document.getElementById('objections');
    const objections = proposal.objections || [];

    if (objections.length > 0) {
      objectionsContainer.innerHTML = `
        <div class="card" style="border-left: 6px solid #ff8c00; background: #fff8f0;">
          <div style="margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
            <span style="font-size: 1.25rem; color: #ff8c00;">!</span>
            <strong style="color: #ff8c00;">${objections.length} Objection${objections.length !== 1 ? 's' : ''} Filed</strong>
          </div>
          <p style="color: var(--gray); font-size: 0.9rem; margin-top: 0;">
            Objections are non-blocking. The proposal can still be approved, but these concerns
            should be addressed through team coordination.
          </p>
          <table>
            <thead>
              <tr>
                <th>Team</th>
                <th>Filed By</th>
                <th>Reason</th>
                <th>Filed At</th>
              </tr>
            </thead>
            <tbody>
              ${objections.map(o => `
                <tr>
                  <td><a href="/teams/${o.team_id}">${escapeHtml(o.team_name)}</a></td>
                  <td>${o.objected_by_user_name
                    ? `<a href="/users/${o.objected_by_user_id}">${escapeHtml(o.objected_by_user_name)}</a>`
                    : '<em style="color: var(--gray);">-</em>'
                  }</td>
                  <td>${escapeHtml(o.reason)}</td>
                  <td>${formatDate(o.objected_at)}</td>
                </tr>
              `).join('')}
            </tbody>
          </table>
        </div>
      `;
    } else {
      objectionsContainer.innerHTML = '<div class="empty">No objections have been filed.</div>';
    }

    // Acknowledgments
    const acksContainer = document.getElementById('acknowledgments');
    if (acknowledgedConsumers.length > 0) {
      acksContainer.innerHTML = `
        <table>
          <thead>
            <tr>
              <th>Team</th>
              <th>Acknowledged By</th>
              <th>Response</th>
              <th>Responded</th>
              <th>Notes</th>
            </tr>
          </thead>
          <tbody>
            ${acknowledgedConsumers.map(a => `
              <tr>
                <td><a href="/teams/${a.consumer_team_id}">${escapeHtml(a.consumer_team_name)}</a></td>
                <td>${a.acknowledged_by_user_name
                  ? `<a href="/users/${a.acknowledged_by_user_id}">${escapeHtml(a.acknowledged_by_user_name)}</a>`
                  : '<em style="color: var(--gray);">-</em>'
                }</td>
                <td><span class="status status-${a.response === 'blocked' ? 'deprecated' : 'active'}">${a.response}</span></td>
                <td>${formatDate(a.responded_at)}</td>
                <td>${a.notes ? escapeHtml(a.notes) : '<em>-</em>'}</td>
              </tr>
            `).join('')}
          </tbody>
        </table>
      `;
    } else {
      acksContainer.innerHTML = '<div class="empty">No acknowledgments yet.</div>';
    }
  } catch (error) {
    showError(error.message);
    document.getElementById('proposal-detail').innerHTML = '<div class="error">Proposal not found</div>';
  }
}

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