// 聊天室 VIP 中心模块，负责弹窗开关、会员数据渲染、支付跳转和专属进退场设置。

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

const VIP_CENTER_URL = "/vip-center";
const VIP_PAYMENT_URL = "/vip/payment";
const VIP_PRESENCE_UPDATE_URL = "/vip-center/presence-settings";

let vipControlEventsBound = false;
let vipData = null;

/**
 * 读取 CSRF Token。
 *
 * @returns {string}
 */
function csrf() {
    return document.querySelector('meta[name="csrf-token"]')?.content || "";
}

/**
 * 按 ID 获取 DOM 节点。
 *
 * @param {string} id
 * @returns {HTMLElement|null}
 */
function element(id) {
    return document.getElementById(id);
}

/**
 * 显示全局弹窗提示。
 *
 * @param {string} message
 * @param {string} title
 * @param {string} color
 * @returns {void}
 */
function showDialog(message, title = "提示", color = "#3b82f6") {
    window.chatDialog?.alert?.(message, title, color);
}

/**
 * 格式化金额。
 *
 * @param {unknown} value
 * @returns {string}
 */
function formatMoney(value) {
    return Number(value || 0).toFixed(2);
}

/**
 * 过滤可写入 style 的颜色值。
 *
 * @param {unknown} value
 * @param {string} fallback
 * @returns {string}
 */
function sanitizeColor(value, fallback = "#1e293b") {
    const color = String(value || "").trim();

    if (/^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})?$/.test(color) || /^rgba?\([\d\s,.%]+\)$/.test(color)) {
        return color;
    }

    return fallback;
}

/**
 * 生成会员等级按钮 HTML。
 *
 * @param {object} level
 * @param {object} data
 * @returns {string}
 */
function renderVipAction(level, data) {
    const isCurrent = Boolean(level.is_current);
    const isHigher = Boolean(level.is_higher);
    const isLower = Boolean(level.is_lower);
    let buttonText = "立即购买";
    let buttonColor = "#1e293b";
    let buttonTextColor = "#fff";
    let priceToDisplay = level.price;
    let isDisabled = !data.vipPaymentEnabled;
    let showUpgradeInfo = false;

    if (isCurrent) {
        buttonText = "立即续费";
        buttonColor = "#f59e0b";
    } else if (isHigher && data.user.is_vip) {
        buttonText = "补差价升级";
        buttonColor = "#4f46e5";
        priceToDisplay = level.upgrade_price;
        showUpgradeInfo = true;
    } else if (isLower) {
        buttonText = "无法降级";
        buttonColor = "#f1f5f9";
        buttonTextColor = "#94a3b8";
        isDisabled = true;
    }

    const upgradeInfo = showUpgradeInfo
        ? `<div style="font-size:10px; color:#4f46e5; font-weight:bold; margin-bottom:8px;">已省 ¥${formatMoney(Number(level.price || 0) - Number(level.upgrade_price || 0))}</div>`
        : "";
    const actionHtml = !data.vipPaymentEnabled || isDisabled
        ? `<button disabled style="width:100%; border:none; border-radius:8px; padding:10px; font-size:13px; font-weight:bold; cursor:not-allowed; transition:all .2s; background:${buttonColor}; color:${buttonTextColor};">${!data.vipPaymentEnabled && !isLower ? "支付暂未开启" : buttonText}</button>`
        : `<div style="display:grid; grid-template-columns:1fr 1fr; gap:8px;">
                <button data-vip-buy-level="${Number(level.id)}" data-vip-buy-provider="alipay"
                    style="border:none; border-radius:8px; padding:10px; font-size:13px; font-weight:bold; cursor:pointer; transition:all .2s; background:${buttonColor}; color:${buttonTextColor};">
                    支付宝
                </button>
                <button data-vip-buy-level="${Number(level.id)}" data-vip-buy-provider="wechat"
                    style="border:none; border-radius:8px; padding:10px; font-size:13px; font-weight:bold; cursor:pointer; transition:all .2s; background:#16a34a; color:#fff;">
                    微信
                </button>
            </div>
            <div style="font-size:10px; color:#64748b; margin-top:8px; text-align:center;">${buttonText}后将跳转到对应支付页面</div>`;

    return `
        <div style="font-size:18px; font-weight:900; color:#e11d48; margin-bottom:5px;">
            ¥${formatMoney(priceToDisplay)}
            <span style="font-size:11px; font-weight:normal; color:#94a3b8;">/ ${Number(level.duration_days || 0)}天</span>
        </div>
        ${upgradeInfo}
        ${actionHtml}
    `;
}

/**
 * 渲染会员等级卡片。
 *
 * @param {object} level
 * @param {object} data
 * @returns {string}
 */
function renderVipLevelCard(level, data) {
    const isCurrent = Boolean(level.is_current);
    const color = sanitizeColor(level.color);

    return `
        <div class="vip-level-card ${isCurrent ? "current" : ""}">
            ${isCurrent ? '<span class="vip-level-badge">当前档位</span>' : ""}
            <div style="display:flex; align-items:center; gap:10px;">
                <span style="font-size:24px;">${escapeHtml(level.icon || "✨")}</span>
                <span style="font-size:16px; font-weight:bold; color:${color}">${escapeHtml(level.name || "")}</span>
            </div>
            <div style="font-size:11px; color:#64748b; line-height:1.5; min-height:33px;">${escapeHtml(level.description || "")}</div>
            <div style="margin-top:5px; space-y:6px;">
                <div class="vip-feature-item"><span class="vip-feature-icon">✓</span> 经验获取 <b>${Number(level.exp_multiplier || 1)}x</b></div>
                <div class="vip-feature-item"><span class="vip-feature-icon">✓</span> 金币获取 <b>${Number(level.jjb_multiplier || 1)}x</b></div>
                <div class="vip-feature-item"><span class="vip-feature-icon">✓</span> 专属入场特效 & 横幅</div>
            </div>
            <div style="margin-top:auto; padding-top:10px;">
                ${renderVipAction(level, data)}
            </div>
        </div>
    `;
}

/**
 * 渲染 VIP 购买记录。
 *
 * @param {Array<object>} logs
 * @returns {void}
 */
function renderVipLogs(logs) {
    const logsBody = element("vip-logs-body");
    if (!logsBody) {
        return;
    }

    if (!logs.length) {
        logsBody.innerHTML = '<tr><td colspan="5" style="padding:40px; text-align:center; color:#94a3b8;">暂无记录</td></tr>';
        return;
    }

    const statusMap = {
        created: { text: "待创建", className: "background:#f1f5f9;color:#475569" },
        pending: { text: "待支付", className: "background:#fef3c7;color:#b45309" },
        paid: { text: "已支付", className: "background:#dcfce7;color:#166534" },
        closed: { text: "已关闭", className: "background:#f1f5f9;color:#64748b" },
        failed: { text: "失败", className: "background:#fee2e2;color:#991b1b" },
    };

    logsBody.innerHTML = logs.map((log) => {
        const status = statusMap[log.status] || { text: escapeHtml(log.status || "未知"), className: "background:#f1f5f9" };
        const openedAt = log.opened_vip_at ? String(log.opened_vip_at).substring(0, 16).replace("T", " ") : "—";

        return `
            <tr style="border-bottom:1px solid #f1f5f9;">
                <td style="padding:10px; font-family:monospace; color:#64748b;">${escapeHtml(log.order_no || "")}</td>
                <td style="padding:10px; font-weight:bold;">${escapeHtml(log.vip_name || "")}</td>
                <td style="padding:10px; font-weight:bold; color:#e11d48;">¥${formatMoney(log.amount)}</td>
                <td style="padding:10px;"><span style="display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:bold; ${status.className}">${status.text}</span></td>
                <td style="padding:10px; color:#64748b;">${escapeHtml(openedAt)}</td>
            </tr>
        `;
    }).join("");
}

/**
 * 渲染 VIP 个性化设置。
 *
 * @returns {void}
 */
function renderVipSettings() {
    const data = vipData;
    const user = data?.user;
    const level = user?.vip_level;

    if (!data || !user || !level) {
        return;
    }

    element("vip-theme-icon").textContent = level.icon || "✨";
    element("vip-theme-name").textContent = level.name || "";
    element("vip-join-effect").textContent = data.effectOptions[user.custom_join_effect || level.join_effect] || "无";
    element("vip-join-banner").textContent = `风格：${data.bannerStyleOptions[level.join_banner] || "默认"}`;
    element("vip-leave-effect").textContent = data.effectOptions[user.custom_leave_effect || level.leave_effect] || "无";
    element("vip-leave-banner").textContent = `风格：${data.bannerStyleOptions[level.leave_banner] || "默认"}`;
    element("vip-default-join").textContent = level.join_templates?.[0] || "当前档位尚未配置默认欢迎语。";
    element("vip-default-leave").textContent = level.leave_templates?.[0] || "当前档位尚未配置默认离开语。";

    const badge = element("vip-customize-badge");
    const form = element("vip-customize-form");
    const notice = element("vip-customize-notice");

    if (user.can_customize) {
        badge.textContent = "已开启";
        badge.style.background = "#dcfce7";
        badge.style.color = "#166534";
        form.style.display = "block";
        notice.style.display = "none";

        const joinSelect = element("vip-custom-join-effect");
        const leaveSelect = element("vip-custom-leave-effect");
        const optionsHtml = Object.entries(data.effectOptions || {})
            .map(([key, label]) => `<option value="${escapeHtml(key)}">${escapeHtml(label)}</option>`)
            .join("");

        joinSelect.innerHTML = optionsHtml;
        leaveSelect.innerHTML = optionsHtml;
        joinSelect.value = user.custom_join_effect || level.join_effect || "none";
        leaveSelect.value = user.custom_leave_effect || level.leave_effect || "none";
        element("vip-custom-join").value = user.custom_join_message || "";
        element("vip-custom-leave").value = user.custom_leave_message || "";
        return;
    }

    badge.textContent = "未开放";
    badge.style.background = "#f1f5f9";
    badge.style.color = "#64748b";
    form.style.display = "none";
    notice.style.display = "block";
    notice.textContent = user.is_vip
        ? "当前会员档位暂未开放个人自定义功能，不过你仍会自动使用本等级配置的专属欢迎语、离开语和华丽特效。"
        : "开通会员后，这里会解锁对应等级的专属进退场主题；若等级允许，还能设置你自己的欢迎语和离开语。";
}

/**
 * 渲染 VIP 弹窗整体内容。
 *
 * @returns {void}
 */
function renderVipModal() {
    const data = vipData;
    if (!data) {
        return;
    }

    element("vip-current-name").textContent = data.user.is_vip ? (data.user.vip_name || "尊贵会员") : "普通用户";
    element("vip-current-name").style.color = data.user.vip_level?.color || "#1e293b";
    element("vip-expire-time").textContent = data.user.is_vip ? `到期时间：${data.user.hy_time}` : "开通会员享特权";
    element("vip-total-amount").textContent = `¥${formatMoney(data.totalAmount)}`;

    const grid = element("vip-levels-grid");
    grid.innerHTML = (data.vipLevels || []).map((level) => renderVipLevelCard(level, data)).join("");

    const settingsButton = element("vip-tabbtn-settings");
    if (data.user.is_vip) {
        settingsButton.style.display = "block";
        renderVipSettings();
    } else {
        settingsButton.style.display = "none";
    }

    renderVipLogs(data.paymentLogs || []);
}

/**
 * 拉取 VIP 中心数据。
 *
 * @returns {Promise<void>}
 */
async function fetchVipData() {
    try {
        const response = await fetch(VIP_CENTER_URL, {
            headers: {
                Accept: "application/json",
            },
        });
        const json = await response.json();

        if (json.status === "success") {
            vipData = json.data;
            renderVipModal();
        }
    } catch (error) {
        console.error("Failed to fetch VIP data", error);
    }
}

/**
 * 打开 VIP 中心弹窗。
 *
 * @returns {void}
 */
export function openVipModal() {
    element("vip-modal").style.display = "flex";
    void fetchVipData();
}

/**
 * 关闭 VIP 中心弹窗。
 *
 * @returns {void}
 */
export function closeVipModal() {
    element("vip-modal").style.display = "none";
}

/**
 * 切换 VIP 中心页签。
 *
 * @param {string} tabName
 * @returns {void}
 */
export function switchVipTab(tabName) {
    document.querySelectorAll(".vip-tab-btn").forEach((button) => button.classList.remove("active"));
    document.querySelectorAll(".vip-view-pane").forEach((pane) => pane.classList.remove("active"));
    element(`vip-tabbtn-${tabName}`)?.classList.add("active");
    element(`vip-view-${tabName}`)?.classList.add("active");
}

/**
 * 创建 VIP 支付表单并打开支付页。
 *
 * @param {number} levelId
 * @param {string} provider
 * @returns {void}
 */
export function buyVip(levelId, provider = "alipay") {
    const form = document.createElement("form");
    form.method = "POST";
    form.action = VIP_PAYMENT_URL;
    form.target = "_blank";

    for (const [name, value] of Object.entries({
        _token: csrf(),
        vip_level_id: levelId,
        provider,
    })) {
        const input = document.createElement("input");
        input.type = "hidden";
        input.name = name;
        input.value = String(value);
        form.appendChild(input);
    }

    document.body.appendChild(form);
    form.submit();
    document.body.removeChild(form);
    closeVipModal();

    const providerText = provider === "wechat" ? "微信支付二维码页" : "支付宝支付页";
    showDialog(`正在为您打开${providerText}，请在新页面完成支付。`, "支付提示", "#3b82f6");
}

/**
 * 保存 VIP 专属进退场设置。
 *
 * @returns {Promise<void>}
 */
export async function saveVipPresenceSettings() {
    try {
        const response = await fetch(VIP_PRESENCE_UPDATE_URL, {
            method: "PUT",
            headers: {
                "Content-Type": "application/json",
                "Accept": "application/json",
                "X-CSRF-TOKEN": csrf(),
            },
            body: JSON.stringify({
                custom_join_message: element("vip-custom-join").value,
                custom_leave_message: element("vip-custom-leave").value,
                custom_join_effect: element("vip-custom-join-effect").value,
                custom_leave_effect: element("vip-custom-leave-effect").value,
            }),
        });
        const json = await response.json();

        if (json.status === "success") {
            showDialog(json.message, "提示", "#10b981");
            await fetchVipData();
            return;
        }

        showDialog(json.message || "保存失败", "提示", "#f59e0b");
    } catch (error) {
        showDialog("网络异常，请重试", "错误", "#ef4444");
    }
}

/**
 * 绑定 VIP 中心所有按钮事件，并挂载兼容全局函数。
 *
 * @returns {void}
 */
export function bindVipControls() {
    if (typeof window === "undefined") {
        return;
    }

    window.openVipModal = openVipModal;
    window.closeVipModal = closeVipModal;
    window.switchVipTab = switchVipTab;
    window.buyVip = buyVip;
    window.saveVipPresenceSettings = saveVipPresenceSettings;

    if (vipControlEventsBound || typeof document === "undefined") {
        return;
    }

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

        const tabButton = event.target.closest("[data-vip-tab]");
        if (tabButton) {
            event.preventDefault();
            switchVipTab(tabButton.getAttribute("data-vip-tab") || "");
            return;
        }

        if (event.target.closest("[data-vip-modal-close]")) {
            event.preventDefault();
            closeVipModal();
            return;
        }

        const buyButton = event.target.closest("[data-vip-buy-level]");
        if (buyButton) {
            event.preventDefault();
            const levelId = Number.parseInt(buyButton.getAttribute("data-vip-buy-level") || "", 10);
            const provider = buyButton.getAttribute("data-vip-buy-provider") || "alipay";

            if (Number.isInteger(levelId)) {
                buyVip(levelId, provider);
            }
            return;
        }

        if (event.target.closest("[data-vip-save-presence]")) {
            event.preventDefault();
            void saveVipPresenceSettings();
            return;
        }

        const modal = element("vip-modal");
        if (modal && event.target === modal) {
            closeVipModal();
        }
    });
}