<template>
  <div class="flex h-full w-full bg-white dark:bg-gray-900 overflow-hidden relative">

    <aside
        class="flex flex-col border-r border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-900/50 transition-all duration-300 ease-in-out overflow-hidden whitespace-nowrap h-full"
        :class="[isSidebarOpen ? 'w-80 min-w-[20rem] translate-x-0' : 'w-0 min-w-0 -translate-x-full opacity-0 border-none']"
    >
      <div class="flex items-center justify-between px-4 py-3 bg-white dark:bg-gray-900 h-14 shrink-0 relative z-20">
        <h2 class="font-semibold text-gray-800 dark:text-gray-100 flex items-center gap-2">
          <span class="text-primary-600">📚</span> Wiki
        </h2>

        <div class="flex items-center gap-1">
          <UDropdownMenu :items="rootMenuItems" :content="{ align: 'end' }">
            <UButton color="gray" variant="ghost" icon="i-heroicons-plus" size="sm" />
          </UDropdownMenu>
          <UButton @click="isSidebarOpen = false" color="gray" variant="ghost" icon="i-heroicons-chevron-double-left" size="sm" />
        </div>
      </div>

      <div class="px-3 pb-2 border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
        <UInput
            v-model="searchQuery"
            icon="i-heroicons-magnifying-glass"
            placeholder="Suchen..."
            size="sm"
            :ui="{ icon: { trailing: { pointer: '' } } }"
        >
          <template #trailing v-if="searchQuery">
            <UButton
                color="gray"
                variant="link"
                icon="i-heroicons-x-mark"
                :padded="false"
                @click="searchQuery = ''"
            />
          </template>
        </UInput>
      </div>

      <div class="flex-1 overflow-y-auto px-2 py-3 custom-scrollbar">
        <div v-if="isLoadingTree && !tree.length" class="space-y-2 px-2 mt-2">
          <USkeleton class="h-4 w-3/4" />
          <USkeleton class="h-4 w-1/2" />
        </div>

        <div v-else>
          <WikiTreeItem v-for="node in tree" :key="node.id" :item="node" />

          <div v-if="!tree.length" class="text-center text-sm text-gray-400 mt-10 px-4">
            <span v-if="searchQuery">Keine Ergebnisse gefunden.</span>
            <span v-else>Keine Seiten vorhanden.<br>Erstelle den ersten Eintrag oben rechts.</span>
          </div>
        </div>
      </div>
    </aside>

    <main class="flex-1 overflow-hidden relative bg-white dark:bg-gray-900 h-full flex flex-col min-w-0">
      <div v-if="pageId && page" class="flex flex-col h-full">
        <header class="px-8 pt-8 pb-4 flex flex-col gap-2 shrink-0">
          <div class="flex items-center gap-3 w-full">
            <UButton v-show="!isSidebarOpen" @click="isSidebarOpen = true" icon="i-heroicons-bars-3" color="gray" variant="ghost" class="-ml-2 shrink-0" />
            <input v-model="page.title" @blur="saveTitle" @keydown.enter="($event.target as HTMLInputElement).blur()" class="text-4xl font-bold text-gray-900 dark:text-white w-full outline-none bg-transparent min-w-0" placeholder="Unbenannte Seite" />
          </div>
          <div class="flex items-center gap-4 text-xs text-gray-400 h-6 ml-0.5">
            <span>{{ new Date(page.createdAt).toLocaleDateString() }}</span>
            <transition name="fade">
                  <span v-if="isSaving" class="text-primary-600 flex items-center gap-1">
                    <UIcon name="i-heroicons-arrow-path" class="w-3 h-3 animate-spin" /> Speichert...
                  </span>
              <span v-else-if="lastSaved" class="text-green-600">Gespeichert</span>
            </transition>
          </div>
        </header>
        <div class="flex-1 overflow-hidden border-t border-gray-100 dark:border-gray-800">
          <WikiEditor v-model="contentBuffer" @update:modelValue="handleContentChange" />
        </div>
      </div>
      <div v-else-if="pageId && pendingPage" class="flex h-full items-center justify-center text-gray-400">
        <div class="flex flex-col items-center gap-2">
          <UIcon name="i-heroicons-arrow-path" class="w-8 h-8 animate-spin text-gray-300" />
          <span>Lade Seite...</span>
        </div>
      </div>
      <div v-else class="flex h-full flex-col items-center justify-center text-gray-400 bg-gray-50/30 dark:bg-gray-800/30">
        <UButton v-if="!isSidebarOpen" @click="isSidebarOpen = true" icon="i-heroicons-bars-3" color="white" class="absolute left-4 top-4" />
        <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-full mb-4">
          <UIcon name="i-heroicons-document" class="w-12 h-12 text-gray-400" />
        </div>
        <p class="text-lg font-medium text-gray-600 dark:text-gray-300">Keine Seite ausgewählt</p>
      </div>
    </main>

    <UModal v-model:open="isModalOpen">
      <template #content>
        <UCard :ui="{ ring: '', divide: 'divide-y divide-gray-100 dark:divide-gray-800' }">
          <template #header>
            <div class="flex items-center justify-between">
              <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">{{ modalTitle }}</h3>
              <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isModalOpen = false" />
            </div>
          </template>
          <div v-if="modalState.type === 'create'" class="space-y-4">
            <UFormField label="Titel" name="title">
              <UInput v-model="modalState.inputValue" autofocus placeholder="z.B. Meeting Notes" @keyup.enter="handleModalConfirm" />
            </UFormField>
          </div>
          <div v-else-if="modalState.type === 'delete'">
            <p class="text-sm text-gray-500 dark:text-gray-300">
              Möchtest du <strong>"{{ modalState.targetItem?.title }}"</strong> wirklich löschen?
              <br><span v-if="modalState.targetItem?.isFolder" class="text-red-500 font-medium">Alle Unterseiten werden ebenfalls gelöscht.</span>
            </p>
          </div>
          <template #footer>
            <div class="flex justify-end gap-2">
              <UButton color="gray" variant="ghost" @click="isModalOpen = false">Abbrechen</UButton>
              <UButton :color="modalState.type === 'delete' ? 'red' : 'primary'" :loading="modalLoading" @click="handleModalConfirm">
                {{ modalState.type === 'delete' ? 'Löschen' : 'Erstellen' }}
              </UButton>
            </div>
          </template>
        </UCard>
      </template>
    </UModal>

  </div>
</template>

<script setup lang="ts">
import WikiTreeItem from '~/components/wiki/TreeItem.vue'
import WikiEditor from '~/components/wiki/WikiEditor.vue'
import type { WikiPageItem } from '~/composables/useWikiTree'

const route = useRoute()
const router = useRouter()
const { $api } = useNuxtApp()
// NEU: searchQuery hier entpacken, damit es an UInput gebunden werden kann
const { tree, isLoading: isLoadingTree, loadTree, isSidebarOpen, createItem, deleteItem, searchQuery } = useWikiTree()

// --- EDITOR LOGIC ---
const pageId = computed(() => route.params.id as string | undefined)
const isSaving = ref(false)
const lastSaved = ref(false)
const saveTimeout = ref<any>(null)
const contentBuffer = ref(null)

onMounted(() => loadTree())
watch(pageId, () => {
  if (saveTimeout.value) clearTimeout(saveTimeout.value)
  isSaving.value = false
  lastSaved.value = false
})

const { data: page, pending: pendingPage } = await useAsyncData(
    () => `wiki-page-${pageId.value}`,
    async () => {
      if (!pageId.value) return null
      const res = await $api<any>(`/api/wiki/${pageId.value}`)
      contentBuffer.value = res.content
      return res
    }, { watch: [pageId], immediate: true }
)

// --- MODAL LOGIC (Identisch wie vorher) ---
const isModalOpen = ref(false)
const modalLoading = ref(false)
const modalState = reactive({
  type: 'create' as 'create' | 'delete',
  targetItem: null as WikiPageItem | null,
  isFolderCreation: false,
  inputValue: ''
})
const modalTitle = computed(() => {
  if (modalState.type === 'delete') return 'Eintrag löschen'
  return modalState.isFolderCreation ? 'Neuen Ordner erstellen' : 'Neue Seite erstellen'
})
function openWikiAction(type: 'create' | 'delete', contextItem: WikiPageItem | null, isFolder = false) {
  modalState.type = type
  modalState.targetItem = contextItem
  modalState.isFolderCreation = isFolder
  modalState.inputValue = ''
  isModalOpen.value = true
}
provide('openWikiAction', openWikiAction)

async function handleModalConfirm() {
  modalLoading.value = true
  try {
    if (modalState.type === 'create') {
      if (!modalState.inputValue.trim()) return
      const parentId = modalState.targetItem ? modalState.targetItem.id : null
      const newItem = await createItem(modalState.inputValue, parentId, modalState.isFolderCreation)
      if (newItem && !modalState.isFolderCreation) router.push(`/wiki/${newItem.id}`)
    } else if (modalState.type === 'delete' && modalState.targetItem) {
      const success = await deleteItem(modalState.targetItem.id)
      if (success && pageId.value === modalState.targetItem.id) router.push('/wiki')
    }
    isModalOpen.value = false
  } catch (e) { console.error(e) } finally { modalLoading.value = false }
}

const rootMenuItems = [
  [{ label: 'Neue Seite', icon: 'i-heroicons-document-plus', onSelect: () => openWikiAction('create', null, false) }],
  [{ label: 'Neuer Ordner', icon: 'i-heroicons-folder-plus', onSelect: () => openWikiAction('create', null, true) }]
]

// --- EDITOR ACTIONS (Identisch wie vorher) ---
async function saveTitle() {
  if (!page.value || !pageId.value) return
  isSaving.value = true
  try {
    await $api(`/api/wiki/${pageId.value}`, { method: 'PATCH', body: { title: page.value.title } })
    loadTree()
    showSavedFeedback()
  } finally { isSaving.value = false }
}
function handleContentChange(newContent: any) {
  contentBuffer.value = newContent
  isSaving.value = true
  lastSaved.value = false
  if (saveTimeout.value) clearTimeout(saveTimeout.value)
  saveTimeout.value = setTimeout(async () => {
    if (!pageId.value) return
    try {
      await $api(`/api/wiki/${pageId.value}`, { method: 'PATCH', body: { content: contentBuffer.value } })
      showSavedFeedback()
    } catch (e) { console.error(e) } finally { isSaving.value = false }
  }, 1000)
}
function showSavedFeedback() {
  lastSaved.value = true
  setTimeout(() => { lastSaved.value = false }, 2000)
}
</script>

<style scoped>
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb { background-color: #e5e7eb; border-radius: 10px; }
:deep(.dark) .custom-scrollbar::-webkit-scrollbar-thumb { background-color: #374151; }
</style>
