<template>
  <div
    @click="$emit('select', prompt)"
    class="admin-card group cursor-pointer transition-all duration-200 p-3 hover:shadow-md relative"
    :data-selected="selected"
  >
    <div class="flex items-center gap-3 mb-2">
      <div class="flex-1 min-w-0">
        <h4 class="font-semibold text-sm admin-text-primary truncate leading-tight">
          <template v-for="(part, idx) in highlightedName" :key="idx">
            <mark v-if="part.highlighted" class="search-highlight">{{ part.text }}</mark>
            <template v-else>{{ part.text }}</template>
          </template>
        </h4>
      </div>
      <div class="flex-shrink-0" @click.stop>
        <Switch
          :model-value="enabled"
          @click.stop="$emit('toggle-enabled', prompt.id)"
          class="admin-switch"
        />
      </div>
    </div>

    <p class="text-xs admin-text-muted line-clamp-2 leading-relaxed mb-3 min-h-[2.5rem]">
      <template v-for="(part, idx) in highlightedDescription" :key="idx">
        <mark v-if="part.highlighted" class="search-highlight">{{ part.text }}</mark>
        <template v-else>{{ part.text }}</template>
      </template>
    </p>

    <div class="flex items-center justify-between gap-2 pt-2 border-t border-border">
      <div class="flex items-center gap-1.5 flex-1 min-w-0 flex-wrap">
        <template v-if="prompt.tags && prompt.tags.length > 0">
          <span
            v-for="tag in visibleTags"
            :key="tag"
            class="text-xs px-2 py-0.5 rounded-md bg-muted text-muted-foreground truncate max-w-[80px]"
          >
            <template v-for="(part, idx) in getHighlightedTag(tag)" :key="idx">
              <mark v-if="part.highlighted" class="search-highlight">{{ part.text }}</mark>
              <template v-else>{{ part.text }}</template>
            </template>
          </span>
          <Tooltip v-if="remainingTagsCount > 0">
            <TooltipTrigger asChild>
              <span
                class="text-xs px-2 py-0.5 rounded-md bg-muted text-muted-foreground cursor-default"
              >
                +{{ remainingTagsCount }}
              </span>
            </TooltipTrigger>
            <TooltipContent hide-arrow>
              <div class="flex flex-col gap-1">
                <span v-for="tag in remainingTags" :key="tag">{{ tag }}</span>
              </div>
            </TooltipContent>
          </Tooltip>
        </template>
      </div>

      <Tooltip>
        <TooltipTrigger asChild>
          <i
            class="admin-section-icon text-lg flex-shrink-0"
            :class="prompt.isDefault ? 'dku-icon-dataiku-16' : 'dku-icon-user-16'"
          ></i>
        </TooltipTrigger>
        <TooltipContent hide-arrow>
          {{ prompt.isDefault ? 'Built in Dataiku' : prompt.createdBy || 'User' }}
        </TooltipContent>
      </Tooltip>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { Prompt } from '@/types/admin-config'
import { Switch } from '@/components/ui/switch'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { highlightText } from '@/lib/utils'

const props = defineProps<{
  prompt: Prompt
  selected: boolean
  enabled: boolean
  searchQuery?: string
}>()

defineEmits<{
  (e: 'select', prompt: Prompt): void
  (e: 'toggle-enabled', id: string): void
}>()

const MAX_VISIBLE_TAGS = 2

const visibleTags = computed(() => {
  const tags = props.prompt.tags || []
  return tags.length > MAX_VISIBLE_TAGS ? tags.slice(0, MAX_VISIBLE_TAGS) : tags
})

const remainingTags = computed(() => {
  const tags = props.prompt.tags || []
  return tags.length > MAX_VISIBLE_TAGS ? tags.slice(MAX_VISIBLE_TAGS) : []
})

const remainingTagsCount = computed(() => remainingTags.value.length)

// Highlighted text computations
const highlightedName = computed(() => highlightText(props.prompt.name, props.searchQuery || ''))

const highlightedDescription = computed(() =>
  highlightText(props.prompt.description || 'No description', props.searchQuery || '')
)

const getHighlightedTag = (tag: string) => highlightText(tag, props.searchQuery || '')
</script>
