<script setup lang="ts">
import { useFormatters } from '@/composables/useFormatters'
import { ROW_HEIGHT, AXIS_HEIGHT, type TimelineItem } from '@/types/timeline'

const props = defineProps<{
  item: TimelineItem
  index: number
  timeScale: any
  zoomedWidth: number
  isSelected: boolean
  isDimmed: boolean
  isCollapsed: boolean
}>()

const emit = defineEmits<{
  (e: 'toggle-collapse', id: string): void
  (e: 'select-node', id: string): void
}>()

const { formatMillis } = useFormatters()

/**
 * Calculates and formats the duration of an item.
 */
function getDuration(item: TimelineItem) {
  const diff = item.end.getTime() - item.start.getTime()
  if (diff < 1) return ''
  return formatMillis(diff)
}
</script>

<template>
  <g
    class="group/row"
    :transform="`translate(0, ${index * ROW_HEIGHT + AXIS_HEIGHT + 5})`"
    @click="emit('select-node', item.id)"
  >
    <!-- Row Hover Background -->
    <rect
      x="0"
      y="0"
      :width="zoomedWidth"
      :height="ROW_HEIGHT"
      fill="transparent"
      class="group-hover/row:fill-primary/10 transition-colors cursor-pointer"
      :class="isSelected ? 'fill-primary/20' : ''"
    />

    <!-- Duration Bar (or Point) -->
    <circle
      v-if="item.end.getTime() === item.start.getTime()"
      :cx="timeScale(item.start)"
      cy="16"
      r="2"
      :fill="item.color"
      :fill-opacity="isSelected ? 0.75 : 0.5"
      :stroke="item.color"
      stroke-width="2"
      class="transition-opacity duration-300"
      :class="{ 'opacity-100': !isDimmed, 'opacity-40': isDimmed }"
    />
    <rect
      v-else
      :x="timeScale(item.start)"
      y="4"
      :width="Math.max(timeScale(item.end) - timeScale(item.start), 2)"
      height="24"
      rx="4"
      :fill="item.color"
      :fill-opacity="isSelected ? 0.75 : 0.25"
      :stroke="item.color"
      stroke-width="1"
      class="transition-opacity duration-300"
    />

    <!-- Label and Duration Text (foreignObject for HTML text styling) -->
    <foreignObject
      :x="
        timeScale(item.start) > zoomedWidth * 0.8
          ? timeScale(item.start) - 300
          : timeScale(item.start)
      "
      y="4"
      :width="
        timeScale(item.start) > zoomedWidth * 0.8
          ? 290
          : Math.max(zoomedWidth - timeScale(item.start), 0)
      "
      height="24"
      class="pointer-events-none"
    >
      <div
        class="h-full flex items-center px-2 gap-1.5 text-xs text-white overflow-hidden"
        :class="timeScale(item.start) > zoomedWidth * 0.8 ? 'justify-end flex-row-reverse' : ''"
      >
        <!-- Collapse/Expand Toggle -->
        <button
          v-if="item.hasChildren"
          class="pointer-events-auto hover:bg-black/20 rounded p-0.5 transition-colors cursor-pointer"
          @click.stop="emit('toggle-collapse', item.id)"
        >
          <i
            class="dku-icon-chevron-right-12 text-black/70 dark:text-white/70 transition-transform duration-200"
            :class="{ 'rotate-90': !isCollapsed }"
          />
        </button>

        <!-- Icon -->
        <i
          :class="[`${item.icon}-16`, 'flex-none opacity-90 text-black/90 dark:text-white/80']"
          :style="{ color: isSelected ? '' : item.color }"
        />

        <span class="text-black/90 dark:text-white/90 truncate">
          {{ item.label }}
        </span>
        <span class="text-black/80 dark:text-white/80 text-[10px] line-clamp-1 font-mono">
          {{ getDuration(item) }}
        </span>
      </div>
    </foreignObject>
  </g>
</template>
