<template>
  <div class="markdown-editor h-full flex flex-col">
    <!-- 工具栏 -->
    <div class="toolbar flex items-center gap-1 p-2 bg-slate-800 border border-slate-700 rounded-t-lg">
      <button
        @click="editor?.chain().focus().toggleBold().run()"
        :class="['toolbar-btn', { 'is-active': editor?.isActive('bold') }]"
        title="粗体 (Ctrl+B)"
      >
        <span class="font-bold">B</span>
      </button>
      <button
        @click="editor?.chain().focus().toggleItalic().run()"
        :class="['toolbar-btn', { 'is-active': editor?.isActive('italic') }]"
        title="斜体 (Ctrl+I)"
      >
        <span class="italic">I</span>
      </button>
      <button
        @click="editor?.chain().focus().toggleStrike().run()"
        :class="['toolbar-btn', { 'is-active': editor?.isActive('strike') }]"
        title="删除线"
      >
        <span class="line-through">S</span>
      </button>
      
      <div class="h-4 w-px bg-slate-600 mx-1"></div>
      
      <button
        @click="editor?.chain().focus().toggleHeading({ level: 1 }).run()"
        :class="['toolbar-btn', { 'is-active': editor?.isActive('heading', { level: 1 }) }]"
        title="一级标题"
      >
        H1
      </button>
      <button
        @click="editor?.chain().focus().toggleHeading({ level: 2 }).run()"
        :class="['toolbar-btn', { 'is-active': editor?.isActive('heading', { level: 2 }) }]"
        title="二级标题"
      >
        H2
      </button>
      <button
        @click="editor?.chain().focus().toggleHeading({ level: 3 }).run()"
        :class="['toolbar-btn', { 'is-active': editor?.isActive('heading', { level: 3 }) }]"
        title="三级标题"
      >
        H3
      </button>
      
      <div class="h-4 w-px bg-slate-600 mx-1"></div>
      
      <button
        @click="editor?.chain().focus().toggleBulletList().run()"
        :class="['toolbar-btn', { 'is-active': editor?.isActive('bulletList') }]"
        title="无序列表"
      >
        •
      </button>
      <button
        @click="editor?.chain().focus().toggleOrderedList().run()"
        :class="['toolbar-btn', { 'is-active': editor?.isActive('orderedList') }]"
        title="有序列表"
      >
        1.
      </button>
      
      <div class="h-4 w-px bg-slate-600 mx-1"></div>
      
      <button
        @click="editor?.chain().focus().toggleBlockquote().run()"
        :class="['toolbar-btn', { 'is-active': editor?.isActive('blockquote') }]"
        title="引用"
      >
        ❝
      </button>
      <button
        @click="editor?.chain().focus().toggleCodeBlock().run()"
        :class="['toolbar-btn', { 'is-active': editor?.isActive('codeBlock') }]"
        title="代码块"
      >
        &lt;/&gt;
      </button>
      <button
        @click="editor?.chain().focus().setHorizontalRule().run()"
        class="toolbar-btn"
        title="分割线"
      >
        ─
      </button>
      
      <div class="flex-1"></div>
      
      <button
        @click="editor?.chain().focus().undo().run()"
        :disabled="!editor?.can().undo()"
        class="toolbar-btn disabled:opacity-30"
        title="撤销 (Ctrl+Z)"
      >
        ↶
      </button>
      <button
        @click="editor?.chain().focus().redo().run()"
        :disabled="!editor?.can().redo()"
        class="toolbar-btn disabled:opacity-30"
        title="重做 (Ctrl+Y)"
      >
        ↷
      </button>
    </div>
    
    <!-- 编辑区域 -->
    <div class="flex-1 overflow-y-auto bg-slate-900/50 border border-t-0 border-slate-700 rounded-b-lg">
      <editor-content 
        :editor="editor" 
        class="h-full"
      />
    </div>
  </div>
</template>

<script setup>
import { watch, onMounted, onBeforeUnmount } from 'vue'
import { useEditor, EditorContent } from '@tiptap/vue-3'
import StarterKit from '@tiptap/starter-kit'
import Placeholder from '@tiptap/extension-placeholder'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '开始写作...'
  }
})

const emit = defineEmits(['update:modelValue'])

// 创建编辑器实例
const editor = useEditor({
  content: props.modelValue,
  extensions: [
    StarterKit.configure({
      heading: {
        levels: [1, 2, 3]
      }
    }),
    Placeholder.configure({
      placeholder: props.placeholder
    })
  ],
  editorProps: {
    attributes: {
      class: 'prose prose-invert max-w-none p-4 h-full outline-none focus:outline-none'
    }
  },
  onUpdate: ({ editor }) => {
    emit('update:modelValue', editor.getHTML())
  }
})

// 监听外部值变化
watch(() => props.modelValue, (newValue) => {
  if (editor.value && editor.value.getHTML() !== newValue) {
    editor.value.commands.setContent(newValue || '')
  }
})

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

<style scoped>
.toolbar-btn {
  @apply w-8 h-8 flex items-center justify-center rounded text-sm text-slate-300 hover:bg-slate-700 hover:text-white transition;
}

.toolbar-btn.is-active {
  @apply bg-blue-600 text-white;
}

/* 编辑器内容样式 */
:deep(.ProseMirror) {
  min-height: 100%;
  padding: 1rem;
}

:deep(.ProseMirror:focus) {
  outline: none;
}

:deep(.ProseMirror p.is-editor-empty:first-child::before) {
  content: attr(data-placeholder);
  float: left;
  color: #64748b;
  pointer-events: none;
  height: 0;
}

/* Prose 样式覆盖 */
:deep(.ProseMirror h1) {
  @apply text-2xl font-bold text-white mt-6 mb-4;
}

:deep(.ProseMirror h2) {
  @apply text-xl font-bold text-white mt-5 mb-3;
}

:deep(.ProseMirror h3) {
  @apply text-lg font-bold text-white mt-4 mb-2;
}

:deep(.ProseMirror p) {
  @apply text-slate-200 leading-relaxed mb-4;
}

:deep(.ProseMirror ul),
:deep(.ProseMirror ol) {
  @apply pl-6 mb-4;
}

:deep(.ProseMirror li) {
  @apply text-slate-200 mb-1;
}

:deep(.ProseMirror blockquote) {
  @apply border-l-4 border-blue-500 pl-4 italic text-slate-400 my-4;
}

:deep(.ProseMirror code) {
  @apply bg-slate-700 px-1 py-0.5 rounded text-blue-300 text-sm;
}

:deep(.ProseMirror pre) {
  @apply bg-slate-800 p-4 rounded-lg my-4 overflow-x-auto;
}

:deep(.ProseMirror pre code) {
  @apply bg-transparent p-0;
}

:deep(.ProseMirror hr) {
  @apply border-slate-700 my-6;
}

:deep(.ProseMirror strong) {
  @apply font-bold text-white;
}

:deep(.ProseMirror em) {
  @apply italic text-slate-300;
}

:deep(.ProseMirror s) {
  @apply line-through text-slate-500;
}
</style>
