<template>
  <div class="org-node">
    <div class="flex items-start space-x-3 p-2 hover:bg-gray-50 rounded">
      <button 
        v-if="node.children.length > 0"
        @click="toggleExpanded"
        class="mt-1 text-gray-400 hover:text-gray-600"
      >
        {{ isExpanded ? '▼' : '▶' }}
      </button>
      <div class="flex-1">
        <div class="flex items-center space-x-2 mb-1">
          <span class="text-gray-400">{{ '*'.repeat(node.level) }}</span>
          <input 
            v-if="isEditing"
            v-model="editTitle"
            @blur="saveTitle"
            @keyup.enter="saveTitle"
            class="font-semibold bg-transparent border-b border-gray-300 focus:outline-none focus:border-blue-500"
          />
          <h3 
            v-else
            @dblclick="startEditing"
            class="font-semibold cursor-pointer hover:text-blue-600"
          >
            {{ node.title }}
          </h3>
          <div v-if="node.tags" class="flex space-x-1">
            <span 
              v-for="tag in node.tags"
              :key="tag"
              class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded"
            >
              {{ tag }}
            </span>
          </div>
        </div>
        
        <div v-if="node.content" class="text-sm text-gray-600 ml-4">
          <textarea
            v-if="isEditingContent"
            v-model="editContent"
            @blur="saveContent"
            class="w-full bg-transparent border border-gray-300 rounded p-2 focus:outline-none focus:border-blue-500"
            rows="3"
          />
          <pre 
            v-else
            @dblclick="startEditingContent"
            class="cursor-pointer hover:bg-gray-100 p-1 rounded"
          >{{ node.content }}</pre>
        </div>
      </div>
    </div>
    
    <div v-if="isExpanded && node.children.length > 0" class="ml-6 border-l-2 border-gray-200">
      <OrgNode 
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        @update="$emit('update', $event)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { OrgNode as IOrgNode } from '@/types/org'

const props = defineProps<{
  node: IOrgNode
}>()

const emit = defineEmits<{
  update: [node: IOrgNode]
}>()

const isExpanded = ref(true)
const isEditing = ref(false)
const isEditingContent = ref(false)
const editTitle = ref(props.node.title)
const editContent = ref(props.node.content)

function toggleExpanded() {
  isExpanded.value = !isExpanded.value
}

function startEditing() {
  isEditing.value = true
  editTitle.value = props.node.title
}

function saveTitle() {
  isEditing.value = false
  if (editTitle.value !== props.node.title) {
    emit('update', { ...props.node, title: editTitle.value })
  }
}

function startEditingContent() {
  isEditingContent.value = true
  editContent.value = props.node.content
}

function saveContent() {
  isEditingContent.value = false
  if (editContent.value !== props.node.content) {
    emit('update', { ...props.node, content: editContent.value })
  }
}
</script>