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

    <div v-if="editor" class="border-b border-gray-100 dark:border-gray-800 px-4 py-2 flex flex-wrap gap-1 items-center sticky top-0 bg-white dark:bg-gray-900 z-20 shadow-sm select-none">

      <div class="flex gap-0.5 border-r border-gray-200 dark:border-gray-700 pr-2 mr-2">
        <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" class="toolbar-btn font-bold">B</button>
        <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" class="toolbar-btn italic">I</button>
        <button @click="editor.chain().focus().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" class="toolbar-btn line-through">S</button>
        <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }" class="toolbar-btn text-yellow-500 font-bold">M</button>
      </div>

      <div class="flex gap-0.5 border-r border-gray-200 dark:border-gray-700 pr-2 mr-2">
        <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" class="toolbar-btn">H1</button>
        <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" class="toolbar-btn">H2</button>
        <button @click="editor.chain().focus().toggleCodeBlock().run()" :class="{ 'is-active': editor.isActive('codeBlock') }" class="toolbar-btn font-mono text-xs">&lt;/&gt;</button>
      </div>

      <div class="flex gap-0.5 border-r border-gray-200 dark:border-gray-700 pr-2 mr-2">
        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" class="toolbar-btn">•</button>
        <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }" class="toolbar-btn">☑</button>
      </div>

      <div class="flex gap-0.5 items-center">
        <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()" class="toolbar-btn">▦</button>
        <button @click="addVideo" class="toolbar-btn text-red-600">
          <UIcon name="i-heroicons-video-camera" class="w-4 h-4" />
        </button>
      </div>
    </div>

    <BubbleMenu
        v-if="editor"
        :editor="editor"
        :tippy-options="{ duration: 200, placement: 'top-start', animation: 'scale' }"
        class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl flex items-center p-1 gap-1 z-50"
    >
      <button @click="editor.chain().focus().toggleBold().run()" :class="{ 'is-active': editor.isActive('bold') }" class="bubble-btn font-bold">B</button>
      <button @click="editor.chain().focus().toggleItalic().run()" :class="{ 'is-active': editor.isActive('italic') }" class="bubble-btn italic">I</button>
      <button @click="editor.chain().focus().toggleHighlight().run()" :class="{ 'is-active': editor.isActive('highlight') }" class="bubble-btn text-yellow-500 font-bold">M</button>
      <div class="w-px h-4 bg-gray-200 mx-1"></div>
      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" class="bubble-btn font-bold text-sm">H2</button>
      <div class="w-px h-4 bg-gray-200 mx-1"></div>
      <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }" class="bubble-btn text-sm">Link</button>
    </BubbleMenu>

    <FloatingMenu
        v-if="editor"
        :editor="editor"
        :tippy-options="{ duration: 100, placement: 'right-start' }"
        class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg flex items-center p-1 gap-1 -ml-4"
    >
      <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" class="bubble-btn text-xs font-bold">H1</button>
      <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" class="bubble-btn text-xs font-bold">H2</button>
      <button @click="editor.chain().focus().toggleBulletList().run()" class="bubble-btn">•</button>
      <button @click="editor.chain().focus().toggleTaskList().run()" class="bubble-btn">☑</button>
      <button @click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()" class="bubble-btn">▦</button>
      <button @click="editor.chain().focus().toggleCodeBlock().run()" class="bubble-btn font-mono text-xs">&lt;&gt;</button>
    </FloatingMenu>

    <editor-content
        :editor="editor"
        class="flex-1 overflow-y-auto px-8 py-6 prose prose-slate dark:prose-invert max-w-none focus:outline-none custom-editor-area"
    />

    <div v-if="editor" class="border-t border-gray-100 dark:border-gray-800 px-4 py-1 text-xs text-gray-400 flex justify-end bg-gray-50 dark:bg-gray-900/50">
      {{ editor.storage.characterCount.words() }} Wörter
    </div>
  </div>
</template>

<script setup lang="ts">
import { watch } from 'vue'
import { useEditor, EditorContent, VueNodeViewRenderer } from '@tiptap/vue-3'
// @ts-ignore
import { BubbleMenu, FloatingMenu } from '@tiptap/vue-3/menus'

import StarterKit from '@tiptap/starter-kit'
import Placeholder from '@tiptap/extension-placeholder'
import CodeBlock from '@tiptap/extension-code-block'
import { Table } from '@tiptap/extension-table'
import { TableRow } from '@tiptap/extension-table-row'
import { TableCell } from '@tiptap/extension-table-cell'
import { TableHeader } from '@tiptap/extension-table-header'
import BubbleMenuExtension from '@tiptap/extension-bubble-menu'
import FloatingMenuExtension from '@tiptap/extension-floating-menu'
import Link from '@tiptap/extension-link'
import TaskList from '@tiptap/extension-task-list'
import TaskItem from '@tiptap/extension-task-item'
import Image from '@tiptap/extension-image'
import Highlight from '@tiptap/extension-highlight'
import Youtube from '@tiptap/extension-youtube'
import Typography from '@tiptap/extension-typography'
import CharacterCount from '@tiptap/extension-character-count'

// IMPORT DER NEUEN KOMPONENTE
import TiptapTaskItem from './TiptapTaskItem.vue'

const props = defineProps<{ modelValue: any }>()
const emit = defineEmits(['update:modelValue'])

const editor = useEditor({
  content: props.modelValue,
  extensions: [
    StarterKit.configure({ codeBlock: false }),
    Placeholder.configure({ placeholder: 'Tippe "/" oder schreibe los...' }),

    BubbleMenuExtension.configure({ shouldShow: ({ editor, from, to }) => !editor.state.selection.empty && (to - from > 0) }),
    FloatingMenuExtension,

    Link.configure({ openOnClick: false, autolink: true }),
    Image, Highlight, Typography, CharacterCount, CodeBlock,
    Youtube.configure({ width: 640, height: 480 }),

    Table.configure({ resizable: true }), TableRow, TableHeader, TableCell,

    // TASK LIST KONFIGURATION
    TaskList,
    TaskItem.configure({
      nested: true,
    }).extend({
      // HIER SAGEN WIR TIPTAP: BENUTZE UNSERE VUE KOMPONENTE
      addNodeView() {
        return VueNodeViewRenderer(TiptapTaskItem)
      },
    }),
  ],
  editorProps: {
    attributes: {
      class: 'min-h-[500px] pb-40',
    },
  },
  onUpdate: ({ editor }) => {
    emit('update:modelValue', editor.getJSON())
  },
})

watch(() => props.modelValue, (val) => {
  if (editor.value && JSON.stringify(val) !== JSON.stringify(editor.value.getJSON())) {
    editor.value.commands.setContent(val, false)
  }
})

const setLink = () => {
  if (!editor.value) return
  const previousUrl = editor.value.getAttributes('link').href
  const url = window.prompt('URL eingeben:', previousUrl)
  if (url === null) return
  if (url === '') {
    editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
    return
  }
  editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
}

const addVideo = () => {
  const url = prompt('Video URL:')
  if (url && editor.value) editor.value.commands.setYoutubeVideo({ src: url })
}
</script>

<style scoped>
/* Toolbar & Buttons */
.toolbar-btn {
  @apply p-1.5 rounded text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors text-sm font-medium min-w-[28px] h-[28px] flex items-center justify-center;
}
.toolbar-btn.is-active {
  @apply bg-gray-200 dark:bg-gray-600 text-black dark:text-white shadow-inner;
}
.bubble-btn {
  @apply px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded transition-colors text-sm min-w-[24px] h-[24px] flex items-center justify-center text-gray-700 dark:text-gray-200;
}
.bubble-btn.is-active {
  @apply bg-gray-200 dark:bg-gray-600 text-black dark:text-white;
}

/* EDITOR STYLES */
:deep(.prose) {
  /* Cursor Fix */
  .ProseMirror {
    outline: none;
    caret-color: currentColor;
  }

  /* LIST RESET: Wir müssen nur die UL resetten, die LI wird von Vue gerendert */
  ul[data-type="taskList"] {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  /* Table Fixes */
  table { width: 100% !important; border-collapse: collapse; table-layout: fixed; margin: 1rem 0; }
  th, td { border: 1px solid #d1d5db; padding: 0.5rem; vertical-align: top; box-sizing: border-box; min-width: 1em; }
  .dark th, .dark td { border-color: #374151; }
  th { background-color: #f3f4f6; font-weight: 600; text-align: left; }
  .dark th { background-color: #1f2937; }
  .column-resize-handle { background-color: #3b82f6; width: 4px; }

  /* Code Block */
  pre { background: #0d1117; color: #c9d1d9; font-family: 'JetBrains Mono', monospace; padding: 0.75rem 1rem; border-radius: 0.5rem; margin: 1rem 0; overflow-x: auto; }
  code { color: inherit; padding: 0; background: none; font-size: 0.9rem; }

  /* Images */
  img { max-width: 100%; height: auto; border-radius: 6px; display: block; margin: 1rem 0; }

  /* Misc */
  mark { background-color: #fef08a; padding: 0.1rem 0.2rem; border-radius: 0.2rem; }
  .ProseMirror-selectednode { outline: 2px solid #3b82f6; }
  p.is-editor-empty:first-child::before { color: #9ca3af; content: attr(data-placeholder); float: left; height: 0; pointer-events: none; }
}
</style>