@extends('layouts.app')
@section('title', '訊息')

@section('content')
<div class="container-fluid px-4 py-4">
  {{-- 多裝置連結：這台裝置是 pending/revoked 時顯示，解釋為什麼訊息傳不出去/解不開，
       不能讓使用者誤以為是 bug。狀態正常時整條隱藏。 --}}
  <div id="devicePendingBanner" class="d-none alert alert-warning d-flex align-items-center justify-content-between gap-2 mb-3" role="alert">
    <div><i class="bi bi-shield-exclamation me-1"></i><span id="devicePendingBannerText"></span></div>
    <a href="{{ route('profile.edit') }}#devices" class="btn btn-sm btn-warning flex-shrink-0">前往管理裝置</a>
  </div>
  <div class="row g-3" id="messagingLayout" style="height: calc(100vh - 160px); min-height: 480px;">

    {{-- 左側：對話列表／聯絡人 --}}
    <div class="col-12 col-md-4 col-lg-3 d-flex flex-column border rounded bg-white" style="overflow: hidden;">
      <div class="d-flex justify-content-between align-items-center px-3 py-2 border-bottom">
        <h6 class="fw-bold mb-0"><i class="bi bi-chat-dots me-1"></i>訊息</h6>
        <div class="d-flex align-items-center gap-2">
          <div class="position-relative">
            <button type="button" class="btn btn-sm btn-outline-secondary d-flex align-items-center gap-1" id="myStatusBtn" title="狀態">
              <span class="status-dot" id="myStatusDot" data-status="online"></span>
              <i class="bi bi-caret-down-fill small"></i>
            </button>
            <div id="myStatusMenu" class="d-none list-group shadow" style="position:fixed; min-width:140px; z-index:1060;">
              <button type="button" class="list-group-item list-group-item-action" data-dnd="0">
                <span class="status-dot status-online"></span> 上線／自動
              </button>
              <button type="button" class="list-group-item list-group-item-action" data-dnd="1">
                <span class="status-dot status-dnd"></span> 勿擾
              </button>
            </div>
          </div>
          <button type="button" class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#newConversationModal">
            <i class="bi bi-plus-lg"></i>
          </button>
        </div>
      </div>

      <ul class="nav nav-tabs px-2 pt-2" style="flex-shrink:0;">
        <li class="nav-item"><button type="button" class="nav-link active" id="sidebarTabChats">聊天</button></li>
        <li class="nav-item"><button type="button" class="nav-link" id="sidebarTabContacts">聯絡人</button></li>
      </ul>

      <div class="flex-grow-1" id="chatListWrap" style="overflow-y: auto; min-height: 0;">
        <ul class="list-unstyled mb-0" id="conversationList">
          <li class="text-center text-muted small py-4">載入中…</li>
        </ul>
        <div class="px-3 py-2 small fw-bold text-muted bg-light border-bottom d-none" id="federatedChatHead">
          <i class="bi bi-building me-1"></i>跨組織對話
        </div>
        <ul class="list-unstyled mb-0" id="federatedConversationList"></ul>
        <div class="px-3 py-2 small fw-bold text-muted bg-light border-bottom contact-hidden-toggle d-none" id="federatedChatHiddenToggle">
          <i class="bi bi-caret-right-fill"></i> 已隱藏的跨組織聊天 (<span id="federatedChatHiddenCount">0</span>)
        </div>
        <ul class="list-unstyled mb-0 d-none" id="federatedChatHiddenList"></ul>
        <div id="federatedChatContextMenu" class="d-none list-group shadow" style="position:fixed; min-width:160px; z-index:1070;"></div>
        <div class="px-3 py-2 small fw-bold text-muted bg-light border-bottom contact-hidden-toggle d-none" id="chatHiddenToggle">
          <i class="bi bi-caret-right-fill"></i> 已隱藏的聊天 (<span id="chatHiddenCount">0</span>)
        </div>
        <ul class="list-unstyled mb-0 d-none" id="chatHiddenList"></ul>
      </div>
      <div class="flex-grow-1 d-none" id="contactList" style="overflow-y: auto; min-height: 0;">
        <div class="px-3 py-2 small fw-bold text-muted bg-light border-bottom">群組</div>
        <ul class="list-unstyled mb-0" id="contactGroupList">
          <li class="text-center text-muted small py-3">載入中…</li>
        </ul>
        <div class="px-3 py-2 small fw-bold text-muted bg-light border-bottom">朋友聯絡人</div>
        <ul class="list-unstyled mb-0" id="contactFriendList">
          <li class="text-center text-muted small py-3">載入中…</li>
        </ul>
        <div class="px-3 py-2 small fw-bold text-muted bg-light border-bottom d-none" id="federatedContactHead">
          <i class="bi bi-building me-1"></i>其他公司聯絡人
        </div>
        <ul class="list-unstyled mb-0" id="federatedContactList"></ul>
        <div class="px-3 py-2 small fw-bold text-muted bg-light border-bottom contact-hidden-toggle d-none" id="contactHiddenToggle">
          <i class="bi bi-caret-right-fill"></i> 已隱藏的聯絡人 (<span id="contactHiddenCount">0</span>)
        </div>
        <ul class="list-unstyled mb-0 d-none" id="contactHiddenList"></ul>
      </div>
    </div>

    {{-- 右側：對話串 --}}
    <div class="col-12 col-md-8 col-lg-9 d-flex flex-column border rounded bg-white" style="overflow: hidden; min-height: 0;">
      <div id="threadEmpty" class="d-flex flex-column align-items-center justify-content-center flex-grow-1 text-muted">
        <i class="bi bi-chat-square-text" style="font-size: 2.5rem;"></i>
        <div class="mt-2">選一個對話開始聊天</div>
      </div>

      <div id="threadPanel" class="d-none d-flex flex-column h-100" style="min-height: 0;">
        <div class="border-bottom">
          <div class="d-flex justify-content-between align-items-center px-3 py-2" id="threadHeaderNormal">
            <div class="d-flex align-items-center gap-2" style="min-width:0;">
              {{-- 手機版（單欄）才顯示，點了回到聊天清單；電腦版兩欄並排本來就看得到清單，不用這顆 --}}
              <button type="button" class="btn btn-sm btn-link text-dark px-1 d-md-none" id="threadBackBtn" title="回到聊天清單">
                <i class="bi bi-chevron-left fs-5"></i>
              </button>
              <div id="threadHeaderAvatar"></div>
              <div style="min-width:0;">
                <div class="fw-semibold text-truncate" id="threadTitle">—</div>
                {{-- 沒加 text-truncate 之前，標題列一擠窄，中文的「離線」這種
                     兩個字沒有空白可斷行，瀏覽器會直接從字中間斷開，變成
                     「離」「線」各佔一行——不是即時狀態的 bug，純粹是這裡
                     少了跟 threadTitle 一樣的 white-space:nowrap。 --}}
                <div class="small text-muted text-truncate" id="threadSubtitle" style="white-space:nowrap;"></div>
              </div>
            </div>
            <div class="d-flex gap-2 align-items-center">
              <button type="button" class="btn btn-sm btn-outline-secondary" id="threadSearchBtn" title="搜尋訊息">
                <i class="bi bi-search"></i>
              </button>
              <button type="button" class="btn btn-sm btn-success d-none" id="joinOngoingCallBtn" title="加入進行中的通話">
                <i class="bi bi-telephone-inbound-fill me-1"></i>加入通話
              </button>
              <div id="callButtons" class="d-none d-flex gap-2">
                <button type="button" class="btn btn-sm btn-outline-success" id="startAudioCallBtn" title="語音通話">
                  <i class="bi bi-telephone-fill"></i>
                </button>
                <button type="button" class="btn btn-sm btn-outline-success" id="startVideoCallBtn" title="視訊通話">
                  <i class="bi bi-camera-video-fill"></i>
                </button>
              </div>
              <div class="position-relative">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="chatBgBtn" title="聊天背景">
                  <i class="bi bi-image"></i>
                </button>
                <div id="chatBgMenu" class="d-none shadow bg-white rounded p-2" style="position:fixed; z-index:1060; width:168px;">
                  <div class="small text-muted mb-1 px-1">聊天背景</div>
                  <div class="d-flex flex-wrap gap-2 px-1 pb-1">
                    <span class="chat-bg-swatch" data-bg="default" title="預設" style="background:#f8f9fa;"></span>
                    <span class="chat-bg-swatch" data-bg="ocean" title="海洋" style="background:linear-gradient(180deg,#0f6ea8,#17b3ab);"></span>
                    <span class="chat-bg-swatch" data-bg="dark" title="暗黑" style="background:linear-gradient(180deg,#16181d,#1f2229);"></span>
                    <span class="chat-bg-swatch" data-bg="spring" title="春天" style="background:linear-gradient(180deg,#eafbe7,#ffd3e6);"></span>
                    <span class="chat-bg-swatch" data-bg="summer" title="夏天" style="background:linear-gradient(180deg,#7fd3f2,#fff6b7);"></span>
                    <span class="chat-bg-swatch" data-bg="autumn" title="秋天" style="background:linear-gradient(180deg,#f6d9a6,#c9722f);"></span>
                    <span class="chat-bg-swatch" data-bg="winter" title="冬天" style="background:linear-gradient(180deg,#cfe4f5,#a9c9e6);"></span>
                  </div>
                </div>
              </div>
              {{-- 群組資訊：改名/換大頭照/看成員/加人/踢人/離開群組全部收在這一個面板，
                   所有成員都看得到（離開群組人人都能做），面板裡面才依 is_owner 決定
                   改名/換照片/踢人這幾個按鈕要不要顯示。 --}}
              <button type="button" class="btn btn-sm btn-outline-secondary d-none" id="groupInfoBtn" title="群組資訊" data-bs-toggle="modal" data-bs-target="#groupInfoModal">
                <i class="bi bi-info-circle"></i>
              </button>
            </div>
          </div>

          {{-- 搜尋這個對話的訊息，跟 LINE 一樣：輸入關鍵字、上下箭頭在符合的訊息
               之間跳、旁邊顯示「第 x / 共 y 筆」。跟上面那排共用同一個外層容器，
               這樣不管顯示哪一排，threadPanel 第一個子元素（版面高度計算用）量到
               的高度都是真的渲染出來的高度，不用另外改 applyThreadSplit() 的邏輯。 --}}
          <div class="d-none align-items-center gap-2 px-3 py-2" id="threadSearchBar">
            <button type="button" class="btn btn-sm btn-link text-dark px-1" id="threadSearchCloseBtn" title="關閉搜尋">
              <i class="bi bi-arrow-left fs-5"></i>
            </button>
            <input type="text" class="form-control form-control-sm" id="threadSearchInput" placeholder="搜尋這個對話的訊息…">
            <span class="small text-muted text-nowrap" id="threadSearchCount"></span>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="threadSearchPrevBtn" title="上一筆">
              <i class="bi bi-chevron-up"></i>
            </button>
            <button type="button" class="btn btn-sm btn-outline-secondary" id="threadSearchNextBtn" title="下一筆">
              <i class="bi bi-chevron-down"></i>
            </button>
          </div>
        </div>

        <div id="threadMessages" class="px-3 py-2" style="overflow-y: auto; min-height: 0;"></div>

        {{-- 訊息右鍵選單：回覆／編輯／收回／刪除 --}}
        <div id="msgContextMenu" class="d-none list-group shadow" style="position:fixed; min-width:140px; z-index:1070; max-height:calc(100vh - 20px); overflow-y:auto;"></div>
        <div id="contactContextMenu" class="d-none list-group shadow" style="position:fixed; min-width:160px; z-index:1070; max-height:calc(100vh - 20px); overflow-y:auto;"></div>
        <div id="chatContextMenu" class="d-none list-group shadow" style="position:fixed; min-width:160px; z-index:1070; max-height:calc(100vh - 20px); overflow-y:auto;"></div>

        {{-- 回覆／編輯中的提示條，蓋在輸入框正上方 --}}
        <div id="composeContextBar" class="d-none border-top px-3 py-2 d-flex align-items-center gap-2 bg-light">
          <i id="composeContextIcon" class="bi bi-reply-fill text-primary"></i>
          <div class="flex-grow-1 small text-truncate">
            <div id="composeContextLabel" class="fw-semibold"></div>
            <div id="composeContextSnippet" class="text-muted text-truncate"></div>
          </div>
          <button type="button" class="btn-close" id="composeContextCancel" aria-label="取消"></button>
        </div>

        <form id="messageForm" class="border-top d-flex flex-column position-relative">
          {{-- 功能鍵（＋、表情符號）跟送出鍵都放在輸入框「上方」的工具列，不放在輸入框下面 --}}
          <div class="d-flex align-items-center gap-1 px-3 pt-2 pb-1">
            <div class="position-relative">
              <button type="button" class="compose-icon-btn" id="attachMenuBtn" title="新增">
                <i class="bi bi-plus-lg"></i>
              </button>
              <div id="attachMenu" class="d-none list-group shadow" style="position:fixed; min-width:160px; z-index:1060; max-height:calc(100vh - 20px); overflow-y:auto;">
                <button type="button" class="list-group-item list-group-item-action" id="attachImageBtn">
                  <i class="bi bi-image me-2 text-primary"></i>圖片
                </button>
                <button type="button" class="list-group-item list-group-item-action" id="attachScreenshotBtn">
                  <i class="bi bi-window me-2 text-info"></i>螢幕截圖
                </button>
                <button type="button" class="list-group-item list-group-item-action" id="attachLocationBtn">
                  <i class="bi bi-geo-alt me-2 text-danger"></i>位置
                </button>
                <button type="button" class="list-group-item list-group-item-action" id="attachVoiceBtn">
                  <i class="bi bi-mic me-2 text-success"></i>語音
                </button>
                <button type="button" class="list-group-item list-group-item-action" id="attachFileBtn">
                  <i class="bi bi-file-earmark-arrow-up me-2 text-secondary"></i>檔案
                </button>
              </div>
            </div>
            <input type="file" id="imageFileInput" accept="image/*" class="d-none">
            <input type="file" id="genericFileInput" class="d-none">
            <div class="position-relative">
              <button type="button" class="compose-icon-btn" id="attachEmojiBtn" title="貼圖／表情符號">
                <i class="bi bi-emoji-smile text-warning"></i>
              </button>
              {{-- 跟 LINE 一樣：貼圖／表情共用同一個彈出面板、同一顆按鈕，靠上面
                   兩個分頁切換，預設打開時停在「貼圖」分頁。 --}}
              <div id="emojiStickerPanel" class="d-none shadow bg-white" style="position:fixed; z-index:1060; width:300px; height:360px; border-radius:.5rem; overflow:hidden; display:flex; flex-direction:column;">
                <div class="d-flex border-bottom" style="flex:0 0 auto;">
                  <button type="button" class="panel-tab-btn active" id="panelTabStickerBtn" data-tab="sticker">
                    <i class="bi bi-sticky me-1"></i>貼圖
                  </button>
                  <button type="button" class="panel-tab-btn" id="panelTabEmojiBtn" data-tab="emoji">
                    <i class="bi bi-emoji-smile me-1"></i>表情
                  </button>
                </div>
                <div id="stickerPickerWrap" style="flex:1; overflow:hidden; display:flex; flex-direction:column;"></div>
                <div id="emojiPickerWrap" class="d-none" style="flex:1; overflow:hidden;"></div>
              </div>
            </div>
            <button type="submit" class="btn ms-auto" id="sendBtn"><i class="bi bi-send-fill"></i></button>
          </div>

          <div class="flex-grow-1 px-3 pb-2" style="min-height: 0;">
            <textarea id="messageInput" class="form-control" placeholder="輸入訊息…（Enter 送出，Shift+Enter 換行）" maxlength="5000"></textarea>

            <div id="voiceRecordBar" class="d-none h-100 align-items-center gap-2">
              <i class="bi bi-record-circle-fill text-danger"></i>
              <span id="voiceRecordTimer" class="text-muted small">00:00</span>
              <span class="text-muted small">錄音中…</span>
              <div class="ms-auto d-flex gap-2">
                <button type="button" class="btn btn-sm btn-outline-secondary" id="voiceCancelBtn">取消</button>
                <button type="button" class="btn btn-sm btn-primary" id="voiceStopBtn">傳送</button>
              </div>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

{{-- 新對話 Modal --}}
<div class="modal fade" id="newConversationModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title fw-bold">新對話</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <ul class="nav nav-tabs mb-3" role="tablist">
          <li class="nav-item"><button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabDirect" type="button">私訊</button></li>
          <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabGroup" type="button">群組</button></li>
          <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabFederated" type="button">其他公司</button></li>
          <li class="nav-item"><button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabFederatedGroup" type="button">跨組織群組</button></li>
        </ul>
        <div class="tab-content">
          <div class="tab-pane fade show active" id="tabDirect">
            <label class="form-label small">搜尋使用者</label>
            <input type="text" class="form-control mb-2" id="directUserSearch" placeholder="輸入姓名關鍵字…">
            <ul class="list-unstyled mb-0" id="directUserResults" style="max-height: 260px; overflow-y: auto;"></ul>
          </div>
          <div class="tab-pane fade" id="tabGroup">
            <label class="form-label small">群組名稱</label>
            <input type="text" class="form-control mb-2" id="groupTitleInput" maxlength="150">
            <label class="form-label small">搜尋成員</label>
            <input type="text" class="form-control mb-2" id="groupUserSearch" placeholder="輸入姓名關鍵字…">
            <ul class="list-unstyled mb-2" id="groupUserResults" style="max-height: 180px; overflow-y: auto;"></ul>
            <div class="small text-muted mb-2">已選：<span id="groupSelectedNames">（無）</span></div>
            <button type="button" class="btn btn-primary w-100" id="createGroupBtn">建立群組</button>
          </div>
          <div class="tab-pane fade" id="tabFederated">
            <label class="form-label small">搜尋其他公司成員</label>
            <input type="text" class="form-control mb-2" id="federatedUserSearch" placeholder="輸入姓名、email 或部門關鍵字…">
            <ul class="list-unstyled mb-0" id="federatedUserResults" style="max-height: 260px; overflow-y: auto;">
              <li class="text-center text-muted small py-3">輸入關鍵字開始搜尋</li>
            </ul>
            <div class="form-text mt-2">只會看到對方公司主動開放、且已同步過的成員；沒看到人可以請對方確認通訊錄開放範圍。</div>
          </div>
          <div class="tab-pane fade" id="tabFederatedGroup">
            <label class="form-label small">群組名稱</label>
            <input type="text" class="form-control mb-2" id="fedGroupTitleInput" maxlength="150">
            <label class="form-label small">搜尋其他公司成員</label>
            <input type="text" class="form-control mb-2" id="fedGroupUserSearch" placeholder="輸入姓名、email 或部門關鍵字…">
            <ul class="list-unstyled mb-2" id="fedGroupUserResults" style="max-height: 180px; overflow-y: auto;">
              <li class="text-center text-muted small py-3">輸入關鍵字開始搜尋</li>
            </ul>
            <div class="small text-muted mb-2">已選：<span id="fedGroupSelectedNames">（無）</span></div>
            <button type="button" class="btn btn-primary w-100" id="createFedGroupBtn">建立跨組織群組</button>
            <div class="form-text mt-2">只能邀請已加入通訊錄的成員；如果對方公司還沒開放群組功能，建立時會提示失敗。建立後可以在群組資訊裡邀請本組織同事加入。</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const searchInput = document.getElementById('federatedUserSearch');
  const resultsEl = document.getElementById('federatedUserResults');
  const csrf = document.querySelector('meta[name="csrf-token"]')?.content ?? '';
  let debounceTimer = null;

  function renderResults(contacts) {
    resultsEl.innerHTML = '';
    if (!contacts.length) {
      resultsEl.innerHTML = '<li class="text-center text-muted small py-3">沒有符合的人</li>';
      return;
    }
    contacts.forEach(function (c) {
      const li = document.createElement('li');
      li.className = 'list-group-item d-flex justify-content-between align-items-center py-2';
      li.innerHTML = '<span style="cursor:pointer;" class="federated-open-chat"><span class="fw-semibold"></span><br>' +
        '<span class="small text-muted federated-contact-meta"></span></span>' +
        '<span class="d-flex align-items-center gap-2 flex-shrink-0">' +
        '<span class="badge bg-light text-secondary border"></span>' +
        '<button type="button" class="btn btn-sm federated-add-btn"></button>' +
        '</span>';
      li.querySelector('.fw-semibold').textContent = c.name;
      li.querySelector('.federated-contact-meta').textContent = [c.email, c.department].filter(Boolean).join(' · ');
      li.querySelector('.badge').textContent = c.peer_org_id;
      li.querySelector('.federated-open-chat').addEventListener('click', function () { startFederatedChat(c.federated_id, li); });

      const addBtn = li.querySelector('.federated-add-btn');
      setAddButtonState(addBtn, c.is_added);
      addBtn.addEventListener('click', function (e) {
        e.stopPropagation();
        toggleFederatedContact(c.id, !addBtn.dataset.added || addBtn.dataset.added === '0', addBtn);
      });

      resultsEl.appendChild(li);
    });
  }

  function setAddButtonState(btn, added) {
    btn.dataset.added = added ? '1' : '0';
    btn.className = 'btn btn-sm federated-add-btn ' + (added ? 'btn-outline-secondary' : 'btn-outline-primary');
    btn.textContent = added ? '已加入' : '+ 加入';
  }

  function toggleFederatedContact(contactId, add, btn) {
    btn.disabled = true;
    fetch('{{ url('messaging/federated-contacts') }}/' + contactId, {
      method: add ? 'POST' : 'DELETE',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrf,
      },
    })
      .then(function (res) { if (!res.ok) { throw new Error('toggle failed'); } return res.json(); })
      .then(function (data) {
        setAddButtonState(btn, data.added);
        loadFederatedContacts();
      })
      .catch(function () { alert('操作失敗，請稍後再試。'); })
      .finally(function () { btn.disabled = false; });
  }

  function searchFederatedContacts(q) {
    fetch('{{ route('messaging.federated-contacts.search') }}?q=' + encodeURIComponent(q), {
      headers: { 'Accept': 'application/json' },
    })
      .then(function (res) { return res.json(); })
      .then(function (data) { renderResults(data.contacts || []); })
      .catch(function () { resultsEl.innerHTML = '<li class="text-center text-danger small py-3">搜尋失敗，請稍後再試</li>'; });
  }

  function startFederatedChat(federatedId, li) {
    li.classList.add('disabled');
    fetch('{{ route('messaging.federated.start') }}', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrf,
      },
      body: JSON.stringify({ peer_federated_id: federatedId }),
    })
      .then(function (res) {
        if (!res.ok) { throw new Error('start failed'); }
        return res.json();
      })
      .then(function (data) { window.location.href = data.redirect; })
      .catch(function () {
        li.classList.remove('disabled');
        alert('開啟對話失敗，請稍後再試。');
      });
  }

  searchInput?.addEventListener('input', function () {
    clearTimeout(debounceTimer);
    const q = searchInput.value.trim();
    debounceTimer = setTimeout(function () { searchFederatedContacts(q); }, 300);
  });

  // ── 側邊欄：跨組織對話清單（沒有即時推播，靠輪詢） ──
  const fedConvHead = document.getElementById('federatedChatHead');
  const fedConvList = document.getElementById('federatedConversationList');
  const fedHiddenToggle = document.getElementById('federatedChatHiddenToggle');
  const fedHiddenCount = document.getElementById('federatedChatHiddenCount');
  const fedHiddenList = document.getElementById('federatedChatHiddenList');
  const fedChatContextMenu = document.getElementById('federatedChatContextMenu');
  let fedHiddenOpen = false;

  function timeAgo(iso) {
    if (!iso) return '';
    const diffMin = Math.round((Date.now() - new Date(iso).getTime()) / 60000);
    if (diffMin < 1) return '剛剛';
    if (diffMin < 60) return diffMin + ' 分鐘前';
    const diffHour = Math.round(diffMin / 60);
    if (diffHour < 24) return diffHour + ' 小時前';
    return Math.round(diffHour / 24) + ' 天前';
  }

  function buildFederatedConvItem(c) {
    const li = document.createElement('li');
    li.className = 'px-3 py-2 border-bottom d-flex justify-content-between align-items-center';
    li.style.cursor = 'pointer';
    li.dataset.id = c.id;
    li.dataset.type = c.type;
    li.innerHTML = '<span style="min-width:0;" class="text-truncate">' +
      '<span class="fw-semibold"></span> <span class="badge bg-light text-secondary border"></span><br>' +
      '<span class="small text-muted last-msg"></span></span>' +
      '<span class="d-flex flex-column align-items-end flex-shrink-0 ms-2">' +
      '<span class="small text-muted"></span>' +
      '<span class="badge bg-danger rounded-pill unread-badge d-none"></span>' +
      '</span>';
    li.querySelector('.fw-semibold').textContent = c.name;
    li.querySelector('.badge.bg-light').textContent = c.type === 'group' ? (c.member_count + ' 人') : c.peer_org_id;
    li.querySelector('.last-msg').textContent = c.last_message || '（尚無訊息）';
    li.querySelectorAll('.small.text-muted')[1].textContent = timeAgo(c.last_message_at);
    if (c.unread_count > 0) {
      const badge = li.querySelector('.unread-badge');
      badge.textContent = c.unread_count;
      badge.classList.remove('d-none');
    }
    li.addEventListener('click', function () { window.location.href = '{{ url('messaging/federated') }}/' + c.id; });
    return li;
  }

  function loadFederatedConversations() {
    fetch('{{ route('messaging.federated.index') }}', { headers: { 'Accept': 'application/json' } })
      .then(function (res) { return res.json(); })
      .then(function (data) {
        const all = data.conversations || [];
        const visible = all.filter(function (c) { return !c.hidden; });
        const hidden = all.filter(function (c) { return c.hidden; });

        fedConvHead.classList.toggle('d-none', visible.length === 0 && hidden.length === 0);
        fedConvList.innerHTML = '';
        visible.forEach(function (c) { fedConvList.appendChild(buildFederatedConvItem(c)); });

        fedHiddenToggle.classList.toggle('d-none', hidden.length === 0);
        fedHiddenCount.textContent = hidden.length;
        fedHiddenList.innerHTML = '';
        hidden.forEach(function (c) {
          const li = buildFederatedConvItem(c);
          li.classList.add('text-muted');
          fedHiddenList.appendChild(li);
        });
      })
      .catch(function () { /* 靜默失敗，下次輪詢再試 */ });
  }

  fedHiddenToggle.addEventListener('click', function () {
    fedHiddenOpen = !fedHiddenOpen;
    fedHiddenList.classList.toggle('d-none', !fedHiddenOpen);
    fedHiddenToggle.classList.toggle('open', fedHiddenOpen);
  });

  function closeFedChatContextMenu() { fedChatContextMenu.classList.add('d-none'); fedChatContextMenu.innerHTML = ''; }

  [fedConvList, fedHiddenList].forEach(function (list) {
    list.addEventListener('contextmenu', function (e) {
      const li = e.target.closest('li[data-id]');
      if (!li) return;
      e.preventDefault();
      const isHidden = list === fedHiddenList;

      // 群組聊天記錄是組織內共用的，不開放個人清除（見 FederatedChatController::clearMessages()）。
      const items = [
        ...(li.dataset.type === 'group' ? [] : [{ key: 'clear', icon: 'bi-trash text-secondary', label: '刪除聊天記錄' }]),
        isHidden
          ? { key: 'unhide', icon: 'bi-eye text-secondary', label: '取消隱藏' }
          : { key: 'hide', icon: 'bi-eye-slash text-secondary', label: '隱藏聊天' },
      ];
      fedChatContextMenu.innerHTML = items.map(function (it) {
        return '<button type="button" class="list-group-item list-group-item-action" data-action="' + it.key + '">' +
          '<i class="bi ' + it.icon + ' me-2"></i>' + it.label + '</button>';
      }).join('');
      fedChatContextMenu.dataset.conversationId = li.dataset.id;

      const maxLeft = window.innerWidth - 180;
      const maxTop = window.innerHeight - (items.length * 40 + 10);
      fedChatContextMenu.style.left = Math.max(0, Math.min(e.clientX, maxLeft)) + 'px';
      fedChatContextMenu.style.top = Math.max(0, Math.min(e.clientY, maxTop)) + 'px';
      fedChatContextMenu.classList.remove('d-none');
    });
  });

  document.addEventListener('click', function (e) {
    if (!fedChatContextMenu.contains(e.target)) closeFedChatContextMenu();
  });
  window.addEventListener('scroll', closeFedChatContextMenu, true);

  fedChatContextMenu.addEventListener('click', async function (e) {
    const btn = e.target.closest('[data-action]');
    if (!btn) return;
    const action = btn.dataset.action;
    const conversationId = fedChatContextMenu.dataset.conversationId;
    closeFedChatContextMenu();
    if (!conversationId) return;

    const base = '{{ url('messaging/federated') }}/' + conversationId;
    try {
      if (action === 'clear') {
        if (!confirm('確定要刪除這個跨組織聊天室的聊天記錄嗎？只會清空你自己的畫面，對方不受影響，之後還可以繼續聊天。')) return;
        await fetch(base + '/clear', { method: 'DELETE', headers: { 'X-CSRF-TOKEN': csrf, Accept: 'application/json' } });
      } else if (action === 'hide') {
        await fetch(base + '/hide', { method: 'POST', headers: { 'X-CSRF-TOKEN': csrf, Accept: 'application/json' } });
      } else if (action === 'unhide') {
        await fetch(base + '/hide', { method: 'DELETE', headers: { 'X-CSRF-TOKEN': csrf, Accept: 'application/json' } });
      }
      loadFederatedConversations();
    } catch (err) {
      alert('操作失敗，請稍後再試');
    }
  });

  // ── 聯絡人分頁：其他公司聯絡人清單 ──
  const fedContactHead = document.getElementById('federatedContactHead');
  const fedContactList = document.getElementById('federatedContactList');

  function loadFederatedContacts() {
    fetch('{{ route('messaging.federated-contacts.index') }}', { headers: { 'Accept': 'application/json' } })
      .then(function (res) { return res.json(); })
      .then(function (data) {
        const contacts = data.contacts || [];
        fedContactHead.classList.toggle('d-none', contacts.length === 0);
        fedContactList.innerHTML = '';
        contacts.forEach(function (c) {
          const li = document.createElement('li');
          li.className = 'px-3 py-2 border-bottom d-flex justify-content-between align-items-center';
          li.style.cursor = 'pointer';
          li.innerHTML = '<span><span class="fw-semibold"></span><br>' +
            '<span class="small text-muted"></span></span>' +
            '<span class="badge bg-light text-secondary border flex-shrink-0"></span>';
          li.querySelector('.fw-semibold').textContent = c.name;
          li.querySelector('.small.text-muted').textContent = [c.email, c.department].filter(Boolean).join(' · ');
          li.querySelector('.badge').textContent = c.peer_org_id;
          li.addEventListener('click', function () { startFederatedChat(c.federated_id, li); });
          fedContactList.appendChild(li);
        });
      })
      .catch(function () { /* 靜默失敗 */ });
  }

  // ── 新對話 Modal：跨組織群組 ──────────────────────────────────
  const fedGroupSearchInput = document.getElementById('fedGroupUserSearch');
  const fedGroupResultsEl = document.getElementById('fedGroupUserResults');
  const fedGroupSelectedNames = document.getElementById('fedGroupSelectedNames');
  const selectedFedGroupContacts = new Map(); // federated_id -> name
  let fedGroupSearchTimer = null;

  function renderFedGroupResults(contacts) {
    fedGroupResultsEl.innerHTML = '';
    if (!contacts.length) {
      fedGroupResultsEl.innerHTML = '<li class="text-center text-muted small py-3">沒有符合的人</li>';
      return;
    }
    contacts.forEach(function (c) {
      const li = document.createElement('li');
      const checked = selectedFedGroupContacts.has(c.federated_id);
      li.className = 'list-group-item d-flex justify-content-between align-items-center py-2';
      li.style.cursor = 'pointer';
      li.dataset.federatedId = c.federated_id;
      li.dataset.name = c.name;
      li.innerHTML = '<span><span class="fw-semibold"></span><br>' +
        '<span class="small text-muted"></span></span>' +
        '<span class="d-flex align-items-center gap-2 flex-shrink-0">' +
        '<span class="badge bg-light text-secondary border"></span>' +
        '<i class="bi ' + (checked ? 'bi-check-square-fill text-primary' : 'bi-square text-muted') + '"></i>' +
        '</span>';
      li.querySelector('.fw-semibold').textContent = c.name;
      li.querySelector('.small.text-muted').textContent = [c.email, c.department].filter(Boolean).join(' · ');
      li.querySelector('.badge').textContent = c.peer_org_id;
      li.addEventListener('click', function () {
        if (selectedFedGroupContacts.has(c.federated_id)) {
          selectedFedGroupContacts.delete(c.federated_id);
        } else {
          selectedFedGroupContacts.set(c.federated_id, c.name);
        }
        fedGroupSelectedNames.textContent = Array.from(selectedFedGroupContacts.values()).join('、') || '（無）';
        renderFedGroupResults(contacts);
      });
      fedGroupResultsEl.appendChild(li);
    });
  }

  fedGroupSearchInput?.addEventListener('input', function () {
    clearTimeout(fedGroupSearchTimer);
    const q = fedGroupSearchInput.value.trim();
    fedGroupSearchTimer = setTimeout(function () {
      fetch('{{ route('messaging.federated-contacts.search') }}?q=' + encodeURIComponent(q), {
        headers: { 'Accept': 'application/json' },
      })
        .then(function (res) { return res.json(); })
        .then(function (data) { renderFedGroupResults(data.contacts || []); })
        .catch(function () { fedGroupResultsEl.innerHTML = '<li class="text-center text-danger small py-3">搜尋失敗，請稍後再試</li>'; });
    }, 300);
  });

  document.getElementById('createFedGroupBtn').addEventListener('click', function () {
    const title = document.getElementById('fedGroupTitleInput').value.trim();
    if (!title || !selectedFedGroupContacts.size) { alert('請輸入群組名稱並至少選一位成員'); return; }
    const btn = this;
    btn.disabled = true;
    fetch('{{ route('messaging.federated.groups.store') }}', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrf,
      },
      body: JSON.stringify({ title: title, peer_federated_ids: Array.from(selectedFedGroupContacts.keys()) }),
    })
      .then(function (res) {
        if (!res.ok) { return res.json().then(function (data) { throw new Error(data.message || '建立群組失敗'); }); }
        return res.json();
      })
      .then(function (data) { window.location.href = data.redirect; })
      .catch(function (err) { alert(err.message || '建立群組失敗，請稍後再試。'); })
      .finally(function () { btn.disabled = false; });
  });

  loadFederatedConversations();
  loadFederatedContacts();
  setInterval(loadFederatedConversations, 20000);
  setInterval(loadFederatedContacts, 60000);
});
</script>

{{-- 群組資訊 Modal：改名／換大頭照／成員清單／人數／加人／踢人／離開群組 --}}
<div class="modal fade" id="groupInfoModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title fw-bold">群組資訊</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <div class="d-flex flex-column align-items-center mb-3">
          <div class="position-relative mb-2">
            <div id="groupInfoAvatar" style="width:72px; height:72px;"></div>
            <button type="button" class="btn btn-sm btn-light border rounded-circle d-none position-absolute" id="groupInfoAvatarEditBtn"
                    style="right:-2px; bottom:-2px; width:28px; height:28px; padding:0; line-height:1;" title="換大頭照">
              <i class="bi bi-camera small"></i>
            </button>
            <input type="file" id="groupInfoAvatarInput" accept="image/*" class="d-none">
          </div>
          <div class="d-flex align-items-center gap-2" id="groupInfoNameView">
            <div class="fw-bold fs-5" id="groupInfoName">—</div>
            <button type="button" class="btn btn-sm btn-link p-0 d-none" id="groupInfoRenameBtn" title="改名">
              <i class="bi bi-pencil"></i>
            </button>
          </div>
          <div class="d-none w-100 mt-1" id="groupInfoNameEdit">
            <div class="input-group input-group-sm">
              <input type="text" class="form-control" id="groupInfoNameInput" maxlength="150">
              <button type="button" class="btn btn-primary" id="groupInfoNameSaveBtn">儲存</button>
              <button type="button" class="btn btn-outline-secondary" id="groupInfoNameCancelBtn">取消</button>
            </div>
          </div>
        </div>

        <div class="d-flex justify-content-between align-items-center py-2 px-1 mb-2 border-top border-bottom">
          <div class="d-flex align-items-center gap-2">
            <i class="bi bi-bell-slash text-muted"></i>
            <span class="small">靜音通知</span>
          </div>
          <div class="form-check form-switch mb-0">
            <input class="form-check-input" type="checkbox" role="switch" id="groupInfoMuteToggle" aria-label="靜音通知" aria-checked="false">
          </div>
        </div>

        <div class="d-flex justify-content-between align-items-center mb-2">
          <div class="small fw-bold text-muted">成員（<span id="groupInfoMemberCount">0</span> 人）</div>
          <button type="button" class="btn btn-sm btn-outline-primary d-none" id="groupInfoAddBtn">
            <i class="bi bi-person-plus me-1"></i>新增成員
          </button>
        </div>
        <ul class="list-unstyled mb-3" id="groupInfoMemberList" style="max-height: 280px; overflow-y: auto;"></ul>

        <button type="button" class="btn btn-outline-danger w-100" id="groupInfoLeaveBtn">
          <i class="bi bi-box-arrow-right me-1"></i>離開群組
        </button>
      </div>
    </div>
  </div>
</div>

{{-- 加成員 Modal --}}
<div class="modal fade" id="addParticipantModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h6 class="modal-title fw-bold">加入成員</h6>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control mb-2" id="addParticipantSearch" placeholder="輸入姓名關鍵字…">
        <ul class="list-unstyled mb-0" id="addParticipantResults" style="max-height: 260px; overflow-y: auto;"></ul>
      </div>
    </div>
  </div>
</div>

<style>
  /* 手機版（RWD）：清單／對話串一次只顯示一欄，不要像現在這樣兩欄疊在
     一起、對話串被擠到畫面最下面。預設（沒開對話）顯示清單，點開對話
     後 JS 幫 #messagingLayout 加上 .chat-open，這裡改成只顯示對話串，
     並露出上面的「‹ 返回」鍵。電腦版（>=768px）兩欄本來就並排顯示，
     這個媒體查詢完全不套用，「‹ 返回」鍵也用 d-md-none 直接隱藏。
     兩條規則都要加 !important——Bootstrap 的 .d-flex／col-* 版面 class
     本身就是 !important，普通的 display:none 蓋不過去（這個 session
     之前處理訊息面板高度時已經吃過一次這個虧）。 */
  @media (max-width: 767.98px) {
    #messagingLayout:not(.chat-open) > .col-md-8 { display: none !important; }
    #messagingLayout.chat-open > .col-md-4 { display: none !important; }
  }

  .conv-item, .contact-item { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-bottom: 1px solid #eee; text-decoration: none; color: inherit; cursor: pointer; }
  .conv-item:hover, .conv-item.active, .contact-item:hover, .contact-item.active { background: #f0f4ff; }
  .contact-item-hidden { opacity: .55; }
  .contact-hidden-toggle { cursor: pointer; user-select: none; }
  .contact-hidden-toggle .bi { transition: transform .15s ease; }
  .contact-hidden-toggle.open .bi { transform: rotate(90deg); }
  .msg-row { margin-bottom: .5rem; display: flex; align-items: flex-end; gap: .4rem; }
  .msg-row.me { justify-content: flex-end; }
  .msg-row > .msg-body-col { max-width: 70%; min-width: 0; }
  .msg-avatar { flex-shrink: 0; }
  .msg-avatar .avatar-img, .msg-avatar .avatar-fallback { width: 28px; height: 28px; font-size: .75rem; }
  #groupInfoAvatar .avatar-img, #groupInfoAvatar .avatar-fallback { width: 72px; height: 72px; font-size: 1.6rem; }
  .msg-bubble { padding: .4rem .7rem; border-radius: .8rem; background: #f1f1f1; word-break: break-word; overflow-wrap: break-word; }
  .msg-row.me .msg-bubble { background: #06c755; color: #fff; }
  /* 貼圖跟 LINE 一樣不套泡泡底色/padding，直接秀圖 */
  .msg-bubble.msg-bubble-sticker,
  .msg-row.me .msg-bubble.msg-bubble-sticker { padding: 0; background: transparent; }

  /* 貼圖／表情共用面板最上面那排「貼圖／表情」大分頁 */
  .panel-tab-btn { flex: 1 1 0; border: none; background: transparent; padding: .5rem 0; font-size: .85rem; color: #666; border-bottom: 2px solid transparent; }
  .panel-tab-btn.active { color: #06c755; border-bottom-color: #06c755; font-weight: 600; }

  /* 貼圖面板：上面一排是「已下載的貼圖包」分頁，下面是該包的貼圖格 */
  .sticker-tab-btn { flex: 0 0 auto; width: 44px; height: 44px; border: none; background: transparent; padding: 4px; cursor: pointer; color: #666; }
  .sticker-tab-btn img { width: 100%; height: 100%; object-fit: contain; }
  .sticker-tab-btn.active { background: #f1f1f1; border-radius: .4rem; }
  .sticker-pick-btn { border: none; background: transparent; padding: 4px; cursor: pointer; min-width: 0; }
  .sticker-pick-btn img { width: 100%; height: 100%; object-fit: contain; }
  .sticker-pick-btn:hover { background: #f5f5f5; border-radius: .4rem; }
  .sticker-pick-btn:disabled { opacity: .5; }
  /* 貼圖包貼圖數量超過一頁時，跟 LINE 一樣改成左右滑動分頁，
     而不是塞在同一格用上下捲動（捲動在 flex 容器裡常會被上層 overflow:hidden 裁掉看不到）。 */
  .sticker-page-track {
    flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; scrollbar-color: #ddd transparent;
  }
  .sticker-page-track::-webkit-scrollbar { height: 4px; }
  .sticker-page-track::-webkit-scrollbar-track { background: transparent; }
  .sticker-page-track::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
  /* 上面的貼圖包分頁列，捲軸樣式跟下面的貼圖翻頁列統一，不要用瀏覽器預設那種粗黑捲軸 */
  .sticker-pack-tabs { scrollbar-width: thin; scrollbar-color: #ddd transparent; }
  .sticker-pack-tabs::-webkit-scrollbar { height: 4px; }
  .sticker-pack-tabs::-webkit-scrollbar-track { background: transparent; }
  .sticker-pack-tabs::-webkit-scrollbar-thumb { background: #ddd; border-radius: 2px; }
  .sticker-page {
    flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start;
    display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr;
    padding: .5rem; box-sizing: border-box;
  }
  .sticker-page-dots { flex: 0 0 auto; display: flex; justify-content: center; gap: 5px; padding: 4px 0; }
  .sticker-page-dot { width: 6px; height: 6px; border-radius: 50%; background: #ddd; border: none; padding: 0; cursor: pointer; }
  .sticker-page-dot.active { background: #06c755; }

  /* 訊息下方的表情回應小標籤，跟 Google Chat 一樣可以疊很多種、按了就是切換自己那一票 */
  .msg-reactions { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
  .msg-reaction-pill {
    display: inline-flex; align-items: center; gap: 3px; border: 1px solid #ddd; background: #fff;
    border-radius: 1rem; padding: 1px 7px; font-size: .75rem; line-height: 1.5; cursor: pointer;
  }
  .msg-reaction-pill:hover { background: #f5f5f5; }
  .msg-reaction-pill.mine { border-color: #06c755; background: #eafff1; }
  .msg-reaction-count { color: #666; font-size: .7rem; }
  #threadMessages.chat-bg-dark .msg-reaction-pill { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #eee; }
  #threadMessages.chat-bg-dark .msg-reaction-pill.mine { border-color: #06c755; background: rgba(6,199,85,.2); }
  /* 右鍵／長按選單最上面那排常用表情快速回應（跟 LINE/Messenger 的長按手勢一樣） */
  .msg-quick-react-bar { display: flex; justify-content: space-between; padding: .4rem .6rem; border-bottom: 1px solid rgba(0,0,0,.08); }
  .msg-quick-react-btn { border: none; background: transparent; font-size: 1.2rem; line-height: 1; padding: 2px 4px; border-radius: .4rem; cursor: pointer; }
  .msg-quick-react-btn:hover { background: #f1f1f1; }
  .msg-meta { font-size: .7rem; color: #999; margin-top: 2px; }
  .msg-date-divider {
    display: inline-block; background: rgba(0,0,0,.08); color: #666;
    font-size: .72rem; padding: .2rem .75rem; border-radius: 1rem;
  }
  /* 搜尋訊息命中：整顆泡泡標一圈顏色，目前跳到的那一則顏色更明顯——
     不去改泡泡裡的文字內容做逐字反白，避免動到既有的訊息渲染邏輯。 */
  .msg-row.search-match .msg-bubble { outline: 2px solid #ffc107; outline-offset: 1px; }
  .msg-row.search-current .msg-bubble { outline: 3px solid #fd7e14; outline-offset: 1px; }

  /* 輸入框固定佔對話面板高度的 1/4（像 LINE）。實際的高度數字是
     applyThreadSplit()（見下面的 script）量 threadPanel 真正渲染出來的
     像素高度直接算、直接設定 style.height，不是靠這裡的 CSS 比例——
     flexbox 的 flex-basis 百分比在巢狀容器裡好幾輪都對不準，改用量測
     出來的 px 才穩。這裡只留 overflow:hidden 當保險，真正的高度以 JS
     設定的 inline style 為準。 */
  #messageForm { overflow: hidden; }
  #messageInput {
    width: 100%; height: 100%; resize: none; overflow-y: auto; line-height: 1.4;
    border: none; background: #f0f2f5; border-radius: 1.1rem; padding: .55rem 1rem;
  }
  #messageInput:focus { outline: none; box-shadow: none; background: #e7e9ec; }
  #threadMessages { overflow-y: auto; }

  /* LINE 風格：工具列圖示用無框圓形按鈕，送出鍵用 LINE 綠 */
  .compose-icon-btn {
    border: none; background: transparent; color: #6c757d;
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.1rem; flex-shrink: 0;
  }
  .compose-icon-btn:hover { background: #f0f2f5; }
  #sendBtn {
    background: #06c755; border-color: #06c755; color: #fff;
    width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  }
  #sendBtn:hover { background: #05b34c; border-color: #05b34c; }

  /* 頭像 + 上線狀態小圓點（像 Google Chat）*/
  .avatar-wrap { position: relative; flex-shrink: 0; }
  .avatar-img, .avatar-fallback {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
  }
  .avatar-fallback {
    display: flex; align-items: center; justify-content: center;
    background: #6c757d; color: #fff; font-size: .9rem; font-weight: 600;
  }
  .status-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    background: #adb5bd; border: 2px solid #fff;
  }
  .avatar-wrap .status-dot { position: absolute; right: -1px; bottom: -1px; }
  .status-dot.status-online { background: #28a745; }
  .status-dot.status-idle { background: #ffc107; }
  .status-dot.status-dnd { background: #dc3545; }
  .status-dot.status-offline { background: #adb5bd; }
  /* 頭像點頭像進個人主頁：<a> 本身不佔版面（display:contents），layout 還是
     照 .avatar-wrap 原本在 flex 容器裡的樣子排，不會多一層盒子擠版。 */
  .avatar-profile-link { display: contents; cursor: pointer; }
  .reply-preview {
    border-left: 4px solid #0d6efd; padding: .2rem .6rem; margin-bottom: .35rem;
    font-size: .78rem; background: rgba(13,110,253,.1); border-radius: .25rem; max-width: 100%;
  }
  .reply-preview .fw-semibold { color: #0d6efd; }
  .msg-row.me .reply-preview {
    border-left-color: #ffd43b; background: rgba(255,255,255,.25);
  }
  .msg-row.me .reply-preview .fw-semibold { color: #fff3bf; }

  /* 聊天背景主題：純 CSS 漸層＋小圖樣，不用外部圖檔（跟這個專案「所有前端
     資源都本機化」的慣例一致，也不用煩惱圖庫授權問題）。 */
  #threadMessages.chat-bg-ocean {
    background:
      radial-gradient(circle at 20% 30%, rgba(255,255,255,.25) 0 6px, transparent 7px),
      radial-gradient(circle at 70% 65%, rgba(255,255,255,.2) 0 4px, transparent 5px),
      radial-gradient(circle at 45% 85%, rgba(255,255,255,.18) 0 5px, transparent 6px),
      linear-gradient(180deg, #0f6ea8 0%, #1391b8 45%, #17b3ab 100%);
  }
  #threadMessages.chat-bg-dark {
    background: linear-gradient(180deg, #16181d 0%, #1f2229 100%);
  }
  #threadMessages.chat-bg-dark .msg-meta { color: #8a8f98; }
  #threadMessages.chat-bg-dark .msg-date-divider { background: rgba(255,255,255,.12); color: #c7cbd1; }
  #threadMessages.chat-bg-dark .msg-bubble { background: #2a2e37; color: #e6e8eb; }
  #threadMessages.chat-bg-dark .msg-row.me .msg-bubble { background: #2f6fed; color: #fff; }
  #threadMessages.chat-bg-spring {
    background:
      radial-gradient(circle at 15% 20%, rgba(255,182,213,.55) 0 8px, transparent 9px),
      radial-gradient(circle at 80% 15%, rgba(255,182,213,.45) 0 6px, transparent 7px),
      radial-gradient(circle at 55% 75%, rgba(255,182,213,.4) 0 7px, transparent 8px),
      radial-gradient(circle at 30% 60%, rgba(255,182,213,.35) 0 5px, transparent 6px),
      linear-gradient(180deg, #eafbe7 0%, #d9f2df 100%);
  }
  #threadMessages.chat-bg-summer {
    background: linear-gradient(180deg, #7fd3f2 0%, #a6e3d0 55%, #fff6b7 100%);
  }
  #threadMessages.chat-bg-autumn {
    background:
      radial-gradient(circle at 25% 25%, rgba(180,90,30,.25) 0 6px, transparent 7px),
      radial-gradient(circle at 70% 55%, rgba(200,120,40,.22) 0 5px, transparent 6px),
      radial-gradient(circle at 45% 80%, rgba(160,70,20,.2) 0 6px, transparent 7px),
      linear-gradient(180deg, #f6d9a6 0%, #e7a95e 55%, #c9722f 100%);
  }
  #threadMessages.chat-bg-winter {
    background:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,.8) 0 3px, transparent 4px),
      radial-gradient(circle at 60% 40%, rgba(255,255,255,.7) 0 2px, transparent 3px),
      radial-gradient(circle at 80% 70%, rgba(255,255,255,.8) 0 3px, transparent 4px),
      radial-gradient(circle at 35% 80%, rgba(255,255,255,.6) 0 2px, transparent 3px),
      radial-gradient(circle at 10% 60%, rgba(255,255,255,.7) 0 2px, transparent 3px),
      linear-gradient(180deg, #cfe4f5 0%, #a9c9e6 100%);
  }
  #chatBgMenu .chat-bg-swatch {
    width: 28px; height: 28px; border-radius: 50%; display: inline-block;
    border: 2px solid #fff; box-shadow: 0 0 0 1px #ddd; cursor: pointer;
  }
</style>

<script>
document.addEventListener('DOMContentLoaded', async function () {
  // 這段 script 在頁面內容區塊裡，解析順序比 layout 最下面載入 messaging.js／
  // 設定 window.Messaging 的地方早，所以要等 DOMContentLoaded（此時同步載入
  // 的 messaging.js 一定已經跑完）才能安全拿到 window.Messaging。
  const cfg = window.MessagingConfig;
  const M = window.Messaging;
  const MC = window.MessagingCrypto;
  const initialConversationId = {{ $activeConversation ? (int) $activeConversation : 'null' }};

  // 端對端加密：第一次進站先確保這台瀏覽器有金鑰對／已經跟伺服器註冊成
  // 一筆裝置。失敗也不讓整頁掛掉——退化成看得到訊息列表但沒辦法加密傳送
  // （例如舊瀏覽器不支援 Web Crypto/IndexedDB），比整頁白屏好。
  //
  // 多裝置連結：這台裝置如果是 pending（使用者其他裝置還沒核准），一律
  // 當作「還沒準備好加密」處理——不是解不開舊訊息，是連新訊息都只能先
  // 用明文送（跟舊瀏覽器不支援 Web Crypto 是同一種退化路徑），並且在畫面
  // 上明確提示使用者去核准，不能讓人誤以為是 bug。
  let cryptoReady = false;
  let deviceStatus = null;
  try {
    const ready = await MC.ensureReady(cfg.routes, cfg.csrfToken);
    deviceStatus = ready.status;
    cryptoReady = ready.status === 'active';
  } catch (e) {
    console.error('端對端加密金鑰初始化失敗：', e);
  }
  let conversationHasEncryption = false; // 目前開著的對話是否已經設好加密

  const listEl = document.getElementById('conversationList');
  const chatListWrap = document.getElementById('chatListWrap');
  const chatHiddenToggle = document.getElementById('chatHiddenToggle');
  const chatHiddenList = document.getElementById('chatHiddenList');
  const chatHiddenCount = document.getElementById('chatHiddenCount');
  let chatHiddenOpen = false;
  const threadEmpty = document.getElementById('threadEmpty');
  const threadPanel = document.getElementById('threadPanel');
  const threadHeaderAvatar = document.getElementById('threadHeaderAvatar');
  const threadTitle = document.getElementById('threadTitle');
  const threadSubtitle = document.getElementById('threadSubtitle');
  const threadMessages = document.getElementById('threadMessages');
  const threadHeaderNormal = document.getElementById('threadHeaderNormal');
  const threadSearchBtn = document.getElementById('threadSearchBtn');
  const threadSearchBar = document.getElementById('threadSearchBar');
  const threadSearchCloseBtn = document.getElementById('threadSearchCloseBtn');
  const threadSearchInput = document.getElementById('threadSearchInput');
  const threadSearchCount = document.getElementById('threadSearchCount');
  const threadSearchPrevBtn = document.getElementById('threadSearchPrevBtn');
  const threadSearchNextBtn = document.getElementById('threadSearchNextBtn');
  const groupInfoBtn = document.getElementById('groupInfoBtn');
  const callButtons = document.getElementById('callButtons');
  const joinOngoingCallBtn = document.getElementById('joinOngoingCallBtn');
  const messageForm = document.getElementById('messageForm');
  const messageInput = document.getElementById('messageInput');
  const messagingLayout = document.getElementById('messagingLayout');
  const composeContextBar = document.getElementById('composeContextBar');
  const composeContextIcon = document.getElementById('composeContextIcon');
  const composeContextLabel = document.getElementById('composeContextLabel');
  const composeContextSnippet = document.getElementById('composeContextSnippet');
  const composeContextCancel = document.getElementById('composeContextCancel');
  const msgContextMenu = document.getElementById('msgContextMenu');

  function clearComposeContext() {
    replyingTo = null;
    editingMessageId = null;
    composeContextBar.classList.add('d-none');
    applyThreadSplit(); // 提示條收起來會多出空間，要重新分配
  }

  function showReplyContext(m) {
    editingMessageId = null;
    replyingTo = { id: m.id, user_name: m.user_name };
    composeContextIcon.className = 'bi bi-reply-fill text-primary';
    composeContextLabel.textContent = '回覆 ' + (m.user_name || '');
    composeContextSnippet.textContent = messageSnippet(m);
    composeContextBar.classList.remove('d-none');
    applyThreadSplit(); // 提示條出現會佔掉一部分空間，要重新分配
    messageInput.focus();
  }

  function showEditContext(m) {
    replyingTo = null;
    editingMessageId = m.id;
    composeContextIcon.className = 'bi bi-pencil-fill text-warning';
    composeContextLabel.textContent = '編輯訊息';
    composeContextSnippet.textContent = m.body || '';
    composeContextBar.classList.remove('d-none');
    applyThreadSplit();
    messageInput.value = m.body || '';
    messageInput.focus();
  }

  composeContextCancel.addEventListener('click', () => {
    const wasEditing = !!editingMessageId;
    clearComposeContext();
    if (wasEditing) messageInput.value = '';
  });

  // layout.footer 是 position:fixed，實際高度依主題（mac/win11/sepia/space...)
  // 不一定一樣，用 calc(100vh - 固定數字) 猜的話很容易猜不準，導致最下面的輸入框
  // 被 footer 蓋住、看起來像「捲不到最新訊息」。改成量實際可用高度，並在
  // resize 時重算。
  function resizeMessagingLayout() {
    if (!messagingLayout) return;
    const footer = document.querySelector('footer.footer');
    const footerHeight = footer ? footer.getBoundingClientRect().height : 0;
    // container-fluid 本身還有 py-4 的下邊 padding，這段空間排在 row 後面，
    // 沒扣掉的話 row 會比實際可用空間多出這一截，超出的部分就剛好落在
    // fixed-bottom footer 底下（跟瀏覽器無關，是算式本身少扣一項）。
    const container = messagingLayout.parentElement;
    const containerBottomPadding = container ? parseFloat(getComputedStyle(container).paddingBottom) || 0 : 0;
    const top = messagingLayout.getBoundingClientRect().top;
    const available = window.innerHeight - top - footerHeight - containerBottomPadding - 8;
    // 這裡故意只留一個很小的下限（避免視窗被拉到極端小、算出負數高度），
    // 不要像之前設 480 那樣——那個下限一旦比 available 大，面板就會比
    // 視窗實際可用空間還高，多出來的部分會被 fixed-bottom 的 footer 蓋住
    // 或把整個網頁推出捲軸，跟「面板高度完全跟著視窗大小走、不會有網頁
    // 捲軸」這個目標互相矛盾。
    messagingLayout.style.height = Math.max(available, 240) + 'px';
    applyThreadSplit();
  }

  /**
   * 訊息區／輸入框 1/4 的分割改成直接用 JS 量真正的像素高度來設定，不用
   * flexbox 的百分比／flex-basis——連續好幾輪只靠 CSS 調都沒完全解決，
   * 很可能是巢狀 flex 容器裡「父層高度是不是 definite」在不同情況下算法
   * 不一致的關係。與其繼續猜 CSS，這裡直接量 threadPanel 實際渲染出來的
   * 高度、扣掉標題列跟（如果有顯示的話）回覆/編輯提示條，剩下空間依
   * 1/4 : 3/4 分給輸入框跟訊息區，兩個都設固定 px 高度——不管訊息多寡、
   * 視窗怎麼縮放，這個算式都會重新量、重新設，網頁本身不會被撐高。
   */
  function applyThreadSplit() {
    if (threadPanel.classList.contains('d-none')) return;
    const total = threadPanel.getBoundingClientRect().height;
    const header = threadPanel.firstElementChild;
    const headerHeight = header ? header.getBoundingClientRect().height : 0;
    const composeHeight = composeContextBar.classList.contains('d-none')
      ? 0
      : composeContextBar.getBoundingClientRect().height;

    const available = Math.max(total - headerHeight - composeHeight, 160);
    const formHeight = Math.round(available * 0.25);
    const messagesHeight = available - formHeight;

    messageForm.style.flex = '0 0 auto';
    messageForm.style.height = formHeight + 'px';
    threadMessages.style.flex = '0 0 auto';
    threadMessages.style.height = messagesHeight + 'px';
  }

  resizeMessagingLayout();
  window.addEventListener('resize', resizeMessagingLayout);
  window.addEventListener('load', resizeMessagingLayout); // 字型晚載入可能讓 footer 高度變化

  // 多裝置連結：這台裝置是 pending/revoked 時顯示提示條，正常時整條隱藏。
  // 要放在 messagingLayout 這些 DOM 常數都宣告完之後才能呼叫
  // resizeMessagingLayout()（提示條會佔掉一截高度，訊息面板要跟著重算）。
  const devicePendingBanner = document.getElementById('devicePendingBanner');
  const devicePendingBannerText = document.getElementById('devicePendingBannerText');
  function showDeviceStatusBanner(status) {
    if (status === 'pending') {
      devicePendingBannerText.textContent = '這台裝置是新裝置，正在等待你其他已登入的裝置核准存取加密訊息。核准前，新訊息只能用明文傳送，收到的加密訊息也可能顯示為無法解密。';
      devicePendingBanner.classList.remove('d-none');
    } else if (status === 'revoked') {
      devicePendingBannerText.textContent = '這台裝置的存取權限已經被撤銷，無法收發加密訊息。如果不是你本人操作，請盡快通知管理員。';
      devicePendingBanner.classList.remove('d-none');
    } else {
      devicePendingBanner.classList.add('d-none');
    }
    resizeMessagingLayout();
  }
  if (deviceStatus === 'pending' || deviceStatus === 'revoked') {
    showDeviceStatusBanner(deviceStatus);
  }
  if (deviceStatus === 'pending') {
    // 每幾秒輪詢一次自己的裝置狀態，核准後不用使用者自己記得重新整理。
    const devicePollTimer = setInterval(async () => {
      try {
        const res = await fetch(cfg.routes.devicesMine + '?device_id=' + MC.getDeviceId(), { headers: { Accept: 'application/json' } });
        const data = await res.json();
        if (data.status !== 'pending') {
          clearInterval(devicePollTimer);
          if (data.status === 'active') {
            // 剛被核准：畫面上一堆訊息可能已經顯示過「無法解密」，與其一個一個
            // 補救，重新整理最簡單也最保險，反正只是核准當下這一次。
            location.reload();
          } else {
            deviceStatus = data.status;
            showDeviceStatusBanner(data.status);
          }
        }
      } catch (e) {}
    }, 7000);
  }

  // footer 本身尺寸只要一變（換主題、字型才剛載完...），就重算一次，
  // 確保送出框的位置永遠是「量出來的可用高度」，不會被 footer 蓋住。
  const footerEl = document.querySelector('footer.footer');
  if (footerEl && window.ResizeObserver) {
    new ResizeObserver(resizeMessagingLayout).observe(footerEl);
  }

  let currentConversationId = null;
  let currentConversationType = null; // 'direct' | 'group' —決定訊息泡泡要不要顯示名字
  let currentOngoingCall = null; // 目前這個對話的進行中通話（{id, type, ...} | null）——「加入通話」按鈕要用
  let currentGroupIsOwner = false; // 群組資訊面板：改名/換照片/踢人只有 owner 看得到
  let currentChannel = null;
  let conversationsCache = [];
  let currentReadCursors = new Map(); // user_id -> last_read_message_id（目前開著的對話串）
  let messagesById = new Map(); // 目前對話串已渲染的訊息，編輯/收回時用來就地更新
  let replyingTo = null;   // { id, user_name, snippet }
  let editingMessageId = null;

  function escapeHtml(s) {
    const div = document.createElement('div');
    div.textContent = s == null ? '' : s;
    return div.innerHTML;
  }

  // 側邊欄「最後一則訊息」預覽：加密訊息伺服器本來就看不懂內容，這裡不嘗試
  // 前端解密（那要多打好幾次金鑰 API，範圍見規劃文件），直接顯示通用字樣。
  function lastMessagePreviewText(c) {
    if (!c.last_message) return '尚無訊息';
    const m = c.last_message;
    const who = m.user_name ? m.user_name + '：' : '';
    if (m.recalled) return escapeHtml(who) + '<span class="fst-italic">此訊息已收回</span>';
    if (m.encrypted) return escapeHtml(who) + '🔒 已加密訊息';
    if (m.type === 'image') return escapeHtml(who + '[圖片]');
    if (m.type === 'voice') return escapeHtml(who + '[語音訊息]');
    if (m.type === 'file') return escapeHtml(who + '[檔案]');
    if (m.type === 'location') return escapeHtml(who + '[位置]');
    if (m.type === 'sticker') return escapeHtml(who + '[貼圖]');
    if (m.type === 'call') return escapeHtml(who + callSnippetText(m));
    return escapeHtml(who + (m.body || ''));
  }

  function fmtTime(iso) {
    if (!iso) return '';
    const d = new Date(iso);
    return d.toLocaleString('zh-TW', { month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit' });
  }

  async function loadConversations() {
    conversationsCache = await M.api.listConversations();
    renderConversationList();
  }

  // 頭像：有上傳過就用真的圖片，沒有就用姓名縮寫畫一個圓形色塊當預設
  // （跟很多 chat app 的行為一致）。userId 有帶且不是群組時才疊加狀態小圓點。
  function avatarHtml(name, avatarUrl, userId) {
    const inner = avatarUrl
      ? `<img class="avatar-img" src="${escapeHtml(avatarUrl)}" alt="">`
      : `<div class="avatar-fallback">${escapeHtml((name || '?').trim().charAt(0).toUpperCase())}</div>`;
    const dot = userId != null
      ? `<span class="status-dot status-${M.presence.getStatus(userId)}" data-presence-for="${userId}"></span>`
      : '';
    return `<div class="avatar-wrap">${inner}${dot}</div>`;
  }

  // 頭像包一層連結去該使用者的個人主頁；群組頭像沒有對應的單一使用者
  // （userId 是 null），不包連結。
  function wrapAvatarLink(userId, html) {
    if (userId == null) return html;
    return `<a href="${cfg.routes.userProfile.replace('__USER__', userId)}" class="avatar-profile-link" data-action="view-profile" data-user-id="${userId}" title="查看個人主頁">${html}</a>`;
  }

  // 對話代表頭像：私訊用對方個人頭像；群組用群組自己上傳的大頭照，
  // 沒設定過才退回通用的「人群」圖示。四個地方共用（側欄清單、聯絡人
  // 分頁的群組清單、對話串上方標題、群組資訊面板），避免各處各寫一份
  // 而漏改（群組大頭照剛上線時就漏了這幾個顯示點，這裡補齊）。
  function conversationAvatarHtml(c) {
    if (c.type === 'direct') return wrapAvatarLink(c.other_user_id, avatarHtml(c.title, c.avatar_url, c.other_user_id));
    return c.avatar_url
      ? avatarHtml(c.title, c.avatar_url, null)
      : `<div class="avatar-fallback"><i class="bi bi-people-fill"></i></div>`;
  }

  function presenceStatusLabel(status) {
    return { online: '上線', idle: '閒置', dnd: '勿擾', offline: '離線' }[status] || '離線';
  }

  function refreshPresenceDots() {
    // 只挑「真的是狀態小圓點」的元素（.status-dot）來改 className。
    // threadSubtitle 為了下面那段「私訊要顯示對方狀態文字」也掛了同一個
    // data-presence-for 屬性（純粹拿來記是哪個使用者，不是要它變成圓點），
    // 如果用 '[data-presence-for]' 不分青紅皂白全選，threadSubtitle 自己
    // 也會被選中、className 被整個換成 'status-dot status-xxx'，原本的
    // small/text-muted/text-truncate 都被蓋掉——外觀上變成一個 10px 的
    // 小圓點，裡面還塞著「上線」文字，就是使用者看到「頭像一個綠點、
    // 名字旁邊又冒出一個綠點、文字還斷行」的真正原因，且只要收到一次
    // presence 更新就會重現，不是單純重新整理能一次根治的。
    document.querySelectorAll('.status-dot[data-presence-for]').forEach((el) => {
      const userId = parseInt(el.dataset.presenceFor, 10);
      el.className = 'status-dot status-' + M.presence.getStatus(userId);
    });
    const mine = M.presence.map.get(cfg.userId);
    const myDotBtn = document.getElementById('myStatusDot');
    if (myDotBtn) myDotBtn.className = 'status-dot status-' + (mine?.dnd ? 'dnd' : 'online');
    // 私訊的副標題顯示對方目前狀態文字，狀態變了要跟著即時更新。
    if (threadSubtitle.dataset.presenceFor) {
      const otherId = parseInt(threadSubtitle.dataset.presenceFor, 10);
      threadSubtitle.textContent = presenceStatusLabel(M.presence.getStatus(otherId));
    }
  }
  M.presence.onChange(refreshPresenceDots);

  function conversationRowHtml(c) {
    const badge = c.unread_count > 0 ? `<span class="badge bg-danger rounded-pill float-end">${c.unread_count}</span>` : '';
    const muteIcon = c.is_muted ? '<i class="bi bi-bell-slash-fill text-muted ms-1" title="已靜音"></i>' : '';
    const avatar = conversationAvatarHtml(c);
    return `${avatar}
      <div class="flex-grow-1" style="min-width:0;">
        ${badge}
        <div class="fw-semibold small">${escapeHtml(c.title || '未命名對話')}${muteIcon}</div>
        <div class="small text-muted text-truncate">${lastMessagePreviewText(c)}</div>
      </div>`;
  }

  function renderConversationList() {
    const all = conversationsCache || [];
    const visible = all.filter((c) => !c.is_hidden);
    const hidden = all.filter((c) => c.is_hidden);

    if (!visible.length) {
      listEl.innerHTML = '<li class="text-center text-muted small py-4">目前沒有對話，點右上角「+」開始</li>';
    } else {
      listEl.innerHTML = '';
      visible.forEach((c) => {
        const li = document.createElement('li');
        li.innerHTML = `<div class="conv-item ${c.id === currentConversationId ? 'active' : ''}" data-id="${c.id}">${conversationRowHtml(c)}</div>`;
        listEl.appendChild(li);
      });
    }

    if (!hidden.length) {
      chatHiddenToggle.classList.add('d-none');
      chatHiddenList.classList.add('d-none');
    } else {
      chatHiddenToggle.classList.remove('d-none');
      chatHiddenCount.textContent = hidden.length;
      chatHiddenList.innerHTML = '';
      hidden.forEach((c) => {
        const li = document.createElement('li');
        li.innerHTML = `<div class="conv-item contact-item-hidden ${c.id === currentConversationId ? 'active' : ''}" data-id="${c.id}">
          ${conversationRowHtml(c)}
          <button type="button" class="btn btn-sm btn-link text-decoration-none ms-auto flex-shrink-0" data-action="unhide" data-id="${c.id}" title="取消隱藏">
            <i class="bi bi-arrow-counterclockwise"></i>
          </button>
        </div>`;
        chatHiddenList.appendChild(li);
      });
      chatHiddenList.classList.toggle('d-none', !chatHiddenOpen);
      chatHiddenToggle.classList.toggle('open', chatHiddenOpen);
    }
  }

  listEl.addEventListener('click', (e) => {
    if (e.target.closest('[data-action="view-profile"]')) return;
    const a = e.target.closest('.conv-item');
    if (!a) return;
    openConversation(parseInt(a.dataset.id, 10));
  });

  chatHiddenToggle.addEventListener('click', () => {
    chatHiddenOpen = !chatHiddenOpen;
    chatHiddenList.classList.toggle('d-none', !chatHiddenOpen);
    chatHiddenToggle.classList.toggle('open', chatHiddenOpen);
  });

  chatHiddenList.addEventListener('click', async (e) => {
    if (e.target.closest('[data-action="view-profile"]')) return;
    const restoreBtn = e.target.closest('[data-action="unhide"]');
    if (restoreBtn) {
      e.stopPropagation();
      try {
        await M.api.unhideConversation(parseInt(restoreBtn.dataset.id, 10));
        await loadConversations();
      } catch (err) {
        alert(err.message || '操作失敗，請稍後再試');
      }
      return;
    }
    const a = e.target.closest('.conv-item');
    if (!a) return;
    openConversation(parseInt(a.dataset.id, 10));
  });

  // ── 聊天列表右鍵選單：刪除聊天記錄／隱藏聊天 ──────────────────────
  const chatContextMenu = document.getElementById('chatContextMenu');
  function closeChatContextMenu() { chatContextMenu.classList.add('d-none'); chatContextMenu.innerHTML = ''; }

  listEl.addEventListener('contextmenu', (e) => {
    const a = e.target.closest('.conv-item[data-id]');
    if (!a) return;
    e.preventDefault();
    const conversationId = parseInt(a.dataset.id, 10);
    const conv = (conversationsCache || []).find((c) => c.id === conversationId);

    const items = [
      { key: 'clear-chat', icon: 'bi-trash text-secondary', label: '刪除聊天記錄' },
      conv && conv.is_muted
        ? { key: 'unmute', icon: 'bi-bell text-secondary', label: '取消靜音' }
        : { key: 'mute', icon: 'bi-bell-slash text-secondary', label: '靜音通知' },
      { key: 'hide', icon: 'bi-eye-slash text-secondary', label: '隱藏聊天' },
    ];
    chatContextMenu.innerHTML = items.map((it) =>
      `<button type="button" class="list-group-item list-group-item-action" data-action="${it.key}">
        <i class="bi ${it.icon} me-2"></i>${it.label}
      </button>`
    ).join('');
    chatContextMenu.dataset.conversationId = conversationId;

    const maxLeft = window.innerWidth - 180;
    const maxTop = window.innerHeight - (items.length * 40 + 10);
    chatContextMenu.style.left = Math.max(0, Math.min(e.clientX, maxLeft)) + 'px';
    chatContextMenu.style.top = Math.max(0, Math.min(e.clientY, maxTop)) + 'px';
    chatContextMenu.classList.remove('d-none');
  });

  document.addEventListener('click', (e) => {
    if (!chatContextMenu.contains(e.target)) closeChatContextMenu();
  });
  window.addEventListener('scroll', closeChatContextMenu, true);

  chatContextMenu.addEventListener('click', async (e) => {
    const btn = e.target.closest('[data-action]');
    if (!btn) return;
    const action = btn.dataset.action;
    const conversationId = parseInt(chatContextMenu.dataset.conversationId, 10);
    closeChatContextMenu();
    if (!conversationId) return;

    try {
      if (action === 'clear-chat') {
        if (!confirm('確定要刪除這個聊天室的聊天記錄嗎？只會清空你自己的畫面，對方不受影響，之後還可以繼續聊天。')) return;
        await M.api.clearConversationMessages(conversationId);
        if (currentConversationId === conversationId) openConversation(conversationId);
        loadConversations();
      } else if (action === 'hide') {
        // 隱藏只影響左側列表要不要顯示，不強制關掉正在看的對話串——
        // 跟 WhatsApp 封存一個正在看的對話同理，畫面繼續留著就好。
        await M.api.hideConversation(conversationId);
        await loadConversations();
      } else if (action === 'mute') {
        await M.api.muteConversation(conversationId);
        await loadConversations();
      } else if (action === 'unmute') {
        await M.api.unmuteConversation(conversationId);
        await loadConversations();
      }
    } catch (err) {
      alert(err.message || '操作失敗，請稍後再試');
    }
  });

  // ── 側邊欄分頁：聊天／聯絡人（像 LINE/Google Chat 的聯絡人清單）─────
  const contactList = document.getElementById('contactList');
  const sidebarTabChats = document.getElementById('sidebarTabChats');
  const sidebarTabContacts = document.getElementById('sidebarTabContacts');
  let contactsCache = null;

  sidebarTabChats.addEventListener('click', () => {
    sidebarTabChats.classList.add('active');
    sidebarTabContacts.classList.remove('active');
    chatListWrap.classList.remove('d-none');
    contactList.classList.add('d-none');
  });
  sidebarTabContacts.addEventListener('click', async () => {
    sidebarTabContacts.classList.add('active');
    sidebarTabChats.classList.remove('active');
    contactList.classList.remove('d-none');
    chatListWrap.classList.add('d-none');
    if (!contactsCache) {
      await loadContacts();
    } else {
      // 朋友清單不用重打 API，但群組是從 conversationsCache 篩出來的，
      // 每次切過來都要重畫一次，不然剛建立的新群組不會馬上出現在這裡。
      renderContactList();
    }
  });

  // 手機版對話串左上角的「‹ 返回」：只是把畫面切回清單那一欄，不用重
  // 拉資料，對話串狀態（訂閱的頻道、目前開著的 id）都保留，之後再點
  // 同一個對話回來還是走 openConversation() 正常流程。
  document.getElementById('threadBackBtn').addEventListener('click', () => {
    messagingLayout.classList.remove('chat-open');
    resizeMessagingLayout();
  });

  const contactGroupList = document.getElementById('contactGroupList');
  const contactFriendList = document.getElementById('contactFriendList');
  const contactHiddenToggle = document.getElementById('contactHiddenToggle');
  const contactHiddenList = document.getElementById('contactHiddenList');
  const contactHiddenCount = document.getElementById('contactHiddenCount');
  let contactHiddenOpen = false;

  async function loadContacts() {
    contactFriendList.innerHTML = '<li class="text-center text-muted small py-3">載入中…</li>';
    try {
      contactsCache = await M.api.listContacts();
      renderContactList();
    } catch (e) {
      contactFriendList.innerHTML = '<li class="text-center text-muted small py-3">載入失敗</li>';
    }
  }

  function contactRowHtml(u) {
    return `${wrapAvatarLink(u.id, avatarHtml(u.name, u.avatar_url, u.id))}
      <div class="small fw-semibold text-truncate">${escapeHtml(u.name)}</div>`;
  }

  // 群組不用另外打 API——對話列表本來就有，這裡只是從裡面篩出 type=group
  // 的部分，跟 LINE 的「朋友」頁面把「群組」跟「朋友」分成兩塊是一樣的概念。
  function renderContactList() {
    const groups = conversationsCache.filter((c) => c.type === 'group');
    if (!groups.length) {
      contactGroupList.innerHTML = '<li class="text-center text-muted small py-3">目前沒有群組</li>';
    } else {
      contactGroupList.innerHTML = '';
      groups.forEach((c) => {
        const li = document.createElement('li');
        li.innerHTML = `<a class="contact-item" data-conversation-id="${c.id}">
          ${conversationAvatarHtml(c)}
          <div class="small fw-semibold text-truncate">${escapeHtml(c.title || '未命名群組')}</div>
        </a>`;
        contactGroupList.appendChild(li);
      });
    }

    const all = contactsCache || [];
    const visible = all.filter((u) => !u.is_hidden);
    const hidden = all.filter((u) => u.is_hidden);

    if (!visible.length) {
      contactFriendList.innerHTML = '<li class="text-center text-muted small py-3">目前沒有其他使用者</li>';
    } else {
      contactFriendList.innerHTML = '';
      visible.forEach((u) => {
        const li = document.createElement('li');
        li.innerHTML = `<div class="contact-item" data-user-id="${u.id}">${contactRowHtml(u)}</div>`;
        contactFriendList.appendChild(li);
      });
    }

    if (!hidden.length) {
      contactHiddenToggle.classList.add('d-none');
      contactHiddenList.classList.add('d-none');
    } else {
      contactHiddenToggle.classList.remove('d-none');
      contactHiddenCount.textContent = hidden.length;
      contactHiddenList.innerHTML = '';
      hidden.forEach((u) => {
        const li = document.createElement('li');
        li.innerHTML = `<div class="contact-item contact-item-hidden" data-user-id="${u.id}">
          ${contactRowHtml(u)}
          <button type="button" class="btn btn-sm btn-link text-decoration-none ms-auto flex-shrink-0" data-action="unhide" data-user-id="${u.id}" title="取消隱藏">
            <i class="bi bi-arrow-counterclockwise"></i>
          </button>
        </div>`;
        contactHiddenList.appendChild(li);
      });
      contactHiddenList.classList.toggle('d-none', !contactHiddenOpen);
      contactHiddenToggle.classList.toggle('open', contactHiddenOpen);
    }
  }

  contactGroupList.addEventListener('click', (e) => {
    const a = e.target.closest('[data-conversation-id]');
    if (!a) return;
    sidebarTabChats.click();
    openConversation(parseInt(a.dataset.conversationId, 10));
  });

  contactHiddenToggle.addEventListener('click', () => {
    contactHiddenOpen = !contactHiddenOpen;
    contactHiddenList.classList.toggle('d-none', !contactHiddenOpen);
    contactHiddenToggle.classList.toggle('open', contactHiddenOpen);
  });

  async function openContactChat(otherUserId) {
    const prep = await tryComputeWraps([cfg.userId, otherUserId]);
    const res = await M.api.createConversation({ type: 'direct', user_id: otherUserId, wraps: prep?.wraps });
    if (prep) MC.cacheConversationKey(res.id, 1, prep.conversationKey);
    sidebarTabChats.click();
    await loadConversations();
    openConversation(res.id);
  }

  contactFriendList.addEventListener('click', async (e) => {
    if (e.target.closest('[data-action="view-profile"]')) return;
    const a = e.target.closest('[data-user-id]');
    if (!a) return;
    await openContactChat(parseInt(a.dataset.userId, 10));
  });

  contactHiddenList.addEventListener('click', async (e) => {
    if (e.target.closest('[data-action="view-profile"]')) return;
    const restoreBtn = e.target.closest('[data-action="unhide"]');
    if (restoreBtn) {
      e.stopPropagation();
      try {
        await M.api.unhideContact(parseInt(restoreBtn.dataset.userId, 10));
        await loadContacts();
      } catch (err) {
        alert(err.message || '操作失敗，請稍後再試');
      }
      return;
    }
    const a = e.target.closest('[data-user-id]');
    if (!a) return;
    await openContactChat(parseInt(a.dataset.userId, 10));
  });

  // ── 聯絡人右鍵選單：刪除聊天記錄／隱藏聯絡人 ────────────────────
  const contactContextMenu = document.getElementById('contactContextMenu');
  function closeContactContextMenu() { contactContextMenu.classList.add('d-none'); contactContextMenu.innerHTML = ''; }

  contactFriendList.addEventListener('contextmenu', (e) => {
    const a = e.target.closest('.contact-item[data-user-id]');
    if (!a) return;
    e.preventDefault();
    const userId = parseInt(a.dataset.userId, 10);

    const items = [
      { key: 'clear-chat', icon: 'bi-trash text-secondary', label: '刪除聊天記錄' },
      { key: 'hide', icon: 'bi-eye-slash text-secondary', label: '隱藏聯絡人' },
    ];
    contactContextMenu.innerHTML = items.map((it) =>
      `<button type="button" class="list-group-item list-group-item-action" data-action="${it.key}">
        <i class="bi ${it.icon} me-2"></i>${it.label}
      </button>`
    ).join('');
    contactContextMenu.dataset.userId = userId;

    const maxLeft = window.innerWidth - 180;
    const maxTop = window.innerHeight - (items.length * 40 + 10);
    contactContextMenu.style.left = Math.max(0, Math.min(e.clientX, maxLeft)) + 'px';
    contactContextMenu.style.top = Math.max(0, Math.min(e.clientY, maxTop)) + 'px';
    contactContextMenu.classList.remove('d-none');
  });

  document.addEventListener('click', (e) => {
    if (!contactContextMenu.contains(e.target)) closeContactContextMenu();
  });
  window.addEventListener('scroll', closeContactContextMenu, true);

  contactContextMenu.addEventListener('click', async (e) => {
    const btn = e.target.closest('[data-action]');
    if (!btn) return;
    const action = btn.dataset.action;
    const userId = parseInt(contactContextMenu.dataset.userId, 10);
    closeContactContextMenu();
    if (!userId) return;

    try {
      if (action === 'clear-chat') {
        if (!confirm('確定要刪除跟這位聯絡人的聊天記錄嗎？只會清空你自己的畫面，對方不受影響，之後還可以繼續聊天。')) return;
        await M.api.clearContactChat(userId);
        const conv = conversationsCache.find((c) => c.type === 'direct' && c.other_user_id === userId);
        if (conv && currentConversationId === conv.id) openConversation(conv.id);
        loadConversations();
      } else if (action === 'hide') {
        await M.api.hideContact(userId);
        await loadContacts();
      }
    } catch (err) {
      alert(err.message || '操作失敗，請稍後再試');
    }
  });

  M.presence.onChange(() => { if (contactsCache) renderContactList(); });

  // ── 我的狀態：上線（自動）／勿擾 ───────────────────────────────
  const myStatusBtn = document.getElementById('myStatusBtn');
  const myStatusMenu = document.getElementById('myStatusMenu');

  myStatusBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    if (myStatusMenu.classList.contains('d-none')) positionPopupBelowButton(myStatusMenu, myStatusBtn);
    myStatusMenu.classList.toggle('d-none');
  });
  document.addEventListener('click', (e) => {
    if (!myStatusMenu.contains(e.target) && e.target !== myStatusBtn) myStatusMenu.classList.add('d-none');
  });
  myStatusMenu.addEventListener('click', async (e) => {
    const btn = e.target.closest('[data-dnd]');
    if (!btn) return;
    myStatusMenu.classList.add('d-none');
    await M.presence.setDnd(btn.dataset.dnd === '1');
  });

  async function openConversation(id) {
    currentConversationId = id;
    // 每次開對話都只拉最新 50 則（見下面的 M.api.getMessages(id)），跟
    // ensureFullHistoryLoaded() 拉的「完整歷史」不是同一份渲染結果，
    // 上一次搜尋留下的「已經拉過全部歷史」旗標在這裡就不準了，重置掉讓
    // 下次搜尋一定會重新抓一輪，不然可能只搜到最新 50 則就以為搜完了。
    fullHistoryLoadedFor = null;
    closeThreadSearch();
    renderConversationList();
    threadEmpty.classList.add('d-none');
    threadPanel.classList.remove('d-none');
    threadPanel.classList.add('d-flex');
    messagingLayout.classList.add('chat-open'); // 手機版：切到只顯示對話串那一欄
    resizeMessagingLayout(); // 手機版欄位剛切換，先重新量一次視窗可用高度
    applyThreadSplit(); // 面板剛從 d-none 變顯示，量得到真正的高度了
    threadMessages.innerHTML = '<div class="text-center text-muted small py-3">載入中…</div>';

    const history = window.history;
    if (history?.replaceState) {
      history.replaceState(null, '', cfg.routes.index + '?conversation=' + id);
    }

    // 這整段本來沒包 try/catch：中間任何一步（抓對話詳情、確保加密金鑰、
    // 抓訊息列表）只要噴例外，畫面就會卡在上面那個「載入中…」，訊息
    // 永遠不會出現、也看不到任何錯誤——使用者反映「有時候會卡住」就是
    // 這個原因，不是真的一直在解密。包起來後失敗至少會換成明確的錯誤
    // 訊息，不會一直空轉。
    try {
      const detail = await M.api.showConversation(id);
      // 這段本來完全沒防「使用者這段等待期間已經點開別的對話」——快速連點
      // 兩個不同對話時，先點的那個如果比較晚才回應，會用舊資料把使用者
      // 現在正在看的新對話蓋掉（標題列還是新對話的，內容卻變成舊對話的，
      // 重新整理頁面因為只會有一個進行中的請求，看起來就「正常」了）。
      // 每個 await 之後都要重新確認使用者還在看這個對話，不是就直接放棄。
      if (currentConversationId !== id) return;
      currentConversationType = detail.type;
      threadHeaderAvatar.innerHTML = conversationAvatarHtml(detail);
      threadTitle.textContent = detail.title || '未命名對話';
      // 私訊只有一位「其他成員」，跟標題（對方名字）是同一個人，不用在下面
      // 副標再顯示一次名字（不然就是使用者反映的「名字出現兩次」）；副標
      // 私訊改顯示上線狀態文字，群組才需要列出全部成員名字。
      if (detail.type === 'direct') {
        const otherId = detail.other_user_id ?? detail.participants?.[0]?.id;
        threadSubtitle.textContent = otherId != null
          ? presenceStatusLabel(M.presence.getStatus(otherId))
          : '';
        threadSubtitle.dataset.presenceFor = otherId ?? '';
      } else {
        threadSubtitle.textContent = detail.participants?.length
          ? detail.participants.map((p) => p.name).join('、')
          : '';
        delete threadSubtitle.dataset.presenceFor;
      }
      currentGroupIsOwner = !!detail.is_owner;
      groupInfoBtn.classList.toggle('d-none', detail.type !== 'group');

      // 這個對話目前有進行中的群組通話、而且這台瀏覽器目前沒有在通話中
      // （例如剛剛重新整理過，或錯過了當初的來電通知）——顯示「加入通話」
      // 讓使用者找得回去，不用只能靠稍縱即逝的來電視窗；有進行中的通話
      // 時不顯示「撥打」（打下去只會被後端拒絕，因為同一個對話同時只能
      // 有一通電話）。
      const ongoingCall = detail.active_call;
      currentOngoingCall = ongoingCall || null;
      const alreadyInThisCall = M.calling.current()?.id === ongoingCall?.id;
      joinOngoingCallBtn.classList.toggle('d-none', !ongoingCall || alreadyInThisCall);
      // callButtons 本來就同時有 d-none/d-flex 兩個 class（d-none 帶
      // !important，蓋過 d-flex），這裡只切 d-none，跟原本的模式一致，
      // 不要另外去動 d-flex。
      callButtons.classList.toggle('d-none', !!ongoingCall && !alreadyInThisCall);

      // 已讀狀態：記住「除了自己以外」每個成員目前讀到哪一則，用來判斷
      // 自己送出的訊息該顯示已讀/未讀。之後收到 conversation.read 廣播
      // 就即時更新這份資料，不用整串重拉。
      currentReadCursors = new Map(
        (detail.read_cursors || []).map((c) => [c.user_id, c.last_read_message_id])
      );

      conversationHasEncryption = cryptoReady ? await ensureConversationEncryption(id, detail) : false;
      if (currentConversationId !== id) return;

      const messages = await M.api.getMessages(id);
      if (currentConversationId !== id) return;
      renderMessages(messages);
      // 標成已讀後順手把導覽列的紅點未讀數也刷新，不然要等到 60 秒排程
      // 或下一則新訊息進來才會消掉，畫面上會有一段時間顯示過期的未讀數。
      M.api.markRead(id).then(() => { loadConversations(); M.refreshUnreadBadges(); });

      subscribeConversation(id);
    } catch (e) {
      console.error('開啟對話失敗', e);
      if (currentConversationId === id) {
        threadMessages.innerHTML = '<div class="text-center text-danger small py-3">載入失敗，請重新整理頁面再試一次</div>';
      }
    }
  }

  /**
   * 這個對話有沒有設定加密：已經有金鑰就直接回 true。完全沒有金鑰
   * （這個功能上線前就存在的舊對話）就檢查所有現在的成員是不是都已經
   * 上傳過公鑰——都有的話現在幫忙補發第一版金鑰，之後這個對話正式轉成
   * 加密；只要有一個人還沒上傳過公鑰（還沒開過訊息頁面），就先維持
   * 明文，等那個人之後打開訊息頁面、下次再開這個對話就會自動補上。
   */
  async function ensureConversationEncryption(id, detail) {
    const existingKey = await MC.getConversationKey(cfg.routes, id);
    if (existingKey) return true;

    const memberIds = Array.from(new Set([cfg.userId, ...(detail.participants || []).map((p) => p.id)]));
    try {
      const { wraps, conversationKey } = await MC.createConversationKeyAndWraps(cfg.routes, memberIds);
      const result = await M.api.distributeConversationKeys(id, wraps);
      MC.cacheConversationKey(id, result.key_version, conversationKey);
      return true;
    } catch (e) {
      // MISSING_PUBLIC_KEY：至少一個成員還沒開過訊息頁面、沒有公鑰可以包裝，
      // 這是正常情況（不是錯誤），先讓這個對話維持明文。
      return false;
    }
  }

  // 回傳值是「這批訊息裡所有還在解密中的 Promise」——一般開對話沒人在
  // 等這個，但搜尋訊息（見下面 ensureFullHistoryLoaded）需要先確定全部
  // 解密完，才能對明文內容做關鍵字比對，不然加密訊息這時候 body 還是
  // 密文，永遠搜尋不到。
  function renderMessages(messages) {
    threadMessages.innerHTML = '';
    messagesById = new Map();
    lastThreadDateLabel = null;
    const pendingDecrypts = messages.map(appendMessage).filter(Boolean);
    threadMessages.scrollTop = threadMessages.scrollHeight;
    return Promise.all(pendingDecrypts);
  }

  // 換日期就插一條置中的日期分隔線，跟 LINE 一樣。訊息一定是按時間先後
  // 依序 append 進來的（不管是剛載入的歷史、即時收到的、還是自己剛送出
  // 的），所以只要記著「目前畫到哪一天」，下一則不一樣天才插新的分隔線，
  // 不用整串重新掃一次。
  let lastThreadDateLabel = null;
  function fmtDateLabel(iso) {
    const d = new Date(iso);
    const now = new Date();
    if (d.toDateString() === now.toDateString()) return '今天';
    const yesterday = new Date(now);
    yesterday.setDate(now.getDate() - 1);
    if (d.toDateString() === yesterday.toDateString()) return '昨天';
    const sameYear = d.getFullYear() === now.getFullYear();
    return sameYear ? `${d.getMonth() + 1}月${d.getDate()}日` : `${d.getFullYear()}年${d.getMonth() + 1}月${d.getDate()}日`;
  }
  function maybeInsertDateDivider(m) {
    if (!m.created_at) return;
    const label = fmtDateLabel(m.created_at);
    if (label === lastThreadDateLabel) return;
    lastThreadDateLabel = label;
    const divider = document.createElement('div');
    divider.className = 'text-center my-2';
    divider.innerHTML = `<span class="msg-date-divider">${escapeHtml(label)}</span>`;
    threadMessages.appendChild(divider);
  }

  // 訊息本身或「回覆預覽」用的一句話摘要（收回/圖片/語音/位置沒有純文字 body）
  function fmtCallDuration(seconds) {
    if (!seconds && seconds !== 0) return '';
    const m = Math.floor(seconds / 60), s = seconds % 60;
    return `${String(m).padStart(2, '0')}:${String(s).padStart(2, '0')}`;
  }

  function callSnippetText(m) {
    const kind = m.meta?.call_type === 'video' ? '視訊' : '語音';
    const status = m.meta?.status;
    if (status === 'declined') return `[${kind}通話]已拒接`;
    if (status === 'missed') return `[${kind}通話]未接來電`;
    const dur = fmtCallDuration(m.meta?.duration_seconds);
    return `[${kind}通話]${dur ? ' ' + dur : ''}`;
  }

  function messageSnippet(m) {
    if (!m) return '';
    if (m.recalled || m.recalled_at) return '訊息已收回';
    if (m.type === 'image') return '[圖片]';
    if (m.type === 'voice') return '[語音訊息]';
    if (m.type === 'file') return '[檔案]';
    if (m.type === 'location') return '[位置]';
    if (m.type === 'sticker') return '[貼圖]';
    if (m.type === 'call') return callSnippetText(m);
    if (m.encrypted && !m._decrypted) return m._decryptError ? '⚠️ 無法解密' : '🔒 解密中…';
    return m.body || '';
  }

  function renderReplyPreview(m) {
    if (!m.reply_to) return '';
    return `<div class="reply-preview" data-reply-target="${m.reply_to.id}">
      <div class="fw-semibold">${escapeHtml(m.reply_to.user_name || '')}</div>
      <div class="text-truncate">${escapeHtml(messageSnippet(m.reply_to))}</div>
    </div>`;
  }

  function renderMessageContent(m) {
    if (m.recalled_at) {
      return `<span class="fst-italic text-muted">此訊息已收回</span>`;
    }
    if (m.encrypted && !m._decrypted) {
      return m._decryptError
        ? `<span class="text-danger"><i class="bi bi-exclamation-triangle me-1"></i>無法解密此訊息</span>`
        : `<span class="text-muted"><i class="bi bi-lock me-1"></i>解密中…</span>`;
    }
    if (m.type === 'image' && m.meta?.url) {
      return `<a href="${escapeHtml(m.meta.url)}" target="_blank" rel="noopener">
        <img src="${escapeHtml(m.meta.url)}" alt="${escapeHtml(m.meta.filename || '圖片')}" style="max-width:220px; max-height:220px; border-radius:.5rem; display:block;">
      </a>`;
    }
    if (m.type === 'location' && m.meta?.lat != null && m.meta?.lng != null) {
      const url = `https://www.google.com/maps?q=${m.meta.lat},${m.meta.lng}`;
      return `<a href="${url}" target="_blank" rel="noopener" class="d-inline-flex align-items-center gap-1 text-decoration-none">
        <i class="bi bi-geo-alt-fill text-danger"></i><span>查看位置</span>
      </a>`;
    }
    if (m.type === 'voice' && m.meta?.url) {
      return `<audio controls preload="none" src="${escapeHtml(m.meta.url)}" style="max-width:220px; height:36px;"></audio>`;
    }
    if (m.type === 'file' && m.meta?.url) {
      const kb = m.meta.size ? (m.meta.size / 1024) : 0;
      const sizeLabel = kb > 1024 ? (kb / 1024).toFixed(1) + ' MB' : Math.max(1, Math.round(kb)) + ' KB';
      return `<a href="${escapeHtml(m.meta.url)}" target="_blank" rel="noopener" download="${escapeHtml(m.meta.filename || '')}"
          class="d-inline-flex align-items-center gap-2 text-decoration-none p-2" style="max-width:220px; border:1px solid rgba(0,0,0,.1); border-radius:.5rem;">
        <i class="bi bi-file-earmark-arrow-down fs-4 text-secondary"></i>
        <span class="text-truncate">
          <span class="d-block text-truncate">${escapeHtml(m.meta.filename || '檔案')}</span>
          <span class="d-block small text-muted">${sizeLabel}</span>
        </span>
      </a>`;
    }
    if (m.type === 'sticker' && m.meta?.url) {
      return `<img src="${escapeHtml(m.meta.url)}" alt="貼圖" style="width:120px; height:120px; object-fit:contain; display:block;">`;
    }
    if (m.type === 'call') {
      const icon = m.meta?.call_type === 'video' ? 'bi-camera-video-fill' : 'bi-telephone-fill';
      const missed = m.meta?.status === 'declined' || m.meta?.status === 'missed';
      return `<span class="d-inline-flex align-items-center gap-1 ${missed ? 'text-danger' : ''}">
        <i class="bi ${icon}"></i><span>${escapeHtml(callSnippetText(m))}</span>
      </span>`;
    }
    return escapeHtml(m.body);
  }

  // 只有「自己送出的訊息」才顯示已讀/未讀（跟大部分聊天 app 一樣，收到的
  // 訊息不用看這個）。私訊：對方讀到的 id >= 這則訊息 id 就是已讀。群組：
  // 顯示「已讀 N」，N 是讀到這則（含）以後的其他成員數，全員讀到才顯示「已讀」。
  function readLabelFor(messageId) {
    const cursors = Array.from(currentReadCursors.values());
    if (!cursors.length) return '';
    const readCount = cursors.filter((c) => c != null && c >= messageId).length;
    if (cursors.length === 1) return readCount > 0 ? '已讀' : '未讀';
    if (readCount === 0) return '未讀';
    if (readCount === cursors.length) return '已讀';
    return `已讀 ${readCount}`;
  }

  function refreshReadStatuses() {
    threadMessages.querySelectorAll('.msg-row.me[data-id]').forEach((row) => {
      const span = row.querySelector('.msg-read-status');
      if (span) span.textContent = readLabelFor(parseInt(row.dataset.id, 10));
    });
  }

  function appendMessage(m) {
    // 保險：同一個訊息 id 不重複畫第二次列——防重複送出鎖已經擋掉「同一則
    // 訊息送出兩份」，這裡再擋一層是為了防其他來源（例如重連後的 echo
    // 頻道）意外把同一則訊息又送進來一次時，畫面不會跟著出現兩顆泡泡。
    if (messagesById.has(m.id)) { updateMessageRow(m); return null; }
    messagesById.set(m.id, m);
    maybeInsertDateDivider(m);
    const row = document.createElement('div');
    const isMe = m.user_id === cfg.userId;
    row.className = 'msg-row' + (isMe ? ' me' : '');
    row.dataset.id = m.id;
    row.innerHTML = bubbleHtml(m, isMe);
    threadMessages.appendChild(row);

    // 解密是非同步的（Web Crypto），先用「解密中…」佔位顯示，解完再
    // 用 updateMessageRow() 就地換成真正內容，不擋畫面渲染。一般情況下
    // 沒人等這個 promise（就是單純的背景解密），renderMessages() 搜尋
    // 訊息時才會用到回傳值。`!m._decrypted` 這個條件是必要的：自己剛送出
    // 的加密訊息，送出當下已經把 m.body 樂觀改成明文、m._decrypted 設成
    // true 了（見 messageForm 的送出邏輯），這裡如果沒排除掉，會拿明文
    // 當密文重複解一次，一定失敗（AES-GCM 驗證不過），雖然畫面上因為
    // body 沒被覆寫所以看不太出來，但白白浪費一次網路/運算，也埋下跟
    // 其他非同步流程互相干擾的風險。
    if ((m.encrypted && !m.recalled_at && !m._decrypted) || (m.reply_to?.encrypted && !m.reply_to.recalled)) {
      return decryptAndRender(m);
    }
    return null;
  }

  /** 解開一則加密訊息（以及它回覆的那則，如果也是加密的），解完就地更新畫面 */
  async function decryptAndRender(m) {
    const conversationIdAtStart = currentConversationId;
    const patch = { id: m.id };

    if (m.encrypted && !m.recalled_at) {
      try {
        const key = await MC.getConversationKey(cfg.routes, m.conversation_id, m.key_version);
        if (!key) throw new Error('no-key');
        // getConversationKey() 回傳 { version, cryptoKey }，decrypt() 要的是
        // 裡面真正的 CryptoKey，不是整包——這裡本來漏了 .cryptoKey，
        // crypto.subtle.decrypt() 收到不是 CryptoKey 的參數會直接丟
        // TypeError，等於「收到的加密訊息永遠解不開」，一律落到 catch
        // 顯示「⚠️ 無法解密」。
        const plaintext = await MC.decrypt(key.cryptoKey, m.body, m.iv);
        if (m.type === 'location') {
          patch.meta = JSON.parse(plaintext);
        } else {
          patch.body = plaintext;
        }
        patch._decrypted = true;
      } catch (e) {
        patch._decryptError = true;
      }
    }

    if (m.reply_to?.encrypted && !m.reply_to.recalled && m.reply_to.type === 'text') {
      try {
        const key = await MC.getConversationKey(cfg.routes, m.conversation_id, m.reply_to.key_version);
        if (!key) throw new Error('no-key');
        const plaintext = await MC.decrypt(key.cryptoKey, m.reply_to.body, m.reply_to.iv);
        patch.reply_to = Object.assign({}, m.reply_to, { body: plaintext, _decrypted: true });
      } catch (e) {
        patch.reply_to = Object.assign({}, m.reply_to, { _decryptError: true });
      }
    }

    // 解密完成時使用者可能已經切到別的對話串，這種情況只更新資料快取，
    // 不要去操作已經不在畫面上的 DOM。
    if (conversationIdAtStart !== currentConversationId) {
      const existing = messagesById.get(m.id);
      if (existing) messagesById.set(m.id, Object.assign({}, existing, patch));
      return;
    }
    updateMessageRow(patch);
  }

  /** 訊息下方的表情回應標籤列——點一下就是切換自己對這個表情的那一票 */
  function reactionsHtml(m) {
    if (!m.reactions || !m.reactions.length || m.recalled_at) return '';
    return `<div class="msg-reactions">${m.reactions.map((r) => `
      <button type="button" class="msg-reaction-pill${r.user_ids.includes(cfg.userId) ? ' mine' : ''}" data-emoji="${escapeHtml(r.emoji)}" title="${escapeHtml(r.user_names.join('、'))}">
        <span>${r.emoji}</span><span class="msg-reaction-count">${r.count}</span>
      </button>`).join('')}</div>`;
  }

  function bubbleHtml(m, isMe) {
    const readLabel = isMe ? readLabelFor(m.id) : '';
    const editedLabel = (m.edited_at && !m.recalled_at) ? '（已編輯）' : '';
    // 跟 LINE 一樣：私訊雙方都認得對方是誰，訊息泡泡不用再重複顯示名字，
    // 只留頭像；群組成員多，才需要頭像＋名字一起顯示。自己送出的訊息
    // 兩種情境都不顯示自己的頭像／名字（跟大部分聊天 app 一致）。
    const showName = !isMe && !m.recalled_at && currentConversationType === 'group';
    const avatar = !isMe
      ? `<div class="msg-avatar">${wrapAvatarLink(m.user_id, avatarHtml(m.user_name, m.user_avatar_url, null))}</div>`
      : '';
    const bubbleClass = 'msg-bubble' + (m.type === 'sticker' && !m.recalled_at ? ' msg-bubble-sticker' : '');
    return `${avatar}<div class="msg-body-col">
      <div class="${bubbleClass}">${showName ? `<div class="small fw-semibold">${escapeHtml(m.user_name || '')}</div>` : ''}${renderReplyPreview(m)}${renderMessageContent(m)}</div>
      ${reactionsHtml(m)}
      <div class="msg-meta">${readLabel ? `<span class="msg-read-status">${readLabel}</span> · ` : ''}${fmtTime(m.created_at)}${editedLabel ? ' · ' + editedLabel : ''}</div>
    </div>`;
  }

  /** 編輯／收回後即時更新畫面上已經渲染好的那一列，不用整串重拉 */
  function updateMessageRow(patch) {
    const existing = messagesById.get(patch.id);
    if (!existing) return;
    const merged = Object.assign({}, existing, patch);
    messagesById.set(patch.id, merged);
    const row = threadMessages.querySelector(`.msg-row[data-id="${patch.id}"]`);
    if (!row) return;
    const isMe = merged.user_id === cfg.userId;
    // 這裡本來只換 innerHTML、沒有跟著把 row 本身的 class 對齊——appendMessage()
    // 建立這顆 row 的時候，「靠右對齊＋不顯示頭像/名字」是靠 row.className
    // 裡的 .me 這個 class 控制的（CSS：.msg-row.me { justify-content:flex-end }），
    // 不是 bubbleHtml() 回傳的 HTML 內容決定的。只換 innerHTML 沒有同步更新
    // className，會讓「已經畫出來、之後才被 patch 的訊息」（解密完成、
    // 編輯、收回都會走這裡）卡在建立當下那個 class，跟畫面上其他地方判斷
    // isMe 的結果對不起來。
    row.className = 'msg-row' + (isMe ? ' me' : '');
    row.innerHTML = bubbleHtml(merged, isMe);
  }

  // ── 搜尋這個對話的訊息（右上角搜尋鍵，跟 LINE 一樣）────────────────
  // 平常訊息串只載入最新 50 則（MessageController::index() 的 limit），
  // 搜尋卻要能找到更久以前的訊息，所以第一次搜尋要先把整個對話歷史都
  // 拉下來（分頁抓到底或抓滿上限），全部解密完才開始比對關鍵字。
  let fullHistoryLoadedFor = null;
  let searchMatchIds = [];
  let searchIndex = -1;

  function isSearchableMessage(m) {
    if (m.recalled_at || m.type === 'call') return false;
    if (m.encrypted && !m._decrypted) return false; // 解密失敗/還沒解完的密文不比對
    return typeof m.body === 'string' && m.body.length > 0;
  }

  async function ensureFullHistoryLoaded(conversationId) {
    if (fullHistoryLoadedFor === conversationId) return;
    const all = [];
    let beforeId;
    // 上限 40 頁 * 50 則 = 2000 則，避免極端超長對話一次抓到底卡住畫面；
    // 內部工具的對話量不會誇張到常常撞這個上限。
    for (let i = 0; i < 40; i++) {
      const page = await M.api.getMessages(conversationId, beforeId);
      if (!page.length) break;
      all.unshift(...page);
      beforeId = page[0].id;
      if (page.length < 50) break;
    }
    if (currentConversationId !== conversationId) return; // 這段時間切走對話了，不要污染畫面
    await renderMessages(all);
    if (currentConversationId !== conversationId) return;
    fullHistoryLoadedFor = conversationId;
  }

  function clearSearchHighlights() {
    threadMessages.querySelectorAll('.msg-row.search-match').forEach((el) => {
      el.classList.remove('search-match', 'search-current');
    });
  }

  function applySearchHighlight() {
    clearSearchHighlights();
    searchMatchIds.forEach((id) => {
      threadMessages.querySelector(`.msg-row[data-id="${id}"]`)?.classList.add('search-match');
    });
    if (searchIndex >= 0) {
      const row = threadMessages.querySelector(`.msg-row[data-id="${searchMatchIds[searchIndex]}"]`);
      if (row) {
        row.classList.add('search-current');
        row.scrollIntoView({ block: 'center', behavior: 'smooth' });
      }
    }
  }

  function updateSearchCountLabel() {
    if (searchMatchIds.length) {
      threadSearchCount.textContent = `${searchIndex + 1}/${searchMatchIds.length}`;
    } else {
      threadSearchCount.textContent = threadSearchInput.value.trim() ? '沒有符合的訊息' : '';
    }
  }

  async function runThreadSearch(keyword) {
    if (!currentConversationId) return;
    if (!keyword) {
      searchMatchIds = [];
      searchIndex = -1;
      clearSearchHighlights();
      updateSearchCountLabel();
      return;
    }

    const conversationIdAtStart = currentConversationId;
    threadSearchCount.textContent = '搜尋中…';
    await ensureFullHistoryLoaded(conversationIdAtStart);
    if (currentConversationId !== conversationIdAtStart) return;

    const lower = keyword.toLowerCase();
    searchMatchIds = Array.from(messagesById.values())
      .filter((m) => isSearchableMessage(m) && m.body.toLowerCase().includes(lower))
      .sort((a, b) => a.id - b.id)
      .map((m) => m.id);
    // 預設先跳到「最新」符合的那一則（陣列排序後的最後一筆），比較符合
    // 「我記得最近聊過這件事」的直覺，上一筆／下一筆再慢慢往回找。
    searchIndex = searchMatchIds.length ? searchMatchIds.length - 1 : -1;
    applySearchHighlight();
    updateSearchCountLabel();
  }

  function openThreadSearch() {
    threadHeaderNormal.classList.remove('d-flex');
    threadHeaderNormal.classList.add('d-none');
    threadSearchBar.classList.remove('d-none');
    threadSearchBar.classList.add('d-flex');
    threadSearchInput.value = '';
    searchMatchIds = [];
    searchIndex = -1;
    updateSearchCountLabel();
    applyThreadSplit();
    threadSearchInput.focus();
  }

  function closeThreadSearch() {
    threadSearchBar.classList.remove('d-flex');
    threadSearchBar.classList.add('d-none');
    threadHeaderNormal.classList.remove('d-none');
    threadHeaderNormal.classList.add('d-flex');
    clearSearchHighlights();
    searchMatchIds = [];
    searchIndex = -1;
    applyThreadSplit();
  }

  threadSearchBtn.addEventListener('click', openThreadSearch);
  threadSearchCloseBtn.addEventListener('click', closeThreadSearch);

  let searchDebounceTimer = null;
  threadSearchInput.addEventListener('input', () => {
    clearTimeout(searchDebounceTimer);
    searchDebounceTimer = setTimeout(() => runThreadSearch(threadSearchInput.value.trim()), 300);
  });
  threadSearchPrevBtn.addEventListener('click', () => {
    if (!searchMatchIds.length) return;
    searchIndex = (searchIndex - 1 + searchMatchIds.length) % searchMatchIds.length;
    applySearchHighlight();
    updateSearchCountLabel();
  });
  threadSearchNextBtn.addEventListener('click', () => {
    if (!searchMatchIds.length) return;
    searchIndex = (searchIndex + 1) % searchMatchIds.length;
    applySearchHighlight();
    updateSearchCountLabel();
  });

  function subscribeConversation(id) {
    const echo = M.connectEcho();
    if (!echo) return;
    if (currentChannel) {
      echo.leave('conversation.' + currentChannel);
    }
    currentChannel = id;
    echo.join('conversation.' + id)
      .listen('.message.sent', (payload) => {
        if (payload.user_id === cfg.userId) return; // toOthers() 已排除自己，這裡雙保險
        appendMessage(payload);
        threadMessages.scrollTop = threadMessages.scrollHeight;
        if (currentConversationId === id) M.api.markRead(id).then(() => { loadConversations(); M.refreshUnreadBadges(); });
      })
      .listen('.conversation.read', (payload) => {
        if (payload.user_id === cfg.userId || currentConversationId !== id) return;
        currentReadCursors.set(payload.user_id, payload.last_read_message_id);
        refreshReadStatuses();
      })
      .listen('.message.updated', (payload) => {
        if (currentConversationId !== id) return;
        updateMessageRow({
          id: payload.id,
          body: payload.body,
          edited_at: payload.edited_at,
          recalled_at: payload.recalled_at,
        });
      })
      .listen('.message.reacted', (payload) => {
        if (currentConversationId !== id) return;
        updateMessageRow({ id: payload.id, reactions: payload.reactions });
      });
  }

  // textarea 按 Enter 不會像 <input> 一樣自動送出表單，要自己接——
  // Enter 送出、Shift+Enter 換行，跟 LINE/Slack 這類聊天工具一致。
  messageInput.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      messageForm.requestSubmit();
    }
  });

  // 送出是 async（加密要 await 金鑰/fetch），中間這段空檔如果使用者連按
  // 兩次 Enter 或連點送出鍵，兩次呼叫都會通過同一份 messageInput.value
  // 還沒清空前的檢查，變成同一則訊息送出兩份。isSendingMessage 是最直接
  // 的防重複送出鎖：整段處理期間鎖住，任何後續 submit 直接忽略，處理
  // 完（不管成功或失敗）一定會在 finally 解鎖。
  // iOS Safari 已知的怪癖：輸入框還在聚焦狀態時，如果剛好有輸入法（注音/
  // 拼音）候選字或系統自動完成的待確認文字，programmatically 清空 .value
  // 之後，系統會在稍後自己的內部計時器裡把那段文字「補回來」，造成訊息
  // 明明送出去了、輸入框卻還留著剛打的字——單次同步清空贏不了這個競速，
  // 補一次延遲清空當保險。
  function clearMessageInput() {
    messageInput.value = '';
    setTimeout(() => { messageInput.value = ''; }, 50);
  }

  let isSendingMessage = false;
  messageForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    if (isSendingMessage) return;
    const body = messageInput.value.trim();
    if (!body || !currentConversationId) return;

    isSendingMessage = true;
    sendBtn.disabled = true;
    try {
      if (editingMessageId) {
        const id = editingMessageId;
        const original = messagesById.get(id);
        clearMessageInput();
        clearComposeContext();

        let updated;
        if (original?.encrypted) {
          // 編輯沿用原本那則訊息的 key_version，不是目前對話的最新版——不然
          // 拿最新版金鑰加密、但後端還存著舊版號，會變成用錯的金鑰也解得開
          // （版本對不上）的錯亂狀態。
          const keyEntry = await MC.getConversationKey(cfg.routes, currentConversationId, original.key_version);
          if (!keyEntry) { alert('找不到解密這則訊息用的金鑰，無法編輯'); return; }
          const enc = await MC.encrypt(keyEntry.cryptoKey, body);
          updated = await M.api.updateMessage(currentConversationId, id, enc.body, { iv: enc.iv });
          updated.body = body; // 樂觀顯示明文，不用等下一輪解密
        } else {
          updated = await M.api.updateMessage(currentConversationId, id, body);
        }
        updateMessageRow(updated);
        loadConversations();
        return;
      }

      const replyToId = replyingTo?.id ?? null;
      clearMessageInput();
      clearComposeContext();

      let payload;
      if (conversationHasEncryption) {
        const keyEntry = await MC.getConversationKey(cfg.routes, currentConversationId);
        const enc = await MC.encrypt(keyEntry.cryptoKey, body);
        payload = { body: enc.body, iv: enc.iv, encrypted: 1, key_version: keyEntry.version, type: 'text', replyToId };
      } else {
        payload = { body, replyToId };
      }

      const msg = await M.api.sendMessage(currentConversationId, payload);
      if (conversationHasEncryption) { msg.body = body; msg._decrypted = true; } // 樂觀顯示明文
      appendMessage(msg);
      threadMessages.scrollTop = threadMessages.scrollHeight;
      loadConversations();
    } finally {
      isSendingMessage = false;
      sendBtn.disabled = false;
    }
  });

  // ── 「+」附加選單：圖片／表情符號／位置／語音 ────────────────────
  const attachMenuBtn = document.getElementById('attachMenuBtn');
  const attachMenu = document.getElementById('attachMenu');
  const attachImageBtn = document.getElementById('attachImageBtn');
  const attachEmojiBtn = document.getElementById('attachEmojiBtn');
  const attachLocationBtn = document.getElementById('attachLocationBtn');
  const attachVoiceBtn = document.getElementById('attachVoiceBtn');
  const attachFileBtn = document.getElementById('attachFileBtn');
  const imageFileInput = document.getElementById('imageFileInput');
  const genericFileInput = document.getElementById('genericFileInput');
  const emojiStickerPanel = document.getElementById('emojiStickerPanel');
  const emojiPickerWrap = document.getElementById('emojiPickerWrap');
  const stickerPickerWrap = document.getElementById('stickerPickerWrap');
  const panelTabStickerBtn = document.getElementById('panelTabStickerBtn');
  const panelTabEmojiBtn = document.getElementById('panelTabEmojiBtn');
  const voiceRecordBar = document.getElementById('voiceRecordBar');
  const voiceRecordTimer = document.getElementById('voiceRecordTimer');
  const voiceCancelBtn = document.getElementById('voiceCancelBtn');
  const voiceStopBtn = document.getElementById('voiceStopBtn');
  const sendBtn = document.getElementById('sendBtn');

  function closeAttachMenu() { attachMenu.classList.add('d-none'); }
  function closeEmojiPicker() { emojiStickerPanel.classList.add('d-none'); }

  // 這兩個彈出選單用 position:fixed（不是 absolute），因為外層的訊息串
  // 面板本身有 overflow:hidden（讓內部訊息可以捲動用的），absolute 定位
  // 的彈窗只要超出那個框就會被裁掉、整個「消失」看不到。fixed 是相對
  // 瀏覽器視窗定位，不受任何祖先 overflow:hidden 影響，所以位置要在
  // 開啟當下用按鈕實際的螢幕座標現算。
  function positionPopupAboveButton(popupEl, buttonEl) {
    const rect = buttonEl.getBoundingClientRect();
    popupEl.style.left = rect.left + 'px';
    popupEl.style.bottom = (window.innerHeight - rect.top + 6) + 'px';
  }

  // 背景選單按鈕在面板最上面，往上彈會超出視窗，改成往下彈。
  function positionPopupBelowButton(popupEl, buttonEl) {
    const rect = buttonEl.getBoundingClientRect();
    popupEl.style.left = Math.min(rect.left, window.innerWidth - 190) + 'px';
    popupEl.style.top = (rect.bottom + 6) + 'px';
  }

  attachMenuBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    closeEmojiPicker();
    if (attachMenu.classList.contains('d-none')) {
      positionPopupAboveButton(attachMenu, attachMenuBtn);
    }
    attachMenu.classList.toggle('d-none');
  });
  document.addEventListener('click', (e) => {
    if (!attachMenu.contains(e.target) && e.target !== attachMenuBtn) closeAttachMenu();
    if (!emojiStickerPanel.contains(e.target) && e.target !== attachEmojiBtn) closeEmojiPicker();
    if (!chatBgMenu.contains(e.target) && e.target !== chatBgBtn) closeChatBgMenu();
  });

  // ── 語音／視訊通話：實際的通話邏輯／畫面都在 messaging.js（全站共用，
  // 因為來電要不管使用者在哪一頁都彈得出來），這裡只負責「撥打」這個動作。
  document.getElementById('startAudioCallBtn').addEventListener('click', () => {
    if (!currentConversationId) return;
    M.calling.start(currentConversationId, 'audio', currentConversationType).catch((e) => alert(M.calling.friendlyError(e)));
  });
  document.getElementById('startVideoCallBtn').addEventListener('click', () => {
    if (!currentConversationId) return;
    M.calling.start(currentConversationId, 'video', currentConversationType).catch((e) => alert(M.calling.friendlyError(e)));
  });
  joinOngoingCallBtn.addEventListener('click', () => {
    if (!currentConversationId || !currentOngoingCall) return;
    M.calling.rejoin(
      currentConversationId, currentOngoingCall.id, currentOngoingCall.type,
      currentOngoingCall.initiator_name, threadTitle.textContent,
    ).catch((e) => alert(M.calling.friendlyError(e)));
  });
  window.addEventListener('resize', () => { closeAttachMenu(); closeEmojiPicker(); closeChatBgMenu(); });

  // ── 聊天背景主題：存在 user_ui_preferences.chat_background，全部對話共用 ──
  const chatBgBtn = document.getElementById('chatBgBtn');
  const chatBgMenu = document.getElementById('chatBgMenu');
  const CHAT_BG_CLASSES = ['chat-bg-ocean', 'chat-bg-dark', 'chat-bg-spring', 'chat-bg-summer', 'chat-bg-autumn', 'chat-bg-winter'];

  function applyChatBackground(key) {
    threadMessages.classList.remove(...CHAT_BG_CLASSES);
    if (key && key !== 'default') threadMessages.classList.add('chat-bg-' + key);
  }
  function closeChatBgMenu() { chatBgMenu.classList.add('d-none'); }

  chatBgBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    closeAttachMenu();
    closeEmojiPicker();
    if (chatBgMenu.classList.contains('d-none')) {
      positionPopupBelowButton(chatBgMenu, chatBgBtn);
    }
    chatBgMenu.classList.toggle('d-none');
  });
  chatBgMenu.addEventListener('click', async (e) => {
    const swatch = e.target.closest('.chat-bg-swatch');
    if (!swatch) return;
    const key = swatch.dataset.bg;
    applyChatBackground(key);
    closeChatBgMenu();
    try {
      await fetch('{{ route("ui.prefs.store") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': cfg.csrfToken, Accept: 'application/json' },
        body: JSON.stringify({ chat_background: key }),
      });
    } catch (e) {}
  });

  (async function loadChatBackground() {
    try {
      const res = await fetch('{{ route("ui.prefs.show") }}', { headers: { Accept: 'application/json' } });
      const data = await res.json();
      applyChatBackground(data.chat_background);
    } catch (e) {}
  })();

  attachImageBtn.addEventListener('click', () => {
    closeAttachMenu();
    imageFileInput.click();
  });

  imageFileInput.addEventListener('change', async () => {
    const file = imageFileInput.files?.[0];
    imageFileInput.value = '';
    if (!file || !currentConversationId) return;
    const body = messageInput.value.trim();
    messageInput.value = '';
    try {
      const msg = await M.api.sendMessage(currentConversationId, { body, image: file });
      appendMessage(msg);
      threadMessages.scrollTop = threadMessages.scrollHeight;
      loadConversations();
    } catch (e) {
      alert('圖片上傳失敗');
    }
  });

  attachFileBtn.addEventListener('click', () => {
    closeAttachMenu();
    genericFileInput.click();
  });

  genericFileInput.addEventListener('change', async () => {
    const file = genericFileInput.files?.[0];
    genericFileInput.value = '';
    if (!file || !currentConversationId) return;
    const body = messageInput.value.trim();
    messageInput.value = '';
    try {
      const msg = await M.api.sendMessage(currentConversationId, { body, file });
      appendMessage(msg);
      threadMessages.scrollTop = threadMessages.scrollHeight;
      loadConversations();
    } catch (e) {
      alert('檔案上傳失敗');
    }
  });

  // 螢幕截圖：跟 LINE 一樣，選畫面/視窗後只抓「一格畫面」當截圖傳出去，
  // 不是真的開始螢幕分享——抓到那一幀後就馬上把 getDisplayMedia 的
  // 串流關掉，不會一直佔用螢幕分享的狀態。
  document.getElementById('attachScreenshotBtn').addEventListener('click', async () => {
    closeAttachMenu();
    if (!currentConversationId) return;
    if (!navigator.mediaDevices?.getDisplayMedia) { alert('瀏覽器不支援螢幕截圖'); return; }

    let stream;
    try {
      stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
    } catch (e) {
      return; // 使用者自己取消選擇畫面，不用跳錯誤訊息
    }

    try {
      const track = stream.getVideoTracks()[0];
      const video = document.createElement('video');
      video.srcObject = stream;
      await video.play();
      // 等第一格畫面真的到了再截，不然 canvas 畫出來可能是全黑。
      await new Promise((resolve) => {
        if (video.readyState >= 2) return resolve();
        video.onloadeddata = resolve;
      });

      const canvas = document.createElement('canvas');
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext('2d').drawImage(video, 0, 0);

      track.stop(); // 截完這一格就結束分享，不要一直佔用

      const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png'));
      if (!blob) { alert('截圖失敗'); return; }
      // 包成 File（不是原始 Blob）才會有檔名——sendMessage() 送出時只是把
      // image 直接塞進 FormData，靠物件本身的 .name 屬性決定檔名。
      const file = new File([blob], 'screenshot.png', { type: 'image/png' });

      const body = messageInput.value.trim();
      messageInput.value = '';
      const msg = await M.api.sendMessage(currentConversationId, { body, image: file });
      appendMessage(msg);
      threadMessages.scrollTop = threadMessages.scrollHeight;
      loadConversations();
    } catch (e) {
      stream?.getTracks().forEach((t) => t.stop());
      alert('螢幕截圖失敗');
    }
  });

  attachLocationBtn.addEventListener('click', () => {
    closeAttachMenu();
    if (!currentConversationId) return;
    if (!navigator.geolocation) { alert('瀏覽器不支援定位'); return; }
    navigator.geolocation.getCurrentPosition(async (pos) => {
      const loc = { lat: pos.coords.latitude, lng: pos.coords.longitude };
      let payload, optimisticMeta;
      if (conversationHasEncryption) {
        const keyEntry = await MC.getConversationKey(cfg.routes, currentConversationId);
        const enc = await MC.encrypt(keyEntry.cryptoKey, JSON.stringify(loc));
        payload = { body: enc.body, iv: enc.iv, encrypted: 1, key_version: keyEntry.version, type: 'location' };
        optimisticMeta = loc;
      } else {
        payload = loc;
      }
      const msg = await M.api.sendMessage(currentConversationId, payload);
      if (optimisticMeta) { msg.meta = optimisticMeta; msg._decrypted = true; }
      appendMessage(msg);
      threadMessages.scrollTop = threadMessages.scrollHeight;
      loadConversations();
    }, () => {
      alert('無法取得目前位置，請確認瀏覽器定位權限');
    });
  });

  // ── 語音訊息：MediaRecorder 錄音 ──────────────────────────────
  let mediaRecorder = null;
  let recordedChunks = [];
  let mediaStream = null;
  let recordStartTime = 0;
  let recordTimerInterval = null;

  function showVoiceRecordBar() {
    messageInput.classList.add('d-none');
    sendBtn.classList.add('d-none');
    voiceRecordBar.classList.remove('d-none');
    voiceRecordBar.classList.add('d-flex');
  }
  function hideVoiceRecordBar() {
    clearInterval(recordTimerInterval);
    mediaStream?.getTracks().forEach((t) => t.stop());
    mediaStream = null;
    messageInput.classList.remove('d-none');
    sendBtn.classList.remove('d-none');
    voiceRecordBar.classList.add('d-none');
    voiceRecordBar.classList.remove('d-flex');
  }
  function updateRecordTimer() {
    const secs = Math.floor((Date.now() - recordStartTime) / 1000);
    const mm = String(Math.floor(secs / 60)).padStart(2, '0');
    const ss = String(secs % 60).padStart(2, '0');
    voiceRecordTimer.textContent = `${mm}:${ss}`;
  }

  attachVoiceBtn.addEventListener('click', async () => {
    closeAttachMenu();
    if (!currentConversationId) return;
    if (!navigator.mediaDevices?.getUserMedia || !window.MediaRecorder) {
      alert('瀏覽器不支援錄音');
      return;
    }
    try {
      mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true });
    } catch (e) {
      alert('無法取得麥克風權限');
      return;
    }
    const preferredType = ['audio/webm;codecs=opus', 'audio/webm', 'audio/mp4', 'audio/ogg']
      .find((t) => MediaRecorder.isTypeSupported?.(t));
    mediaRecorder = preferredType ? new MediaRecorder(mediaStream, { mimeType: preferredType }) : new MediaRecorder(mediaStream);
    recordedChunks = [];
    mediaRecorder.addEventListener('dataavailable', (e) => { if (e.data.size > 0) recordedChunks.push(e.data); });

    mediaRecorder.start();
    recordStartTime = Date.now();
    voiceRecordTimer.textContent = '00:00';
    showVoiceRecordBar();
    recordTimerInterval = setInterval(updateRecordTimer, 250);
  });

  voiceCancelBtn.addEventListener('click', () => {
    if (mediaRecorder && mediaRecorder.state !== 'inactive') mediaRecorder.stop();
    recordedChunks = [];
    hideVoiceRecordBar();
  });

  voiceStopBtn.addEventListener('click', () => {
    if (!mediaRecorder || mediaRecorder.state === 'inactive') return;
    const duration = (Date.now() - recordStartTime) / 1000;
    mediaRecorder.addEventListener('stop', async () => {
      const chunks = recordedChunks;
      const mimeType = mediaRecorder.mimeType || 'audio/webm';
      hideVoiceRecordBar();
      if (!chunks.length || !currentConversationId) return;
      const blob = new Blob(chunks, { type: mimeType });
      try {
        const msg = await M.api.sendMessage(currentConversationId, { voice: blob, voiceDuration: duration });
        appendMessage(msg);
        threadMessages.scrollTop = threadMessages.scrollHeight;
        loadConversations();
      } catch (e) {
        alert('語音傳送失敗');
      }
    }, { once: true });
    mediaRecorder.stop();
  });

  // ── 貼圖／表情面板：跟 LINE 一樣共用同一顆按鈕、同一個彈出面板，靠上面
  // 兩個分頁切換內容，預設（含每次重新整理後第一次打開）停在「貼圖」分頁。
  let activePanelTab = 'sticker';
  let emojiPickerLoaded = false;
  let myStickerPacks = null; // null = 還沒抓過，抓過之後是陣列（可能是空的）
  let stickerPanelActivePackId = null;

  async function loadEmojiTab() {
    if (emojiPickerLoaded) return;
    emojiPickerLoaded = true;
    await import('/vendor/emoji-picker-element/picker.js');
    const picker = document.createElement('emoji-picker');
    picker.setAttribute('data-source', '/vendor/emoji-picker-element-data/en/emojibase/data.json');
    picker.style.cssText = '--num-columns:8; width:100%; height:100%;';
    picker.addEventListener('emoji-click', (ev) => {
      messageInput.value += ev.detail.unicode;
      messageInput.focus();
    });
    emojiPickerWrap.appendChild(picker);
  }

  // 只列出「已下載」的貼圖包，跟 LINE 一樣要先去商店下載過才會出現在這裡；
  // 沒有下載過任何一包時，面板只顯示一個前往商店的連結。
  function stickerPanelHtml() {
    if (!myStickerPacks || !myStickerPacks.length) {
      return `<div class="d-flex flex-column align-items-center justify-content-center gap-2 p-4 text-muted small" style="flex:1;">
        <i class="bi bi-sticky fs-3"></i>
        <div>還沒有下載任何貼圖</div>
        <a href="${cfg.routes.stickersStoreUrl}" target="_blank" rel="noopener" class="btn btn-sm btn-primary">前往貼圖商店</a>
      </div>`;
    }
    const activePack = myStickerPacks.find((p) => p.id === stickerPanelActivePackId) || myStickerPacks[0];
    const tabs = myStickerPacks.map((p) => `
      <button type="button" class="sticker-tab-btn ${p.id === activePack.id ? 'active' : ''}" data-pack-id="${p.id}" title="${escapeHtml(p.name)}">
        <img src="${escapeHtml(p.cover_url || (p.stickers[0]?.url ?? ''))}" alt="${escapeHtml(p.name)}">
      </button>`).join('');
    // 跟 LINE 一樣：一包貼圖數量超過一頁時用左右滑動分頁，而不是塞在同一格上下捲動
    // （上下捲動在這個固定高度的面板裡常被上層 overflow:hidden 裁掉，超出的貼圖會看不到也拉不到）。
    const PAGE_SIZE = 9; // 3 欄 x 3 列
    const stickers = activePack.stickers;
    const pages = [];
    for (let i = 0; i < stickers.length; i += PAGE_SIZE) pages.push(stickers.slice(i, i + PAGE_SIZE));
    if (!pages.length) pages.push([]);
    const pagesHtml = pages.map((page) => `
      <div class="sticker-page">${page.map((s) => `
        <button type="button" class="sticker-pick-btn" data-sticker-id="${s.id}">
          <img src="${escapeHtml(s.url)}" alt="貼圖" loading="lazy">
        </button>`).join('') || '<div class="text-muted small p-3">這組貼圖包是空的</div>'}</div>`).join('');
    const dotsHtml = pages.length > 1
      ? pages.map((_, i) => `<button type="button" class="sticker-page-dot${i === 0 ? ' active' : ''}" data-page="${i}"></button>`).join('')
      : '';
    return `
      <div class="d-flex border-bottom sticker-pack-tabs" style="overflow-x:auto; flex:0 0 auto;">${tabs}
        <a href="${cfg.routes.stickersStoreUrl}" target="_blank" rel="noopener" class="sticker-tab-btn d-flex align-items-center justify-content-center" title="貼圖商店">
          <i class="bi bi-shop"></i>
        </a>
      </div>
      <div class="sticker-page-track" id="stickerPageTrack">${pagesHtml}</div>
      ${dotsHtml ? `<div class="sticker-page-dots">${dotsHtml}</div>` : ''}`;
  }

  function renderStickerPanel() {
    stickerPickerWrap.innerHTML = stickerPanelHtml();
    stickerPickerWrap.querySelectorAll('.sticker-tab-btn[data-pack-id]').forEach((btn) => {
      btn.addEventListener('click', (e) => {
        // 一定要在 renderStickerPanel() 換掉整包 innerHTML（包含這顆按鈕自己）
        // 之前先擋掉冒泡——不然事件泡到 document 的「點外面關閉面板」監聽器時，
        // e.target 已經是被换掉、脫離文件樹的舊節點，emojiStickerPanel.contains(e.target)
        // 一定回傳 false，導致切換貼圖包的當下面板被誤判成「點了外面」而關閉。
        e.stopPropagation();
        stickerPanelActivePackId = parseInt(btn.dataset.packId, 10);
        renderStickerPanel();
      });
    });
    stickerPickerWrap.querySelectorAll('.sticker-pick-btn').forEach((btn) => {
      btn.addEventListener('click', async () => {
        if (!currentConversationId) return;
        btn.disabled = true;
        try {
          const msg = await M.api.sendMessage(currentConversationId, { sticker_id: parseInt(btn.dataset.stickerId, 10) });
          appendMessage(msg);
          threadMessages.scrollTop = threadMessages.scrollHeight;
          loadConversations();
          closeEmojiPicker();
        } catch (e) {
          alert('貼圖傳送失敗');
        } finally {
          btn.disabled = false;
        }
      });
    });
    const pageTrack = stickerPickerWrap.querySelector('#stickerPageTrack');
    const pageDots = stickerPickerWrap.querySelectorAll('.sticker-page-dot');
    if (pageTrack && pageDots.length) {
      pageDots.forEach((dot) => {
        dot.addEventListener('click', () => {
          pageTrack.scrollTo({ left: parseInt(dot.dataset.page, 10) * pageTrack.clientWidth, behavior: 'smooth' });
        });
      });
      pageTrack.addEventListener('scroll', () => {
        const idx = Math.round(pageTrack.scrollLeft / pageTrack.clientWidth);
        pageDots.forEach((dot, i) => dot.classList.toggle('active', i === idx));
      });
    }
    if (pageTrack) {
      // 桌機滑鼠滾輪預設是垂直滾動，這裡轉成水平滾動，方便沒有觸控/水平滾輪的使用者也能翻頁
      pageTrack.addEventListener('wheel', (e) => {
        if (Math.abs(e.deltaY) > Math.abs(e.deltaX)) {
          e.preventDefault();
          pageTrack.scrollLeft += e.deltaY;
        }
      }, { passive: false });
    }
  }

  async function loadStickerTab() {
    if (myStickerPacks === null) {
      try {
        myStickerPacks = await M.api.getMyStickers();
      } catch (e) {
        myStickerPacks = [];
      }
    }
    renderStickerPanel();
  }

  function showPanelTab(tab) {
    activePanelTab = tab;
    panelTabStickerBtn.classList.toggle('active', tab === 'sticker');
    panelTabEmojiBtn.classList.toggle('active', tab === 'emoji');
    stickerPickerWrap.classList.toggle('d-none', tab !== 'sticker');
    emojiPickerWrap.classList.toggle('d-none', tab !== 'emoji');
    if (tab === 'sticker') loadStickerTab();
    else loadEmojiTab();
  }

  panelTabStickerBtn.addEventListener('click', () => showPanelTab('sticker'));
  panelTabEmojiBtn.addEventListener('click', () => showPanelTab('emoji'));

  attachEmojiBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    closeAttachMenu();
    if (!emojiStickerPanel.classList.contains('d-none')) { closeEmojiPicker(); return; }

    showPanelTab(activePanelTab);
    positionPopupAboveButton(emojiStickerPanel, attachEmojiBtn);
    emojiStickerPanel.classList.remove('d-none');
  });

  // 這裡只更新左側列表（未讀數／最後訊息預覽)。目前開著的對話串本身已經由
  // subscribeConversation() 訂閱的 presence channel 負責 append + 標已讀，
  // 兩邊都處理會讓同一則訊息在畫面上出現兩次。
  M.onNewMessage(() => {
    loadConversations();
  });

  // ── 新對話 Modal：私訊 ─────────────────────────────────────────
  const directUserSearch = document.getElementById('directUserSearch');
  const directUserResults = document.getElementById('directUserResults');
  let directSearchTimer = null;
  directUserSearch.addEventListener('input', () => {
    clearTimeout(directSearchTimer);
    directSearchTimer = setTimeout(async () => {
      const users = await M.api.searchUsers(directUserSearch.value.trim());
      directUserResults.innerHTML = users.map((u) =>
        `<li><a class="conv-item" data-user-id="${u.id}">${escapeHtml(u.name)}</a></li>`
      ).join('') || '<li class="text-muted small py-2">查無使用者</li>';
    }, 250);
  });
  // 建立對話（私訊/群組）前，先試著把新對話金鑰包裝給所有成員（含自己）。
  // 有人還沒上傳過公鑰（沒開過訊息頁面）就直接建立不加密的對話，之後開啟
  // 時 ensureConversationEncryption() 會自動補上。
  async function tryComputeWraps(userIds) {
    if (!cryptoReady) return null;
    try {
      return await MC.createConversationKeyAndWraps(cfg.routes, userIds);
    } catch (e) {
      return null;
    }
  }

  directUserResults.addEventListener('click', async (e) => {
    const a = e.target.closest('[data-user-id]');
    if (!a) return;
    const otherUserId = parseInt(a.dataset.userId, 10);
    const prep = await tryComputeWraps([cfg.userId, otherUserId]);
    const res = await M.api.createConversation({
      type: 'direct', user_id: otherUserId, wraps: prep?.wraps,
    });
    if (prep) MC.cacheConversationKey(res.id, 1, prep.conversationKey);
    bootstrap.Modal.getInstance(document.getElementById('newConversationModal'))?.hide();
    await loadConversations();
    openConversation(res.id);
  });

  // ── 新對話 Modal：群組 ─────────────────────────────────────────
  const groupUserSearch = document.getElementById('groupUserSearch');
  const groupUserResults = document.getElementById('groupUserResults');
  const groupSelectedNames = document.getElementById('groupSelectedNames');
  const selectedGroupUsers = new Map();
  let groupSearchTimer = null;
  groupUserSearch.addEventListener('input', () => {
    clearTimeout(groupSearchTimer);
    groupSearchTimer = setTimeout(async () => {
      const users = await M.api.searchUsers(groupUserSearch.value.trim());
      groupUserResults.innerHTML = users.map((u) =>
        `<li><a class="conv-item" data-user-id="${u.id}" data-user-name="${escapeHtml(u.name)}">${escapeHtml(u.name)}</a></li>`
      ).join('') || '<li class="text-muted small py-2">查無使用者</li>';
    }, 250);
  });
  groupUserResults.addEventListener('click', (e) => {
    const a = e.target.closest('[data-user-id]');
    if (!a) return;
    selectedGroupUsers.set(a.dataset.userId, a.dataset.userName);
    groupSelectedNames.textContent = Array.from(selectedGroupUsers.values()).join('、') || '（無）';
  });
  document.getElementById('createGroupBtn').addEventListener('click', async () => {
    const title = document.getElementById('groupTitleInput').value.trim();
    if (!title || !selectedGroupUsers.size) { alert('請輸入群組名稱並至少選一位成員'); return; }
    const memberIds = Array.from(selectedGroupUsers.keys()).map((v) => parseInt(v, 10));
    const prep = await tryComputeWraps([cfg.userId, ...memberIds]);
    const res = await M.api.createConversation({
      type: 'group', title, user_ids: memberIds, wraps: prep?.wraps,
    });
    if (prep) MC.cacheConversationKey(res.id, 1, prep.conversationKey);
    bootstrap.Modal.getInstance(document.getElementById('newConversationModal'))?.hide();
    selectedGroupUsers.clear();
    groupSelectedNames.textContent = '（無）';
    await loadConversations();
    openConversation(res.id);
  });

  // ── 加成員 Modal ───────────────────────────────────────────────
  const addParticipantSearch = document.getElementById('addParticipantSearch');
  const addParticipantResults = document.getElementById('addParticipantResults');
  let addSearchTimer = null;
  addParticipantSearch.addEventListener('input', () => {
    clearTimeout(addSearchTimer);
    addSearchTimer = setTimeout(async () => {
      const users = await M.api.searchUsers(addParticipantSearch.value.trim());
      addParticipantResults.innerHTML = users.map((u) =>
        `<li><a class="conv-item" data-user-id="${u.id}">${escapeHtml(u.name)}</a></li>`
      ).join('') || '<li class="text-muted small py-2">查無使用者</li>';
    }, 250);
  });
  addParticipantResults.addEventListener('click', async (e) => {
    const a = e.target.closest('[data-user-id]');
    if (!a || !currentConversationId) return;
    const newUserId = parseInt(a.dataset.userId, 10);

    // 新增成員要讓新成員讀不到加入前的歷史訊息，所以要換一版新的對話金鑰、
    // 包裝給「現有全部成員＋新成員」，不是只給新成員一個人。
    const detail = await M.api.showConversation(currentConversationId);
    const memberIds = Array.from(new Set([cfg.userId, newUserId, ...(detail.participants || []).map((p) => p.id)]));
    const prep = await tryComputeWraps(memberIds);

    const body = { user_id: newUserId };
    if (prep) { body.wraps = prep.wraps; body.wrapped_by_device_id = MC.getDeviceId(); }

    const res = await fetch(cfg.routes.show.replace('__ID__', currentConversationId) + '/participants', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': cfg.csrfToken, Accept: 'application/json' },
      body: JSON.stringify(body),
    });
    if (prep) {
      // 後端回傳的是舊資料，這裡直接算下一個版號存進快取（跟 storeKeyWraps() 的算法一致：目前最新版 + 1）
      const existing = await MC.getConversationKey(cfg.routes, currentConversationId).catch(() => null);
      const nextVersion = (existing?.version ?? 0) + 1;
      MC.cacheConversationKey(currentConversationId, nextVersion, prep.conversationKey);
    }
    bootstrap.Modal.getInstance(document.getElementById('addParticipantModal'))?.hide();
    openConversation(currentConversationId);
  });

  // ── 群組資訊 Modal：改名／換大頭照／成員清單／加人／踢人／離開群組 ──
  const groupInfoModalEl = document.getElementById('groupInfoModal');
  const groupInfoAvatar = document.getElementById('groupInfoAvatar');
  const groupInfoAvatarEditBtn = document.getElementById('groupInfoAvatarEditBtn');
  const groupInfoAvatarInput = document.getElementById('groupInfoAvatarInput');
  const groupInfoNameView = document.getElementById('groupInfoNameView');
  const groupInfoName = document.getElementById('groupInfoName');
  const groupInfoRenameBtn = document.getElementById('groupInfoRenameBtn');
  const groupInfoNameEdit = document.getElementById('groupInfoNameEdit');
  const groupInfoNameInput = document.getElementById('groupInfoNameInput');
  const groupInfoNameSaveBtn = document.getElementById('groupInfoNameSaveBtn');
  const groupInfoNameCancelBtn = document.getElementById('groupInfoNameCancelBtn');
  const groupInfoMemberCount = document.getElementById('groupInfoMemberCount');
  const groupInfoMemberList = document.getElementById('groupInfoMemberList');
  const groupInfoAddBtn = document.getElementById('groupInfoAddBtn');
  const groupInfoLeaveBtn = document.getElementById('groupInfoLeaveBtn');
  const groupInfoMuteToggle = document.getElementById('groupInfoMuteToggle');
  let groupInfoDetail = null; // 目前面板顯示的那份對話詳情，踢人/離開群組要用到成員 id

  function groupInfoMemberRowHtml(m, isOwnerViewer) {
    const canRemove = isOwnerViewer && !m.is_me;
    return `<li class="d-flex align-items-center gap-2 py-2 border-bottom" data-user-id="${m.id}">
      ${wrapAvatarLink(m.id, avatarHtml(m.name, m.avatar_url, m.id))}
      <div class="flex-grow-1 text-truncate">
        ${escapeHtml(m.name)}${m.is_me ? '（我）' : ''}
        ${m.role === 'owner' ? ' <span class="badge bg-secondary">群組長</span>' : ''}
      </div>
      ${canRemove ? `<button type="button" class="btn btn-sm btn-outline-danger" data-remove-member="${m.id}">移除</button>` : ''}
    </li>`;
  }

  function renderGroupInfo(detail) {
    groupInfoDetail = detail;
    groupInfoAvatar.innerHTML = conversationAvatarHtml(detail);
    groupInfoName.textContent = detail.title || '未命名群組';
    groupInfoNameInput.value = detail.title || '';
    groupInfoNameView.classList.remove('d-none');
    groupInfoNameEdit.classList.add('d-none');

    const members = detail.members || [];
    groupInfoMemberCount.textContent = members.length;
    groupInfoMemberList.innerHTML = members.map((m) => groupInfoMemberRowHtml(m, !!detail.is_owner)).join('')
      || '<li class="text-muted small py-2">沒有成員資料</li>';

    // 改名／換照片／加人：只有 owner 看得到（跟後端 ConversationPolicy::manage 一致）；
    // 離開群組人人都能做，不用判斷。
    groupInfoAvatarEditBtn.classList.toggle('d-none', !detail.is_owner);
    groupInfoRenameBtn.classList.toggle('d-none', !detail.is_owner);
    groupInfoAddBtn.classList.toggle('d-none', !detail.is_owner);

    groupInfoMuteToggle.checked = !!detail.is_muted;
    groupInfoMuteToggle.setAttribute('aria-checked', String(!!detail.is_muted));
  }

  groupInfoModalEl.addEventListener('show.bs.modal', async () => {
    if (!currentConversationId) return;
    groupInfoMemberList.innerHTML = '<li class="text-center text-muted small py-3">載入中…</li>';
    try {
      const detail = await M.api.showConversation(currentConversationId);
      renderGroupInfo(detail);
    } catch (e) {
      groupInfoMemberList.innerHTML = '<li class="text-center text-danger small py-3">載入失敗</li>';
    }
  });

  groupInfoRenameBtn.addEventListener('click', () => {
    groupInfoNameView.classList.add('d-none');
    groupInfoNameEdit.classList.remove('d-none');
    groupInfoNameInput.focus();
  });
  groupInfoNameCancelBtn.addEventListener('click', () => {
    groupInfoNameView.classList.remove('d-none');
    groupInfoNameEdit.classList.add('d-none');
  });
  groupInfoNameSaveBtn.addEventListener('click', async () => {
    const title = groupInfoNameInput.value.trim();
    if (!title || !currentConversationId) return;
    const formData = new FormData();
    formData.append('title', title);
    const res = await fetch(cfg.routes.show.replace('__ID__', currentConversationId) + '/update', {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': cfg.csrfToken, Accept: 'application/json' },
      body: formData,
    });
    if (!res.ok) { alert('改名失敗'); return; }
    const detail = await res.json();
    renderGroupInfo(detail);
    threadTitle.textContent = detail.title || '未命名對話';
    loadConversations();
  });

  groupInfoAvatarEditBtn.addEventListener('click', () => groupInfoAvatarInput.click());
  groupInfoAvatarInput.addEventListener('change', async () => {
    const file = groupInfoAvatarInput.files[0];
    groupInfoAvatarInput.value = '';
    if (!file || !currentConversationId) return;
    const formData = new FormData();
    formData.append('avatar', file);
    const res = await fetch(cfg.routes.show.replace('__ID__', currentConversationId) + '/update', {
      method: 'POST',
      headers: { 'X-CSRF-TOKEN': cfg.csrfToken, Accept: 'application/json' },
      body: formData,
    });
    if (!res.ok) { alert('上傳失敗'); return; }
    const detail = await res.json();
    renderGroupInfo(detail);
    threadHeaderAvatar.innerHTML = conversationAvatarHtml(detail);
    loadConversations();
  });

  groupInfoAddBtn.addEventListener('click', () => {
    bootstrap.Modal.getInstance(groupInfoModalEl)?.hide();
    addParticipantSearch.value = '';
    addParticipantResults.innerHTML = '';
    new bootstrap.Modal(document.getElementById('addParticipantModal')).show();
  });

  groupInfoMemberList.addEventListener('click', async (e) => {
    if (e.target.closest('[data-action="view-profile"]')) return;
    const btn = e.target.closest('[data-remove-member]');
    if (!btn || !currentConversationId) return;
    const userId = parseInt(btn.dataset.removeMember, 10);
    const member = (groupInfoDetail?.members || []).find((m) => m.id === userId);
    if (!confirm(`確定要把「${member?.name || ''}」移出群組嗎？`)) return;

    const res = await fetch(cfg.routes.show.replace('__ID__', currentConversationId) + '/participants/' + userId, {
      method: 'DELETE',
      headers: { 'X-CSRF-TOKEN': cfg.csrfToken, Accept: 'application/json' },
    });
    if (!res.ok) { alert('移除失敗'); return; }
    const detail = await M.api.showConversation(currentConversationId);
    renderGroupInfo(detail);
  });

  groupInfoMuteToggle.addEventListener('change', async () => {
    if (!currentConversationId) return;
    const muted = groupInfoMuteToggle.checked;
    try {
      if (muted) {
        await M.api.muteConversation(currentConversationId);
      } else {
        await M.api.unmuteConversation(currentConversationId);
      }
      groupInfoMuteToggle.setAttribute('aria-checked', String(muted));
      const cached = (conversationsCache || []).find((c) => c.id === currentConversationId);
      if (cached) cached.is_muted = muted;
      renderConversationList();
    } catch (err) {
      groupInfoMuteToggle.checked = !muted; // 失敗要把開關撥回去，不然畫面跟後端狀態不一致
      alert(err.message || '操作失敗，請稍後再試');
    }
  });

  groupInfoLeaveBtn.addEventListener('click', async () => {
    if (!currentConversationId) return;
    if (!confirm('確定要離開這個群組嗎？離開後不會再收到這個群組的訊息。')) return;

    const id = currentConversationId;
    const res = await fetch(cfg.routes.show.replace('__ID__', id) + '/participants/' + cfg.userId, {
      method: 'DELETE',
      headers: { 'X-CSRF-TOKEN': cfg.csrfToken, Accept: 'application/json' },
    });
    if (!res.ok) { alert('離開群組失敗'); return; }

    bootstrap.Modal.getInstance(groupInfoModalEl)?.hide();
    if (currentChannel) {
      M.connectEcho()?.leave('conversation.' + currentChannel);
      currentChannel = null;
    }
    currentConversationId = null;
    threadPanel.classList.add('d-none');
    threadPanel.classList.remove('d-flex');
    threadEmpty.classList.remove('d-none');
    messagingLayout.classList.remove('chat-open'); // 手機版：離開後退回清單畫面
    resizeMessagingLayout();
    const history = window.history;
    if (history?.replaceState) {
      history.replaceState(null, '', cfg.routes.index);
    }
    loadConversations();
  });

  // ── 訊息右鍵選單：常用表情快速回應／回覆／編輯／收回／刪除 ──────────
  function closeMsgContextMenu() { msgContextMenu.classList.add('d-none'); msgContextMenu.innerHTML = ''; }

  // 跟 LINE/Messenger 長按訊息跳出的那排常用表情一樣，沿用現有右鍵/長按選單，
  // 不用另外做一顆常駐圖示按鈕、多一套手勢讓使用者學。
  const QUICK_REACT_EMOJIS = ['👍', '❤️', '😂', '😮', '😢', '🙏'];

  async function toggleMessageReaction(id, emoji) {
    if (!currentConversationId) return;
    try {
      const res = await M.api.toggleReaction(currentConversationId, id, emoji);
      updateMessageRow({ id, reactions: res.reactions });
    } catch (err) {
      alert(err.message || '操作失敗，請稍後再試');
    }
  }

  // 點訊息下方已經有的表情標籤：不分是不是自己按的，點下去都是切換「我自己」
  // 對這個表情的那一票（跟 Google Chat 一樣，點別人按過的 👍 就是我也按 👍）。
  threadMessages.addEventListener('click', (e) => {
    const pill = e.target.closest('.msg-reaction-pill');
    if (!pill) return;
    const row = pill.closest('.msg-row[data-id]');
    if (!row) return;
    toggleMessageReaction(parseInt(row.dataset.id, 10), pill.dataset.emoji);
  });

  threadMessages.addEventListener('contextmenu', (e) => {
    const row = e.target.closest('.msg-row[data-id]');
    if (!row) return;
    e.preventDefault();
    const m = messagesById.get(parseInt(row.dataset.id, 10));
    if (!m) return;
    const isMe = m.user_id === cfg.userId;
    const recalled = !!m.recalled_at;

    const items = [];
    if (!recalled) {
      items.push({ key: 'reply', icon: 'bi-reply-fill text-primary', label: '回覆' });
    }
    if (isMe && !recalled && m.type === 'text') {
      items.push({ key: 'edit', icon: 'bi-pencil-fill text-warning', label: '編輯' });
    }
    if (isMe && !recalled) {
      items.push({ key: 'recall', icon: 'bi-arrow-counterclockwise text-danger', label: '收回' });
    }
    items.push({ key: 'delete', icon: 'bi-trash text-secondary', label: '刪除' });

    if (!items.length) return;

    const quickReactHtml = recalled ? '' : `<div class="msg-quick-react-bar">${QUICK_REACT_EMOJIS.map((emoji) =>
      `<button type="button" class="msg-quick-react-btn" data-emoji="${emoji}">${emoji}</button>`
    ).join('')}</div>`;

    msgContextMenu.innerHTML = quickReactHtml + items.map((it) =>
      `<button type="button" class="list-group-item list-group-item-action" data-action="${it.key}">
        <i class="bi ${it.icon} me-2"></i>${it.label}
      </button>`
    ).join('');
    msgContextMenu.dataset.messageId = m.id;

    const maxLeft = window.innerWidth - 160;
    const maxTop = window.innerHeight - (items.length * 40 + (recalled ? 0 : 44) + 10);
    msgContextMenu.style.left = Math.max(0, Math.min(e.clientX, maxLeft)) + 'px';
    msgContextMenu.style.top = Math.max(0, Math.min(e.clientY, maxTop)) + 'px';
    msgContextMenu.classList.remove('d-none');
  });

  document.addEventListener('click', (e) => {
    if (!msgContextMenu.contains(e.target)) closeMsgContextMenu();
  });
  window.addEventListener('scroll', closeMsgContextMenu, true);

  msgContextMenu.addEventListener('click', async (e) => {
    const quickBtn = e.target.closest('.msg-quick-react-btn');
    if (quickBtn) {
      const reactId = parseInt(msgContextMenu.dataset.messageId, 10);
      closeMsgContextMenu();
      toggleMessageReaction(reactId, quickBtn.dataset.emoji);
      return;
    }
    const btn = e.target.closest('[data-action]');
    if (!btn) return;
    const action = btn.dataset.action;
    const id = parseInt(msgContextMenu.dataset.messageId, 10);
    const m = messagesById.get(id);
    closeMsgContextMenu();
    if (!m || !currentConversationId) return;

    try {
      if (action === 'reply') {
        showReplyContext(m);
      } else if (action === 'edit') {
        showEditContext(m);
      } else if (action === 'recall') {
        if (!confirm('確定要收回這則訊息嗎？收回後所有人都會看到「此訊息已收回」。')) return;
        const updated = await M.api.recallMessage(currentConversationId, id);
        updateMessageRow(updated);
        loadConversations();
      } else if (action === 'delete') {
        if (!confirm('確定要刪除這則訊息嗎？只會從你自己的畫面上移除，對方不受影響。')) return;
        await M.api.deleteMessage(currentConversationId, id);
        messagesById.delete(id);
        threadMessages.querySelector(`.msg-row[data-id="${id}"]`)?.remove();
      }
    } catch (err) {
      alert(err.message || '操作失敗，請稍後再試');
    }
  });

  loadConversations().then(() => {
    if (initialConversationId) openConversation(initialConversationId);
  });
});
</script>
@endsection