<template>
  <div
    v-if="msg.thinking || msg.tools?.length || msg.text || !msg.done"
    class="msg-assistant"
  >
    <!-- Thinking block -->
    <ThinkingCard
      v-if="msg.thinking"
      :msg="msg"
    />

    <!-- Tool / plan cards -->
    <template v-for="(item, i) in msg.tools" :key="i">
      <ThinkingCard v-if="item.kind === 'turn_thinking'" :msg="item" />
      <ContentCard v-else-if="item.kind === 'tool' && item.name === 'content_publish'" :tool="item" />
      <details v-else-if="item.kind === 'plan'" class="plan-card">
        <summary>
          <i class="ph ph-map-trifold"></i>
          Plan
          <i class="ph ph-caret-down plan-chevron"></i>
        </summary>
        <div class="plan-body" v-html="renderMarkdown(item.text)" />
      </details>
      <ToolCard v-else :tool="item" />
    </template>

    <!-- Text response -->
    <div
      v-if="msg.text"
      ref="contentEl"
      class="msg-assistant-content"
      v-html="renderedText"
    />

    <!-- Planning / waiting indicator -->
    <div
      v-if="!msg.done && (msg.statusLabel || (!msg.thinking && !msg.tools?.length && !msg.text))"
      class="planning-indicator"
    >
      <span class="spinner"></span>
      <span v-if="msg.statusLabel" class="planning-label">{{ msg.statusLabel }}</span>
    </div>

    <!-- Streaming cursor -->
    <span v-else-if="!msg.done && msg.text" class="stream-cursor" />

    <!-- Stats + timestamp row + copy + rating -->
    <div v-if="msg.done" class="msg-meta-row">
      <span v-if="msg.elapsed_seconds != null" class="msg-meta-item">
        <i class="ph ph-timer"></i>{{ msg.elapsed_seconds }}s
      </span>
      <span v-if="msg.tool_call_count" class="msg-meta-item">
        <i class="ph ph-wrench"></i>{{ msg.tool_call_count }}
      </span>
      <span v-if="msg.token_count" class="msg-meta-item">
        <i class="ph ph-coins"></i>{{ compactNum(msg.token_count) }}
      </span>
      <span v-if="msgTime" class="msg-meta-item msg-meta-time">{{ msgTime }}</span>
      <button v-if="msg.text" class="btn-icon msg-copy-btn" :title="copied ? 'Copied!' : 'Copy'" @click="copy(msg.text)">
        <i :class="copied ? 'ph ph-check' : 'ph ph-copy'"></i>
      </button>
      <button
        v-if="canRate"
        class="btn-icon msg-rate-btn"
        :class="{ active: msg.rating === 1 }"
        title="Useful"
        @click="rate(1)"
      >
        <i class="ph ph-thumbs-up"></i>
      </button>
      <button
        v-if="canRate"
        class="btn-icon msg-rate-btn"
        :class="{ active: msg.rating === -1 }"
        title="Not useful"
        @click="rate(-1)"
      >
        <i class="ph ph-thumbs-down"></i>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick } from 'vue'
import ThinkingCard from './ThinkingCard.vue'
import ToolCard from './ToolCard.vue'
import ContentCard from './ContentCard.vue'
import { renderMarkdown, attachCopyButtons } from '@/composables/useMarkdown.js'
import { useTimeLabel } from '@/composables/useTime.js'
import { useCopy } from '@/composables/useCopy.js'
import { useChatStore } from '@/stores/chat.js'

const props = defineProps({ msg: { type: Object, required: true } })

const contentEl = ref(null)
const chat = useChatStore()

const renderedText = computed(() => renderMarkdown(props.msg.text))
const tsRef = computed(() => props.msg.done ? props.msg.time : null)
const msgTime = useTimeLabel(tsRef)
const hasMeta = computed(() =>
  props.msg.elapsed_seconds != null || props.msg.tool_call_count != null || props.msg.token_count != null
)
// Only history blocks (id `h_<index>`) are persisted and can be rated.
// Streaming / summary / error placeholders skip the rating UI.
const canRate = computed(() => typeof props.msg.id === 'string' && props.msg.id.startsWith('h_'))

const { copied, copy } = useCopy()

async function rate(value) {
  try {
    await chat.rateMessage(props.msg, value)
  } catch (err) {
    console.error('rate failed', err)
  }
}

function compactNum(n) {
  if (!n) return ''
  if (n >= 1000) return (n / 1000).toFixed(1).replace('.0', '') + 'k'
  return String(n)
}

// Attach copy buttons after render — only when message is done to avoid
// repeated DOM queries on every streaming delta.
watch(
  () => props.msg.done,
  (done) => {
    if (done) nextTick(() => attachCopyButtons(contentEl.value))
  },
  { immediate: true }
)
</script>

<style scoped>
.stream-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 2px;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.msg-rate-btn {
  opacity: 0.55;
  transition: opacity 0.15s, color 0.15s;
}
.msg-rate-btn:hover { opacity: 1; }
.msg-rate-btn.active {
  opacity: 1;
  color: var(--accent, #4ec9b0);
}
</style>