<script setup lang="ts">
import { computed } from 'vue'
import { useSessionTreeStore } from '../stores/sessionTree'
import { useConnectionsStore } from '../stores/connections'
import type { SessionTreeNode as TreeNode } from '../types/sessionTree'
import { Folder, FolderOpen, ChevronRight, ChevronDown, Server } from 'lucide-vue-next'

interface Props {
  node: TreeNode
  level: number
}

const props = defineProps<Props>()
const emit = defineEmits<{
  click: [nodeId: string]
}>()

const treeStore = useSessionTreeStore()
const connectionsStore = useConnectionsStore()

const children = computed(() => treeStore.getChildren(props.node.id))
const isSelected = computed(() => treeStore.selectedNodeId === props.node.id)
const isExpanded = computed(() => props.node.expanded)

const connection = computed(() => {
  if (props.node.type === 'connection' && props.node.connectionId) {
    return connectionsStore.connections.find(c => c.id === props.node.connectionId)
  }
  return null
})

function handleClick() {
  emit('click', props.node.id)
}
</script>

<template>
  <div>
    <div
      class="flex items-center gap-1.5 px-2 py-1.5 rounded cursor-pointer hover:bg-slate-800 transition-colors"
      :class="{
        'bg-slate-800 text-cyan-300': isSelected,
        'text-slate-300': !isSelected,
      }"
      :style="{ paddingLeft: `${level * 16 + 8}px` }"
      @click="handleClick"
    >
      <button
        v-if="node.type === 'folder'"
        class="w-4 h-4 flex items-center justify-center"
        @click.stop="treeStore.toggleExpanded(node.id)"
      >
        <ChevronDown v-if="isExpanded" class="w-3.5 h-3.5" />
        <ChevronRight v-else class="w-3.5 h-3.5" />
      </button>
      <div v-else class="w-4" />

      <component
        :is="node.type === 'folder' ? (isExpanded ? FolderOpen : Folder) : Server"
        class="w-4 h-4 flex-shrink-0"
        :class="{
          'text-amber-400': node.type === 'folder',
          'text-cyan-400': node.type === 'connection',
        }"
      />

      <span class="text-sm truncate flex-1">{{ node.name }}</span>

      <span
        v-if="connection"
        class="w-2 h-2 rounded-full bg-slate-600"
      />
    </div>

    <template v-if="node.type === 'folder' && isExpanded">
      <SessionTreeNode
        v-for="child in children"
        :key="child.id"
        :node="child"
        :level="level + 1"
        @click="emit('click', $event)"
      />
    </template>
  </div>
</template>
