<template>
  <div :class="['flex', message.role === 'user' ? 'justify-end' : 'justify-start']">
    <div
      :class="[
        'rounded-lg p-3 max-w-2xl',
        message.role === 'user' ? 'bg-blue-50' : 'bg-neutral-50',
      ]"
    >
      <div
        v-if="message.thinking"
        class="mb-2"
      >
        <NCollapse>
          <NCollapseItem
            title="🧠 模型思考过程"
            name="thinking"
          >
            <pre class="text-xs whitespace-pre-wrap">{{ message.thinking }}</pre>
          </NCollapseItem>
        </NCollapse>
      </div>
      <div
        v-if="message.status === 'pending' && !message.content"
        class="text-neutral-400"
      >
        …
      </div>
      <div
        v-else
        class="space-y-3"
      >
        <!-- eslint-disable vue/no-v-html -->
        <div
          v-if="hasMarkdown"
          class="prose prose-sm max-w-none"
          v-html="rendered"
        />
        <!-- eslint-enable vue/no-v-html -->
        <QuestionCard
          v-if="parsed.question && message.role === 'assistant'"
          :question="parsed.question"
          :disabled="answerDisabled || message.status !== 'ok'"
          @answer="emit('answer-question', $event)"
        />
      </div>
      <div
        v-if="message.status === 'error'"
        class="text-red-500 text-xs mt-1 flex items-center gap-2"
      >
        <span>⚠️ {{ message.error_message }}</span>
        <NButton
          size="tiny"
          @click="emit('retry', message.id)"
        >
          重试
        </NButton>
      </div>
      <div
        v-if="message.status === 'cancelled'"
        class="text-orange-500 text-xs mt-1 flex items-center gap-2"
      >
        <span>已取消</span>
        <NButton
          size="tiny"
          @click="emit('retry', message.id)"
        >
          重试
        </NButton>
      </div>
      <div
        v-if="message.prompt_tokens"
        class="text-xs text-neutral-400 mt-1"
      >
        in {{ message.prompt_tokens }} · out {{ message.completion_tokens ?? 0 }}
        <span v-if="message.thinking_tokens"> · think {{ message.thinking_tokens }}</span>
      </div>
      <div
        v-if="canSave"
        class="mt-2"
      >
        <NButton
          size="tiny"
          secondary
          @click="emit('save', message.id)"
        >
          保存为产物
        </NButton>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { NCollapse, NCollapseItem, NButton } from 'naive-ui'
import type { ChatMessage } from '@/api/chat'
import { md } from '@/utils/markdown'
import { parseInteractiveMessage, type InteractiveQuestionAnswer } from '@/utils/interactiveMessage'
import QuestionCard from './QuestionCard.vue'
// savable：仅需求阶段对话面板传 true，对成功的 assistant 回复显示「保存为产物」。
const props = defineProps<{ message: ChatMessage; savable?: boolean; answerDisabled?: boolean }>()
const emit = defineEmits<{
  retry: [id: number]
  save: [id: number]
  'answer-question': [payload: InteractiveQuestionAnswer]
}>()
const parsed = computed(() => parseInteractiveMessage(props.message.content))
const hasMarkdown = computed(() => parsed.value.markdown.trim() !== '')
const rendered = computed(() => md.render(parsed.value.markdown))
const canSave = computed(
  () =>
    props.savable === true &&
    props.message.role === 'assistant' &&
    props.message.status === 'ok' &&
    parsed.value.question == null &&
    props.message.content.trim() !== '',
)
</script>
