<template>
  <view class="pet-chat-container">
    <!-- 宠物信息卡片 -->
    <view class="pet-info-card">
      <view class="pet-avatar-wrapper">
        <view class="pet-avatar">
          <text class="avatar-emoji">🐱</text>
        </view>
      </view>
      <view class="pet-info-text">
        <text class="pet-name">{{ petInfo.name || '小橘' }}</text>
        <text class="pet-status">{{ petInfo.personality || '活泼好动，喜欢撒娇' }}</text>
      </view>
      <view class="chat-status">
        <view class="status-dot"></view>
        <text class="status-text">在线</text>
      </view>
    </view>

    <!-- 聊天消息列表 -->
    <view class="chat-messages">
      <scroll-view
        class="chat-scroll"
        scroll-y
        :scroll-top="scrollTop"
        :scroll-into-view="scrollIntoView"
        scroll-with-animation
      >
      <view class="message-list">
        <!-- 消息项 -->
        <template v-for="message in messageList" :key="message.id">
          <!-- AI消息 -->
          <view class="message-item ai" v-if="message.type === 'ai'">
            <view class="message-avatar">
              <view class="pet-avatar">
                <text class="avatar-emoji">🐱</text>
              </view>
            </view>
            <view class="message-content ai">
              <view class="message-bubble ai">
                <text class="message-text">{{ message.content }}</text>
              </view>
              <text class="message-time">{{ formatTime(message.timestamp) }}</text>
            </view>
          </view>

          <!-- 用户消息 -->
          <view class="message-item user" v-if="message.type === 'user'">
            <view class="message-content user">
              <view class="message-bubble user">
                <text class="message-text">{{ message.content }}</text>
              </view>
              <text class="message-time">{{ formatTime(message.timestamp) }}</text>
            </view>
            <view class="message-avatar">
              <view class="user-avatar">
                <text class="avatar-emoji">😊</text>
              </view>
            </view>
          </view>
        </template>

        <!-- AI正在输入提示 -->
        <view class="message-item ai" v-if="aiTyping">
          <view class="message-avatar">
            <view class="pet-avatar">
              <text class="avatar-emoji">🐱</text>
            </view>
          </view>
          <view class="message-content ai">
            <view class="message-bubble ai typing-bubble">
              <view class="typing-dots">
                <view class="typing-dot"></view>
                <view class="typing-dot"></view>
                <view class="typing-dot"></view>
              </view>
            </view>
          </view>
        </view>

        <!-- 滚动锚点 -->
        <view id="scroll-bottom" style="height: 1rpx;"></view>
      </view>
      </scroll-view>
    </view>

    <!-- 输入区域 -->
    <view class="chat-input-area">
      <view class="input-container">
        <view class="input-wrapper">
          <input
            v-model="inputMessage"
            placeholder="和你的宠物说点什么..."
            class="message-input"
            @confirm="sendMessage"
            confirm-type="send"
            maxlength="500"
          />
        </view>
        <view class="send-button" @click="sendMessage" :class="{ active: inputMessage.trim() }">
          <text class="send-text">发送</text>
        </view>
      </view>
    </view>

    <!-- 聊天菜单弹窗 -->
    <u-popup v-model="showMenu" mode="bottom" border-radius="20">
      <view class="chat-menu">
        <view class="menu-title">
          <u-text text="聊天设置" type="primary" size="16" bold></u-text>
        </view>
        <view class="menu-items">
          <view class="menu-item" @click="clearHistory">
            <u-icon name="delete" size="20" color="#ff6b6b"></u-icon>
            <u-text text="清空聊天记录" size="14"></u-text>
          </view>
        </view>
        <view class="menu-cancel" @click="showMenu = false">
          <u-text text="取消" type="info" size="14"></u-text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: 'PetChatSimple',
  data() {
    return {
      petId: '',
      petInfo: {},
      messageList: [],
      inputMessage: '',
      scrollTop: 0,
      scrollIntoView: '',
      aiTyping: false,
      showMenu: false,
      inputStyle: {
        backgroundColor: '#f8f9fa',
        borderRadius: '20px',
        padding: '10px 15px'
      }
    }
  },
  onLoad(options) {
    this.petId = options.petId || '1'
    this.loadPetInfo()
    this.loadChatHistory()
  },
  methods: {
    // 加载宠物信息
    loadPetInfo() {
      const mockPets = [
        {
          id: '1',
          name: '小橘',
          breed: '橘猫',
          personality: '活泼好动，喜欢撒娇',
          avatar: '/static/cat-avatar.jpg'
        },
        {
          id: '2', 
          name: '小白',
          breed: '金毛',
          personality: '温顺友好，聪明伶俐',
          avatar: '/static/dog-avatar.jpg'
        }
      ]
      
      this.petInfo = mockPets.find(pet => pet.id === this.petId) || mockPets[0]
    },

    // 加载聊天历史
    loadChatHistory() {
      const mockMessages = [
        {
          id: '1',
          type: 'ai',
          content: `你好主人！我是${this.petInfo.name}，今天感觉特别开心呢！有什么想和我聊的吗？`,
          timestamp: Date.now() - 3600000
        },
        {
          id: '2',
          type: 'user', 
          content: '小橘今天吃饭怎么样？',
          timestamp: Date.now() - 3500000
        },
        {
          id: '3',
          type: 'ai',
          content: '今天的小鱼干特别香！我吃得可开心了，还想要更多呢～主人你也要记得按时吃饭哦！',
          timestamp: Date.now() - 3400000
        }
      ]
      
      this.messageList = mockMessages
      this.scrollToBottom()
    },

    // 发送消息
    sendMessage() {
      if (!this.inputMessage.trim()) return
      
      const userMessage = {
        id: Date.now().toString(),
        type: 'user',
        content: this.inputMessage.trim(),
        timestamp: Date.now()
      }
      
      this.messageList.push(userMessage)
      const messageContent = this.inputMessage.trim()
      this.inputMessage = ''
      
      this.scrollToBottom()
      this.simulateAIReply(messageContent)
    },

    // 模拟AI回复
    simulateAIReply(userMessage) {
      this.aiTyping = true
      this.scrollToBottom()
      
      setTimeout(() => {
        const aiResponse = this.generateAIResponse(userMessage)
        const aiMessage = {
          id: (Date.now() + 1).toString(),
          type: 'ai',
          content: aiResponse,
          timestamp: Date.now()
        }
        
        this.messageList.push(aiMessage)
        this.aiTyping = false
        this.scrollToBottom()
      }, 1500)
    },

    // 生成AI回复内容
    generateAIResponse(userMessage) {
      const petName = this.petInfo.name
      const responses = [
        `${petName}最喜欢和主人聊天了！今天过得怎么样呀？`,
        `主人好！${petName}今天心情特别好呢～`,
        `哇！主人来找我聊天了，${petName}好开心！`,
        `${petName}听不太懂，但是很开心能和主人聊天！`,
        `主人说的话${petName}都会认真听的！`
      ]
      
      return responses[Math.floor(Math.random() * responses.length)]
    },

    // 滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        // 使用scroll-into-view滚动到底部锚点
        this.scrollIntoView = 'scroll-bottom'
        // 同时设置scrollTop作为备用方案
        setTimeout(() => {
          this.scrollTop = Math.random() * 1000 + 99999 // 每次不同的值确保触发
        }, 100)
      })
    },

    // 格式化时间
    formatTime(timestamp) {
      const date = new Date(timestamp)
      const now = new Date()
      const diff = now - date
      
      if (diff < 60000) return '刚刚'
      if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
      if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
      
      return `${date.getMonth() + 1}月${date.getDate()}日`
    },

    // 清空聊天记录
    clearHistory() {
      uni.showModal({
        title: '确认清空',
        content: '确定要清空所有聊天记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.messageList = []
            this.showMenu = false
            uni.showToast({
              title: '已清空聊天记录',
              icon: 'success'
            })
          }
        }
      })
    },

    // 返回上一页
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.pet-chat-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
  position: relative;
}

.pet-info-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  margin: 20rpx 30rpx 0 30rpx;
  border-radius: 24rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
  border: 1rpx solid rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;

  .pet-avatar-wrapper {
    margin-right: 24rpx;

    .pet-avatar {
      width: 80rpx;
      height: 80rpx;
      border-radius: 40rpx;
      background: linear-gradient(135deg, #FF8A80, #FFB6C1);
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8rpx 24rpx rgba(255, 138, 128, 0.3);

      .avatar-emoji {
        font-size: 40rpx;
        color: #ffffff;
      }
    }
  }

  .pet-info-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;

    .pet-name {
      font-size: 32rpx;
      font-weight: 600;
      color: #333333;
    }

    .pet-status {
      font-size: 24rpx;
      color: #666666;
    }
  }

  .chat-status {
    display: flex;
    align-items: center;
    gap: 12rpx;

    .status-dot {
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      background: #4CAF50;
      box-shadow: 0 0 0 4rpx rgba(76, 175, 80, 0.2);
    }

    .status-text {
      font-size: 24rpx;
      color: #4CAF50;
      font-weight: 500;
    }
  }
}

.chat-messages {
  position: absolute;
  top: 140rpx; /* 宠物信息卡片的高度 */
  left: 0;
  right: 0;
  bottom: 120rpx; /* 输入框的高度 */
  width: 100%;
  overflow: hidden;
}

.chat-scroll {
  width: 100%;
  height: 100%;
}

.message-list {
  padding: 20rpx 0;
  padding-bottom: 80rpx; /* 为输入框留出空间 */
  min-height: 100%;
  box-sizing: border-box;
}

.message-item {
  display: flex;
  margin-bottom: 24rpx;
  align-items: flex-start;
}

.message-item.user {
  justify-content: flex-end;
  padding: 0 10rpx 0 80rpx; /* 右边距30rpx，左边距80rpx给AI消息留空间 */
}

.message-item.ai {
  justify-content: flex-start;
  padding: 0 80rpx 0 10rpx; /* 左边距30rpx，右边距80rpx给用户消息留空间 */
}

.message-avatar {
  width: 64rpx;
  height: 64rpx;
  margin: 0 16rpx;
  flex-shrink: 0;
}

.pet-avatar, .user-avatar {
  width: 100%;
  height: 100%;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.pet-avatar {
  background: linear-gradient(135deg, #FF8A80, #FFB6C1);
  box-shadow: 0 8rpx 24rpx rgba(255, 138, 128, 0.3);
}

.user-avatar {
  background: linear-gradient(135deg, #81C784, #A5D6A7);
  box-shadow: 0 8rpx 24rpx rgba(129, 199, 132, 0.3);
}

.avatar-emoji {
  color: #ffffff;
}

.message-content {
  display: flex;
  flex-direction: column;
  max-width: 65%;
}

.message-content.user {
  align-items: flex-end;
}

.message-content.ai {
  align-items: flex-start;
}

.message-bubble {
  padding: 20rpx 24rpx;
  border-radius: 24rpx;
  word-wrap: break-word;
  position: relative;
}

.message-bubble.ai {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10rpx);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  border-bottom-left-radius: 8rpx;
}

.message-bubble.ai.typing-bubble {
  padding: 24rpx;
}

.message-bubble.user {
  background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
  box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.3);
  border-bottom-right-radius: 8rpx;
}

.message-text {
  font-size: 28rpx;
  line-height: 1.4;
  color: #333333;
}

.message-bubble.user .message-text {
  color: #ffffff;
}

.message-time {
  margin-top: 8rpx;
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.7);
}

.message-content.user .message-time {
  text-align: right;
}

.message-content.ai .message-time {
  text-align: left;
}

.typing-dots {
  display: flex;
  gap: 8rpx;
  justify-content: center;

  .typing-dot {
    width: 12rpx;
    height: 12rpx;
    border-radius: 50%;
    background-color: #FF8A80;
    animation: typing 1.4s infinite ease-in-out;

    &:nth-child(1) { animation-delay: -0.32s; }
    &:nth-child(2) { animation-delay: -0.16s; }
  }
}

@keyframes typing {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

.chat-input-area {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20rpx);
  padding: 16rpx 20rpx;
  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
  border-top: 1rpx solid rgba(255, 255, 255, 0.2);
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
}

.input-container {
  display: flex;
  align-items: center;
  gap: 16rpx;

  .input-wrapper {
    flex: 1;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 28rpx;
    padding: 0 20rpx;
    backdrop-filter: blur(10rpx);
    border: 1rpx solid rgba(255, 255, 255, 0.3);
    height: 56rpx;
    display: flex;
    align-items: center;

    .message-input {
      width: 100%;
      height: 100%;
      font-size: 28rpx;
      color: #333333;
      border: none;
      outline: none;
      background: transparent;
    }
  }

  .send-button {
    padding: 12rpx 20rpx;
    border-radius: 24rpx;
    background: rgba(200, 200, 200, 0.5);
    transition: all 0.3s ease;
  }

  .send-button.active {
    background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
    box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
  }

  .send-button:active {
    transform: scale(0.95);
  }

  .send-text {
    font-size: 26rpx;
    color: #ffffff;
    font-weight: 500;
  }

  .send-button:not(.active) .send-text {
    color: #cccccc;
  }
}

.chat-menu {
  padding: 20px;
  
  .menu-title {
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .menu-items {
    padding: 20px 0;
  }
  
  .menu-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
  }
  
  .menu-cancel {
    text-align: center;
    padding: 15px 0;
    border-top: 1px solid #f0f0f0;
  }
}
</style>
