{% extends "portal/base.html" %}{% block content %}
<style>
  #wechat-unbind-confirm[hidden] { display: none !important; }
  #wechat-unbind-confirm {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(15,23,42,.42);
    display: grid;
    place-items: center;
    padding: 18px;
  }
</style>
<h1>绑定个人微信</h1>
{% if bindings %}
  <h2>已绑定个人微信</h2>
  <table>
    <thead><tr><th>渠道</th><th>Chat ID</th><th>备注</th><th>主通信渠道</th><th>状态</th><th>操作</th></tr></thead>
    <tbody>
    {% for item in bindings %}
    <tr>
      <td>{% if item.remark %}{{ item.remark }}{% else %}个人微信{% endif %}</td>
      <td>{{ item.external_chat_id }}</td>
      <td>
        <form method="post" action="{% url 'portal_update_wechat_remark' item.id %}" style="display:flex;gap:6px;flex-wrap:wrap">
          {% csrf_token %}
          <input type="text" name="remark" value="{{ item.remark }}" placeholder="例如：家里微信" style="min-width:120px">
          <button type="submit" style="width:auto">保存备注</button>
        </form>
      </td>
      <td>{% if item.is_primary %}主通信渠道{% else %}-{% endif %}</td>
      <td>{{ item.status }}</td>
      <td>
        <form method="post" action="{% url 'portal_set_primary_wechat' item.id %}">
          {% csrf_token %}
          <button type="submit" style="width:auto">设置为主通信渠道</button>
        </form>
        <form method="post" action="{% url 'portal_unbind_wechat' item.id %}" data-unbind-form data-binding-label="{% if item.remark %}{{ item.remark }}{% else %}个人微信{% endif %}">
          {% csrf_token %}
          <input type="hidden" name="delete_memory" value="no">
          <button type="submit" style="width:auto;background:#b42318">解除绑定</button>
        </form>
      </td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
{% endif %}
{% if binding and binding.status == "qr_pending" and channel_gateway_mode == "real" and plugin_qr_available %}
  <div id="wechat-qr-panel" data-status-url="{% url 'portal_wechat_binding_status' binding.id %}" data-account-url="/portal/me/">
    <p id="wechat-qr-status">等待扫码确认。</p>
    <p>剩余有效时间：<strong id="wechat-qr-countdown" data-remaining-seconds="{{ remaining_seconds|default:0 }}">{{ remaining_seconds|default:0 }} 秒</strong></p>
    <p>过期时间：{{ binding.qr_expires_at }}</p>
    <img id="wechat-qr-image" src="{% url 'portal_wechat_qr_image' binding.id %}" alt="微信绑定二维码" style="width:240px;height:240px;max-width:80vw;border:1px solid #ddd;padding:8px;background:#fff;">
  </div>
  <script>
    (function(){
      var panel = document.getElementById('wechat-qr-panel');
      var el = document.getElementById('wechat-qr-countdown');
      var statusEl = document.getElementById('wechat-qr-status');
      var qrImage = document.getElementById('wechat-qr-image');
      if (!panel || !el || !statusEl) return;
      var remaining = parseInt(el.getAttribute('data-remaining-seconds') || '0', 10);
      var pollTimer = null;
      var countdownTimer = null;
      function render(){
        if (remaining <= 0) { el.textContent = '已过期，请重新生成'; return; }
        var minutes = Math.floor(remaining / 60);
        var seconds = remaining % 60;
        el.textContent = minutes + ' 分 ' + seconds + ' 秒';
      }
      function stopTerminal(message, countdownText){
        statusEl.textContent = message;
        if (countdownText) el.textContent = countdownText;
        if (qrImage) qrImage.style.opacity = '0.45';
        if (pollTimer) clearInterval(pollTimer);
        if (countdownTimer) clearInterval(countdownTimer);
      }
      function applyStatus(data){
        if (!data) return;
        if (typeof data.remaining_seconds === 'number') {
          remaining = data.remaining_seconds;
          render();
        }
        if (data.confirming_after_expiry) {
          statusEl.textContent = data.message || '扫码结果正在确认，请稍候。';
          el.textContent = data.countdown_text || '正在确认绑定';
          return;
        }
        if (data.status === 'bound') {
          stopTerminal(data.message || '绑定已完成。', '已完成');
          return;
        }
        if (data.status === 'expired') {
          stopTerminal(data.message || '二维码已过期，请重新生成。', '已过期，请重新生成');
          return;
        }
        if (data.status === 'failed') {
          var failedCountdown = data.countdown_text || (data.error_message === 'openclaw_fresh_wechat_identity_required' || data.error_message === 'openclaw_binding_proof_required' ? '未完成绑定' : '绑定失败');
          stopTerminal(data.message || '绑定失败，请重新生成。', failedCountdown);
          return;
        }
        statusEl.textContent = data.message || '等待扫码确认。';
      }
      function poll(){
        fetch(panel.getAttribute('data-status-url'), {credentials: 'same-origin', cache: 'no-store'})
          .then(function(resp){ return resp.ok ? resp.json() : null; })
          .then(applyStatus)
          .catch(function(){});
      }
      render();
      poll();
      countdownTimer = setInterval(function(){ if (remaining > 0) { remaining -= 1; render(); } }, 1000);
      pollTimer = setInterval(poll, 3000);
    })();
  </script>
  <p><a href="/portal/me/">返回账号页</a></p>
{% elif can_generate %}
  {% if bindings %}
  <p>可继续绑定新的个人微信；同一用户记忆共享，每个微信渠道对应独立运行态。</p>
  {% else %}
  <p>当前未绑定个人微信。</p>
  {% endif %}
  <form method="post" action="{% url 'portal_bind_wechat' %}">
    {% csrf_token %}
    <button type="submit">生成绑定二维码</button>
  </form>
  <p><a href="/portal/me/">返回账号页</a></p>
{% elif bindings %}
  <p>当前暂不能继续绑定新的个人微信，请稍后再试。</p>
  <p><a href="/portal/me/">返回账号页</a></p>
{% else %}
  <p>当前微信服务未提供可用的绑定二维码，暂不生成或展示二维码。</p>
  <p><a href="/portal/me/">返回</a></p>
{% endif %}
<div id="wechat-unbind-confirm" hidden>
  <div style="max-width:440px;background:#fff;border:1px solid #ddd;border-radius:12px;padding:18px">
    <h3>解除绑定</h3>
    <p id="wechat-unbind-confirm-message">解除绑定后，该微信将不能继续收发消息。是否删除该渠道记忆？</p>
    <p style="display:flex;gap:8px;flex-wrap:wrap">
      <button type="button" data-unbind-choice="keep">保留记忆并解除绑定</button>
      <button type="button" data-unbind-choice="delete" style="background:#b42318">删除记忆并解除绑定</button>
      <button type="button" data-unbind-choice="cancel">取消</button>
    </p>
  </div>
</div>
<script>
  (function(){
    var pending = null;
    var dialog = document.getElementById('wechat-unbind-confirm');
    var message = document.getElementById('wechat-unbind-confirm-message');
    document.querySelectorAll('[data-unbind-form]').forEach(function(form){
      form.addEventListener('submit', function(evt){
        if (form.getAttribute('data-confirmed') === '1') return;
        evt.preventDefault();
        pending = form;
        if (message) message.textContent = '解除绑定后，' + (form.getAttribute('data-binding-label') || '该微信渠道') + ' 将不能继续收发消息。是否同时删除该渠道记忆？';
        if (dialog) dialog.hidden = false;
      });
    });
    if (dialog) {
      dialog.querySelectorAll('[data-unbind-choice]').forEach(function(btn){
        btn.addEventListener('click', function(){
          var choice = btn.getAttribute('data-unbind-choice');
          if (choice === 'cancel') { dialog.hidden = true; pending = null; return; }
          if (!pending) return;
          var input = pending.querySelector('input[name="delete_memory"]');
          if (input) input.value = choice === 'delete' ? 'yes' : 'no';
          pending.setAttribute('data-confirmed', '1');
          pending.submit();
        });
      });
    }
  })();
</script>
{% endblock %}