{% extends "base.html" %}
{% block title %}Connected Apps — Salesforce Security AI Scanner{% endblock %}

{% block extra_head %}
<style>
.ca-card { transition: border-color .2s; }
.ca-card:hover { border-color: #58a6ff66; }
</style>
{% endblock %}

{% block content %}
<div class="content-wrapper">
<div class="container" style="max-width:860px;">

  <!-- Page header -->
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h4 class="fw-bold mb-0"><i class="bi bi-plug me-2" style="color:#58a6ff;"></i>Connected Apps</h4>
      <p class="text-muted small mb-0">
        Manage the Salesforce Connected Apps / External Client Apps used for OAuth login in scans.
      </p>
    </div>
    <button class="btn btn-primary fw-semibold" data-bs-toggle="modal" data-bs-target="#addModal">
      <i class="bi bi-plus-circle me-1"></i>Add Connected App
    </button>
  </div>

  <!-- Alerts -->
  {% if saved %}
  <div class="alert-success-custom mb-3">
    <i class="bi bi-check-circle me-1"></i>Connected App saved successfully.
  </div>
  {% endif %}
  {% if error %}
  <div class="alert-danger-custom mb-3">
    <i class="bi bi-exclamation-triangle me-1"></i>{{ error }}
  </div>
  {% endif %}

  <!-- Info callout -->
  <div class="card p-3 mb-4" style="background:#0d1117;border-color:#58a6ff33;">
    <p class="mb-1 small" style="color:#8b949e;">
      <i class="bi bi-info-circle me-1" style="color:#58a6ff;"></i>
      <strong style="color:#e6edf3;">What is a Connected App?</strong>
      A Salesforce Connected App (or External Client App since Spring '26) provides the OAuth credentials
      for this tool to authenticate on behalf of users into a Salesforce org.
    </p>
    <p class="mb-1 small" style="color:#8b949e;">
      Each Connected App must be registered <strong style="color:#e6edf3;">inside the Salesforce org you want to scan</strong>
      (Setup → App Manager → New Connected App). Configure:
      <code>OAuth 2.0 with PKCE</code>, callback URL = <code>{{ app_base_url }}/auth/sf/callback</code>,
      scopes: <code>api</code>, <code>web</code>, <code>openid</code>.
    </p>
    <p class="mb-1 small" style="color:#8b949e;">
      <i class="bi bi-shield-lock-fill me-1" style="color:#3fb950;"></i>
      <strong style="color:#3fb950;">PKCE-only — no secret required.</strong>
      This tool uses the <strong style="color:#e6edf3;">OAuth 2.0 Authorization Code + PKCE (S256)</strong> flow,
      the same approach used by the Salesforce CLI <code>sf org login web</code> command.
      <strong style="color:#e6edf3;">No Consumer Secret is stored</strong> — the PKCE code verifier is
      the security credential. In your Connected App, uncheck
      <em>"Require Secret for Web Server Flow"</em> (or enable <em>"Require PKCE"</em>).
    </p>
    <p class="mb-0 small" style="color:#8b949e;">
      <strong style="color:#d29922;">Spring '26 note:</strong>
      External Client Apps (the new type) are org-scoped — create one per org you scan.
      Pre-Spring '26 Connected Apps continue to work.
    </p>
  </div>

  <!-- Apps list -->
  {% if connected_apps %}
  <div class="d-flex flex-column gap-3">
    {% for ca in connected_apps %}
    <div class="card p-4 ca-card">
      <div class="d-flex justify-content-between align-items-start gap-3">
        <div class="flex-grow-1 min-width-0">
          <div class="d-flex align-items-center gap-2 mb-2">
            <i class="bi bi-plug-fill" style="color:#58a6ff;"></i>
            <span class="fw-semibold">{{ ca.name }}</span>
            <span class="badge rounded-pill" style="background:#58a6ff22;color:#58a6ff;font-size:.72rem;">
              {{ ca.login_url | replace('https://', '') | replace('http://', '') }}
            </span>
          </div>
          <div class="row g-2 small" style="color:#8b949e;">
            <div class="col-12">
              <span class="fw-semibold" style="color:#e6edf3;">Client ID: </span>
              <code style="color:#c9d1d9;word-break:break-all;">{{ ca.client_id }}</code>
            </div>
            {% if ca.app_base_url %}
            <div class="col-12">
              <span class="fw-semibold" style="color:#e6edf3;">Callback Base URL: </span>
              <code style="color:#c9d1d9;">{{ ca.app_base_url }}/auth/sf/callback</code>
            </div>
            {% endif %}
            <div class="col-12" style="color:#484f58;">
              Added {{ ca.created_at.strftime('%Y-%m-%d') if ca.created_at else '—' }}
            </div>
          </div>
        </div>
        <div class="d-flex gap-2 flex-shrink-0">
          <button class="btn btn-sm btn-outline-secondary"
                  onclick="openEditModal({{ ca.id }}, {{ ca.name | tojson }}, {{ ca.client_id | tojson }}, {{ ca.login_url | tojson }}, {{ (ca.app_base_url or '') | tojson }})">
            <i class="bi bi-pencil me-1"></i>Edit
          </button>
          <form method="post" action="/connected-apps/{{ ca.id }}/delete" onsubmit="return confirm('Delete \'{{ ca.name }}\'?')">
            <button type="submit" class="btn btn-sm" style="color:#f85149;border:1px solid #f8514966;background:transparent;">
              <i class="bi bi-trash3"></i>
            </button>
          </form>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <div class="card p-5 text-center" style="border-style:dashed;">
    <i class="bi bi-plug display-4 mb-3" style="color:#30363d;"></i>
    <p class="text-muted mb-3">No Connected Apps configured yet.</p>
    <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">
      <i class="bi bi-plus-circle me-1"></i>Add your first Connected App
    </button>
  </div>
  {% endif %}

</div>
</div>

<!-- ── Add modal ────────────────────────────────────────────── -->
<div class="modal fade" id="addModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered" style="max-width:560px;">
    <div class="modal-content" style="background:#161b22;border-color:#30363d;">
      <div class="modal-header" style="border-color:#30363d;">
        <h5 class="modal-title fw-semibold"><i class="bi bi-plus-circle me-2" style="color:#58a6ff;"></i>Add Connected App</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <form method="post" action="/connected-apps">
        <div class="modal-body" id="addModalBody">
          <!-- Populated by JS on first open -->
        </div>
        <div class="modal-footer" style="border-color:#30363d;">
          <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary btn-sm fw-semibold">
            <i class="bi bi-floppy me-1"></i>Save Connected App
          </button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- ── Edit modal ────────────────────────────────────────────── -->
<div class="modal fade" id="editModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered" style="max-width:560px;">
    <div class="modal-content" style="background:#161b22;border-color:#30363d;">
      <div class="modal-header" style="border-color:#30363d;">
        <h5 class="modal-title fw-semibold"><i class="bi bi-pencil me-2" style="color:#58a6ff;"></i>Edit Connected App</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <form method="post" id="editForm" action="/connected-apps/0/edit">
        <div class="modal-body" id="editModalBody">
          <!-- Filled by JS -->
        </div>
        <div class="modal-footer" style="border-color:#30363d;">
          <button type="button" class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-primary btn-sm fw-semibold">
            <i class="bi bi-floppy me-1"></i>Save Changes
          </button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
function _formHtml(vals) {
  const loginUrlOptions = [
    ['https://login.salesforce.com', 'Production — login.salesforce.com'],
    ['https://test.salesforce.com',  'Sandbox — test.salesforce.com'],
    ['custom', 'Custom domain (My Domain)…'],
  ];
  const isCustom = vals.login_url && !loginUrlOptions.slice(0,2).some(o => o[0] === vals.login_url);
  return `
    <div class="mb-3">
      <label class="form-label small fw-semibold">Name <span class="text-danger">*</span></label>
      <input type="text" name="name" class="form-control" required maxlength="200"
             placeholder="e.g. Acme Production" value="${_esc(vals.name || '')}"/>
      <div class="form-text" style="color:#8b949e;">A label you'll recognise in the scan form dropdown.</div>
    </div>
    <div class="mb-3">
      <label class="form-label small fw-semibold">Salesforce Login URL <span class="text-danger">*</span></label>
      <select name="login_url" class="form-control form-control-sm" id="ca-login-sel-${vals._uid}"
              onchange="caToggleCustom(this,'ca-custom-${vals._uid}')">
        ${loginUrlOptions.map(([v,l]) => `<option value="${v}" ${(v === vals.login_url || (isCustom && v==='custom')) ? 'selected' : ''}>${l}</option>`).join('')}
      </select>
      <div id="ca-custom-${vals._uid}" style="display:${isCustom ? 'block' : 'none'};" class="mt-2">
        <input type="url" name="login_url_custom" class="form-control form-control-sm"
               placeholder="https://myorg.my.salesforce.com"
               value="${_esc(isCustom ? vals.login_url : '')}"/>
      </div>
    </div>
    <div class="mb-3">
      <label class="form-label small fw-semibold">Consumer Key (Client ID) <span class="text-danger">*</span></label>
      <input type="text" name="client_id" class="form-control" required
             style="font-family:monospace;font-size:.82rem;" placeholder="3MVG9…"
             value="${_esc(vals.client_id || '')}"/>
    </div>
    <div class="mb-1">
      <label class="form-label small fw-semibold">Callback Base URL <span class="text-muted fw-normal">(optional)</span></label>
      <input type="url" name="app_base_url" class="form-control"
             placeholder="${_esc(vals._app_base_url || 'https://your-app.vercel.app')}"
             value="${_esc(vals.app_base_url || '')}"/>
      <div class="form-text" style="color:#8b949e;">
        Override the OAuth redirect URI base. Default: <code>${_esc(vals._app_base_url || '')}</code>.
        Callback URL to register in the Connected App: <code>${_esc(vals._app_base_url || '')}/auth/sf/callback</code>
      </div>
    </div>
  `;
}

function _esc(s) {
  return String(s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

function caToggleCustom(sel, customId) {
  document.getElementById(customId).style.display = sel.value === 'custom' ? 'block' : 'none';
}

// Populate the Add modal every time it opens (fresh form).
document.getElementById('addModal').addEventListener('show.bs.modal', function() {
  document.getElementById('addModalBody').innerHTML = _formHtml({
    _uid: 'add', _app_base_url: {{ app_base_url | tojson }},
  });
});

function openEditModal(id, name, clientId, loginUrl, appBaseUrl) {
  document.getElementById('editForm').action = '/connected-apps/' + id + '/edit';
  document.getElementById('editModalBody').innerHTML = _formHtml({
    _uid: 'edit', name, client_id: clientId,
    login_url: loginUrl, app_base_url: appBaseUrl,
    _app_base_url: {{ app_base_url | tojson }},
  });
  new bootstrap.Modal(document.getElementById('editModal')).show();
}
</script>
{% endblock %}