<template>
  <div class="rich-editor-wrapper">
    <!-- Кнопки форматирования -->
    <div v-if="showToolbar" class="format-buttons">
      <button 
        type="button" 
        class="format-btn" 
        @mousedown.prevent="applyFormat('bold')" 
        title="Жирный (Ctrl+B)"
      >
        <i data-lucide="bold"></i>
      </button>
      <button 
        type="button" 
        class="format-btn" 
        @mousedown.prevent="applyFormat('italic')" 
        title="Курсив (Ctrl+I)"
      >
        <i data-lucide="italic"></i>
      </button>
      <button 
        type="button" 
        class="format-btn" 
        @mousedown.prevent="applyFormat('underline')" 
        title="Подчёркивание (Ctrl+U)"
      >
        <i data-lucide="underline"></i>
      </button>
    </div>
    
    <!-- Редактируемое поле -->
    <div 
      class="rich-editor"
      :class="{ 'is-empty': !modelValue, 'disabled': disabled }"
      :contenteditable="!disabled"
      ref="editorRef"
      @input="onInput"
      @paste="onPaste"
      @keydown="onKeydown"
      @click="onClick"
      @focus="$emit('focus', $event)"
      @blur="$emit('blur', $event)"
      :data-placeholder="placeholder"
    ></div>
  </div>
</template>

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useLucideIcons } from '../../composables/useLucideIcons'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: 'Введите текст...'
  },
  showToolbar: {
    type: Boolean,
    default: true
  },
  autoLinkify: {
    type: Boolean,
    default: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

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

useLucideIcons()

const editorRef = ref(null)
let isInternalChange = false

// Применить форматирование
const applyFormat = (command) => {
  editorRef.value?.focus()
  document.execCommand(command, false, null)
  syncContent()
}

// Синхронизация содержимого
const syncContent = () => {
  if (!editorRef.value) return
  let html = editorRef.value.innerHTML
  // Нормализуем переносы строк
  html = html.replace(/<\/div><div>/gi, '<br>')
  html = html.replace(/<div>/gi, '')
  html = html.replace(/<\/div>/gi, '')
  isInternalChange = true
  emit('update:modelValue', html)
}

// Обработка ввода
const onInput = () => {
  syncContent()
}

// Обработка клика (открытие ссылок)
const onClick = (e) => {
  if (e.target.tagName === 'A') {
    e.preventDefault()
    window.open(e.target.href, '_blank')
  }
}

// Обработка вставки
const onPaste = (e) => {
  e.preventDefault()
  const text = e.clipboardData.getData('text/plain')
  document.execCommand('insertText', false, text)
  if (props.autoLinkify) {
    setTimeout(linkifyContent, 0)
  }
}

// Горячие клавиши
const onKeydown = (e) => {
  if (e.ctrlKey || e.metaKey) {
    if (e.key === 'b') {
      e.preventDefault()
      applyFormat('bold')
    } else if (e.key === 'i') {
      e.preventDefault()
      applyFormat('italic')
    } else if (e.key === 'u') {
      e.preventDefault()
      applyFormat('underline')
    }
  }
  
  // Перехватываем Enter и вставляем <br> вручную
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    
    const selection = window.getSelection()
    if (!selection.rangeCount) return
    
    const range = selection.getRangeAt(0)
    range.deleteContents()
    
    // Вставляем <br>
    const br = document.createElement('br')
    range.insertNode(br)
    
    // Если мы в конце контента, добавляем ещё один <br> для видимости
    const nextSibling = br.nextSibling
    if (!nextSibling || (nextSibling.nodeType === Node.TEXT_NODE && !nextSibling.textContent)) {
      const extraBr = document.createElement('br')
      br.parentNode.insertBefore(extraBr, br.nextSibling)
    }
    
    // Перемещаем курсор после <br>
    range.setStartAfter(br)
    range.setEndAfter(br)
    selection.removeAllRanges()
    selection.addRange(range)
    
    syncContent()
    
    // Подсвечиваем ссылки после Enter
    if (props.autoLinkify) {
      setTimeout(linkifyContent, 0)
    }
    return
  }
  
  // После пробела — подсвечиваем ссылки
  if (props.autoLinkify && e.key === ' ') {
    setTimeout(linkifyContent, 0)
  }
}

// Автоматическое преобразование URL в ссылки
const linkifyContent = () => {
  if (!editorRef.value) return
  
  const html = editorRef.value.innerHTML
  const parts = html.split(/(<a [^>]*>.*?<\/a>)/gi)
  
  let changed = false
  const newParts = parts.map(part => {
    if (part.startsWith('<a ')) return part
    
    const newPart = part.replace(
      /(https?:\/\/[^\s<>"]+)/g,
      '<a href="$1" target="_blank" rel="noopener">$1</a>'
    )
    if (newPart !== part) changed = true
    return newPart
  })
  
  if (changed) {
    editorRef.value.innerHTML = newParts.join('')
    
    // Ставим курсор в конец
    const range = document.createRange()
    const selection = window.getSelection()
    range.selectNodeContents(editorRef.value)
    range.collapse(false)
    selection.removeAllRanges()
    selection.addRange(range)
    
    syncContent()
  }
}

// Преобразование URL в ссылки
const linkifyHtml = (html) => {
  if (!html) return ''
  if (html.includes('<a ')) return html
  return html.replace(
    /(https?:\/\/[^\s<>"]+)/g,
    '<a href="$1" target="_blank" rel="noopener">$1</a>'
  )
}

// Установка содержимого
const setContent = (html) => {
  if (editorRef.value) {
    editorRef.value.innerHTML = linkifyHtml(html || '')
  }
}

// Следим за внешними изменениями modelValue
watch(() => props.modelValue, (newVal, oldVal) => {
  // Обновляем только если изменение пришло извне
  if (isInternalChange) {
    isInternalChange = false
    return
  }
  if (editorRef.value) {
    setContent(newVal)
  }
}, { immediate: true })

onMounted(() => {
  setContent(props.modelValue)
})

// Экспортируем методы для использования извне
defineExpose({
  setContent,
  applyFormat,
  focus: () => editorRef.value?.focus()
})
</script>

<style scoped>
.rich-editor-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.format-buttons {
  display: flex;
  gap: 3px;
}

.format-btn {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.format-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  color: var(--text-primary);
}

.format-btn:active {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
}

.format-btn i {
  width: 10px;
  height: 10px;
}

.rich-editor {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 14px 16px;
  min-height: 120px;
  max-height: none;
  overflow-y: auto;
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  transition: border-color 0.15s, background 0.15s;
  word-break: break-word;
  outline: none;
  resize: vertical;
}

.rich-editor.disabled {
  cursor: default;
  opacity: 0.7;
  resize: none;
}

.rich-editor:focus {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.06);
}

.rich-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  pointer-events: none;
}

.rich-editor::-webkit-scrollbar {
  width: 6px;
}

.rich-editor::-webkit-scrollbar-track {
  background: transparent;
}

.rich-editor::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
}

.rich-editor::-webkit-resizer {
  background: linear-gradient(135deg, transparent 60%, rgba(255, 255, 255, 0.1) 60%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent 85%, rgba(255, 255, 255, 0.15) 85%);
  border: none;
}

.rich-editor :deep(a) {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}

.rich-editor :deep(a:hover) {
  text-decoration: underline;
}

.rich-editor :deep(b),
.rich-editor :deep(strong) {
  font-weight: 600;
}

.rich-editor :deep(i),
.rich-editor :deep(em) {
  font-style: italic;
}

.rich-editor :deep(u) {
  text-decoration: underline;
}
</style>
