const PERSON_ID_PREFIX = 'chat-topic-person-';
const ICON_ID_PREFIX = "presence-pill-";
const CHAT_ROSTER_PREFIX = "chat-roster-item-name-";
const CHAT_TITLE_PREFIX = "title-chat-list-item_";
const SUGGEST_PEOPLE_PREFIX = "AUTOSUGGEST_SUGGESTION_PEOPLE";
const ROSTER_AVATAR_PREFIX = "roster-avatar-img-";
const SERP_PEOPLE_CARD_PREFIX = "serp-people-card-content-";
const PEOPLE_PICKER_PREFIX = "people-picker-entry-";
const PEOPLE_PICKER_SEL_PREFIX = "people-picker-selected-user-";
const CHAT_CATEGORY_STORAGE_KEY = "chatCategories";
const CHAT_CACHE_STORAGE_KEY = "chatCategoryChatCache";
const CHAT_ORGANIZER_ROOT_ID = "teams-alias-chat-organizer-root";
const CHAT_ORGANIZER_STYLE_ID = "teams-alias-chat-organizer-style";
const CHAT_ORGANIZER_BUTTON_ID = "teams-alias-chat-organizer-button";
let debounceTimer = null;
let isMutating = false;
let organizerStateLoaded = false;
let organizerSaveTimer = null;
const chatOrganizerState = {
    categories: [],
    chatCache: {},
    visibleChats: {},
    isModalOpen: false,
    selectedCategoryId: "",
    feedback: "",
    draftCategoryName: "",
    draftChatId: "",
    visibleChatsExpanded: false,
    expandedCategoryIds: {}
};

function getOrganizerRoot() {
    return document.getElementById(CHAT_ORGANIZER_ROOT_ID);
}

function escapeHtml(value) {
    return String(value ?? "")
        .replace(/&/g, "&")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "&#39;");
}

function normalizeChatId(rawValue) {
    if (!rawValue) return "";
    let value = String(rawValue).trim();
    if (value.startsWith(CHAT_TITLE_PREFIX)) {
        value = value.slice(CHAT_TITLE_PREFIX.length);
    }
    return value.startsWith("19:") ? value : "";
}

function createCategoryId() {
    return `cat-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
}

function setOrganizerFeedback(message) {
    chatOrganizerState.feedback = message || "";
    renderChatOrganizer();
}

function scheduleOrganizerStateSave() {
    clearTimeout(organizerSaveTimer);
    organizerSaveTimer = setTimeout(async () => {
        await chrome.storage.local.set({
            [CHAT_CATEGORY_STORAGE_KEY]: chatOrganizerState.categories,
            [CHAT_CACHE_STORAGE_KEY]: chatOrganizerState.chatCache
        });
    }, 300);
}

async function loadChatOrganizerState() {
    if (organizerStateLoaded) return;
    const result = await chrome.storage.local.get([
        CHAT_CATEGORY_STORAGE_KEY,
        CHAT_CACHE_STORAGE_KEY
    ]);

    chatOrganizerState.categories = Array.isArray(result[CHAT_CATEGORY_STORAGE_KEY])
        ? result[CHAT_CATEGORY_STORAGE_KEY]
        : [];
    chatOrganizerState.chatCache = result[CHAT_CACHE_STORAGE_KEY] || {};
    chatOrganizerState.selectedCategoryId = chatOrganizerState.categories[0]?.id || "";
    organizerStateLoaded = true;
}

function getCategoryById(categoryId) {
    return chatOrganizerState.categories.find(category => category.id === categoryId) || null;
}

function getChatMeta(chatId) {
    return chatOrganizerState.visibleChats[chatId] || chatOrganizerState.chatCache[chatId] || null;
}

function inferAvatarFallback(name) {
    const base = (name || "?").trim();
    return base.slice(0, 2).toUpperCase();
}

function findChatTitleElement(chatId) {
    const normalizedChatId = normalizeChatId(chatId);
    if (!normalizedChatId) return null;
    return document.getElementById(`${CHAT_TITLE_PREFIX}${normalizedChatId}`);
}

function findClickableChatElement(chatId) {
    const titleElement = findChatTitleElement(chatId);
    if (!titleElement) return null;

    const clickable = titleElement.closest('button, a, [role="button"], [role="link"], [role="listitem"]');
    if (clickable) return clickable;

    let current = titleElement;
    for (let depth = 0; depth < 8 && current; depth += 1) {
        if (typeof current.click === "function") {
            return current;
        }
        current = current.parentElement;
    }
    return titleElement;
}

function deepLinkToChat(chatId) {
    const normalizedChatId = normalizeChatId(chatId);
    if (!normalizedChatId) return false;

    const candidates = [
        `${window.location.origin}/l/chat/${encodeURIComponent(normalizedChatId)}/conversations`,
        `https://teams.microsoft.com/l/chat/${encodeURIComponent(normalizedChatId)}/conversations`
    ];

    for (const url of candidates) {
        try {
            window.location.href = url;
            return true;
        } catch (error) {}
    }
    return false;
}

function openChatById(chatId) {
    const clickableElement = findClickableChatElement(chatId);
    if (clickableElement) {
        clickableElement.click();
        return true;
    }
    return deepLinkToChat(chatId);
}

function extractChatAvatar(titleElement) {
    const rowRoot = titleElement.closest('[role="listitem"], button, a, [role="button"]') || titleElement.parentElement;
    if (!rowRoot) return "";

    const avatarImage = rowRoot.querySelector("img");
    if (avatarImage?.src) {
        return avatarImage.src;
    }

    const avatarCandidate = rowRoot.querySelector('[style*="background-image"]');
    const inlineStyle = avatarCandidate?.style?.backgroundImage || "";
    const matched = inlineStyle.match(/url\(["']?(.*?)["']?\)/);
    return matched?.[1] || "";
}

function scanVisibleChats() {
    const titleElements = document.querySelectorAll(`[id^="${CHAT_TITLE_PREFIX}"]`);
    let changed = false;
    const nextVisibleChats = {};

    titleElements.forEach(titleElement => {
        const chatId = normalizeChatId(titleElement.id);
        if (!chatId) return;

        const name = titleElement.textContent?.trim() || chatOrganizerState.chatCache[chatId]?.name || chatId;
        const avatarUrl = extractChatAvatar(titleElement) || chatOrganizerState.chatCache[chatId]?.avatarUrl || "";
        const chatMeta = {
            id: chatId,
            name,
            avatarUrl,
            updatedAt: Date.now()
        };

        nextVisibleChats[chatId] = chatMeta;

        const cached = chatOrganizerState.chatCache[chatId];
        if (!cached || cached.name !== chatMeta.name || cached.avatarUrl !== chatMeta.avatarUrl) {
            chatOrganizerState.chatCache[chatId] = chatMeta;
            changed = true;
        }
    });

    const visibleIds = Object.keys(nextVisibleChats);
    const previousVisibleIds = Object.keys(chatOrganizerState.visibleChats);
    if (visibleIds.length !== previousVisibleIds.length || visibleIds.some(id => !chatOrganizerState.visibleChats[id])) {
        changed = true;
    }

    chatOrganizerState.visibleChats = nextVisibleChats;

    if (changed) {
        scheduleOrganizerStateSave();
        renderChatOrganizer();
    }
}

function addChatToCategory(categoryId, rawChatId) {
    const category = getCategoryById(categoryId);
    const chatId = normalizeChatId(rawChatId);

    if (!category) {
        setOrganizerFeedback("请选择一个分类。");
        return;
    }
    if (!chatId) {
        setOrganizerFeedback("聊天 ID 格式无效，必须以 19: 开头。");
        return;
    }
    if (category.chatIds.includes(chatId)) {
        setOrganizerFeedback("该聊天已存在于当前分类。");
        return;
    }

    category.chatIds.push(chatId);
    const meta = getChatMeta(chatId);
    if (meta) {
        chatOrganizerState.chatCache[chatId] = {
            ...chatOrganizerState.chatCache[chatId],
            ...meta,
            updatedAt: Date.now()
        };
    } else {
        chatOrganizerState.chatCache[chatId] = {
            id: chatId,
            name: chatId,
            avatarUrl: "",
            updatedAt: Date.now()
        };
    }

    scheduleOrganizerStateSave();
    setOrganizerFeedback("已加入分类。");
}

function removeChatFromCategory(categoryId, chatId) {
    const category = getCategoryById(categoryId);
    if (!category) return;
    category.chatIds = category.chatIds.filter(id => id !== chatId);
    scheduleOrganizerStateSave();
    setOrganizerFeedback("已移除聊天。");
}

function createCategory(name) {
    const trimmedName = (name || "").trim();
    if (!trimmedName) {
        setOrganizerFeedback("分类名称不能为空。");
        return;
    }

    const category = {
        id: createCategoryId(),
        name: trimmedName,
        chatIds: []
    };

    chatOrganizerState.categories.push(category);
    chatOrganizerState.expandedCategoryIds[category.id] = true;
    chatOrganizerState.selectedCategoryId = category.id;
    scheduleOrganizerStateSave();
    setOrganizerFeedback("分类已创建。");
}

function deleteCategory(categoryId) {
    chatOrganizerState.categories = chatOrganizerState.categories.filter(category => category.id !== categoryId);
    delete chatOrganizerState.expandedCategoryIds[categoryId];
    if (chatOrganizerState.selectedCategoryId === categoryId) {
        chatOrganizerState.selectedCategoryId = chatOrganizerState.categories[0]?.id || "";
    }
    scheduleOrganizerStateSave();
    setOrganizerFeedback("分类已删除。");
}

function isCategoryExpanded(categoryId) {
    return Boolean(chatOrganizerState.expandedCategoryIds[categoryId]);
}

function toggleCategoryExpanded(categoryId) {
    chatOrganizerState.expandedCategoryIds[categoryId] = !isCategoryExpanded(categoryId);
    renderChatOrganizer();
}

function toggleVisibleChatsExpanded() {
    chatOrganizerState.visibleChatsExpanded = !chatOrganizerState.visibleChatsExpanded;
    renderChatOrganizer();
}

function renderChatCard(chatId, categoryId) {
    const meta = getChatMeta(chatId) || { id: chatId, name: chatId, avatarUrl: "" };
    const avatar = meta.avatarUrl
        ? `<img src="${escapeHtml(meta.avatarUrl)}" alt="" class="teams-alias-chat-avatar-image">`
        : `<span class="teams-alias-chat-avatar-fallback">${escapeHtml(inferAvatarFallback(meta.name))}</span>`;

    return `
        <div class="teams-alias-chat-card">
            <button class="teams-alias-chat-open" data-action="open-chat" data-chat-id="${escapeHtml(chatId)}">
                <span class="teams-alias-chat-avatar">${avatar}</span>
                <span class="teams-alias-chat-main">
                    <span class="teams-alias-chat-name">${escapeHtml(meta.name || chatId)}</span>
                    <span class="teams-alias-chat-id">${escapeHtml(chatId)}</span>
                </span>
            </button>
            <button class="teams-alias-chat-remove" data-action="remove-chat" data-category-id="${escapeHtml(categoryId)}" data-chat-id="${escapeHtml(chatId)}">移除</button>
        </div>
    `;
}

function renderVisibleChatCandidate(chatId) {
    const meta = chatOrganizerState.visibleChats[chatId];
    if (!meta) return "";
    const avatar = meta.avatarUrl
        ? `<img src="${escapeHtml(meta.avatarUrl)}" alt="" class="teams-alias-chat-avatar-image">`
        : `<span class="teams-alias-chat-avatar-fallback">${escapeHtml(inferAvatarFallback(meta.name))}</span>`;

    return `
        <div class="teams-alias-visible-chat">
            <span class="teams-alias-chat-avatar">${avatar}</span>
            <span class="teams-alias-chat-main">
                <span class="teams-alias-chat-name">${escapeHtml(meta.name || chatId)}</span>
                <span class="teams-alias-chat-id">${escapeHtml(chatId)}</span>
            </span>
            <button data-action="quick-add" data-chat-id="${escapeHtml(chatId)}">加入分类</button>
        </div>
    `;
}

function ensureChatOrganizerUI() {
    if (!document.body || getOrganizerRoot()) return;

    if (!document.getElementById(CHAT_ORGANIZER_STYLE_ID)) {
        const style = document.createElement("style");
        style.id = CHAT_ORGANIZER_STYLE_ID;
        style.textContent = `
            #${CHAT_ORGANIZER_BUTTON_ID} {
                position: fixed;
                top: 12px;
                left: 12px;
                z-index: 2147483644;
                border: none;
                border-radius: 999px;
                background: #2563eb;
                color: #fff;
                font-size: 13px;
                font-weight: 600;
                padding: 10px 14px;
                cursor: pointer;
                box-shadow: 0 10px 30px rgba(37, 99, 235, 0.25);
            }

            #${CHAT_ORGANIZER_ROOT_ID} {
                position: fixed;
                inset: 0;
                z-index: 2147483643;
                display: none;
            }

            #${CHAT_ORGANIZER_ROOT_ID}.is-open {
                display: block;
            }

            .teams-alias-overlay {
                position: absolute;
                inset: 0;
                background: rgba(15, 23, 42, 0.4);
                backdrop-filter: blur(3px);
            }

            .teams-alias-modal {
                position: absolute;
                top: 64px;
                left: 24px;
                width: min(920px, calc(100vw - 48px));
                max-height: calc(100vh - 88px);
                overflow: auto;
                border-radius: 18px;
                background: #ffffff;
                box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
                color: #0f172a;
                font-family: "Segoe UI", sans-serif;
            }

            .teams-alias-modal-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 18px 20px 12px;
                border-bottom: 1px solid #e5e7eb;
            }

            .teams-alias-modal-header h2 {
                margin: 0;
                font-size: 18px;
            }

            .teams-alias-close {
                border: none;
                background: #e2e8f0;
                color: #0f172a;
                border-radius: 999px;
                width: 32px;
                height: 32px;
                cursor: pointer;
            }

            .teams-alias-modal-body {
                padding: 16px 20px 20px;
                display: grid;
                gap: 16px;
            }

            .teams-alias-panel {
                border: 1px solid #e5e7eb;
                border-radius: 14px;
                padding: 14px;
                background: #f8fafc;
            }

            .teams-alias-panel h3 {
                margin: 0 0 12px;
                font-size: 14px;
            }

            .teams-alias-row {
                display: flex;
                gap: 10px;
                flex-wrap: wrap;
                align-items: center;
            }

            .teams-alias-row input,
            .teams-alias-row select {
                min-width: 180px;
                flex: 1;
                border: 1px solid #cbd5e1;
                border-radius: 10px;
                padding: 10px 12px;
                font-size: 13px;
                background: #fff;
            }

            .teams-alias-row button,
            .teams-alias-visible-chat button,
            .teams-alias-chat-remove {
                border: none;
                border-radius: 10px;
                padding: 9px 12px;
                font-size: 13px;
                cursor: pointer;
                background: #2563eb;
                color: #fff;
            }

            .teams-alias-category-list,
            .teams-alias-visible-list,
            .teams-alias-chat-list {
                display: grid;
                gap: 10px;
            }

            .teams-alias-category-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 12px;
                border: 1px solid #dbeafe;
                border-radius: 12px;
                padding: 12px;
                background: #fff;
            }

            .teams-alias-section-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                gap: 12px;
                margin-bottom: 12px;
            }

            .teams-alias-section-header h3 {
                margin: 0;
            }

            .teams-alias-ghost-button,
            .teams-alias-category-actions button {
                border: 1px solid #cbd5e1;
                border-radius: 10px;
                padding: 8px 12px;
                font-size: 12px;
                background: #fff;
                color: #0f172a;
                cursor: pointer;
            }

            .teams-alias-category-actions {
                display: flex;
                gap: 8px;
                align-items: center;
            }

            .teams-alias-category-meta {
                display: grid;
                gap: 4px;
            }

            .teams-alias-category-name {
                font-size: 14px;
                font-weight: 600;
            }

            .teams-alias-category-count,
            .teams-alias-chat-id,
            .teams-alias-feedback {
                font-size: 12px;
                color: #475569;
            }

            .teams-alias-chat-card,
            .teams-alias-visible-chat {
                display: flex;
                align-items: center;
                gap: 10px;
                border: 1px solid #e2e8f0;
                border-radius: 12px;
                padding: 10px;
                background: #fff;
            }

            .teams-alias-chat-open {
                flex: 1;
                display: flex;
                align-items: center;
                gap: 10px;
                border: none;
                padding: 0;
                background: transparent;
                cursor: pointer;
                color: inherit;
                text-align: left;
            }

            .teams-alias-chat-avatar {
                width: 36px;
                height: 36px;
                border-radius: 999px;
                overflow: hidden;
                display: inline-flex;
                align-items: center;
                justify-content: center;
                background: #dbeafe;
                color: #1d4ed8;
                font-size: 12px;
                font-weight: 700;
                flex-shrink: 0;
            }

            .teams-alias-chat-avatar-image {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .teams-alias-chat-main {
                min-width: 0;
                display: grid;
                gap: 3px;
            }

            .teams-alias-chat-name {
                font-size: 13px;
                font-weight: 600;
                color: #0f172a;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .teams-alias-empty {
                color: #64748b;
                font-size: 13px;
            }

            .teams-alias-collapsed {
                display: none;
            }

            @media (max-width: 900px) {
                .teams-alias-modal {
                    left: 12px;
                    right: 12px;
                    width: auto;
                    top: 56px;
                }
            }
        `;
        document.head.appendChild(style);
    }

    const organizerButton = document.createElement("button");
    organizerButton.id = CHAT_ORGANIZER_BUTTON_ID;
    organizerButton.textContent = "聊天分类";
    organizerButton.addEventListener("click", () => {
        chatOrganizerState.isModalOpen = true;
        renderChatOrganizer();
    });

    const root = document.createElement("div");
    root.id = CHAT_ORGANIZER_ROOT_ID;
    root.addEventListener("click", event => {
        const actionElement = event.target.closest("[data-action]");
        if (event.target.classList.contains("teams-alias-overlay")) {
            chatOrganizerState.isModalOpen = false;
            renderChatOrganizer();
            return;
        }

        if (!actionElement) return;
        const action = actionElement.getAttribute("data-action");

        if (action === "close-modal") {
            chatOrganizerState.isModalOpen = false;
            renderChatOrganizer();
            return;
        }

        if (action === "create-category") {
            const input = root.querySelector('[data-role="new-category-name"]');
            createCategory(input?.value || "");
            chatOrganizerState.draftCategoryName = "";
            return;
        }

        if (action === "delete-category") {
            deleteCategory(actionElement.getAttribute("data-category-id"));
            return;
        }

        if (action === "toggle-category") {
            toggleCategoryExpanded(actionElement.getAttribute("data-category-id"));
            return;
        }

        if (action === "toggle-visible-chats") {
            toggleVisibleChatsExpanded();
            return;
        }

        if (action === "add-chat-by-id") {
            const input = root.querySelector('[data-role="chat-id-input"]');
            addChatToCategory(chatOrganizerState.selectedCategoryId, input?.value || "");
            chatOrganizerState.draftChatId = "";
            return;
        }

        if (action === "quick-add") {
            addChatToCategory(chatOrganizerState.selectedCategoryId, actionElement.getAttribute("data-chat-id"));
            return;
        }

        if (action === "remove-chat") {
            removeChatFromCategory(
                actionElement.getAttribute("data-category-id"),
                actionElement.getAttribute("data-chat-id")
            );
            return;
        }

        if (action === "open-chat") {
            const chatId = actionElement.getAttribute("data-chat-id");
            const opened = openChatById(chatId);
            setOrganizerFeedback(opened ? "已尝试打开聊天。" : "未找到该聊天，且 deep link 跳转失败。");
        }
    });

    root.addEventListener("change", event => {
        const target = event.target;
        if (target.matches('[data-role="category-select"]')) {
            chatOrganizerState.selectedCategoryId = target.value;
            renderChatOrganizer();
        }
    });

    root.addEventListener("input", event => {
        const target = event.target;
        if (target.matches('[data-role="new-category-name"]')) {
            chatOrganizerState.draftCategoryName = target.value;
            return;
        }
        if (target.matches('[data-role="chat-id-input"]')) {
            chatOrganizerState.draftChatId = target.value;
        }
    });

    document.body.appendChild(organizerButton);
    document.body.appendChild(root);
    renderChatOrganizer();
}

function renderChatOrganizer() {
    const root = getOrganizerRoot();
    if (!root) return;

    root.classList.toggle("is-open", chatOrganizerState.isModalOpen);
    if (!chatOrganizerState.isModalOpen) {
        root.innerHTML = "";
        return;
    }

    const categoryOptions = chatOrganizerState.categories.map(category => `
        <option value="${escapeHtml(category.id)}" ${category.id === chatOrganizerState.selectedCategoryId ? "selected" : ""}>
            ${escapeHtml(category.name)}
        </option>
    `).join("");

    const categoriesMarkup = chatOrganizerState.categories.length
        ? chatOrganizerState.categories.map(category => `
            <div class="teams-alias-category-item">
                <div class="teams-alias-category-meta">
                    <span class="teams-alias-category-name">${escapeHtml(category.name)}</span>
                    <span class="teams-alias-category-count">${category.chatIds.length} 个聊天</span>
                </div>
                <div class="teams-alias-category-actions">
                    <button data-action="toggle-category" data-category-id="${escapeHtml(category.id)}">${isCategoryExpanded(category.id) ? "收起" : "展开"}</button>
                    <button data-action="delete-category" data-category-id="${escapeHtml(category.id)}">删除分类</button>
                </div>
            </div>
            <div class="teams-alias-chat-list ${isCategoryExpanded(category.id) ? "" : "teams-alias-collapsed"}">
                ${category.chatIds.length ? category.chatIds.map(chatId => renderChatCard(chatId, category.id)).join("") : '<div class="teams-alias-empty">当前分类还没有聊天。</div>'}
            </div>
        `).join("")
        : '<div class="teams-alias-empty">还没有分类，先创建一个。</div>';

    const visibleChatIds = Object.keys(chatOrganizerState.visibleChats);
    const visibleChatsMarkup = visibleChatIds.length
        ? visibleChatIds.map(chatId => renderVisibleChatCandidate(chatId)).join("")
        : '<div class="teams-alias-empty">当前页面还没有识别到左侧聊天列表。</div>';

    root.innerHTML = `
        <div class="teams-alias-overlay"></div>
        <div class="teams-alias-modal" role="dialog" aria-modal="true" aria-label="聊天分类管理">
            <div class="teams-alias-modal-header">
                <h2>聊天分类管理</h2>
                <button class="teams-alias-close" data-action="close-modal">×</button>
            </div>
            <div class="teams-alias-modal-body">
                <div class="teams-alias-panel">
                    <h3>创建分类</h3>
                    <div class="teams-alias-row">
                        <input type="text" placeholder="例如：重点客户 / 项目群" data-role="new-category-name" value="${escapeHtml(chatOrganizerState.draftCategoryName)}">
                        <button data-action="create-category">创建</button>
                    </div>
                </div>
                <div class="teams-alias-panel">
                    <h3>加入聊天</h3>
                    <div class="teams-alias-row">
                        <select data-role="category-select">
                            <option value="">请选择分类</option>
                            ${categoryOptions}
                        </select>
                        <input type="text" placeholder="输入 19: 开头的聊天 ID" data-role="chat-id-input" value="${escapeHtml(chatOrganizerState.draftChatId)}">
                        <button data-action="add-chat-by-id">按 ID 添加</button>
                    </div>
                    <div class="teams-alias-feedback">${escapeHtml(chatOrganizerState.feedback || "点击聊天卡片会在原 Teams 界面中打开会话。")}</div>
                </div>
                <div class="teams-alias-panel">
                    <div class="teams-alias-section-header">
                        <h3>当前识别到的聊天</h3>
                        <button class="teams-alias-ghost-button" data-action="toggle-visible-chats">${chatOrganizerState.visibleChatsExpanded ? "收起" : "展开"}</button>
                    </div>
                    <div class="teams-alias-visible-list ${chatOrganizerState.visibleChatsExpanded ? "" : "teams-alias-collapsed"}">${visibleChatsMarkup}</div>
                </div>
                <div class="teams-alias-panel">
                    <h3>分类内容</h3>
                    <div class="teams-alias-category-list">${categoriesMarkup}</div>
                </div>
            </div>
        </div>
    `;
}

async function getAlias(id) {
    const key = id.replace(PERSON_ID_PREFIX, "");
    const result = await chrome.storage.local.get('aliases');
    const aliases = result.aliases || {};
    return aliases[key] || null;
}

// 设置别名显示 + 按钮添加
function applyAliasAndButton(el) {
    const id = el.id;
    if (!id || !id.startsWith(PERSON_ID_PREFIX)) return;

    const rawId = id.replace(PERSON_ID_PREFIX, "");

    const existingBtn = document.querySelector(`[data-floating-btn-for="${id}"]`);
    if (!existingBtn) {
        const rect = el.getBoundingClientRect();

        const button = document.createElement('button');
        button.textContent = '显示ID'; // 改为显示ID
        button.style.position = 'fixed';
        button.style.left = `${rect.left + window.scrollX}px`;
        button.style.top = `${rect.bottom + window.scrollY + 20}px`;
        button.style.zIndex = '99999';
        button.style.padding = '4px 8px';
        button.style.fontSize = '12px';
        button.style.backgroundColor = '#6c757d'; // 灰色，表示只是信息查看
        button.style.color = '#fff';
        button.style.border = 'none';
        button.style.borderRadius = '4px';
        button.style.cursor = 'pointer';
        button.setAttribute('data-floating-btn-for', id);

        button.addEventListener('click', () => {
             // 弹窗显示 ID，方便复制
             prompt("该用户的账号ID为 (请复制):", rawId);
        });

        document.body.appendChild(button);
    }

    // 应用别名（异步）
    getAlias(rawId).then(alias => {
        if (alias && el.textContent !== alias) {
            el.textContent = alias;
        }
    });
}

// 主要查找右侧消息列表中的名字并修改
function applyRightChatAlias(el) {
    let id = el.id;
    if (!id || !id.startsWith(ICON_ID_PREFIX)) return;

    let parent = el;
    // 向上查找 4 个父元素
    for (let i = 0; i < 4; i++) {
        if (parent.parentElement) {
            parent = parent.parentElement;
        } else {
            return; // 如果不足4层，就跳过
        }
    }

    // 获取前一个兄弟元素
    const prevSibling = parent.previousElementSibling;
    if (!prevSibling) return;

    // 向下查找第 4 个子元素（层级式）
    let target = prevSibling;
    for (let i = 0; i < 4; i++) {
        if (target.children.length > 0) {
            target = target.children[0]; // 每层往下取第一个子元素
        } else {
            return; // 不足4层，跳过
        }
    }
    // 判断符合才修改
    if (target.getAttribute('data-tid') === 'message-author-name') {
        getAlias(id.replace(ICON_ID_PREFIX, "")).then(alias => {
            if (alias && target.textContent !== alias) {
                target.textContent = alias;
            }
        });
    }
}

// 主要查找左侧消息列表中的名字并修改
function applyLeftChatAlias(el) {
    let id = el.id;
    if (!id || !id.startsWith(ICON_ID_PREFIX)) return;

    let parent = el;
    // 向上查找 4 个父元素
    for (let i = 0; i < 4; i++) {
        if (parent.parentElement) {
            parent = parent.parentElement;
        } else {
            return; // 如果不足4层，就跳过
        }
    }

    // 获取后一个兄弟元素
    const nextSibling = parent.nextElementSibling;
    if (!nextSibling) return;

    // 向下查找第 7 个子元素（层级式）
    let target = nextSibling;
    for (let i = 0; i < 7; i++) {
        if (target.children.length > 0) {
            target = target.children[0]; // 每层往下取第一个子元素
        } else {
            return; // 不足7层，跳过
        }
    }
    // 判断符合才修改
    if (target.id.startsWith('title-chat-list-item')) {
        getAlias(id.replace(ICON_ID_PREFIX, "")).then(alias => {
            if (alias && target.textContent !== alias) {
                target.textContent = alias;
            }
        });
    }
}

// 修改群组人员的名称
function applyChatRosterAlias(el) {
    let id = el.id;
    if (!id || !id.startsWith(CHAT_ROSTER_PREFIX)) return;

    getAlias(id.replace(CHAT_ROSTER_PREFIX, "")).then(alias => {
        if (alias && el.textContent !== alias) {
            el.textContent = alias;
        }
    });
}

// 群组添加人员的别名
function applyPeoplePickerAlias(el) {
    let tid = el.getAttribute('data-tid');
    if (!tid || !tid.startsWith(PEOPLE_PICKER_PREFIX)) return;

    let child = el.children[1];
    // 向下查找第 3 个子元素（层级式）
    for (let i = 0; i < 3; i++) {
        if (child.children.length > 0) {
            child = child.children[0]; // 每层往下取第一个子元素
        } else {
            return; // 不足3层，跳过
        }
    }
    if (child.tagName.toLowerCase() === 'span') {
        let id = "8:" + tid.replace(PEOPLE_PICKER_PREFIX, "");
        getAlias(id).then(alias => {
            if (alias && child.textContent !== alias) {
                child.textContent = alias;
            }
        });
    }
}

// 群组添加人员时选中的人员
function applyPeoplePickerSelectedAlias(el) {
    let tid = el.getAttribute('data-tid');
    if (!tid || !tid.startsWith(PEOPLE_PICKER_SEL_PREFIX)) return;

    let id = "8:" + tid.replace(PEOPLE_PICKER_SEL_PREFIX, "");
    getAlias(id).then(alias => {
        if (alias && el.textContent !== alias) {
            el.textContent = alias;
        }
    });
}

// 追加搜索框中的人员别名
function applySuggestPeopleAlias(el) {
    let tid = el.getAttribute('data-tid');
    if (!tid || !tid.startsWith(SUGGEST_PEOPLE_PREFIX)) return;

    let child = el.children[1];  // 第二个子元素
    // 向下查找第 2 个子元素（层级式）
    for (let i = 0; i < 2; i++) {
        if (child.children.length > 0) {
            child = child.children[0]; // 每层往下取第一个子元素
        } else {
            return; // 不足2层，跳过
        }
    }
    if (child.getAttribute('data-tid') !== 'AUTOSUGGEST_SUGGESTION_TITLE') return;

    let id = tid.replace(SUGGEST_PEOPLE_PREFIX, "");
    getAlias(id).then(alias => {
        if (alias) {
            let lastSpan = child.lastElementChild;
            if (lastSpan.id.startsWith("suggest-alias-attached")) {
                if (lastSpan.textContent === `[${alias}]`) return;
                lastSpan.textContent = `[${alias}]`;
            } else {
                const span = document.createElement('span');
                span.id = `suggest-alias-attached-${id}`;
                span.textContent = `[${alias}]`;
                span.style.marginLeft = '4px';
                span.style.color = document.documentElement.classList.contains("theme-tfl-default") ? '#ed0833' : '#78ef0b';
                child.appendChild(span);
            }
        }
    });
}

// 追加人员搜索中的别名
function applySerpPeopleAlias(el) {
    let id = el.id;
    if (!id || !id.startsWith(SERP_PEOPLE_CARD_PREFIX)) return;

    let child = el.children[2];
    // 向下查找第 4 个子元素（层级式）
    for (let i = 0; i < 4; i++) {
        if (child.children.length > 0) {
            child = child.children[0]; // 每层往下取第一个子元素
        } else {
            return; // 不足4层，跳过
        }
    }

    id = id.replace(SERP_PEOPLE_CARD_PREFIX, "");
    getAlias(id).then(alias => {
        if (alias) {
            let lastSpan = child.lastElementChild;
            if (lastSpan.id.startsWith("people-card-attached")) {
                if (lastSpan.textContent === `[${alias}]`) return;
                lastSpan.textContent = `[${alias}]`;
            } else {
                const span = document.createElement('span');
                span.id = `people-card-attached-${id}`;
                span.textContent = `[${alias}]`;
                span.style.marginLeft = '4px';
                span.style.color = document.documentElement.classList.contains("theme-tfl-default") ? '#ed0833' : '#78ef0b';
                child.appendChild(span);
            }
        }
    });
}

// 修改通话中的人名
function applyCallingAlias(el) {
    if (el.getAttribute('data-cid') !== 'calling-participant-stream') return;

    let child = el.children[1];
    // 向下查找第 5 个子元素（层级式）
    for (let i = 0; i < 5; i++) {
        if (child.children.length > 0) {
            child = child.children[0]; // 每层往下取第一个子元素
        } else {
            return; // 不足5层，跳过
        }
    }
    if (child.tagName.toLowerCase() === 'span') {
        getAlias(el.getAttribute('data-acc-element-id')).then(alias => {
            if (alias && child.textContent !== alias) {
                child.textContent = alias;
            }
        });
    }
}

// 修改通话右侧人名的别名
function applyRosterAvatarAlias(el) {
    let id = el.id;
    if (!id || !id.startsWith(ROSTER_AVATAR_PREFIX)) return;

    getAlias(id.replace(ROSTER_AVATAR_PREFIX, "")).then(alias => {
        if (alias && el.textContent !== alias) {
            el.textContent = alias;
        }
    });
}

// 查看此通话中的人员
function applyPeopleInCall(el) {
    let id = el.id;
    if (!id || !id.startsWith(ICON_ID_PREFIX)) return;

    let parent = el;
    // 向上查找 2 个父元素
    for (let i = 0; i < 2; i++) {
        if (parent.parentElement) {
            parent = parent.parentElement;
        } else {
            return; // 如果不足2层，就跳过
        }
    }
    // 一个是查看此通话中的参与者，一个是呼叫其他人加入
    if ([
        "audio_dropin_add_participants_dialog_renderer",
        "audio-drop-in-live-roster"
    ].includes(parent.getAttribute("data-tid"))) {
        let target = parent.nextElementSibling;
        if (!target) return;
        if (target.tagName.toLowerCase() === "span") {
            getAlias(id.replace(ICON_ID_PREFIX, "")).then(alias => {
                if (alias && target.textContent !== alias) {
                    target.textContent = alias;
                }
            });
        }
    }
}

// 回应表情的人员别名
function applyReactionAlias(el) {
    if (el.getAttribute('data-tid') !== 'diverse-reaction-user-list-item') return;
    try {
        const tabster = JSON.parse(el.getAttribute("data-tabster"));

        let child = el.children[1];
        let target = child.children[0];
        let id = tabster.observed.names[0];
        getAlias(id).then(alias => {
            if (alias && target.textContent !== alias) {
                target.textContent = alias;
            }
        });

    } catch (error) {}
}

// 查找所有目标元素应用别名和按钮
function applyToAll() {
    document.querySelectorAll('[data-floating-btn-for]').forEach(btn => btn.remove());

    const allPersons = document.querySelectorAll(`[id^="${PERSON_ID_PREFIX}"]`);
    allPersons.forEach(el => applyAliasAndButton(el));

    const allIcons = document.querySelectorAll(`[id^="${ICON_ID_PREFIX}"]`);
    allIcons.forEach(el => {
        applyRightChatAlias(el);
        applyLeftChatAlias(el);
        applyPeopleInCall(el);
    });

    const allChatRoster = document.querySelectorAll(`[id^="${CHAT_ROSTER_PREFIX}"]`);
    allChatRoster.forEach(el => applyChatRosterAlias(el));

    const allSuggestPeople = document.querySelectorAll(`[data-tid^="${SUGGEST_PEOPLE_PREFIX}"]`);
    allSuggestPeople.forEach(el => applySuggestPeopleAlias(el));

    const allCalling = document.querySelectorAll(`[data-cid="calling-participant-stream"]`);
    allCalling.forEach(el => applyCallingAlias(el));

    const allRosterAvatar = document.querySelectorAll(`[id^="${ROSTER_AVATAR_PREFIX}"]`);
    allRosterAvatar.forEach(el => applyRosterAvatarAlias(el));

    const allSerpPeople = document.querySelectorAll(`[id^="${SERP_PEOPLE_CARD_PREFIX}"]`);
    allSerpPeople.forEach(el => applySerpPeopleAlias(el));

    const allPeoplePicker = document.querySelectorAll(`[data-tid^="${PEOPLE_PICKER_PREFIX}"]`);
    allPeoplePicker.forEach(el => applyPeoplePickerAlias(el));

    const allPeoplePickerSelected = document.querySelectorAll(`[data-tid^="${PEOPLE_PICKER_SEL_PREFIX}"]`);
    allPeoplePickerSelected.forEach(el => applyPeoplePickerSelectedAlias(el));

    const allReaction = document.querySelectorAll(`[data-tid="diverse-reaction-user-list-item"]`);
    allReaction.forEach(el => applyReactionAlias(el));

    ensureChatOrganizerUI();
    scanVisibleChats();
}

// 初始化逻辑
function init() {
    loadChatOrganizerState().then(() => {
        ensureChatOrganizerUI();
        scanVisibleChats();
    });

    const observer = new MutationObserver(() => {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            if (isMutating) return; // 🧠 防止自己触发自己
            isMutating = true;

            applyToAll(); // 页面内容变动后重新应用

            // 给浏览器一点时间完成 DOM 更新后再允许 observer 响应
            setTimeout(() => {
                isMutating = false;
            }, 500); // 至少比这个高才行，不然会一直触发
        }, 300);
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true,
    });

    // 自动同步检查
    chrome.storage.local.get('lastSync').then(({ lastSync }) => {
        const now = Date.now();
        // 24 小时 = 86400000 ms
        if (!lastSync || (now - lastSync > 86400000)) {
            console.log("Teams Alias: 正在进行后台同步...");
            if (typeof fetchAliasesFromDB === 'function') {
                fetchAliasesFromDB().then(aliases => {
                    chrome.storage.local.set({ aliases, lastSync: now });
                    console.log("Teams Alias: 自动同步成功");
                }).catch(err => {
                    console.error("Teams Alias: 自动同步失败", err);
                });
            } else {
                console.warn("Teams Alias: fetchAliasesFromDB 未定义，无法同步。");
            }
        }
    });

    applyToAll(); // 初始执行

    // 兜底：每 2 秒再扫一次（避免漏掉异步更新）
    // setInterval(() => {
    //     applyToAll();
    // }, 2000);
}

init();