<template>
  <div :class="['chat-msg', `chat-msg--${message.role}`]">
    <div class="msg-bubble">
      <template v-if="message.role === 'user'">
        <div class="msg-text">{{ message.content }}</div>
      </template>
      <template v-else>
        <a-alert
          v-if="hasGuideEvidence"
          type="warning"
          show-icon
          class="msg-guide-alert"
          message="本轮结论包含办事指南结构化证据"
          description="已结合 Guide 结构化字段生成当前回答，适合核对材料、条件、收费、时限和窗口信息。"
        />
        <MarkdownRenderer :content="message.content" @reference-click="(idx: number) => emit('reference-click', idx)" />
      </template>
    </div>
    <div class="msg-time">{{ formatTime(message.timestamp) }}</div>
  </div>
</template>

/**
 * 聊天消息气泡组件
 * 用户消息靠右，助手消息靠左，无头像无名称。
 */
<script setup lang="ts">
import { computed } from 'vue'
import MarkdownRenderer from './MarkdownRenderer.vue'
import type { QAMessage } from '@/types/qa'

const props = withDefaults(
  defineProps<{
    message: QAMessage
    assistantLabel?: string
  }>(),
  {
    assistantLabel: '研究助手',
  },
)

const emit = defineEmits<{
  (e: 'reference-click', index: number): void
}>()

const hasGuideEvidence = computed(() => {
  if (props.message.role !== 'assistant' || !('references' in props.message)) return false
  const references = Array.isArray(props.message.references) ? props.message.references : []
  return references.some((reference) => reference?.source_group === 'guide')
})

function formatTime(ts: number): string {
  const d = new Date(ts)
  const now = new Date()
  const hours = d.getHours().toString().padStart(2, '0')
  const mins = d.getMinutes().toString().padStart(2, '0')
  const time = `${hours}:${mins}`

  // Same day: show time only
  if (d.toDateString() === now.toDateString()) return time
  // Same year: show month/day + time
  if (d.getFullYear() === now.getFullYear()) return `${d.getMonth() + 1}/${d.getDate()} ${time}`
  // Different year
  return `${d.getFullYear()}/${d.getMonth() + 1}/${d.getDate()} ${time}`
}
</script>

<style scoped lang="less">
.chat-msg {
  display: flex;
  flex-direction: column;
  padding: 8px 0;

  &--user {
    align-items: flex-end;

    .msg-bubble {
      background: #d6d6d68c;
      color: #1a1a18;
      // border: 1px solid #87e8de;
      border-radius: 12px 12px 2px 12px;
      max-width: 75%;
    }

    .msg-time {
      text-align: right;
    }
  }

  &--assistant {
    align-items: flex-start;

    .msg-bubble {
      background: #fff;
      color: #1a1a18;
      border: 1px solid #f0f0f0;
      border-radius: 12px 12px 12px 2px;
      max-width: 85%;
    }

    .msg-time {
      text-align: left;
    }
  }
}

.msg-bubble {
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.7;
  word-break: break-word;

  .msg-text {
    white-space: pre-wrap;
  }

  .msg-guide-alert {
    margin-bottom: 12px;
    border-radius: 8px;
    background: linear-gradient(180deg, #fff8e1 0%, #fffdf5 100%);
    border-color: #ffd666;
  }
}

.msg-time {
  font-size: 11px;
  color: #bfbfbf;
  margin-top: 4px;
  padding: 0 4px;
}
</style>
