{% 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>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);
  }
}

function renderSchemaDiff(currentSchema, proposedSchema) {
  const currentProps = currentSchema?.properties || {};
  const proposedProps = proposedSchema?.properties || {};

  const allKeys = new Set([...Object.keys(currentProps), ...Object.keys(proposedProps)]);

  let html = '<table><thead><tr><th>Column</th><th>Current</th><th>Proposed</th><th>Change</th></tr></thead><tbody>';

  for (const key of [...allKeys].sort()) {
    const current = currentProps[key];
    const proposed = proposedProps[key];

    let changeClass = '';
    let changeLabel = '';

    if (!current && proposed) {
      changeClass = 'added';
      changeLabel = '<span style="color: green;">+ Added</span>';
    } else if (current && !proposed) {
      changeClass = 'removed';
      changeLabel = '<span style="color: red;">- Removed</span>';
    } else if (current && proposed) {
      if (JSON.stringify(current) !== JSON.stringify(proposed)) {
        changeClass = 'modified';
        changeLabel = '<span style="color: orange;">~ Modified</span>';
      } else {
        changeLabel = '<span style="color: gray;">No change</span>';
      }
    }

    html += `<tr class="${changeClass}">
      <td><code>${escapeHtml(key)}</code></td>
      <td>${current ? `<code>${escapeHtml(current.type || 'unknown')}</code>${current.description ? `<br><small>${escapeHtml(current.description)}</small>` : ''}` : '<em>-</em>'}</td>
      <td>${proposed ? `<code>${escapeHtml(proposed.type || 'unknown')}</code>${proposed.description ? `<br><small>${escapeHtml(proposed.description)}</small>` : ''}` : '<em>-</em>'}</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;

    document.getElementById('proposal-detail').innerHTML = `
      <div style="display: flex; justify-content: space-between; align-items: flex-start;">
        <div>
          <h2 style="margin-bottom: 0.5rem;">Breaking Change Proposal</h2>
          <p style="color: var(--gray); margin-top: 0;">
            Proposed by <a href="/teams/${status?.proposed_by?.team_id}">${escapeHtml(status?.proposed_by?.team_name || 'Unknown')}</a>
            ${status?.proposed_by?.user_name
              ? ` (<a href="/users/${status.proposed_by.user_id}">${escapeHtml(status.proposed_by.user_name)}</a>)`
              : ''
            }
          </p>
        </div>
        <span class="status status-${proposal.status}" style="font-size: 1rem; padding: 0.5rem 1rem;">${proposal.status.toUpperCase()}</span>
      </div>

      <div class="card">
        <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
          <div>
            <strong>Asset</strong><br>
            <a href="/assets/${proposal.asset_id}">${escapeHtml(status?.asset_fqn || proposal.asset_id)}</a>
          </div>
          <div>
            <strong>Change Type</strong><br>
            <span class="status status-${proposal.change_type === 'major' ? 'deprecated' : 'active'}">${proposal.change_type || 'Unknown'}</span>
          </div>
          <div>
            <strong>Created</strong><br>
            ${formatDate(proposal.proposed_at)}
          </div>
          <div>
            <strong>Impacted Teams</strong><br>
            ${status?.consumers?.total || 0} consumer${status?.consumers?.total !== 1 ? 's' : ''}
          </div>
        </div>
        ${proposal.resolved_at ? `<p style="margin-top: 1rem;"><strong>Resolved:</strong> ${formatDate(proposal.resolved_at)}</p>` : ''}
      </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
    const changesContainer = document.getElementById('breaking-changes');
    const breakingChanges = status?.breaking_changes || proposal.breaking_changes || [];
    if (breakingChanges.length > 0) {
      changesContainer.innerHTML = `
        <div class="card" style="border-left: 4px solid var(--error);">
          <table>
            <thead>
              <tr>
                <th>Change Type</th>
                <th>Location</th>
                <th>Description</th>
                <th>Impact</th>
              </tr>
            </thead>
            <tbody>
              ${breakingChanges.map(c => `
                <tr>
                  <td><strong style="color: var(--error);">${escapeHtml(c.type || c.change_type || 'Unknown')}</strong></td>
                  <td><code>${escapeHtml(c.path || c.column || 'N/A')}</code></td>
                  <td>${escapeHtml(c.message || c.description || '')}</td>
                  <td>${c.old_value ? `<code>${escapeHtml(String(c.old_value))}</code> → ` : ''}${c.new_value !== undefined ? `<code>${escapeHtml(String(c.new_value || 'removed'))}</code>` : ''}</td>
                </tr>
              `).join('')}
            </tbody>
          </table>
        </div>
      `;
    } else {
      changesContainer.innerHTML = '<div class="empty">No breaking changes documented.</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>
      `;
    }

    // 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 %}