<script setup>
import { onMounted, ref } from 'vue'

const userMessage = ref('')
const messages = ref([
  { sender: 'ai', text: 'Welcome! How can I assist you today?' },
])

function sendMessage() {
  if (userMessage.value.trim() === '')
    return

  messages.value.push({ sender: 'user', text: userMessage.value })

  // Simulate AI response (for example purposes)
  setTimeout(() => {
    messages.value.push({
      sender: 'ai',
      text: `I'm here to assist with your questions: "${userMessage.value}"`,
    })
  }, 1000)

  userMessage.value = ''
}
</script>

<template>
  <view class="chat-page mx-4 flex flex-col rounded-xl shadow-lg">
    <view class="chat-window flex-1 overflow-auto border p-4">
      <view v-for="(message, index) in messages" :key="index" class="mb-2">
        <view
          v-if="message.sender === 'ai'"
          class="inline-block max-w-max rounded-xl bg-white p-2 text-left text-green-600 font-medium shadow-md"
        >
          <span>AI:</span> {{ message.text }}
        </view>
        <view
          v-else
          class="ml-auto inline-block max-w-max rounded-xl from-purple-400 via-pink-500 to-red-500 bg-gradient-to-r p-2 text-right text-white font-medium shadow-md"
        >
          <span>User:</span> {{ message.text }}
        </view>
      </view>
    </view>
    <view class="input-area mx-2 flex items-center gap-2 p-4">
      <wd-input v-model="userMessage" placeholder="Type your message..." class="flex-1" size="large" />
      <wd-button custom-class="shadow" type="primary" @click="sendMessage">
        发送
      </wd-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.chat-page {
  // #ifdef H5
  height: calc(100vh - 144px);
  // #endif

  // #ifdef APP-PLUS || MP-WEIXIN
  height: calc(100vh - 188px);
  // #endif

}

// .chat-window {
//   flex-grow: 1;
//   overflow-y: auto;
//   overflow-x: hidden;
// }

// .input-area {
//   flex-shrink: 0;
// }
</style>

<route lang="json">
{
  "layout": "home",
  "style": {
    "navigationStyle": "custom"
  }
}
</route>
