<template>
  <div class="email-editor">
    <div v-if="editor" class="toolbar">
      <div class="toolbar-group">
        <button
          class="toolbar-btn"
          :class="{ 'is-active': editor.isActive('bold') }"
          type="button"
          title="Fett"
          @click="editor.chain().focus().toggleBold().run()"
        >
          B
        </button>
        <button
          class="toolbar-btn italic"
          :class="{ 'is-active': editor.isActive('italic') }"
          type="button"
          title="Kursiv"
          @click="editor.chain().focus().toggleItalic().run()"
        >
          I
        </button>
        <button
          class="toolbar-btn line-through"
          :class="{ 'is-active': editor.isActive('strike') }"
          type="button"
          title="Durchgestrichen"
          @click="editor.chain().focus().toggleStrike().run()"
        >
          S
        </button>
      </div>

      <div class="toolbar-group">
        <button
          class="toolbar-btn"
          :class="{ 'is-active': editor.isActive('heading', { level: 2 }) }"
          type="button"
          title="Überschrift"
          @click="editor.chain().focus().toggleHeading({ level: 2 }).run()"
        >
          H2
        </button>
        <button
          class="toolbar-btn"
          :class="{ 'is-active': editor.isActive('bulletList') }"
          type="button"
          title="Liste"
          @click="editor.chain().focus().toggleBulletList().run()"
        >
          •
        </button>
        <button
          class="toolbar-btn"
          :class="{ 'is-active': editor.isActive('orderedList') }"
          type="button"
          title="Nummerierte Liste"
          @click="editor.chain().focus().toggleOrderedList().run()"
        >
          1.
        </button>
      </div>

      <div class="toolbar-group">
        <button
          class="toolbar-btn"
          :class="{ 'is-active': editor.isActive('link') }"
          type="button"
          title="Link"
          @click="setLink"
        >
          Link
        </button>
        <button
          class="toolbar-btn"
          type="button"
          title="Link entfernen"
          @click="unsetLink"
        >
          Unlink
        </button>
      </div>
    </div>

    <EditorContent :editor="editor" class="editor-content" />
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount, watch } from 'vue'
import { EditorContent, useEditor } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Placeholder from '@tiptap/extension-placeholder'
import Link from '@tiptap/extension-link'

const props = withDefaults(defineProps<{
  preloadedContent?: string
}>(), {
  preloadedContent: '',
})

const emit = defineEmits<{
  updateContent: [payload: { json: Record<string, any>; html: string; text: string }]
}>()

const emitContent = () => {
  if (!editor.value) return
  emit('updateContent', {
    json: editor.value.getJSON(),
    html: editor.value.getHTML(),
    text: editor.value.getText(),
  })
}

const editor = useEditor({
  content: props.preloadedContent,
  extensions: [
    StarterKit,
    Placeholder.configure({ placeholder: 'E-Mail Inhalt eingeben...' }),
    Link.configure({ openOnClick: false, autolink: true }),
  ],
  editorProps: {
    attributes: {
      class: 'prosemirror-email',
    },
  },
  onCreate: emitContent,
  onUpdate: emitContent,
})

watch(
  () => props.preloadedContent,
  (value) => {
    if (!editor.value) return
    if (value === editor.value.getHTML()) return
    editor.value.commands.setContent(value || '', 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.trim()) {
    editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
    return
  }
  editor.value.chain().focus().extendMarkRange('link').setLink({ href: url }).run()
}

const unsetLink = () => {
  if (!editor.value) return
  editor.value.chain().focus().extendMarkRange('link').unsetLink().run()
}

onBeforeUnmount(() => {
  editor.value?.destroy()
})
</script>

<style scoped>
.email-editor {
  border: 1px solid #69c350;
  border-radius: 10px;
  background: #fff;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

.toolbar-group {
  display: flex;
  gap: 0.25rem;
  padding-right: 0.5rem;
  margin-right: 0.25rem;
  border-right: 1px solid #e5e7eb;
}

.toolbar-group:last-child {
  border-right: 0;
  margin-right: 0;
  padding-right: 0;
}

.toolbar-btn {
  min-width: 2rem;
  height: 2rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background: #fff;
  color: #374151;
  padding: 0 0.5rem;
  font-size: 0.875rem;
}

.toolbar-btn:hover {
  background: #f3f4f6;
}

.toolbar-btn.is-active {
  background: #dcfce7;
  border-color: #69c350;
  color: #14532d;
}

.editor-content {
  min-height: 320px;
  padding: 1rem;
}

:deep(.prosemirror-email) {
  outline: none;
  min-height: 280px;
}

:deep(.prosemirror-email p) {
  margin: 0.3rem 0;
}

:deep(.prosemirror-email ul) {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin: 0.4rem 0;
}

:deep(.prosemirror-email ol) {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin: 0.4rem 0;
}

:deep(.prosemirror-email li) {
  display: list-item;
  margin: 0.2rem 0;
}

:deep(.prosemirror-email a) {
  color: #2563eb;
  text-decoration: underline;
}
</style>
