// 手机端抽屉业务模块，承接工具菜单、在线名单和房间列表的 Blade 内联脚本。

import { escapeHtml } from "./html.js";
import { renderRoomsOnlineStatusToContainer } from "./rooms.js";

let mobileDrawerEventsBound = false;
// 模块级状态用于维持抽屉互斥、搜索 RAF 节流和房间列表短缓存。
let mobileDrawerOpen = null;
let mobileUserListRenderTimer = null;
let mobileRoomsOnlineStatusCache = null;
let mobileRoomsOnlineStatusCacheAt = 0;

const MOBILE_ROOMS_ONLINE_STATUS_CACHE_TTL = 10000;

/**
 * 判断点击是否来自手机抽屉区域。
 * document 代理只处理浮动按钮、遮罩和抽屉内部，避免其它区域复用 data 属性时误触发。
 *
 * @param {Element} target 事件目标
 * @returns {boolean}
 */
function isMobileDrawerEventTarget(target) {
    return Boolean(target.closest("#mobile-fabs, #mobile-drawer-mask, .mobile-drawer"));
}

/**
 * 执行手机抽屉工具入口动作。
 *
 * @param {string} action 工具动作
 * @returns {void}
 */
function runMobileToolAction(action) {
    // 抽屉工具只负责分发到现有全局函数，业务实现仍留在原模块中。
    const actions = {
        "daily-sign-in": () => window.quickDailySignIn?.(),
        shop: () => window.openShopModal?.(),
        vip: () => window.openVipModal?.(),
        "save-exp": () => window.saveExp?.(),
        game: () => window.openGameHall?.(),
        bank: () => window.openBankModal?.(),
        marriage: () => window.openMarriageStatusModal?.(),
        friend: () => window.openFriendPanel?.(),
        avatar: () => window.openAvatarPicker?.(),
        settings: () => {
            if (typeof window.openSettingsModal === "function") {
                window.openSettingsModal();
                return;
            }

            // 兼容设置弹窗尚未迁移为全局函数的页面。
            const settingsModal = document.getElementById("settings-modal");
            if (settingsModal) {
                settingsModal.style.display = "flex";
            }
        },
    };

    actions[action]?.();
}

/**
 * 确认并执行手机端离开房间动作。
 *
 * @returns {void}
 */
function confirmMobileLeaveRoom() {
    // 离开房间需要保留二次确认，避免手机误触直接退出。
    window.chatDialog
        ?.confirm("确定要离开聊天室吗？", "离开聊天室")
        .then((ok) => {
            if (ok) {
                window.leaveRoom?.();
            }
        });
}

/**
 * 打开指定手机端抽屉。
 *
 * @param {"toolbar"|"users"|string} which 抽屉名称
 * @returns {void}
 */
export function openMobileDrawer(which) {
    if (!["toolbar", "users"].includes(which)) {
        return;
    }

    // 切换抽屉时只关闭旧面板，不恢复 body overflow，避免中间态闪烁。
    if (mobileDrawerOpen && mobileDrawerOpen !== which) {
        document.getElementById(`mobile-drawer-${mobileDrawerOpen}`)?.classList.remove("open");
    }

    const drawer = document.getElementById(`mobile-drawer-${which}`);
    const mask = document.getElementById("mobile-drawer-mask");
    if (!drawer || !mask) {
        return;
    }

    drawer.classList.add("open");
    mask.classList.add("open");
    mobileDrawerOpen = which;
    document.body.style.overflow = "hidden";

    if (which === "users") {
        renderMobileUserList();
    }
}

/**
 * 关闭当前打开的手机端抽屉。
 *
 * @param {boolean} resetOverflow 是否恢复 body overflow
 * @returns {void}
 */
export function closeMobileDrawer(resetOverflow = true) {
    if (mobileDrawerOpen) {
        document.getElementById(`mobile-drawer-${mobileDrawerOpen}`)?.classList.remove("open");
        mobileDrawerOpen = null;
    }

    document.getElementById("mobile-drawer-mask")?.classList.remove("open");
    if (resetOverflow) {
        document.body.style.overflow = "";
    }
}

/**
 * 切换名单抽屉内的用户/房间 Tab。
 *
 * @param {"users"|"rooms"|string} tab Tab 名称
 * @returns {void}
 */
export function switchMobileTab(tab) {
    if (!["users", "rooms"].includes(tab)) {
        return;
    }

    const panelUsers = document.getElementById("mob-panel-users");
    const panelRooms = document.getElementById("mob-panel-rooms");
    const tabUsers = document.getElementById("mob-tab-users");
    const tabRooms = document.getElementById("mob-tab-rooms");

    if (panelUsers) {
        panelUsers.style.display = tab === "users" ? "flex" : "none";
    }
    if (panelRooms) {
        panelRooms.style.display = tab === "rooms" ? "block" : "none";
    }

    syncMobileTabButton(tabUsers, tab === "users");
    syncMobileTabButton(tabRooms, tab === "rooms");

    if (tab === "rooms") {
        void loadMobileRoomList();
    }
}

/**
 * 同步手机抽屉 Tab 按钮选中样式。
 *
 * @param {HTMLElement|null} button 按钮元素
 * @param {boolean} active 是否选中
 * @returns {void}
 */
function syncMobileTabButton(button, active) {
    if (!button) {
        return;
    }

    button.style.background = active ? "#336699" : "transparent";
    button.style.color = active ? "#fff" : "#336699";
    button.style.fontWeight = active ? "bold" : "normal";
}

/**
 * 将在线用户渲染到手机端名单容器。
 *
 * @returns {void}
 */
export function renderMobileUserList() {
    const onlineUsers = window.onlineUsers;
    if (!onlineUsers || typeof onlineUsers !== "object") {
        return;
    }

    const sortValue = document.getElementById("mob-user-sort-select")?.value || "default";
    const keyword = (document.getElementById("mob-user-search-input")?.value || "").trim().toLowerCase();
    const container = document.getElementById("mob-online-users-list");
    if (!container) {
        return;
    }

    if (typeof window._renderUserListToContainer === "function") {
        window._renderUserListToContainer(container, sortValue, keyword);
    } else {
        // 降级渲染只展示用户名，保障主渲染函数异常缺失时手机名单仍可用。
        const users = Object.keys(onlineUsers);
        container.innerHTML = users.length
            ? users
                .filter((username) => !keyword || username.toLowerCase().includes(keyword))
                .map((username) => `<div class="user-item" style="padding:5px 8px;font-size:12px;border-bottom:1px solid #eee;">${escapeHtml(username)}</div>`)
                .join("")
            : '<div style="text-align:center;color:#aaa;padding:20px;font-size:12px;">暂无用户</div>';
    }

    const footerElement = document.getElementById("mob-online-count-footer");
    if (footerElement) {
        footerElement.textContent = Object.keys(onlineUsers).length;
    }
}

/**
 * 调度手机端在线名单渲染，避免搜索输入时同步重建整份名单。
 *
 * @returns {void}
 */
export function scheduleRenderMobileUserList() {
    if (mobileUserListRenderTimer !== null) {
        return;
    }

    const scheduleRender = window.requestAnimationFrame || ((callback) => window.setTimeout(callback, 16));
    mobileUserListRenderTimer = scheduleRender(() => {
        mobileUserListRenderTimer = null;
        renderMobileUserList();
    });
}

/**
 * 拉取房间列表并渲染到手机端房间容器。
 *
 * @returns {Promise<void>}
 */
export async function loadMobileRoomList() {
    const container = document.getElementById("mob-rooms-online-list");
    if (!container) {
        return;
    }

    if (mobileRoomsOnlineStatusCache && Date.now() - mobileRoomsOnlineStatusCacheAt < MOBILE_ROOMS_ONLINE_STATUS_CACHE_TTL) {
        // 切换手机房间 tab 可能高频触发，10 秒短缓存用来减少接口压力，允许轻微延迟。
        renderMobileRoomList(mobileRoomsOnlineStatusCache, container);
        return;
    }

    const statusUrl = container.getAttribute("data-mobile-rooms-status-url") || "";
    if (!statusUrl) {
        container.innerHTML = '<div style="text-align:center;color:#f00;padding:10px;font-size:11px;">缺少房间接口</div>';
        return;
    }

    container.innerHTML = '<div style="text-align:center;color:#aaa;padding:16px;font-size:11px;">加载中...</div>';

    try {
        const response = await fetch(statusUrl);
        const data = await response.json();
        mobileRoomsOnlineStatusCache = data;
        mobileRoomsOnlineStatusCacheAt = Date.now();
        renderMobileRoomList(data, container);
    } catch (error) {
        container.innerHTML = '<div style="text-align:center;color:#f00;padding:10px;font-size:11px;">加载失败</div>';
    }
}

/**
 * 渲染手机端房间列表。
 *
 * @param {Record<string, unknown>} data 接口返回数据
 * @param {HTMLElement} container 目标容器
 * @returns {void}
 */
export function renderMobileRoomList(data, container) {
    renderRoomsOnlineStatusToContainer(data, container, {
        currentRoomId: window.chatContext?.roomId,
        variant: "mobile",
        emptyHtml: '<div style="text-align:center;color:#bbb;padding:16px;font-size:11px;">暂无房间</div>',
    });
}

/**
 * 绑定手机端抽屉基础控件事件。
 *
 * @returns {void}
 */
export function bindMobileDrawerControls() {
    if (mobileDrawerEventsBound || typeof document === "undefined") {
        return;
    }

    mobileDrawerEventsBound = true;
    document.addEventListener("click", (event) => {
        if (!(event.target instanceof Element)) {
            return;
        }

        // 手机抽屉内多数节点由 Blade 与后续 AJAX 动态生成，统一使用 document 事件代理。
        if (!isMobileDrawerEventTarget(event.target)) {
            return;
        }

        const drawerTrigger = event.target.closest("[data-mobile-drawer-open]");
        if (drawerTrigger) {
            event.preventDefault();
            openMobileDrawer(drawerTrigger.dataset.mobileDrawerOpen || "");
            return;
        }

        if (event.target.closest("[data-mobile-drawer-close]")) {
            event.preventDefault();
            closeMobileDrawer();
            return;
        }

        const toolAction = event.target.closest("[data-mobile-tool-action]");
        if (toolAction) {
            event.preventDefault();
            closeMobileDrawer();

            const action = toolAction.getAttribute("data-mobile-tool-action") || "";
            if (action === "leave") {
                confirmMobileLeaveRoom();
                return;
            }

            runMobileToolAction(action);
            return;
        }

        const toolUrl = event.target.closest("[data-mobile-tool-url]");
        if (toolUrl) {
            event.preventDefault();
            closeMobileDrawer();

            const url = toolUrl.getAttribute("data-mobile-tool-url");
            if (url) {
                // 工具外链统一新窗口打开，并禁止新窗口反向访问聊天室页面。
                window.open(url, "_blank", "noopener,noreferrer");
            }

            return;
        }

        const tabTrigger = event.target.closest("[data-mobile-drawer-tab]");
        if (tabTrigger) {
            event.preventDefault();
            switchMobileTab(tabTrigger.dataset.mobileDrawerTab || "");
        }
    });

    document.addEventListener("change", (event) => {
        if (!(event.target instanceof HTMLSelectElement) || event.target.id !== "mob-user-sort-select") {
            return;
        }

        renderMobileUserList();
    });

    document.addEventListener("input", (event) => {
        if (!(event.target instanceof HTMLInputElement) || event.target.id !== "mob-user-search-input") {
            return;
        }

        scheduleRenderMobileUserList();
    });

    // 只有名单抽屉打开时才立即重渲染，关闭状态下等下次打开再读取最新 onlineUsers。
    window.addEventListener("chatroom:users-updated", () => {
        if (mobileDrawerOpen === "users") {
            renderMobileUserList();
        }
    });
}