<template>
  <div
    class="relative flex items-center gap-2 bg-white border rounded-lg p-2 text-sm group"
    :class="[fullWidth ? 'w-full' : 'w-50', { 'hover:bg-gray-50': clickable && !loading }]"
  >
    <div
      class="flex items-center gap-2 w-50 rounded transition-colors -m-2 p-2 flex-1"
      :class="{ 'opacity-70': loading }"
    >
      <div
        v-if="false"
        class="min-w-10 min-h-10 rounded-lg flex items-center justify-center"
        :class="{
          'bg-gray-400': loading,
          [getAttachmentBackgroundColor(attachment.document_name)]: !loading,
        }"
      >
        <Loader2 v-if="loading" class="animate-spin text-white" />
        <i v-else :class="[getAttachmentIcon(attachment.document_name, 16), 'text-white']"></i>
      </div>

      <div class="flex flex-col min-w-0 justify-between">
        <span class="truncate font-semibold pr-3 leading-none mb-1.5">{{
          getFileNameWithoutExtension(attachment.document_name)
        }}</span>
        <span v-if="false" class="text-xs text-foreground-alpha-light-70">{{
          getAttachmentTypeLabel(attachment.document_name)
        }}</span>

        <span v-else class="text-xs flex items-center gap-1.5 text-foreground-alpha-light-70">
          <span
            class="w-5 h-5 rounded flex items-center justify-center flex-shrink-0"
            :class="{
              'bg-gray-400': loading,
              [getAttachmentBackgroundColor(attachment.document_name)]: !loading,
            }"
          >
            <Loader2 v-if="loading" class="animate-spin text-white w-3 h-3" />
            <i v-else :class="[getAttachmentIcon(attachment.document_name, 12), 'text-white']"></i>
          </span>
          {{ getAttachmentTypeLabel(attachment.document_name) }}
        </span>
      </div>
    </div>

    <Button
      v-if="clickable && !loading"
      @click.stop="$emit('download')"
      class="absolute right-2 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-all duration-200 z-10 px-2 py-1"
      variant="outline"
    >
      <i class="dku-icon-arrow-download-16"></i>
    </Button>

    <button
      v-if="showDismiss"
      @click.stop="$emit('remove')"
      class="absolute top-1 right-1 text-gray-500 hover:text-red-500 transition-colors p-0.5 rounded-full border border-border bg-white z-20"
    >
      <i class="dku-icon-dismiss-12"></i>
    </button>
  </div>
</template>

<script setup lang="ts">
import type { MessageAttachment } from '@/types/messages'
import { Loader2 } from 'lucide-vue-next'
import { getAttachmentIcon } from '@/lib/fileUtils'
import { Button } from './ui/button'

defineProps<{
  attachment: MessageAttachment
  showDismiss?: boolean
  clickable?: boolean
  loading?: boolean
  fullWidth?: boolean
}>()

defineEmits<{
  (e: 'remove'): void
  (e: 'download'): void
}>()

function getFileNameWithoutExtension(documentName: string): string {
  const lastDotIndex = documentName.lastIndexOf('.')
  if (lastDotIndex === -1) return documentName
  return documentName.substring(0, lastDotIndex)
}

function isImage(documentName: string): boolean {
  const extension = documentName.split('.').pop()?.toLowerCase()
  return ['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg'].includes(extension || '')
}

function getAttachmentTypeLabel(documentName: string): string {
  const extension = documentName.split('.').pop()?.toLowerCase()

  if (isImage(documentName)) {
    return extension?.toLowerCase() || 'image'
  }

  switch (extension) {
    case 'pdf':
      return 'PDF'
    case 'docx':
    case 'doc':
    case 'txt':
    case 'md':
      return 'Document'
    default:
      return extension?.toUpperCase() || 'File'
  }
}

function getAttachmentBackgroundColor(documentName: string): string {
  const extension = documentName.split('.').pop()?.toLowerCase()

  switch (extension) {
    case 'pdf':
    case 'pptx':
      return 'bg-red-500'
    case 'docx':
    case 'doc':
    case 'txt':
    case 'md':
    case 'html':
      return 'bg-blue-500'
    case 'png':
    case 'jpg':
    case 'jpeg':
      return 'bg-black/80'
    case 'csv':
      return 'bg-green-500'
    default:
      return 'bg-gray-400'
  }
}
</script>
