<script setup lang="ts">
import type {PropType} from 'vue'
import type {ChatSession} from '~/typings/llm'

const props = defineProps({
  active: {
    type: Boolean,
    default: false,
  },
  chatSession: {
    type: Object as PropType<ChatSession>,
    required: true,
  },
})
const emit = defineEmits<{
  (e: 'remove', session: ChatSession): void
}>()

const dayjs = useDayjs()
</script>

<template>
  <div
      class="chat-card group"
      :class="{'active': active}"
      :title="chatSession.subject"
  >
    <div class="chat-card-title">
      <Icon
          v-if="!!chatSession.assistant"
          name="i-tabler-masks-theater"
          class="text-lg -mt-1 mr-1"
      />
      <span>
        {{ !!chatSession.assistant ? chatSession.assistant.tpl_name : chatSession.subject }}
      </span>
    </div>
    <div class="chat-card-meta">
      <div>{{ chatSession.messages.length }}条对话</div>
      <div>{{ dayjs(chatSession.create_at * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
    </div>
    <div
        @click.stop="emit('remove', chatSession)"
        class="chat-card-remove-btn text-neutral-400 group-hover:opacity-100 md:group-hover:-translate-x-0.5"
    >
      <UIcon name="i-tabler-trash"/>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chat-card {
  @apply flex flex-col gap-2 bg-white dark:bg-neutral-800 px-4 py-3 rounded-lg relative border-2 border-transparent shadow-card;
  @apply transition-none duration-150 hover:bg-cyan-300/5;
  @apply select-none;

  &.active {
    @apply border-cyan-500;
  }

  &-title {
    @apply w-[calc(100%-16px)] text-sm font-medium text-ellipsis text-nowrap overflow-x-hidden;
  }

  &-meta {
    @apply flex justify-between items-center text-xs text-neutral-400;
  }

  &-remove-btn {
    @apply absolute top-0.5 right-0 md:opacity-0;
    @apply transition duration-300 hover:text-red-400;
    @apply cursor-pointer;
  }
}
</style>