<template>
  <div class="rich-text-editor" :class="{ disabled }">
    <div class="editor-toolbar" v-if="!disabled">
      <button type="button" class="toolbar-button" @mousedown.prevent @click="format('bold')"><strong>B</strong></button>
      <button type="button" class="toolbar-button" @mousedown.prevent @click="format('italic')"><em>I</em></button>
      <button type="button" class="toolbar-button" @mousedown.prevent @click="format('underline')"><u>U</u></button>
      <button type="button" class="toolbar-button" @mousedown.prevent @click="format('insertUnorderedList')">• Liste</button>
      <button type="button" class="toolbar-button" @mousedown.prevent @click="format('insertOrderedList')">1. Liste</button>
      <button type="button" class="toolbar-button" @mousedown.prevent="insertLink">Link</button>
      <button type="button" class="toolbar-button" @mousedown.prevent @click="clearFormatting">Format löschen</button>
    </div>
    <div
      ref="editor"
      class="editor-surface"
      :class="{ placeholder: !currentHtml && placeholder }"
      :contenteditable="!disabled"
      :data-placeholder="placeholder"
      :style="{ minHeight }"
      @input="handleInput"
      @blur="handleBlur"
      @paste="handlePaste"
    />
  </div>
</template>

<script>
import { sanitizeRichTextHtml } from '../utils/richTextDocumentExport.js';

export default {
  name: 'RichTextEditor',
  props: {
    modelValue: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    minHeight: {
      type: String,
      default: '180px',
    },
  },
  emits: ['update:modelValue'],
  data() {
    return {
      currentHtml: '',
    };
  },
  watch: {
    modelValue: {
      immediate: true,
      handler(value) {
        const sanitized = sanitizeRichTextHtml(value || '');
        this.currentHtml = sanitized;
        if (this.$refs.editor && this.$refs.editor.innerHTML !== sanitized) {
          this.$refs.editor.innerHTML = sanitized;
        }
      },
    },
  },
  mounted() {
    this.syncEditor();
  },
  methods: {
    syncEditor() {
      if (!this.$refs.editor) return;
      const sanitized = sanitizeRichTextHtml(this.modelValue || '');
      this.$refs.editor.innerHTML = sanitized;
      this.currentHtml = sanitized;
    },
    emitCurrentValue() {
      const nextHtml = sanitizeRichTextHtml(this.$refs.editor?.innerHTML || '');
      this.currentHtml = nextHtml;
      this.$emit('update:modelValue', nextHtml);
    },
    handleInput() {
      this.emitCurrentValue();
    },
    handleBlur() {
      this.emitCurrentValue();
    },
    handlePaste(event) {
      if (this.disabled) return;
      event.preventDefault();
      const html = event.clipboardData?.getData('text/html');
      const text = event.clipboardData?.getData('text/plain') || '';
      const value = sanitizeRichTextHtml(html || text.replace(/\n/g, '<br>'));
      document.execCommand('insertHTML', false, value || text.replace(/\n/g, '<br>'));
      this.emitCurrentValue();
    },
    format(command) {
      if (this.disabled) return;
      this.$refs.editor?.focus();
      document.execCommand(command, false, null);
      this.emitCurrentValue();
    },
    insertLink() {
      if (this.disabled) return;
      const url = window.prompt('Link einfügen', 'https://');
      if (!url) return;
      this.$refs.editor?.focus();
      document.execCommand('createLink', false, url);
      this.emitCurrentValue();
    },
    clearFormatting() {
      if (this.disabled) return;
      this.$refs.editor?.focus();
      document.execCommand('removeFormat', false, null);
      this.emitCurrentValue();
    },
  },
};
</script>

<style scoped>
.rich-text-editor {
  display: grid;
  gap: 0.5rem;
}

.editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.toolbar-button {
  border: 1px solid rgba(24, 70, 54, 0.12);
  background: rgba(255, 255, 255, 0.92);
  border-radius: 10px;
  padding: 0.35rem 0.6rem;
}

.editor-surface {
  border: 1px solid rgba(24, 70, 54, 0.16);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  padding: 0.9rem;
  line-height: 1.55;
  overflow: auto;
}

.editor-surface:focus {
  outline: 2px solid rgba(47, 122, 95, 0.25);
  outline-offset: 1px;
}

.editor-surface.placeholder:empty::before {
  content: attr(data-placeholder);
  color: var(--text-light);
}

.rich-text-editor.disabled .editor-surface {
  background: rgba(245, 247, 250, 0.95);
  color: var(--text-secondary);
}
</style>
