<template>
    <view class="messages-page">
        <view class="flex flex-col">
            <view id="page-header" class="bg-orange-400">
                <nut-row type="flex" justify="center" align="center">
                    <!-- <nut-col span="4">
                        <view class="text-xl font-bold text-white">消息</view>
                    </nut-col> -->
                    <nut-col span="24">
                        <!-- Search Bar -->
                        <nut-searchbar v-model="searchValue" placeholder="按联系人名字/系统通知内容搜索" @blur="onBlurSearch" @clear="onBlurSearch" shape="round"
                            background="transparent" input-background="#ffffff">
                            <template #leftin>
                                <Search2 />
                            </template>
                        </nut-searchbar>
                    </nut-col>
                </nut-row>
            </view>
        </view>


        <nut-sticky>
            <!-- 状态筛选标签 -->
            <view id="status-tabs" class="status-tabs">
                <view class="tab-item" :class="{ active: activeTab === 'all' }" @click="setActiveTab('all')">
                    全部
                </view>
                <view class="tab-item" :class="{ active: activeTab === 'unread' }" @click="setActiveTab('unread')">
                    未读
                </view>
                <view class="tab-item" :class="{ active: activeTab === 'system' }"
                    @click="setActiveTab('system')">
                    通知
                </view>
            </view>
        </nut-sticky>

        <!-- 消息列表内容 -->
        <scroll-view ref="scrollViewRef" class="conversation-list" :style="scrollStyle" :scroll-y="true"
            @scrolltolower="loadMore" :lower-threshold="100" :enable-flex="false"
            :scroll-top="scrollTop">
            <view v-for="conversation in filteredConversations" :key="conversation.id"
                class="conversation-item border-b border-gray-100 pb-2"
                @click="onConversationClick(conversation)">
                <view class="flex items-start">
                    <view class="avatar-container flex-shrink-0">
                        <view class="relative">
                            <image v-if="conversation.type === 'chat'" :src="conversation.avatar || defaultAvatar"
                                class="w-12 h-12 rounded-full object-cover" mode="aspectFill" />
                            <view v-else class="w-12 h-12 rounded-full bg-gray-100 flex items-center justify-center">
                                <component :is="conversation.icon" />
                            </view>
                        </view>
                    </view>
                    <view class="content-container1 flex-1 min-w-0">
                        <view class="flex justify-between items-center mb-1">
                            <text class="font-medium flex-1 mr-2 truncate">{{ conversation.name }}</text>
                            <view class="flex items-center flex-shrink-0">
                                <text class="text-xs text-gray-500">{{ conversation.time }}</text>
                                <view v-if="conversation.unread" class="ml-1 bg-red-500 rounded-full w-2 h-2">
                                </view>
                            </view>
                        </view>
                        <text class="text-sm text-gray-600 truncate block">{{ conversation.lastMessage }}</text>
                    </view>
                </view>
            </view>

            <!-- 空状态提示 -->
            <view v-if="filteredConversations.length === 0 && !loading && !hasMore"
                class="empty-state py-8 text-center">
                <Notice size="48" color="#9ca3af" class="mb-4" />
                <text class="text-gray-500 text-base block mb-2">暂无消息</text>
                <text class="text-gray-400 text-sm">当前筛选条件下没有找到相关消息</text>
            </view>

            <!-- Loading indicator -->
            <view v-if="loading" class="loading-container">
                <text class="loading-text">加载中...</text>
            </view>

            <!-- 没有更多数据 -->
            <view v-if="!hasMore && filteredConversations.length > 0" class="no-more">
                <text class="no-more-text">没有更多消息了</text>
            </view>
        </scroll-view>

        <!-- 自定义TabBar -->
        <TabBar />

        <!-- 消息详情弹框 -->
        <MessageDetail v-model="showMessageDetail" :conversation="selectedConversation" @close="closeMessageDetail"
            @sendMessage="handleSendMessage" />
    </view>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, markRaw } from 'vue'
import { Search2, Notice } from '@nutui/icons-vue-taro'
import TabBar from '@/components/TabBar.vue'
import MessageDetail from '@/components/MessageDetail.vue'
import { $ } from '@tarojs/extend'
import Taro from '@tarojs/taro'
// 导入接口
import { getMessagesListAPI, getMessagesDetailAPI } from '@/api/chat'

// 默认头像
const defaultAvatar = 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'

const scrollStyle = ref({
    height: 'auto'
})

// 滚动相关变量
const scrollViewRef = ref(null)
const scrollTop = ref(0)

// 搜索值
const searchValue = ref('')
const onBlurSearch = async () => {
    // 重置分页状态
    page.value = 1
    hasMore.value = true
    // 重新获取数据
    await initData()
    // 重新启动轮询以适应新的搜索条件
    startPolling()
}
// 当前激活的Tab
const activeTab = ref('all')
// 加载状态
const loading = ref(false)
// 页码
const page = ref(1)
// 每页数量
const pageSize = 10
// 是否还有更多数据
const hasMore = ref(true)

// 轮询相关
const pollingTimer = ref(null)
const POLLING_INTERVAL = 30000 // 30秒

// 对话数据
const conversations = ref([])

// 消息详情弹框相关
const showMessageDetail = ref(false)
const selectedConversation = ref(null)

// 模拟消息历史记录
const mockMessages = ref([])

/**
 * 轮询获取消息列表
 * 只更新现有数据的状态，不替换整个列表以保持滚动加载的数据
 */
const pollMessages = async () => {
    try {
        // 静默获取数据，不显示loading状态
        // 构建查询参数，同时包含状态筛选和关键字搜索
        const params = {
            page: 0,
            limit: pageSize
        }

        // 根据activeTab设置过滤参数
        if (activeTab.value === 'unread') {
            params.status = 3 // 未读
        } else if (activeTab.value === 'system') {
            params.type = 'system' // 系统消息
        }

        // 同时添加搜索关键词（如果存在）
        if (searchValue.value && searchValue.value.trim()) {
            params.keyword = searchValue.value.trim()
        }

        const response = await getMessagesListAPI(params)

        if (response.code && response.data && response.data.list) {
            // 转换API数据格式为组件需要的格式
            const transformedData = response.data.list.map(item => ({
                id: item.id,
                name: item.type === 'system' ? '系统通知' : (item.partner_nickname || '未知用户'),
                avatar: item.type === 'chat' ? (item.partner_avatar_url || defaultAvatar) : '',
                icon: item.type === 'system' ? markRaw(Notice) : null,
                lastMessage: item.note || '',
                time: item.created_time_desc || '',
                unread: item.status === 3, // 3=未读，5=已读
                type: item.type,
                create_time: item.create_time
            }))

            // 如果当前列表为空或者只有第一页数据，直接替换
            if (conversations.value.length === 0 || page.value <= 1) {
                conversations.value = transformedData
                console.log('轮询：初始化或重置列表数据，数据量:', transformedData.length)
            } else {
                // 如果已经加载了多页数据，只更新现有项目的状态，不替换整个列表
                console.log('轮询：更新现有数据状态，保持', conversations.value.length, '条数据')

                // 创建新数据的映射表，便于快速查找
                const newDataMap = new Map(transformedData.map(item => [item.id, item]))

                // 更新现有数据的状态（如未读状态、最后消息等）
                conversations.value = conversations.value.map(existingItem => {
                    const newItem = newDataMap.get(existingItem.id)
                    if (newItem) {
                        // 更新状态但保持在列表中的位置
                        return {
                            ...existingItem,
                            lastMessage: newItem.lastMessage,
                            time: newItem.time,
                            unread: newItem.unread
                        }
                    }
                    return existingItem
                })

                // 检查是否有新的消息需要添加到列表顶部
                const existingIds = new Set(conversations.value.map(item => item.id))
                const newMessages = transformedData.filter(item => !existingIds.has(item.id))

                if (newMessages.length > 0) {
                    console.log('轮询：发现新消息', newMessages.length, '条，添加到列表顶部')
                    conversations.value = [...newMessages, ...conversations.value]
                }
            }
        }
    } catch (error) {
        console.error('轮询获取消息列表失败:', error)
        // 轮询失败时不显示错误提示，避免干扰用户
    }
}

/**
 * 启动轮询
 */
const startPolling = () => {
    // 清除现有定时器
    if (pollingTimer.value) {
        clearInterval(pollingTimer.value)
    }

    // 启动新的定时器
    pollingTimer.value = setInterval(() => {
        pollMessages()
    }, POLLING_INTERVAL)
}

/**
 * 停止轮询
 */
const stopPolling = () => {
    if (pollingTimer.value) {
        clearInterval(pollingTimer.value)
        pollingTimer.value = null
    }
}

// 初始化数据
const initData = async () => {
    try {
        loading.value = true

        // 构建查询参数，同时包含状态筛选和关键字搜索
        const params = {
            page: 0,
            limit: pageSize
        }

        // 根据activeTab设置过滤参数
        if (activeTab.value === 'unread') {
            params.status = 3 // 未读
        } else if (activeTab.value === 'system') {
            params.type = 'system' // 系统消息
        }

        // 同时添加搜索关键词（如果存在）
        if (searchValue.value && searchValue.value.trim()) {
            params.keyword = searchValue.value.trim()
        }

        const response = await getMessagesListAPI(params)

        if (response.code && response.data && response.data.list) {
            // 转换API数据格式为组件需要的格式
            const transformedData = response.data.list.map(item => ({
                id: item.id,
                name: item.type === 'system' ? '系统通知' : (item.partner_nickname || '未知用户'),
                avatar: item.type === 'chat' ? (item.partner_avatar_url || defaultAvatar) : '',
                icon: item.type === 'system' ? markRaw(Notice) : null,
                lastMessage: item.note || '',
                time: item.created_time_desc || '',
                unread: item.status === 3, // 3=未读，5=已读
                type: item.type,
                create_time: item.create_time
            }))

            conversations.value = transformedData

            // 判断是否还有更多数据
            hasMore.value = transformedData.length === pageSize
        } else {
            conversations.value = []
            hasMore.value = false
        }
    } catch (error) {
        console.error('获取消息列表失败:', error)
        Taro.showToast({
            title: '获取消息失败',
            icon: 'error'
        })
        conversations.value = []
        hasMore.value = false
    } finally {
        loading.value = false
    }
}

// 过滤后的对话列表
// 由于API已经根据状态和关键字进行了后端筛选，这里直接返回conversations
const filteredConversations = computed(() => {
    return conversations.value
})

// Tab点击事件
const setActiveTab = async (tabKey) => {
    if (activeTab.value === tabKey) return;

    // 添加淡出效果
    const conversationList = document.querySelector('.conversation-list');
    if (conversationList) {
        conversationList.style.opacity = '0';
        conversationList.style.transform = 'translateY(10rpx)';
    }

    setTimeout(async () => {
        activeTab.value = tabKey;
        // 保持搜索关键字，不重置搜索条件
        // 重置分页状态
        page.value = 1;
        hasMore.value = true;
        // 重置加载状态
        loading.value = false;
        // 重置滚动位置 - 使用更可靠的方式
        scrollTop.value = 0.1; // 使用固定的非零值触发scroll-view重新渲染
        setTimeout(() => {
            scrollTop.value = 0; // 重置到顶部
        }, 50);
        // 重新获取数据
        await initData();
        // 重新启动轮询以适应新的筛选条件
        startPolling();

        // 添加淡入效果
        setTimeout(() => {
            if (conversationList) {
                conversationList.style.opacity = '1';
                conversationList.style.transform = 'translateY(0)';
            }
        }, 50);
    }, 150);
}

/**
 * 加载更多数据
 * 向下滚动时加载下一页数据并追加到现有列表
 */
const loadMore = async () => {
    if (loading.value || !hasMore.value) {
        return
    }

    try {
        loading.value = true
        console.log('加载更多数据，当前页码:', page.value, '当前列表项数:', conversations.value.length)

        // 构建请求参数，同时包含状态筛选和关键字搜索
        const params = {
            page: page.value,
            limit: pageSize
        }

        // 根据activeTab设置过滤参数
        if (activeTab.value === 'unread') {
            params.status = 3 // 未读
        } else if (activeTab.value === 'system') {
            params.type = 'system' // 系统消息
        }

        // 同时添加搜索关键词（如果存在）
        if (searchValue.value && searchValue.value.trim()) {
            params.keyword = searchValue.value.trim()
        }

        const response = await getMessagesListAPI(params)

        if (response.code && response.data && response.data.list) {
            // 转换API数据格式
            const transformedData = response.data.list.map(item => ({
                id: item.id,
                name: item.type === 'system' ? '系统通知' : (item.partner_nickname || '未知用户'),
                avatar: item.type === 'chat' ? (item.partner_avatar_url || defaultAvatar) : '',
                icon: item.type === 'system' ? markRaw(Notice) : null,
                lastMessage: item.note || '',
                time: item.created_time_desc || '',
                unread: item.status === 3, // 3=未读，5=已读
                type: item.type,
                create_time: item.create_time
            }))

            if (transformedData.length > 0) {
                // 保存当前列表长度，用于调试
                const prevLength = conversations.value.length

                // 追加新数据到现有列表
                conversations.value = [...conversations.value, ...transformedData]

                // 增加页码
                page.value++

                // 判断是否还有更多数据
                hasMore.value = transformedData.length === pageSize
            } else {
                hasMore.value = false
                console.log('没有更多数据')
            }
        } else {
            hasMore.value = false
            console.log('API返回无数据')
        }
    } catch (error) {
        console.error('加载更多消息失败:', error)
        hasMore.value = false
    } finally {
        loading.value = false
    }
}



// 点击对话 - 显示消息详情弹框
const onConversationClick = async (conversation) => {
    try {
        loading.value = true

        // 根据消息类型获取详情数据
        if (conversation.type === 'system') {
            // 获取系统消息详情
            const response = await getMessagesDetailAPI({ id: conversation.id })
            if (response.code && response.data) {
                // 更新conversation数据
                selectedConversation.value = {
                    ...conversation,
                    ...response.data,
                    name: '系统通知',
                    lastMessage: response.data.note || conversation.lastMessage,
                    time: response.data.created_time_desc || conversation.time
                }
            } else {
                selectedConversation.value = conversation
            }
        } else if (conversation.type === 'chat') {
            // 聊天类型直接传递conversation，消息加载在MessageDetail组件内部处理
            selectedConversation.value = conversation
        } else {
            selectedConversation.value = conversation
        }

        // 显示弹框
        showMessageDetail.value = true

        // 标记为已读
        markAsRead(conversation.id)
    } catch (error) {
        console.error('获取消息详情失败:', error)
        Taro.showToast({
            title: '获取详情失败',
            icon: 'error'
        })
        // 即使失败也显示基本信息
        selectedConversation.value = conversation
        showMessageDetail.value = true
        markAsRead(conversation.id)
    } finally {
        loading.value = false
    }
}


// 关闭消息详情弹框
const closeMessageDetail = () => {
    showMessageDetail.value = false
    selectedConversation.value = null
    mockMessages.value = []
}

// 标记消息为已读
const markAsRead = (conversationId) => {
    const conversation = conversations.value.find(conv => conv.id === conversationId)
    if (conversation && conversation.unread) {
        conversation.unread = false
    }
}

// 处理发送消息
const handleSendMessage = (data) => {
    const { conversation, message } = data
    if (!conversation || !message.trim()) return

    // 更新对话的最后一条消息
    const conv = conversations.value.find(conv => conv.id === conversation.id)
    if (conv) {
        conv.lastMessage = message
        conv.time = '刚刚'
        conv.unread = false // 标记为已读
    }

    Taro.showToast({
        title: '消息发送成功',
        icon: 'success'
    })
}

// 页面加载时初始化数据
onMounted(async () => {
    // 设置滚动列表可视高度
    const windowHeight = wx.getWindowInfo().windowHeight;
    setTimeout(async () => {
        const headerHeight = await $('#page-header').height();
        const navHeight = await $('#status-tabs').height();
        scrollStyle.value = {
            height: windowHeight - headerHeight - navHeight - 70 + 'px'
        }
    }, 500);
    await initData()
    // 启动轮询
    startPolling()
})

// 页面卸载时清理轮询
onUnmounted(() => {
    stopPolling()
})
</script>

<style lang="less">
.messages-page {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding-bottom: 100rpx;
    /* 为TabBar留出空间 */

    /* 对话列表样式 */
    .conversation-list {
        background: #ffffff;
        box-sizing: border-box;
    }

    /* 确保scroll-view内容区域正确显示 */
    :deep(.conversation-list) {
        display: block !important;
    }

    .conversation-item {
        padding: 24rpx 20rpx;
        border-bottom: 1rpx solid #f0f0f0;
        transition: background-color 0.2s;
    }

    .avatar-container {
        width: 88rpx;
        margin-right: 24rpx;
        flex-shrink: 0;
    }

    .content-container1 {
        flex: 1;
        min-width: 0;
        padding-left: 8rpx;
    }

    .conversation-item:active {
        background-color: #f8f9fa;
    }

    .conversation-item:last-child {
        border-bottom: none;
    }

    /* 加载指示器 */
    .loading-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40rpx;
        gap: 16rpx;
    }

    .loading-text {
        font-size: 28rpx;
        color: #9ca3af;
    }

    /* 没有更多数据 */
    .no-more {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40rpx;
    }

    .no-more-text {
        font-size: 28rpx;
        color: #9ca3af;
    }

    /* Tailwind CSS 类的补充样式 */
    .w-12 {
        width: 88rpx;
    }

    .h-12 {
        height: 88rpx;
    }

    .w-2 {
        width: 16rpx;
    }

    .h-2 {
        height: 16rpx;
    }

    // .rounded-full {
    //     border-radius: 50%;
    // }

    .object-cover {
        object-fit: cover;
    }

    .bg-gray-100 {
        background-color: #f3f4f6;
    }

    .bg-red-500 {
        background-color: #ef4444;
    }

    .flex {
        display: flex;
    }

    .flex-1 {
        flex: 1;
    }

    .flex-shrink-0 {
        flex-shrink: 0;
    }

    .min-w-0 {
        min-width: 0;
    }

    .items-center {
        align-items: center;
    }

    .justify-center {
        justify-content: center;
    }

    .justify-between {
        justify-content: space-between;
    }

    .ml-1 {
        margin-left: 4rpx;
    }

    .ml-3 {
        margin-left: 24rpx;
    }

    .mt-1 {
        margin-top: 4rpx;
    }

    .font-medium {
        font-weight: 500;
    }

    .text-xs {
        font-size: 24rpx;
    }

    .text-sm {
        font-size: 28rpx;
    }

    .text-xl {
        font-size: 40rpx;
    }

    .font-bold {
        font-weight: bold;
    }

    .text-white {
        color: #ffffff;
    }

    .text-gray-500 {
        color: #6b7280;
    }

    .text-gray-600 {
        color: #4b5563;
    }

    .bg-orange-400 {
        background-color: #fb923c;
    }

    .p-4 {
        padding: 32rpx;
    }

    .pt-8 {
        padding-top: 64rpx;
    }

    .mb-1 {
        margin-bottom: 4rpx;
    }

    .mb-3 {
        margin-bottom: 24rpx;
    }

    .mr-2 {
        margin-right: 8rpx;
    }

    .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .block {
        display: block;
    }

    .relative {
        position: relative;
    }



}

/* 空状态样式 */
.empty-state {
    padding: 80rpx 0 100rpx 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .mb-4 {
        margin-bottom: 32rpx;
    }

    .mb-2 {
        margin-bottom: 16rpx;
    }

    .text-base {
        font-size: 32rpx;
        color: #6b7280;
        font-weight: 500;
    }

    .text-sm {
        font-size: 26rpx;
        color: #9ca3af;
        line-height: 1.5;
    }
}

/* 状态筛选标签 */
.status-tabs {
    background: white;
    padding: 20rpx 35rpx;
    /* 增加内边距 */
    border-bottom: 1rpx solid #e5e7eb;
    display: flex;
    position: relative;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

.tab-item {
    margin-right: 48rpx;
    padding-bottom: 16rpx;
    font-size: 30rpx;
    /* 增大字体 */
    color: #6b7280;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
    flex-shrink: 0;
    transform: translateX(0);

    &.active {
        color: #f97316;
        font-weight: 500;
        transform: translateY(-2rpx);

        &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4rpx;
            background: linear-gradient(90deg, #f97316, #fb923c);
            border-radius: 2rpx;
            animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
    }

    &:hover {
        color: #f97316;
        transform: translateY(-1rpx);
    }

    &:last-child {
        margin-right: 0;
    }
}



/* 滑入动画 */
@keyframes slideIn {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }

    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* 内容切换动画 */
.conversation-list {
    animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20rpx);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 消息项动画 */
.conversation-item {
    animation: fadeInItem 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: both;
}

.conversation-item:nth-child(1) {
    animation-delay: 0.1s;
}

.conversation-item:nth-child(2) {
    animation-delay: 0.15s;
}

.conversation-item:nth-child(3) {
    animation-delay: 0.2s;
}

.conversation-item:nth-child(4) {
    animation-delay: 0.25s;
}

.conversation-item:nth-child(5) {
    animation-delay: 0.3s;
}

@keyframes fadeInItem {
    from {
        opacity: 0;
        transform: translateX(-20rpx);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* NutUI 组件样式覆盖 */
:deep(.nut-searchbar) {
    background: transparent !important;
}

/* 响应式设计 */
@media (max-width: 750rpx) {
    .conversation-item {
        padding: 20rpx 16rpx;
        margin: 16rpx 0;
    }

    .w-12 {
        width: 80rpx;
    }

    .h-12 {
        height: 80rpx;
    }

    .text-sm {
        font-size: 26rpx;
    }
}
</style>