{% extends "portal_base.html" %}
{% block title %}Connecting Meta…{% endblock %}
{% block topbar_title %}Connecting…{% endblock %}
{% block portal_content %}
<div class="panel">
  <div class="panel-h"><h2>Finishing Facebook Login</h2></div>
  <div class="panel-b">
    <p id="meta-oauth-status">Capturing access token from Facebook…</p>
    <p class="muted" id="meta-oauth-error" style="display:none;color:#b91c1c"></p>
  </div>
</div>
<form id="meta-oauth-complete" method="post" action="{% url 'social:meta_oauth_complete' %}" style="display:none">
  {% csrf_token %}
  <input type="hidden" name="access_token" id="meta-access-token" value="">
  <input type="hidden" name="long_lived_token" id="meta-long-lived-token" value="">
  <input type="hidden" name="expires_in" id="meta-expires-in" value="">
  <input type="hidden" name="state" id="meta-state" value="">
  <input type="hidden" name="error" id="meta-error" value="">
  <input type="hidden" name="error_description" id="meta-error-description" value="">
</form>
{% endblock %}
{% block extra_js %}
<script>
(function () {
  const status = document.getElementById('meta-oauth-status');
  const errEl = document.getElementById('meta-oauth-error');
  const form = document.getElementById('meta-oauth-complete');
  const hash = (window.location.hash || '').replace(/^#/, '');
  const params = new URLSearchParams(hash);
  // Some Meta flows also put error on the query string.
  const query = new URLSearchParams(window.location.search || '');

  function fail(msg) {
    status.textContent = 'Could not complete Facebook Login.';
    errEl.style.display = 'block';
    errEl.textContent = msg;
  }

  const error = params.get('error_reason') || params.get('error') || query.get('error') || '';
  if (error) {
    document.getElementById('meta-error').value = error;
    document.getElementById('meta-error-description').value =
      params.get('error_description') || query.get('error_description') || error;
    form.submit();
    return;
  }

  const accessToken = params.get('access_token') || '';
  const longLived = params.get('long_lived_token') || '';
  if (!accessToken && !longLived) {
    fail('No access token in the redirect. Confirm the Valid OAuth Redirect URI matches exactly, then try Connect again.');
    return;
  }

  document.getElementById('meta-access-token').value = accessToken;
  document.getElementById('meta-long-lived-token').value = longLived;
  document.getElementById('meta-expires-in').value = params.get('expires_in') || '';
  document.getElementById('meta-state').value = params.get('state') || query.get('state') || '';
  status.textContent = 'Token received — saving account…';
  form.submit();
})();
</script>
{% endblock %}