<template>
  <view class="ai-chat-page" :style="wrapperPageStyle">
    <!--自定义导航头部 -->
    <view class="custom-navbar" ref="pageHeader" v-if="showCustomNavbar">
      <view class="header-left">
        <button class="back-btn" v-show="showBackButton" @click="goBack">
          <text class="iconfont icon-back"></text>
        </button>
        <!-- 占位元素，确保布局平衡 -->
        <view v-show="!showBackButton" class="placeholder"></view>
      </view>
      <view class="header-center">
        <text class="header-subtitle">在线为您服务</text>
      </view>
      <view class="header-right">
        <button class="menu-btn" v-show="showMenuButton" @click="showMenu">
          <text class="iconfont icon-ellipsis"></text>
        </button>
        <!-- 占位元素，确保布局平衡 -->
        <view v-show="!showMenuButton" class="placeholder"></view>
      </view>
    </view>

    <!-- 聊天内容区域 -->
    <view class="chat-content" 
      :style="wrapperChatContentStyle"
      >
      <!-- AI聊天组件 -->
      <ai-chat-message 
        ref="chat"
        :initial-messages="initialMessages"
        :user-avatar="userAvatar"
        :ai-avatar="aiAvatar"
        @message-sent="onMessageSent"
        @ai-response="onAIResponse"
        @action-click="onActionClick"
        @history-loaded="onHistoryLoaded"
        @file-preview="onFilePreview"
        @audio-play="onAudioPlay"
        @audio-pause="onAudioPause"
        @video-play="onVideoPlay"
        @video-pause="onVideoPause"
        @link-open="onLinkOpen"
        @product-view="onProductView"
        @input-change="onInputChange" />
    </view>
  </view>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
import navigationHelper from '@/common/js/navigation';
import { EventSafety } from '@/common/js/event-safety';

import aiChatMessage from './ai-chat-message.vue';

export default {
  components: {
    aiChatMessage,
  },
  data() {
    return {
      initialMessages: [
        {
          id: 1,
          role: 'ai',
          type: 'text',
          content: '您好！我是AI智能客服，很高兴为您服务！\n\n我可以帮您：\n• 解答产品相关问题\n• 处理订单问题\n• 提供技术支持\n• 推荐相关商品\n\n请告诉我您需要什么帮助？',
          timestamp: Date.now() - 60000,
          actions: [
            { type: 'like', icon: 'icon-dianzan1', text: '喜欢', count: 0 },
            { type: 'dislike', icon: 'icon-dianzan1', text: '不喜欢', count: 0 }
          ]
        }
      ],

      // --- 系统导航栏/状态栏相关 ---
      navBarHeight: 44,   // uni-page-head 系统导航栏，默认高度为44px
      statusBarHeight: 0, // 状态栏高度，默认0

      // --- 自定义导航栏 ---
      showCustomNavbar: true,    // 是否显示自定义导航栏
      showBackButton: false,      // 是否显示返回按钮
      showMenuButton: true,      // 是否显示设置菜单按钮

      // --- 聊天内容区域 ---  
      scrollViewHeight: '0px',


      // 事件处理器引用（用于清理）
      safeEventHandlers: new Map()
    }
  },  
  computed: {
    ...mapGetters([
      'globalAIKefuConfig'
    ]),    

    /// ---- 关于AI客服的配置，支持远程配置 ----
    userAvatar() {
      return this.globalAIKefuConfig?.userAvatar || '/static/images/user-avatar.png'
    },
    aiAvatar() {
      return this.globalAIKefuConfig?.aiAvatar || '/static/images/ai-avatar.png'
    },
    /// ---- others ----
    containerHeight() {
      return `calc(100vh - ${this.navBarHeight + this.statusBarHeight}px)`
    },
    wrapperPageStyle() {
      // #ifdef H5
      return `top: ${this.navBarHeight + 'px'};`
      // #endif

      // #ifdef MP-WEIXIN
      return `top: -1px;` // 微信小程序需要上移1px, 否则与系统导航栏出现1px的空隙
      // #endif

      return ``
    },
    wrapperChatContentStyle() {
      return { 
        height: this.containerHeight,
        paddingTop: this.showCustomNavbar ? '0' : (this.navHeight + 'px')
      }
    }
  },

  async onLoad(options) {
    await this.initPage(options)
  },
  
  async onReady() {
    await this.initNavigation()
  },

  onShow() {
    
  },

  onHide() {

  },
  
  onUnload() {
    this.cleanup()
  },

  methods: {
    // ========== 安全事件处理 ==========
    setupSafeEventListeners() {
      // 使用 EventSafety 包装事件处理器
      const safeHandlers = {
        serviceRequest: EventSafety.wrapEventHandler(
          this.handleServiceRequest.bind(this),
          { onError: this.handleEventError.bind(this) }
        ),
        navigationRequest: EventSafety.wrapEventHandler(
          this.handleNavigationRequest.bind(this),
          { onError: this.handleEventError.bind(this) }
        ),
        componentInteraction: EventSafety.wrapEventHandler(
          this.handleComponentInteraction.bind(this),
          { onError: this.handleEventError.bind(this) }
        )
      }
      
      // 注册事件监听
      this.$on('service.requestComponentInfo', safeHandlers.serviceRequest)
      this.$on('navigation.requestInfo', safeHandlers.navigationRequest)
      this.$on('component.interaction', safeHandlers.componentInteraction)
      
      // 保存处理器引用用于清理
      this.safeEventHandlers.set('serviceRequest', safeHandlers.serviceRequest)
      this.safeEventHandlers.set('navigationRequest', safeHandlers.navigationRequest)
      this.safeEventHandlers.set('componentInteraction', safeHandlers.componentInteraction)
    },

    setupNavigationEvents() {
      // 监听窗口大小变化
      uni.onWindowResize((res) => {
        console.log('窗口大小变化:', res.size)
        this.calculateScrollViewHeight()
      })
    },   

    // ========== 事件处理方法 ========== 

    async handleServiceRequest(event) {
      console.log('处理服务请求:', EventSafety.extractEventData(event))
      
      // 安全地检查事件目标
      if (event.matches('.service-component') || 
          event.detail?.componentType === 'service') {
        await this.processServiceRequest(event)
      }
    },

    async handleNavigationRequest(event) {
      console.log('处理导航请求:', event.type)
      
      // 提供导航信息
      this.emitNavigationInfo(event)
    },

    handleComponentInteraction(event) {
      console.log('处理组件交互:', event.detail)
      
      // 安全地处理组件交互
      this.processComponentInteraction(event)
    },

    handleEventError(error, event) {
      console.error('事件处理错误:', {
        error: error.message,
        eventType: event?.type,
        component: this.$options.name
      })
      
      this.showError('操作失败，请重试')
    },

    // ========== 初始化页面 ==========
    async initPage(options = {}) {
      this.$langConfig.title('AI智能客服');
      this.initChat()
    },
    

    // 初始化导航栏相关配置
    async initNavigation() {
      try {
        // 获取导航栏高度
        this.navBarHeight = await navigationHelper.getNavigationHeight(this, {forceRefresh: false})
        
        // 获取状态栏高度
        this.statusBarHeight = navigationHelper.getStatusBarHeight()
        
        // 计算滚动视图高度
        this.calculateScrollViewHeight()

        // 注册导航相关事件
        this.setupNavigationEvents()
        
      } catch (error) {
        console.error('初始化导航栏失败:', error)
        this.setFallbackNavigationValues()
      }
    },

    // 计算滚动视图高度
    calculateScrollViewHeight() {
      const safeArea = navigationHelper.getSafeAreaInsets()
      const bottomInset = safeArea.bottom || 0
      const inputHeight = 120 // 输入区域高度
      
      this.scrollViewHeight = `calc(100vh - ${this.navBarHeight + this.statusBarHeight + inputHeight + bottomInset}px)`
    },    

    // 备用高度设置
    setFallbackNavigationValues() {
      // #ifdef MP-WEIXIN
      this.navBarHeight = 44
      this.statusBarHeight = 20
      // #endif
      
      // #ifdef H5
      this.navBarHeight = 44
      this.statusBarHeight = 0
      // #endif
      
      // #ifdef APP-PLUS
      this.navBarHeight = 88
      this.statusBarHeight = 44
      // #endif
    },    

    cleanup() {
      // 清理事件监听器
      this.safeEventHandlers.forEach((handler, eventType) => {
        this.$off(eventType, handler)
      })
      this.safeEventHandlers.clear()
      
      console.log('组件清理完成')
    },

    showError(message) {
      uni.showToast({
        title: message,
        icon: 'none',
        duration: 2000
      })
    },    


    // 初始化聊天
    initChat() {
      // 可以在这里加载历史消息
      console.log('AI聊天页面初始化')
    },

    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 显示菜单
    showMenu() {
      uni.showActionSheet({
        itemList: ['清空聊天', '导出记录', '设置', '帮助'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.clearChat()
              break
            case 1:
              this.exportChat()
              break
            case 2:
              this.showSettings()
              break
            case 3:
              this.showHelp()
              break
          }
        }
      })
    },

    // 清空聊天
    clearChat() {
      uni.showModal({
        title: '提示',
        content: '确定要清空聊天记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.$refs.chat.clearMessages()
            // 重新添加欢迎消息
            this.$refs.chat.addMessage({
              id: Date.now(),
              role: 'ai',
              type: 'text',
              content: '聊天记录已清空，有什么可以帮助您的吗？',
              timestamp: Date.now()
            })
          }
        }
      })
    },

    // 导出聊天记录
    exportChat() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    },

    // 显示设置
    showSettings() {
      uni.navigateTo({
        url: '/pages/settings/index'
      })
    },

    // 显示帮助
    showHelp() {
      const helpMessage = {
        id: Date.now(),
        role: 'ai',
        type: 'markdown',
        content: `# 使用帮助

## 基本功能
- **发送消息**: 在输入框中输入文字后发送
- **语音输入**: 点击麦克风图标进行语音输入
- **附件发送**: 点击+号可以发送图片、文件、位置

## 消息类型
- **文本消息**: 普通文字对话
- **Markdown**: 支持格式化的文档内容
- **文件**: 支持各种文件格式预览
- **音频**: 支持语音消息播放
- **视频**: 支持视频播放
- **链接**: 支持网页链接跳转
- **商品**: 支持商品卡片展示

## 操作功能
- **点赞/踩**: 对AI回复进行评价
- **复制**: 长按消息可复制内容
- **转发**: 支持消息转发功能`,
        timestamp: Date.now()
      }
      this.$refs.chat.addMessage(helpMessage)
    },

    // 用户发送消息
    onMessageSent(message) {
      console.log('用户发送消息:', message)
      
      // 使用AI服务获取回复
      // AI聊天组件内部已经集成了AI服务，这里只需要监听事件
    },

    // AI回复消息
    onAIResponse(message) {
      console.log('AI回复消息:', message)
      
      // 可以在这里处理AI回复后的逻辑
      // 比如记录对话、更新状态等
    },

    // 生成AI回复
    generateAIResponse(userMessage) {
      const responses = [
        '我理解您的需求，让我为您详细解答。',
        '感谢您的提问，这是一个很好的问题。',
        '根据您的问题，我建议您可以考虑以下几个方面：',
        '这个问题很常见，让我为您提供一些解决方案。',
        '我明白您的困惑，让我帮您分析一下。'
      ]
      
      const randomResponse = responses[Math.floor(Math.random() * responses.length)]
      
      const aiMessage = {
        id: Date.now(),
        role: 'ai',
        type: 'text',
        content: `${randomResponse}\n\n您的问题"${userMessage.content}"我已经收到，正在为您处理中...`,
        timestamp: Date.now(),
        actions: [
          { type: 'like', count: 0 },
          { type: 'dislike', count: 0 }
        ]
      }
      
      this.$refs.chat.addMessage(aiMessage)
      this.$emit('ai-response', aiMessage)
    },

    // 操作按钮点击
    onActionClick({ action, message }) {
      console.log('操作点击:', action, message)
      
      switch (action.type) {
        case 'like':
          uni.showToast({
            title: '感谢您的反馈！',
            icon: 'success'
          })
          break
        case 'dislike':
          uni.showToast({
            title: '我们会改进服务',
            icon: 'none'
          })
          break
      }
    },

    // 历史消息加载完成
    onHistoryLoaded(messages) {
      console.log('历史消息加载完成:', messages.length)
    },

    // 文件预览
    onFilePreview(message) {
      console.log('文件预览:', message)
      uni.showToast({
        title: '打开文件: ' + message.fileName,
        icon: 'none'
      })
    },

    // 音频播放
    onAudioPlay(message) {
      console.log('音频播放:', message)
    },

    // 音频暂停
    onAudioPause(message) {
      console.log('音频暂停:', message)
    },

    // 视频播放
    onVideoPlay(message) {
      console.log('视频播放:', message)
    },

    // 视频暂停
    onVideoPause(message) {
      console.log('视频暂停:', message)
    },

    // 链接打开
    onLinkOpen(message) {
      console.log('链接打开:', message)
      uni.showModal({
        title: '打开链接',
        content: `确定要打开链接：${message.url} 吗？`,
        success: (res) => {
          if (res.confirm) {
            // #ifdef H5
            window.open(message.url, '_blank')
            // #endif
            // #ifdef APP-PLUS
            plus.runtime.openURL(message.url)
            // #endif
          }
        }
      })
    },

    // 商品查看
    onProductView(message) {
      console.log('商品查看:', message)
      uni.showToast({
        title: '查看商品: ' + message.title,
        icon: 'none'
      })
    },

    // 输入内容变化
    onInputChange(value) {
      console.log('输入内容:', value)
    }
  }
}
</script>

<style lang="scss">

/* 引入图标字体 */
@import url('@/common/css/iconfont.css');

/* 页面样式 */
.ai-chat-page {
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 自定义导航头部 */
.custom-navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: white;
  border-bottom: 2rpx solid #eeeeee;
  
  .header-left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    
    .back-btn {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 32rpx;
        color: #666;
      }
    }
    
    .placeholder {
      width: 120rpx;
      height: 60rpx;
    }
  }
  
  .header-center {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20rpx;
    
    .header-title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .header-subtitle {
      font-size: 24rpx;
      color: #999;
    }
  }
  
  .header-right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    
    .menu-btn {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 32rpx;
        color: #666;
      }
    }
    
    .placeholder {
      width: 120rpx;
      height: 60rpx;
    }
  }
}

/* 聊天内容区域 */
.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}



/* 底部tabBar占位样式 */
.page-bottom {
  width: 100%;
  background-color: transparent;
}

</style>