{% extends "portal_base.html" %}
{% block title %}Social accounts · Portal{% endblock %}
{% block topbar_title %}Social accounts{% endblock %}
{% block portal_content %}
<div class="panel">
  <div class="panel-h"><h2>Add account</h2></div>
  <div class="panel-b">
    <div class="connect-grid">
      <a class="connect-card{% if connect_platform == 'facebook' %} is-active{% endif %}"
         href="{% url 'social:account_list' %}?connect=facebook">
        <span class="platform-icon meta">f</span>
        <div>
          <strong>Facebook Page</strong>
          <p>Connect a Page you manage with a Page access token.</p>
        </div>
      </a>
      <a class="connect-card{% if connect_platform == 'instagram' %} is-active{% endif %}"
         href="{% url 'social:account_list' %}?connect=instagram">
        <span class="platform-icon ig">IG</span>
        <div>
          <strong>Instagram Business</strong>
          <p>Requires a Facebook Page linked to an IG business account.</p>
        </div>
      </a>
      <a class="connect-card{% if connect_platform == 'linkedin' %} is-active{% endif %}"
         href="{% url 'social:account_list' %}?connect=linkedin">
        <span class="platform-icon li">in</span>
        <div>
          <strong>LinkedIn</strong>
          <p>Connect via OAuth. Tokens expire (~2 months) — re-authorize when prompted.</p>
        </div>
      </a>
    </div>

    {% if connect_meta %}
    <div class="connect-form-panel" id="connect-form">
      <h3 style="margin:0 0 8px;font-size:16px">{{ connect_meta.title }}</h3>
      <ol class="connect-steps">
        {% for step in connect_meta.steps %}
        <li>{{ step }}</li>
        {% endfor %}
        {% if connect_meta.docs_url %}
        <li>Reference: <a href="{{ connect_meta.docs_url }}" target="_blank" rel="noopener">platform docs</a></li>
        {% endif %}
      </ol>

      {% if connect_meta.oauth and connect_platform == 'linkedin' %}
      <div class="field" style="margin:12px 0 16px;padding:12px;border:1px dashed #cbd5e1;border-radius:8px;background:#f8fafc">
        <label for="linkedin-callback-url" style="display:block;margin-bottom:6px">
          Authorized redirect URL — paste into LinkedIn Auth tab
        </label>
        <div style="display:flex;gap:8px;flex-wrap:wrap;align-items:stretch">
          <input id="linkedin-callback-url" type="text" readonly
                 value="{{ linkedin_callback_url }}"
                 onclick="this.select()"
                 style="flex:1;min-width:220px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px">
          <button type="button" class="btn btn-ghost btn-sm" id="copy-linkedin-callback">Copy</button>
        </div>
        <p class="muted" style="margin:8px 0 0;font-size:13px">
          Must match exactly (including http/https and trailing slash).
        </p>
      </div>

      <form method="post" class="form-grid" style="margin-bottom:16px">
        {% csrf_token %}
        <input type="hidden" name="action" value="save_linkedin_app">
        <div class="field">
          <label for="id_client_id">Client ID</label>
          <input id="id_client_id" name="client_id" required
                 value="{{ linkedin_client_id }}"
                 placeholder="From LinkedIn Auth tab"
                 autocomplete="off">
        </div>
        <div class="field">
          <label for="id_client_secret">Primary Client Secret</label>
          <input id="id_client_secret" name="client_secret" type="password"
                 {% if not linkedin_secret_saved %}required{% endif %}
                 placeholder="{% if linkedin_secret_saved %}Leave blank to keep saved secret{% else %}From LinkedIn Auth tab{% endif %}"
                 autocomplete="new-password">
          {% if linkedin_secret_saved %}
          <p class="muted" style="margin:6px 0 0;font-size:13px">Secret already saved (encrypted). Enter a new value only to replace it.</p>
          {% endif %}
        </div>
        <div style="display:flex;gap:8px;flex-wrap:wrap">
          <button class="btn btn-ghost" type="submit">Save app credentials</button>
          {% if linkedin_oauth_ready %}
          <a class="btn btn-primary" href="{% url 'social:linkedin_oauth_start' %}">Connect with LinkedIn</a>
          {% else %}
          <button class="btn btn-primary" type="button" disabled title="Save Client ID and Client Secret first">Connect with LinkedIn</button>
          {% endif %}
          <a class="btn btn-ghost" href="{% url 'social:account_list' %}">Cancel</a>
        </div>
      </form>
      {% else %}
      <form method="post" class="form-grid">
        {% csrf_token %}
        <input type="hidden" name="action" value="connect">
        <input type="hidden" name="platform" value="{{ connect_platform }}">
        {% for name, label, placeholder in connect_meta.fields %}
        <div class="field">
          <label for="id_{{ name }}">{{ label }}</label>
          {% if name == 'access_token' %}
          <textarea id="id_{{ name }}" name="{{ name }}" required
                    style="min-height:88px" placeholder="{{ placeholder }}"></textarea>
          {% else %}
          <input id="id_{{ name }}" name="{{ name }}"
                 {% if name != 'page_id' and name != 'label' %}required{% endif %}
                 placeholder="{{ placeholder }}">
          {% endif %}
        </div>
        {% endfor %}
        <div style="display:flex;gap:8px;flex-wrap:wrap">
          <button class="btn btn-primary" type="submit">Save account</button>
          <a class="btn btn-ghost" href="{% url 'social:account_list' %}">Cancel</a>
        </div>
      </form>
      {% endif %}
    </div>
    {% endif %}
  </div>
</div>

<div class="panel">
  <div class="panel-h"><h2>Connected accounts</h2></div>
  <div class="panel-b" style="padding:0">
    <table class="table">
      <thead>
        <tr>
          <th>Account</th>
          <th>Platform</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for account in accounts %}
        <tr {% if not account.is_active %}class="row-warn"{% endif %}>
          <td>
            <strong>{{ account.label }}</strong><br>
            <span class="muted">{{ account.external_id }}</span>
          </td>
          <td>
            <span class="platform-pill {% if account.platform == 'facebook' %}meta{% elif account.platform == 'instagram' %}ig{% else %}li{% endif %}">
              {{ account.get_platform_display }}
            </span>
          </td>
          <td>
            {% if account.is_active %}
            <span class="badge badge-delivered">Active</span>
            {% else %}
            <span class="badge badge-failed">Inactive</span>
            {% endif %}
          </td>
          <td>
            <div style="display:flex;gap:8px;flex-wrap:wrap">
              {% if account.platform == 'linkedin' %}
              <a class="btn btn-ghost btn-sm" href="{% url 'social:linkedin_oauth_start' %}">Re-authorize</a>
              {% else %}
              <a class="btn btn-ghost btn-sm" href="{% url 'social:account_list' %}?connect={{ account.platform }}">Update tokens</a>
              {% endif %}
              {% if account.is_active %}
              <form method="post" style="display:inline">
                {% csrf_token %}
                <input type="hidden" name="action" value="disconnect">
                <input type="hidden" name="account_id" value="{{ account.pk }}">
                <button class="btn btn-ghost btn-sm" type="submit">Disconnect</button>
              </form>
              {% else %}
              <form method="post" style="display:inline">
                {% csrf_token %}
                <input type="hidden" name="action" value="reactivate">
                <input type="hidden" name="account_id" value="{{ account.pk }}">
                <button class="btn btn-ghost btn-sm" type="submit">Mark active</button>
              </form>
              {% endif %}
            </div>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="4" class="empty-state">No accounts connected yet — pick a platform above.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="split">
  <div class="panel">
    <div class="panel-h"><h2>When to re-auth</h2></div>
    <div class="panel-b">
      <ul class="plain-list">
        <li>LinkedIn access tokens expire on a short cycle</li>
        <li>Meta password changes or app review updates</li>
        <li>Publishing fails with an auth error</li>
      </ul>
    </div>
  </div>
  <div class="panel">
    <div class="panel-h"><h2>Next</h2></div>
    <div class="panel-b">
      <a class="btn btn-primary btn-sm" href="{% url 'social:composer' %}">Open composer →</a>
    </div>
  </div>
</div>
{% endblock %}
{% block extra_js %}
{% if connect_platform %}
<script>
document.getElementById('connect-form')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
</script>
{% endif %}
{% if connect_platform == 'linkedin' %}
<script>
(function () {
  const btn = document.getElementById('copy-linkedin-callback');
  const input = document.getElementById('linkedin-callback-url');
  if (!btn || !input) return;
  btn.addEventListener('click', async () => {
    const value = input.value || '';
    try {
      await navigator.clipboard.writeText(value);
      const prev = btn.textContent;
      btn.textContent = 'Copied';
      setTimeout(() => { btn.textContent = prev; }, 1500);
    } catch (_err) {
      input.select();
      document.execCommand('copy');
    }
  });
})();
</script>
{% endif %}
{% endblock %}