<template>
  <div class="fixed inset-0 z-50 flex">
    <!-- backdrop -->
    <div class="fixed inset-0 bg-black opacity-50" @click="$emit('close')"></div>

    <div
      class="relative ml-auto h-full w-full sm:w-80 md:w-96 lg:w-[32rem] bg-white shadow-lg flex flex-col"
    >
      <div class="flex w-full h-14 p-4 justify-between items-center">
        <div class="flex items-center gap-2">
          <span class="font-semibold text-foreground">Files added</span>
          <!-- Extraction Mode Indicator -->
          <Tooltip v-if="extractionMode">
            <TooltipTrigger as-child>
              <span
                :class="[
                  'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium cursor-default',
                  isTextMode && quotaExceeded
                    ? 'bg-orange-100 text-orange-900'
                    : 'bg-blue-100 text-blue-900',
                ]"
              >
                <i
                  :class="
                    isTextMode && quotaExceeded
                      ? 'dku-icon-warning-outline-16'
                      : 'dku-icon-info-circle-outline-16'
                  "
                  class="text-sm"
                ></i>
                {{ isTextMode ? 'Text Mode' : 'Vision Mode' }}
              </span>
            </TooltipTrigger>
            <TooltipContent side="bottom" class="max-w-xs">
              <p v-if="isTextMode && quotaExceeded">
                Maximum documents reached. The system is now operating in Text Mode. Responses will
                be based solely on text and may lack detail because visual context is unavailable
                until the document limit resets.
              </p>
              <p v-else-if="isTextMode">
                Documents are processed in Text Mode. Responses are based on text content only.
                Visual context from images and screenshots is not available in this mode.
              </p>
              <p v-else>
                Documents are processed with visual context. Images and screenshots are analyzed for
                richer understanding.
              </p>
            </TooltipContent>
          </Tooltip>
        </div>
        <Button
          variant="ghost"
          size="icon"
          class="shrink-0"
          aria-label="Close panel"
          @click="$emit('close')"
        >
          <i class="dku-icon-dismiss-16"></i>
        </Button>
      </div>

      <!-- Attachments list -->
      <div class="flex-1 overflow-y-auto p-4 pt-0">
        <p v-if="!attachments.length" class="text-sm text-gray-500">
          No processed files in this conversation.
        </p>

        <div v-else class="flex flex-col gap-3">
          <FileAttachment
            v-for="attachment in attachments"
            :key="attachment.id || attachment.document_path"
            :attachment="attachment"
            :clickable="true"
            @download="downloadAttachment(attachment)"
            fullWidth
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip'
import FileAttachment from './FileAttachment.vue'
import { downloadAttachment } from '@/lib/downloadUtils'
import type { MessageAttachment } from '@/types/messages'
import { ExtractionMode } from '@/types/admin-config'

const props = defineProps<{
  attachments: MessageAttachment[]
  extractionMode?: string | null
  quotaExceeded?: boolean
}>()

defineEmits(['close'])

const isTextMode = computed(() => props.extractionMode === ExtractionMode.PagesText)
</script>
