<template>
  <view class="chat-row" :class="{ 'chat-left': showLeft, 'chat-right': showRight }">
    <view class="bubble" :class="bubbleClass">
      <text class="bubble-content">{{ msg.content }}</text>
      <text class="bubble-time">{{ msg.time }}</text>
    </view>
  </view>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'ChatBubble',
  props: {
    msg: { type: Object, required: true },
    viewer: { type: String, default: 'customer' }  // 'customer' or 'staff'
  },
  setup(props) {
    const showLeft = computed(() => {
      if (props.msg.senderType === 'system') return false
      // customer viewer: staff messages on left, customer on right
      // staff viewer: customer messages on left, staff on right
      if (props.viewer === 'staff') return props.msg.senderType === 'customer'
      return props.msg.senderType === 'staff'
    })
    const showRight = computed(() => {
      if (props.msg.senderType === 'system') return false
      if (props.viewer === 'staff') return props.msg.senderType === 'staff'
      return props.msg.senderType === 'customer'
    })
    const bubbleClass = computed(() => ({
      'bubble-left': showLeft.value,
      'bubble-right': showRight.value,
      'bubble-system': props.msg.senderType === 'system',
    }))
    return { showLeft, showRight, bubbleClass }
  }
}
</script>

<style scoped>
.chat-row{display:flex;padding:12rpx 20rpx}
.chat-left{justify-content:flex-start}
.chat-right{justify-content:flex-end}
.bubble{max-width:70%;padding:16rpx 24rpx;border-radius:20rpx;font-size:28rpx}
.bubble-left{background:var(--bg-card);border:1px solid var(--border)}
.bubble-left .bubble-content{color:var(--text)}
.bubble-right{background:linear-gradient(135deg,var(--orange),#FF8C5A)}
.bubble-right .bubble-content{color:#fff}
.bubble-system{background:rgba(74,144,217,.15);border:1px solid rgba(74,144,217,.3);max-width:90%;margin:0 auto}
.bubble-system .bubble-content{color:var(--blue);font-size:24rpx}
.bubble-time{font-size:20rpx;color:var(--text-muted);display:block;text-align:right;margin-top:8rpx}
</style>
