{% extends "base.html" %}
{% block title %}New Scan — Salesforce Security AI Scanner{% endblock %}
{% block content %}
<div class="content-wrapper">
<div class="container">
  <div class="row justify-content-center">
    <div class="col-lg-7">

      <div class="mb-4">
        <h4 class="fw-bold mb-1"><i class="bi bi-radar me-2" style="color:#58a6ff;"></i>Configure New Scan</h4>
        <p class="text-muted small">Enter the target Salesforce Experience Cloud URL and scan options.</p>
      </div>

      {% if error %}
      <div class="alert-danger-custom mb-3"><i class="bi bi-exclamation-triangle me-2"></i>{{ error }}</div>
      {% endif %}

      <form method="post" action="/scans" id="scan-form"
            data-sf-auth-enabled="{{ 'true' if sf_auth_enabled else 'false' }}">

        <!-- Target -->
        <div class="card p-4 mb-3">
          <h6 class="fw-semibold mb-3"><i class="bi bi-globe me-1"></i>Target</h6>
          <div class="mb-3">
            <label class="form-label small fw-semibold">Site URL <span class="text-danger">*</span></label>
            <input type="url" name="target_url" id="target_url" class="form-control"
                   placeholder="https://example.my.site.com" required
                   oninput="autoDetectLoginUrl(this.value)"/>
            <div class="form-text" style="color:#8b949e;">The root URL of the Experience Cloud site (no trailing slash)</div>
          </div>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label small fw-semibold">App Path <span class="text-muted fw-normal">(optional)</span></label>
              <input type="text" name="app_path" class="form-control" placeholder="/s"/>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-semibold">Aura Path <span class="text-muted fw-normal">(optional)</span></label>
              <input type="text" name="aura_path" class="form-control" placeholder="/s/sfsites/aura"/>
            </div>
          </div>
        </div>

        <!-- Scan type -->
        <div class="card p-4 mb-3">
          <h6 class="fw-semibold mb-3"><i class="bi bi-person-badge me-1"></i>Scan Type</h6>
          <div class="d-flex gap-3 flex-wrap mb-3">
            <div class="form-check">
              <input class="form-check-input" type="radio" name="scan_type" id="type-guest" value="guest" checked onchange="setScanMode('guest')"/>
              <label class="form-check-label" for="type-guest">
                <strong>Guest</strong> <span class="text-muted small">(unauthenticated)</span>
              </label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="radio" name="scan_type" id="type-auth" value="auth" onchange="setScanMode('auth')"/>
              <label class="form-check-label" for="type-auth">
                <strong>Authenticated</strong> <span class="text-muted small">(as a logged-in community user)</span>
              </label>
            </div>
          </div>

          <!-- Auth options — shown when Authenticated is selected -->
          <div id="auth-fields" style="display:none;">

            <!-- Auth method selector -->
            <div class="mb-3 d-flex gap-3 flex-wrap p-3 rounded" style="background:#0d1117;border:1px solid #30363d;">
              <div class="form-check">
                <input class="form-check-input" type="radio" name="auth_method" id="method-oauth" value="oauth" checked onchange="setAuthMethod('oauth')"/>
                <label class="form-check-label" for="method-oauth">
                  <i class="bi bi-box-arrow-up-right me-1" style="color:#58a6ff;"></i>
                  <strong>Login via Salesforce</strong>
                  <div class="text-muted small">Redirect to Salesforce login — session cookie captured automatically</div>
                </label>
              </div>
              <div class="form-check">
                <input class="form-check-input" type="radio" name="auth_method" id="method-cookie" value="cookie" onchange="setAuthMethod('cookie')"/>
                <label class="form-check-label" for="method-cookie">
                  <i class="bi bi-key me-1" style="color:#d2a679;"></i>
                  <strong>Paste Session Cookie</strong>
                  <div class="text-muted small">Provide your own <code>sid=…</code> cookie from browser DevTools</div>
                </label>
              </div>
            </div>

            <!-- OAuth sub-section -->
            <div id="oauth-section">
              <div class="card p-3 mb-3" style="background:#0d1117;border-color:#58a6ff33;">
                <p class="mb-0 small" style="color:#8b949e;">
                  <i class="bi bi-box-arrow-up-right me-1" style="color:#58a6ff;"></i>
                  Clicking <strong>Login &amp; Scan</strong> opens a <strong>Salesforce login popup</strong>.
                  Log in there — the session is captured automatically and the scan starts in this tab.
                  No credentials are stored in this app.
                </p>
              </div>
              <div id="oauth-error" class="alert-danger-custom mb-2" style="display:none;"></div>

              {% if sf_auth_enabled %}
              <!-- Connected App selector -->
              <div class="mb-3 p-3 rounded" style="background:#161b22;border:1px solid #30363d;">
                <label class="form-label small fw-semibold mb-1">
                  <i class="bi bi-plug me-1" style="color:#58a6ff;"></i>Connected App
                  <span class="text-danger">*</span>
                </label>
                <select id="connected-app-select" class="form-control form-control-sm"
                        onchange="onConnectedAppChange(this.value)">
                  <option value="">— select a connected app —</option>
                  {% for ca in connected_apps %}
                  <option value="{{ ca.id }}" data-login-url="{{ ca.login_url }}">
                    {{ ca.name }} ({{ ca.login_url | replace('https://', '') | replace('http://', '') }})
                  </option>
                  {% endfor %}
                </select>
                <input type="hidden" id="connected_app_id_hidden" value=""/>
                <div class="form-text mt-1" style="color:#8b949e;font-size:.78rem;">
                  <i class="bi bi-info-circle me-1"></i>
                  Select the Connected App registered in the <strong>target org you are scanning</strong>.
                  <a href="/connected-apps" style="color:#58a6ff;" target="_blank">Manage Connected Apps</a>
                </div>
              </div>
              {% else %}
              <div class="card p-3 mb-2" style="background:#0d1117;border-color:#f8514933;">
                <p class="mb-0 small" style="color:#f85149;">
                  <i class="bi bi-exclamation-triangle me-1"></i>
                  No Connected Apps configured — OAuth login is unavailable.
                  Use <strong>Paste Session Cookie</strong> instead, or
                  <a href="/connected-apps" style="color:#58a6ff;">add a Connected App</a>
                  (must be created inside the target Salesforce org).
                  Note: as of Spring '26, only External Client Apps can be newly created in Salesforce —
                  these are org-scoped and must exist in the org you are scanning.
                </p>
              </div>
              {% endif %}
            </div>

            <!-- Cookie sub-section -->
            <div id="cookie-section" style="display:none;">
              <div class="mb-2">
                <!-- Success banner shown after OAuth popup captures the session -->
                <div id="sf-session-captured" style="display:none;" class="mb-2 p-2 rounded d-flex align-items-center gap-2"
                     style="background:#3fb95011;border:1px solid #3fb95033;">
                  <i class="bi bi-check-circle-fill" style="color:#3fb950;"></i>
                  <span class="small" style="color:#3fb950;">
                    Session captured from Salesforce login — review below and click <strong>Start Scan</strong>.
                  </span>
                  <button type="button" class="btn btn-link btn-sm ms-auto p-0" style="color:#8b949e;font-size:.75rem;"
                          onclick="clearSfSession()">Clear</button>
                </div>
                <div class="d-flex align-items-center justify-content-between mb-1">
                  <label class="form-label small fw-semibold mb-0">Session Cookie <span class="text-danger">*</span></label>
                  {% if sf_auth_enabled %}
                  <button type="button" id="refresh-session-btn"
                          class="btn btn-sm"
                          style="font-size:.78rem;color:#58a6ff;padding:.15rem .55rem;border:1px solid #58a6ff44;background:transparent;border-radius:6px;"
                          onclick="refreshSfSession()">
                    <i class="bi bi-arrow-clockwise me-1" id="refresh-icon"></i>Refresh via Salesforce
                  </button>
                  {% endif %}
                </div>
                <textarea name="cookies" id="cookies-input" class="form-control" rows="3"
                          placeholder="sid=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX; other_cookie=value"
                          style="font-family:monospace;font-size:.82rem;"></textarea>
                <div class="form-text" style="color:#8b949e;">
                  Paste the cookie string from your browser.
                  In Chrome DevTools → Application → Cookies → copy <code>sid</code> (and any other relevant cookies).
                  Format: <code>sid=value; name2=value2</code>
                </div>
              </div>
            </div>

          </div><!-- /auth-fields -->
        </div>

        <!-- Advanced options (collapsed by default) -->
        <div class="card p-4 mb-3">
          <a class="d-flex justify-content-between align-items-center text-decoration-none fw-semibold" data-bs-toggle="collapse" href="#advancedOpts">
            <span><i class="bi bi-sliders me-1"></i>Advanced Options</span>
            <i class="bi bi-chevron-down" style="color:#8b949e;"></i>
          </a>
          <div class="collapse mt-3" id="advancedOpts">
            <div class="mb-3">
              <label class="form-label small fw-semibold">Proxy <span class="text-muted fw-normal">(optional, e.g. Burp)</span></label>
              <input type="text" name="proxy" class="form-control" placeholder="http://127.0.0.1:8080"/>
            </div>
            <div>
              <label class="form-label small fw-semibold">AI Analysis (GPT-4o)</label>
              {% if ai_enabled %}
              <div class="d-flex align-items-center gap-2 p-2 rounded" style="background:#3fb95011;border:1px solid #3fb95033;">
                <i class="bi bi-robot" style="color:#3fb950;font-size:1.1rem;"></i>
                <div>
                  <span style="color:#3fb950;font-weight:600;">Enabled</span>
                  <span class="text-muted small ms-1">({{ ai_model }} configured server-side)</span>
                </div>
              </div>
              <div class="form-text mt-1" style="color:#8b949e;">GPT-4o will automatically analyse findings. To use a different key for this scan, expand below.</div>
              <details class="mt-2">
                <summary style="cursor:pointer;font-size:.8rem;color:#8b949e;">Override API key for this scan only</summary>
                <input type="password" name="openai_key" class="form-control mt-2" placeholder="sk-… (leave blank to use server key)"/>
              </details>
              {% else %}
              <input type="password" name="openai_key" class="form-control" placeholder="sk-…"/>
              <div class="form-text" style="color:#8b949e;">
                Enter your OpenAI API key to enable GPT-4o analysis, or leave blank for rule-based risk scoring.
                To enable AI for all scans, set <code>OPENAI_API_KEY</code> in your Vercel environment variables.
              </div>
              {% endif %}
            </div>
          </div>
        </div>

        <!-- Info box -->
        <div class="card p-3 mb-4" style="background:#161b2280;border-color:#58a6ff33;">
          <p class="mb-0 small" style="color:#8b949e;">
            <i class="bi bi-info-circle me-1" style="color:#58a6ff;"></i>
            Scans run in the background. You'll be taken to the results page immediately and the view updates automatically when the scan completes.
          </p>
        </div>

        <button type="submit" class="btn btn-primary fw-semibold px-4" id="submit-btn">
          <i class="bi bi-play-fill me-1" id="submit-icon"></i><span id="submit-label">Start Scan</span>
        </button>
        <a href="/dashboard" class="btn btn-outline-secondary ms-2">Cancel</a>

      </form>
    </div>
  </div>
</div>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
const form = document.getElementById('scan-form');
const sfAuthEnabled = form.dataset.sfAuthEnabled === 'true';

// Current resolved auth mode: 'guest' | 'oauth' | 'cookie'
let _scanMode = 'guest';
let _sfPopup = null;

function setScanMode(scanType) {
  const authFields = document.getElementById('auth-fields');
  authFields.style.display = (scanType === 'auth') ? 'block' : 'none';
  if (scanType === 'guest') {
    _scanMode = 'guest';
  } else {
    const methodRadio = document.querySelector('input[name=auth_method]:checked');
    _scanMode = methodRadio ? methodRadio.value : 'oauth';
  }
  _applyMode();
}

function setAuthMethod(method) {
  _scanMode = method;
  _applyMode();
}

function _applyMode() {
  const oauthSection  = document.getElementById('oauth-section');
  const cookieSection = document.getElementById('cookie-section');
  const icon  = document.getElementById('submit-icon');
  const label = document.getElementById('submit-label');

  if (_scanMode === 'oauth') {
    oauthSection.style.display  = 'block';
    cookieSection.style.display = 'none';
    form.action = '/scans';
    icon.className  = sfAuthEnabled ? 'bi bi-box-arrow-up-right me-1' : 'bi bi-play-fill me-1';
    label.textContent = sfAuthEnabled ? 'Login & Scan' : 'Start Scan';
  } else if (_scanMode === 'cookie') {
    oauthSection.style.display  = 'none';
    cookieSection.style.display = 'block';
    form.action = '/scans';
    icon.className  = 'bi bi-play-fill me-1';
    label.textContent = 'Start Scan';
  } else {
    oauthSection.style.display  = 'none';
    cookieSection.style.display = 'none';
    form.action = '/scans';
    icon.className  = 'bi bi-play-fill me-1';
    label.textContent = 'Start Scan';
  }
}

function onConnectedAppChange(val) {
  document.getElementById('connected_app_id_hidden').value = val;
  const errDiv = document.getElementById('oauth-error');
  if (errDiv && val) errDiv.style.display = 'none';
}

function clearSfSession() {
  document.getElementById('cookies-input').value = '';
  const banner = document.getElementById('sf-session-captured');
  if (banner) banner.style.display = 'none';
}

function refreshSfSession() {
  // Re-open the Salesforce OAuth popup to get a fresh session cookie.
  const refreshBtn = document.getElementById('refresh-session-btn');
  if (refreshBtn) {
    refreshBtn.disabled = true;
    document.getElementById('refresh-icon').className = 'spinner-border spinner-border-sm me-1';
  }
  // Temporarily restore submit button label during popup wait.
  const btn = document.getElementById('submit-btn');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Waiting for Salesforce login…';

  // Hide previous captured banner.
  const banner = document.getElementById('sf-session-captured');
  if (banner) banner.style.display = 'none';

  // Open popup (reuses the same _openSfPopup logic but resets the refresh
  // button when the popup closes or when the message arrives).
  _openSfPopup({ onDone: function() {
    if (refreshBtn) {
      refreshBtn.disabled = false;
      document.getElementById('refresh-icon').className = 'bi bi-arrow-clockwise me-1';
    }
  }});
}

// Auto-detect is no longer needed (connected app already knows its login URL).
// Kept as a stub so any lingering oninput references don't throw.
function autoDetectLoginUrl(_siteUrl) {}

// -----------------------------------------------------------------------
// Popup OAuth flow
// -----------------------------------------------------------------------

// Listen for messages posted by the OAuth callback page inside the popup.
window.addEventListener('message', function (event) {
  // Accept messages only from our own origin (same-origin postMessage).
  if (event.origin !== window.location.origin) return;
  const data = event.data;
  if (!data || !data.type) return;

  const btn = document.getElementById('submit-btn');

  if (data.type === 'sf_session') {
    // Fill cookies textarea with the session captured from the popup.
    const cookieInput = document.getElementById('cookies-input');
    cookieInput.value = data.cookies || '';

    // Switch auth method radio to 'cookie' so the form submits to /scans.
    const cookieRadio = document.getElementById('method-cookie');
    if (cookieRadio) cookieRadio.checked = true;
    _scanMode = 'cookie';
    _applyMode();

    // Show the success banner above the textarea.
    const banner = document.getElementById('sf-session-captured');
    if (banner) banner.style.display = 'flex';

    // Re-enable button as "Start Scan" so user can review before submitting.
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-play-fill me-1"></i>Start Scan';

    // Scroll the cookie section into view.
    cookieInput.scrollIntoView({ behavior: 'smooth', block: 'center' });

    // Fire the onDone callback (e.g. reset the Refresh button spinner).
    if (_popupOnDone) { _popupOnDone(); _popupOnDone = null; }

  } else if (data.type === 'sf_error') {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-box-arrow-up-right me-1"></i>Login & Scan';
    const errDiv = document.getElementById('oauth-error');
    if (errDiv) {
      errDiv.textContent = data.message || 'Salesforce login failed.';
      errDiv.style.display = 'block';
    }
  }
});

let _popupOnDone = null;   // optional callback fired when popup flow finishes

function _openSfPopup(opts) {
  _popupOnDone = (opts && opts.onDone) || null;

  const targetUrl = form.querySelector('[name=target_url]').value.trim();
  if (!targetUrl) {
    alert('Please enter the target site URL first.');
    if (_popupOnDone) _popupOnDone();
    return;
  }

  const connectedAppId = (document.getElementById('connected_app_id_hidden') || {}).value || '';

  if (!connectedAppId) {
    const errDiv = document.getElementById('oauth-error');
    if (errDiv) { errDiv.textContent = 'Please select a Connected App first.'; errDiv.style.display = 'block'; }
    if (_popupOnDone) _popupOnDone();
    return;
  }

  // Validate custom domain field if visible (legacy — no longer shown, kept as guard).
  const sel = document.getElementById('sf_login_url');
  if (sel && sel.value === 'custom') {
    const custom = document.getElementById('sf_login_url_custom');
    if (custom && !custom.value.trim()) { alert('Please enter your custom Salesforce login URL.'); if (_popupOnDone) _popupOnDone(); return; }
  }

  const params = new URLSearchParams({
    target_url:       targetUrl,
    connected_app_id: connectedAppId,
    app_path:     (form.querySelector('[name=app_path]')   || {}).value || '',
    aura_path:    (form.querySelector('[name=aura_path]')  || {}).value || '',
    proxy:        (form.querySelector('[name=proxy]')      || {}).value || '',
    openai_key:   (form.querySelector('[name=openai_key]') || {}).value || '',
  });

  // Hide previous error
  const errDiv = document.getElementById('oauth-error');
  if (errDiv) errDiv.style.display = 'none';

  const btn = document.getElementById('submit-btn');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Waiting for Salesforce login…';

  const w = 620, h = 720;
  const left = Math.max(0, Math.round((screen.width  - w) / 2));
  const top  = Math.max(0, Math.round((screen.height - h) / 2));
  _sfPopup = window.open(
    '/auth/sf/popup?' + params.toString(),
    'sflogin',
    `width=${w},height=${h},left=${left},top=${top},toolbar=no,menubar=no,scrollbars=yes,resizable=yes`
  );

  if (!_sfPopup || _sfPopup.closed || typeof _sfPopup.closed === 'undefined') {
    btn.disabled = false;
    btn.innerHTML = '<i class="bi bi-box-arrow-up-right me-1"></i>Login & Scan';
    if (_popupOnDone) _popupOnDone();
    alert('Popup was blocked. Please allow popups for this site and try again.');
    return;
  }

  // Re-enable button if user closes popup without completing login.
  const poll = setInterval(function () {
    if (_sfPopup && _sfPopup.closed) {
      clearInterval(poll);
      if (btn.disabled) {
        btn.disabled = false;
        btn.innerHTML = '<i class="bi bi-box-arrow-up-right me-1"></i>Login & Scan';
      }
      if (_popupOnDone) { _popupOnDone(); _popupOnDone = null; }
    }
  }, 500);
}

// -----------------------------------------------------------------------
// Form submit handler
// -----------------------------------------------------------------------

form.addEventListener('submit', function (e) {
  // OAuth mode with SF configured — open popup instead of submitting form.
  if (_scanMode === 'oauth' && sfAuthEnabled) {
    e.preventDefault();
    _openSfPopup();
    return;
  }

  // Cookie mode — validate the textarea.
  if (_scanMode === 'cookie') {
    const cookieVal = document.getElementById('cookies-input').value.trim();
    if (!cookieVal) {
      e.preventDefault();
      alert('Please paste your Salesforce session cookie (sid=…) to use cookie-based authentication.');
      return;
    }
  }

  const btn = document.getElementById('submit-btn');
  btn.disabled = true;
  btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Starting scan…';
});
</script>
{% endblock %}