<template>
  <div class="flex-1 min-h-0 overflow-y-auto scrollbar-hide p-3 space-y-1">
    <div v-if="promptPairs.length === 0" class="flex items-center justify-center h-full">
      <p class="text-xs" :class="isDark ? 'text-white/30' : 'text-gray-400'">
        No prompts yet
      </p>
    </div>

    <button
      v-for="(pair, i) in promptPairs"
      :key="pair.userMsg.id"
      class="w-full text-left px-3 py-2.5 rounded-xl transition-all duration-150 group"
      :class="[
        activeIndex === i
          ? 'path-glass-bubble-user'
          : isDark
            ? 'hover:bg-white/5'
            : 'hover:bg-black/3'
      ]"
      @click="selectPrompt(pair, i)"
    >
      <p class="text-sm leading-snug truncate"
         :class="isDark ? 'text-white/90' : 'text-gray-800'">
        {{ pair.userMsg.content }}
      </p>
      <div class="flex items-center gap-1.5 mt-1">
        <span class="text-[10px]"
              :class="isDark ? 'text-white/30' : 'text-gray-400'">
          {{ formatTime(pair.userMsg.timestamp) }}
        </span>
        <span
          v-for="badge in pair.badges"
          :key="badge"
          class="text-[9px] px-1.5 py-0.5 rounded-md"
          :class="isDark
            ? 'bg-white/8 text-white/40'
            : 'bg-black/5 text-gray-500'"
        >
          {{ badge }}
        </span>
      </div>
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import type { Message } from '@aiui/core/types/message'
import { useTheme } from '@/composables/useTheme'
import { useContentPanel } from '@/composables/useContentPanel'

interface PromptPair {
  userMsg: Message
  assistantMsg: Message | null
  badges: string[]
}

const props = defineProps<{
  messages: Message[]
}>()

const emit = defineEmits<{
  select: [userMsg: Message, assistantMsg: Message | null]
}>()

const { isDark } = useTheme()
const { getContextualInlineContent } = useContentPanel()
const activeIndex = ref<number | null>(null)

const promptPairs = computed<PromptPair[]>(() => {
  const pairs: PromptPair[] = []
  const msgs = props.messages

  for (let i = 0; i < msgs.length; i++) {
    if (msgs[i].role !== 'user') continue

    const userMsg = msgs[i]
    const assistantMsg = (i + 1 < msgs.length && msgs[i + 1].role === 'assistant')
      ? msgs[i + 1]
      : null

    const badges: string[] = []
    if (assistantMsg && assistantMsg.content) {
      const content = getContextualInlineContent(
        assistantMsg.content,
        userMsg.content,
        assistantMsg.webResults ?? [],
      )
      if (content.films.length > 0) badges.push('Films')
      if ((content.books?.length ?? 0) > 0) badges.push('Books')
      if ((content.tvSeries?.length ?? 0) > 0) badges.push('TV')
      if (content.songs.length > 0) badges.push('Music')
      if (content.podcasts.length > 0) badges.push('Podcasts')
      if (content.magazineSections.length > 0) badges.push('Magazine')
      if ((content.newsLinks?.length ?? 0) > 0) badges.push('News')
      if ((content.websitesLinks?.length ?? 0) > 0) badges.push('Web')
    }

    pairs.push({ userMsg, assistantMsg, badges })
  }

  return pairs
})

function selectPrompt(pair: PromptPair, index: number) {
  activeIndex.value = index
  emit('select', pair.userMsg, pair.assistantMsg)
}

function formatTime(ts: number): string {
  return new Date(ts).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
}
</script>
