<template>
  <ion-page>
    <div class="container">
      <!-- 头部：编辑模式 -->
      <Header v-if="isEditorFocus" :onBack="handleCancel" :onAction="handleAction" actionIcon="edit" />
      <!-- 头部：预览模式 -->
      <Header v-else ref="headerRef" :onBack="handleCancel" :onAction="handleAction" actionIcon="preview" />
      <section>
        <!-- 顶部信息栏 -->
        <div class="header-info">
          <span class="edit-time">{{ formattedTime }}</span>
          <span>|</span>
          <span class="word-count">{{ wordCount }}</span>
        </div>

        <!-- 富文本编辑器 -->
        <div class="editor-container">
          <RichTextEditor ref="editorRef" :modelValue="content" @update:modelValue="handleContentChange" @focus="handleEditorFocus" @blur="handleEditorBlur" class="rich-text-editor" />
        </div>
      </section>
    </div>
  </ion-page>
</template>

<script setup>
import { ref, computed, onMounted, nextTick, watch, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'
import { useAppStore } from '../stores/useAppStore'
import Header from '../components/Header.vue'
import RichTextEditor from '../components/RichTextEditor.vue'
import { formatNoteEditorDate } from '../utils/dateUtils'
import { IonPage } from '@ionic/vue'

const props = defineProps({
  id: {
    type: String,
    default: null,
  },
})

// 为了保持向后兼容性，我们也支持noteId属性
// 通过计算属性确保无论使用id还是noteId都能正确获取便签ID
const noteId = computed(() => props.id || props.noteId)

const store = useAppStore()
const router = useRouter()
const editorRef = ref(null)
const headerRef = ref(null)
// 是否聚焦编辑器
const isEditorFocus = ref(false)

// 设置便签内容的函数
// 用于在编辑器中加载指定便签的内容
const setNoteContent = async noteId => {
  // 确保store数据已加载，如果便签列表为空则先加载数据
  if (store.notes.length === 0) {
    await store.loadData()
  }

  // 从store中查找指定ID的便签
  const note = store.notes.find(n => n.id === noteId)

  // 确保编辑器已经初始化完成
  await nextTick()

  if (note) {
    // 无论editorRef是否可用，都先设置content的值作为备份
    content.value = note.content || ''
    // 如果editorRef可用，直接设置编辑器内容
    if (editorRef.value) {
      editorRef.value.setContent(note.content || '')
    }
  }
}

// 加载初始数据
onMounted(async () => {
  await store.loadData()

  // 如果是编辑现有便签，在组件挂载后设置内容
  if (noteId.value) {
    await setNoteContent(noteId.value)
  }
})

// 监听noteId变化，确保在编辑器准备好后设置内容
watch(
  noteId,
  async newNoteId => {
    if (newNoteId) {
      await setNoteContent(newNoteId)
    }
  },
  { immediate: true }
)

// 监听store变化，确保在store加载后设置内容
watch(
  () => store.notes,
  async newNotes => {
    if (noteId.value && newNotes.length > 0) {
      await setNoteContent(noteId.value)
    }
  },
  { immediate: true }
)

// 检查是否正在编辑现有便签
// 如果noteId存在则表示是编辑模式，否则是新建模式
const isEditing = !!noteId.value
const existingNote = isEditing ? store.notes.find(n => n.id === noteId.value) : null

// 初始化内容状态，如果是编辑现有便签则使用便签内容，否则为空字符串
const content = ref(existingNote?.content || '')

// 当组件挂载时，确保编辑器初始化为空内容（针对新建便签）
onMounted(() => {
  if (!isEditing && editorRef.value) {
    console.log('Initializing editor for new note')
    editorRef.value.setContent('')
  }
})

// 监听store变化，确保在store加载后设置内容
watch(
  () => store.notes,
  async newNotes => {
    if (noteId.value && newNotes.length > 0) {
      await setNoteContent(noteId.value)
    }
  },
  { immediate: true }
)
const showAlert = ref(false)

// 防抖函数
// 用于避免函数在短时间内被频繁调用，提高性能
const debounce = (func, delay) => {
  let timeoutId
  return function (...args) {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => func.apply(this, args), delay)
  }
}

// 防抖处理内容变化
// 延迟300ms更新内容，避免用户输入时频繁触发更新
const debouncedHandleContentChange = debounce(newContent => {
  content.value = newContent
}, 300)

// 监听编辑器内容变化
// 当编辑器内容发生变化时调用此函数
const handleContentChange = newContent => {
  debouncedHandleContentChange(newContent)
}

// 计算属性 - 格式化时间显示
// 如果是编辑现有便签则显示便签的更新时间，否则显示当前时间
const formattedTime = computed(() => {
  if (existingNote?.updatedAt) {
    return formatNoteEditorDate(existingNote.updatedAt)
  }
  return formatNoteEditorDate(new Date())
})

// 计算属性 - 计算字数
// 移除HTML标签后计算纯文本字数
const wordCount = computed(() => {
  // 使用正则表达式移除HTML标签，只保留纯文本内容
  const textContent = content.value.replace(/<[^>]*>/g, '')
  return textContent.length || 0
})

// 处理保存
const handleSave = async () => {
  try {
    // 获取编辑器中的实际内容
    const editorContent = editorRef.value ? editorRef.value.getContent() : content.value

    // 检查内容是否为空
    if (isContentEmpty(editorContent)) {
      // 如果是编辑模式且内容为空，则删除便签
      if (isEditing && existingNote) {
        await store.deleteNote(noteId.value)
        console.log('空便签已删除')
        // 删除后返回便签列表页面
        router.push('/notes')
        return
      }
    } else if (isEditing && existingNote) {
      // 更新现有便签
      await store.updateNote(noteId.value, {
        content: editorContent,
      })
      console.log('便签已保存')
    } else {
      // 创建新便签
      await store.addNote({
        content: editorContent,
        isStarred: false,
      })
      console.log('新便签已创建')
    }

    // 保存后切换到预览模式（失去编辑器焦点）
    isEditorFocus.value = false
  } catch (error) {
    // In a full implementation, show an alert or toast
    console.log('Save error: Failed to save note. Please try again.')
  }
}

// 检查内容是否为空（无实质性内容）
const isContentEmpty = content => {
  if (!content) return true

  // 检查是否包含图片元素
  const hasImages = /<img[^>]*>|<div[^>]*class="[^"]*editor-image[^"]*"[^>]*>/.test(content)
  if (hasImages) return false

  // 移除HTML标签和空白字符后检查是否为空
  const plainText = content.replace(/<[^>]*>/g, '').trim()
  if (plainText === '') return true

  // 检查是否只有空的HTML元素
  const strippedContent = content
    .replace(/\s+/g, '')
    .replace(/<br>/g, '')
    .replace(/<br\/>/g, '')
  if (strippedContent === '<p></p>' || strippedContent === '<div></div>' || strippedContent === '') return true

  return false
}

// 自动保存便签（仅在非主动保存操作时调用）
const autoSaveNote = async () => {
  try {
    // 获取编辑器中的实际内容
    const editorContent = editorRef.value ? editorRef.value.getContent() : content.value

    if (isEditing && existingNote) {
      // 检查内容是否为空，如果为空则删除便签
      if (isContentEmpty(editorContent)) {
        // 删除便签
        await store.deleteNote(noteId.value)
        console.log('空便签已自动删除')
      } else if (editorContent !== (existingNote?.content || '')) {
        // 更新现有便签（仅当内容有变化时）
        await store.updateNote(noteId.value, {
          content: editorContent,
        })
        console.log('便签已自动保存')
      }
    } else if (!isContentEmpty(editorContent)) {
      // 创建新便签（仅当有内容时）
      // 检查是否已经存在相同内容的便签以避免重复创建
      const existingNotes = store.notes.filter(n => n.content === editorContent && !n.isDeleted)
      if (existingNotes.length === 0) {
        await store.addNote({
          content: editorContent,
          isStarred: false,
        })
        console.log('新便签已自动保存')
      }
    }
  } catch (error) {
    console.error('自动保存失败:', error)
  }
}

// 处理取消
const handleCancel = async () => {
  // 自动保存便签
  await autoSaveNote()

  // 直接导航回便签列表页面，因为已经处理了保存或删除逻辑
  router.push('/notes')
}

// 处理创建（用于新建便签）
const handleCreate = async () => {
  try {
    // 获取编辑器中的实际内容
    const editorContent = editorRef.value ? editorRef.value.getContent() : content.value

    // 只有当有内容时才创建新便签
    if (!isContentEmpty(editorContent)) {
      await store.addNote({
        content: editorContent,
        isStarred: false,
      })
      console.log('新便签已创建')
    }

    // 创建后切换到预览模式（失去编辑器焦点）
    isEditorFocus.value = false
  } catch (error) {
    // In a full implementation, show an alert or toast
    console.log('Create error: Failed to create note. Please try again.')
  }
}

// 处理Header组件的操作按钮点击事件
const handleAction = actionType => {
  if (actionType === 'save') {
    handleSave()
  } else if (actionType === 'create') {
    handleCreate()
  } else if (actionType === 'insertImage') {
    // 插入图片功能
    if (editorRef.value) {
      // 通过editorRef调用RichTextEditor组件的方法来插入图片
      editorRef.value.insertImage()
    }
  } else if (actionType === 'delete') {
    // 删除便签
    handleDelete()
  } else if (actionType === 'share') {
    // 分享便签
    handleShare()
  }
}

const setShowAlert = value => {
  showAlert.value = value
}

// 处理编辑器获得焦点
const handleEditorFocus = () => {
  isEditorFocus.value = true
}

// 处理编辑器失去焦点
const handleEditorBlur = () => {
  isEditorFocus.value = false
}

// 处理删除便签
const handleDelete = async () => {
  if (isEditing && existingNote) {
    // 播放删除按钮动画
    if (headerRef.value && headerRef.value.playDeleteAnimation) {
      headerRef.value.playDeleteAnimation()
    }

    // 等待动画播放完成后再执行删除操作
    // 15帧 * 50ms = 750ms，再加上一些缓冲时间
    setTimeout(async () => {
      try {
        // 删除便签
        await store.deleteNote(noteId.value)
        console.log('便签已删除')
        // 返回便签列表页面
        router.push('/notes')
      } catch (error) {
        console.error('删除便签失败:', error)
      }
    }, 800) // 等待约800ms让动画播放完成
  }
}

// 处理分享便签
const handleShare = () => {
  // 获取编辑器中的实际内容
  const editorContent = editorRef.value ? editorRef.value.getContent() : content.value

  // 移除HTML标签，获取纯文本内容用于分享
  const plainText = editorContent.replace(/<[^>]*>/g, '').trim()

  if (plainText) {
    // 在实际应用中，这里会调用设备的分享功能
    // 为了演示，我们使用Web Share API（如果支持）
    if (navigator.share) {
      navigator
        .share({
          title: '分享便签',
          text: plainText,
        })
        .catch(error => {
          console.log('分享取消或失败:', error)
        })
    } else {
      // 如果不支持Web Share API，可以复制到剪贴板
      navigator.clipboard
        .writeText(plainText)
        .then(() => {
          console.log('内容已复制到剪贴板')
          // 在实际应用中，这里会显示一个提示消息
        })
        .catch(error => {
          console.error('复制失败:', error)
        })
    }
  }
}

// 在组件卸载前自动保存或删除
onBeforeUnmount(async () => {
  await autoSaveNote()
})
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: var(--background);
  section {
    width: 100%;
    height: 100%;
  }
}

.editor-container {
  flex: 1;
  min-height: 100%;
  overflow-y: auto;
  background-color: var(--background-card);
  &.disabled {
    pointer-events: none;
  }
}

.rich-text-editor {
  min-height: 100%;
}

.header-info {
  display: flex;
  justify-content: flex-start;
  gap: 0.625rem;
  padding: 1rem 1rem 0.7rem 1rem;
  background-color: var(--background-card);
  border-bottom: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--text-tertiary);
}
</style>
