<template>
  <div class="flex flex-col h-full bg-white relative">

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

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

      <div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2">
        <button @click="editor.chain().focus().toggleHeading({ level: 1 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 1 }) }" class="toolbar-btn" title="Überschrift 1">H1</button>
        <button @click="editor.chain().focus().toggleHeading({ level: 2 }).run()" :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }" class="toolbar-btn" title="Überschrift 2">H2</button>
      </div>

      <div class="flex gap-0.5 border-r border-gray-200 pr-2 mr-2">
        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" class="toolbar-btn" title="Liste">• Liste</button>
        <button @click="editor.chain().focus().toggleTaskList().run()" :class="{ 'is-active': editor.isActive('taskList') }" class="toolbar-btn" title="Checkliste">☑ Task</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" title="Tabelle einfügen">▦ Tab</button>

        <div v-if="editor.isActive('table')" class="flex gap-0.5 ml-2 pl-2 border-l border-gray-200 items-center">
          <button @click="editor.chain().focus().addColumnAfter().run()" class="toolbar-btn text-xs" title="Spalte +">+Col</button>
          <button @click="editor.chain().focus().deleteColumn().run()" class="toolbar-btn text-xs text-red-400" title="Spalte -">-Col</button>
          <button @click="editor.chain().focus().addRowAfter().run()" class="toolbar-btn text-xs" title="Zeile +">+Row</button>
          <button @click="editor.chain().focus().deleteRow().run()" class="toolbar-btn text-xs text-red-400" title="Zeile -">-Row</button>
          <button @click="editor.chain().focus().mergeCells().run()" class="toolbar-btn text-xs" title="Verbinden">Merge</button>
          <button @click="editor.chain().focus().deleteTable().run()" class="toolbar-btn text-red-500 hover:bg-red-50 ml-1" title="Tabelle löschen">🗑</button>
        </div>
      </div>
    </div>

    <BubbleMenu
        v-if="editor"
        :editor="editor"
        :tippy-options="{ duration: 200, placement: 'top-start', animation: 'scale' }"
        class="bg-white border border-gray-200 text-gray-700 rounded-lg shadow-xl flex items-center p-1 gap-1 z-50 overflow-hidden"
    >
      <div class="flex items-center gap-0.5">
        <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().toggleStrike().run()" :class="{ 'is-active': editor.isActive('strike') }" class="bubble-btn line-through">S</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>

      <div class="w-px h-4 bg-gray-200 mx-1"></div>

      <div class="flex items-center gap-0.5">
        <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>
        <button @click="editor.chain().focus().toggleBulletList().run()" :class="{ 'is-active': editor.isActive('bulletList') }" class="bubble-btn text-lg leading-none">•</button>
      </div>

      <div class="w-px h-4 bg-gray-200 mx-1"></div>

      <div class="flex items-center gap-0.5">
        <button @click="setLink" :class="{ 'is-active': editor.isActive('link') }" class="bubble-btn text-sm">Link</button>
        <button v-if="editor.isActive('link')" @click="editor.chain().focus().unsetLink().run()" class="bubble-btn text-red-500 hover:text-red-700">✕</button>
      </div>
    </BubbleMenu>

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

<script setup lang="ts">
import { watch } from 'vue'

// Tiptap Core
import { useEditor, EditorContent } from '@tiptap/vue-3'
// @ts-ignore
import { BubbleMenu } from '@tiptap/vue-3/menus' // Fix für Vite Import

import StarterKit from '@tiptap/starter-kit'
import Placeholder from '@tiptap/extension-placeholder'

// Extensions
import BubbleMenuExtension from '@tiptap/extension-bubble-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'

// Table Imports (Named Imports)
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'

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

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

    // Bubble Menu Logik: Zeigt sich nur bei Text-Auswahl
    BubbleMenuExtension.configure({
      shouldShow: ({ editor, from, to }) => {
        // Nur anzeigen, wenn Text markiert ist und Dokument nicht leer
        return !editor.state.selection.empty && (to - from > 0)
      },
    }),

    Link.configure({ openOnClick: false, autolink: true }),
    Image, // Für Copy-Paste Bilder aktiv lassen
    Highlight, // Gelber Marker

    // Tasks
    TaskList,
    TaskItem.configure({ nested: true }),

    // Tables
    Table.configure({ resizable: true }),
    TableRow,
    TableHeader,
    TableCell,
  ],
  editorProps: {
    attributes: {
      class: 'focus:outline-none 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()
}
</script>

<style scoped>
/* Toolbar Button Styling */
.toolbar-btn {
  @apply p-1.5 rounded text-gray-600 hover:bg-gray-100 transition-colors text-sm font-medium min-w-[28px] h-[28px] flex items-center justify-center;
}
.toolbar-btn.is-active {
  @apply bg-gray-200 text-black shadow-inner;
}

/* Bubble Menu Button Styling */
.bubble-btn {
  @apply px-2 py-1 hover:bg-gray-100 rounded transition-colors text-sm min-w-[24px] h-[24px] flex items-center justify-center;
}
.bubble-btn.is-active {
  @apply bg-gray-200 text-black;
}

/* CSS RESET & FIXES */
:deep(.prose) {

  /* 1. TABLE FIX */
  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;
  }

  th {
    background-color: #f3f4f6;
    font-weight: 600;
    text-align: left;
  }

  .column-resize-handle {
    background-color: #3b82f6;
    bottom: -2px;
    position: absolute;
    right: -2px;
    pointer-events: none;
    top: 0;
    width: 4px;
  }

  /* 2. TASK LIST FIX (Flexbox) */
  ul[data-type="taskList"] {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  li[data-type="taskItem"] {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    margin-bottom: 0.25rem !important;
    padding-left: 0 !important;
  }

  li[data-type="taskItem"] > label {
    display: inline-flex !important;
    margin-right: 0.5rem !important;
    margin-top: 0.25rem !important;
    user-select: none;
    cursor: pointer;
    flex-shrink: 0;
  }

  li[data-type="taskItem"] > label > input {
    margin: 0 !important;
    cursor: pointer;
  }

  li[data-type="taskItem"] > div {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: block !important;
  }

  /* Kill Paragraph Margins inside Tasks */
  li[data-type="taskItem"] div > p {
    margin: 0 !important;
    display: block !important;
  }

  /* Remove Markers */
  li[data-type="taskItem"]::marker,
  li[data-type="taskItem"]::before {
    content: none !important;
    display: none !important;
  }

  /* 3. HIGHLIGHT STYLE */
  mark {
    background-color: #fef08a; /* Yellow-200 */
    padding: 0.1rem 0.2rem;
    border-radius: 0.2rem;
  }

  /* 4. SELECTION STYLE */
  .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;
  }

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