<template>
  <!-- 升级提示弹窗 -->
</template>

<script setup>
import { computed, watch, onMounted, onUnmounted, h, nextTick } from 'vue'
import { Modal, Message, Progress } from '@arco-design/web-vue'
import { useUpdateStore } from '../stores/update'
import { marked } from '../utils/markedExtensions'
import { sanitizeHtml } from '@/utils/fileUtils'
import { DownloadUpdate } from '../wailsjs/v3-bindings/u-desk/app'
import { On, Off } from '@wailsio/events'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  updateInfo: {
    type: Object,
    default: () => ({})
  }
})

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

// 使用更新管理 store
const updateStore = useUpdateStore()

// 模态框实例
let confirmModalInstance = null
let progressModalInstance = null

// Computed
const currentVersion = computed(() => props.updateInfo?.current_version || '0.1.0')
const latestVersion = computed(() => props.updateInfo?.latest_version || '')
const changelog = computed(() => props.updateInfo?.changelog || '')
const forceUpdate = computed(() => props.updateInfo?.force_update || false)

// Watch
watch(() => props.modelValue, (val) => {
  if (val) {
    showUpdateModal()
  } else {
    closeModals()
  }
})

// Utility functions
const formatDate = (dateStr) => {
  if (!dateStr) return ''
  try {
    const date = new Date(dateStr)
    if (!isNaN(date.getTime())) {
      return date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
      }).replace(/\//g, '-')
    }
  } catch {}
  return dateStr
}

// 显示更新确认弹窗
const showUpdateModal = () => {
  if (confirmModalInstance) return

  confirmModalInstance = Modal.confirm({
    title: forceUpdate.value ? '重要更新' : '发现新版本',
    content: () => {
      const elements = [
        h('div', { style: { marginBottom: '8px' } }, [
          h('span', { style: { fontSize: '13px', color: 'var(--color-text-2)' } }, '版本：'),
          h('span', { style: { fontSize: '14px', color: 'var(--color-text-1)', marginLeft: '8px' } }, currentVersion.value),
          h('span', { style: { fontSize: '14px', color: 'var(--color-text-2)', marginLeft: '12px', marginRight: '12px' } }, '→'),
          h('span', { style: { fontSize: '16px', color: 'rgb(var(--primary-6))', fontWeight: '500' } }, latestVersion.value)
        ])
      ]

      // 更新日志
      if (changelog.value) {
        const changelogHtml = (() => { try { return sanitizeHtml(String(marked.parse(changelog.value))) } catch { return changelog.value } })()
        elements.push(
          h('div', { style: { marginBottom: '8px' } }, [
            h('div', { style: { fontSize: '12px', color: 'var(--color-text-2)', marginBottom: '4px' } }, '更新内容：'),
            h('div', {
              style: {
                fontSize: '12px',
                color: 'var(--color-text-2)',
                lineHeight: '1.6',
                padding: '10px 12px',
                background: 'var(--color-fill-1)',
                borderRadius: '4px',
                maxHeight: '240px',
                overflowY: 'auto'
              },
              innerHTML: changelogHtml
            })
          ])
        )
      }

      // 发布日期和文件大小
      const metadata = []
      if (props.updateInfo?.release_date) {
        metadata.push(formatDate(props.updateInfo.release_date))
      }
      if (props.updateInfo?.file_size) {
        metadata.push(updateStore.formatFileSize(props.updateInfo.file_size))
      }
      if (metadata.length > 0) {
        elements.push(
          h('div', { style: { marginBottom: '4px', fontSize: '12px', color: 'var(--color-text-3)' } }, metadata.join(' · '))
        )
      }

      // 强制更新提示
      if (forceUpdate.value) {
        elements.push(
          h('div', {
            style: {
              marginTop: '12px',
              padding: '12px',
              background: 'var(--color-danger-light-1)',
              border: '1px solid var(--color-danger-light-3)',
              borderRadius: '4px',
              color: 'rgb(var(--danger-6))',
              fontSize: '13px'
            }
          }, '⚠️ 此版本包含重要的安全更新和问题修复，为保障正常使用，请完成更新后再继续。')
        )
      }

      return elements
    },
    okText: '立即更新',
    cancelText: '稍后提醒',
    closable: !forceUpdate.value,
    maskClosable: !forceUpdate.value,
    onOk: async () => {
      confirmModalInstance = null
      await handleDownload()
    },
    onCancel: () => {
      confirmModalInstance = null
      emit('update:modelValue', false)
    },
    onBeforeCancel: () => {
      if (forceUpdate.value) {
        Message.warning('此版本为强制更新，无法跳过')
        return false
      }
      return true
    }
  })
}

// 生成进度弹窗内容
const getProgressModalContent = () => {
  // 下载中状态
  if (updateStore.downloading) {
    const progressValue = Math.min(100, Math.max(0, updateStore.downloadProgress || 0))
    const finalProgress = progressValue / 100

    const { downloaded, total, speed } = updateStore.progressInfo
    const sizeText = total > 0
      ? `${updateStore.formatFileSize(downloaded)} / ${updateStore.formatFileSize(total)}`
      : updateStore.downloadProgress > 0 ? '计算文件大小...' : '准备下载...'

    const speedElement = speed > 0
      ? h('div', { style: { fontSize: '12px', color: 'var(--color-text-3)', marginTop: '4px' } },
          `下载速度: ${updateStore.formatSpeed(speed)}`
        )
      : null

    return [
      h('div', { style: { marginBottom: '16px' } }, [
        h('div', { style: { marginBottom: '8px', fontSize: '14px', color: 'var(--color-text-2)' } }, '正在下载更新包...')
      ]),
      h('div', { style: { marginBottom: '8px' } }, [
        h(Progress, { percent: finalProgress, showText: true })
      ]),
      h('div', { style: { fontSize: '12px', color: 'var(--color-text-3)', marginTop: '8px' } }, sizeText),
      speedElement
    ]
  }

  // 安装中状态
  if (updateStore.installing) {
    return [
      h('div', { style: { marginBottom: '16px' } }, [
        h('div', { style: { marginBottom: '8px', fontSize: '14px', color: 'var(--color-text-2)' } }, '正在安装更新...')
      ]),
      h('div', { style: { fontSize: '12px', color: 'var(--color-text-3)' } }, '请稍候，应用将在安装完成后自动重启...')
    ]
  }

  // 完成状态
  return [
    h('div', { style: { marginBottom: '16px', textAlign: 'center' } }, [
      h('div', { style: { fontSize: '16px', color: 'rgb(var(--success-6))', marginBottom: '8px' } }, '✓ 更新完成')
    ]),
    h('div', { style: { fontSize: '14px', color: 'var(--color-text-2)' } }, '应用将在几秒后自动重启...')
  ]
}

// 更新进度弹窗内容
const updateProgressModal = async () => {
  if (!progressModalInstance) return
  await nextTick()
  progressModalInstance.update({
    content: () => getProgressModalContent()
  })
}

// 显示进度弹窗
const showProgressModal = async () => {
  if (progressModalInstance) {
    progressModalInstance.close()
    progressModalInstance = null
  }

  progressModalInstance = Modal.info({
    title: '更新进度',
    content: () => getProgressModalContent(),
    closable: false,
    maskClosable: false,
    footer: false
  })

  await nextTick()

  // 监听 store 状态变化
  const stopWatcher = watch(
    [
      () => updateStore.downloadProgress,
      () => updateStore.downloading,
      () => updateStore.installing,
      () => updateStore.progressInfo.total,
      () => updateStore.progressInfo.downloaded,
      () => updateStore.progressInfo.speed
    ],
    async () => {
      await nextTick(updateProgressModal)
    },
    { immediate: true, flush: 'post' }
  )

  if (progressModalInstance) {
    progressModalInstance._stopWatcher = stopWatcher
  }
}

// 关闭进度弹窗
const closeProgressModal = () => {
  if (progressModalInstance) {
    if (progressModalInstance._stopWatcher) {
      progressModalInstance._stopWatcher()
      delete progressModalInstance._stopWatcher
    }
    progressModalInstance.close()
    progressModalInstance = null
  }
}

// 关闭所有弹窗
const closeModals = () => {
  if (confirmModalInstance) {
    confirmModalInstance.close()
    confirmModalInstance = null
  }
  closeProgressModal()
}

// 下载更新
const handleDownload = async () => {
  await showProgressModal()

  try {
    const result = await DownloadUpdate(props.updateInfo.download_url)
    if (result.success) return

    closeProgressModal()
    Message.error(result.message || '下载启动失败')
  } catch (error) {
    console.error('下载失败:', error)
    closeProgressModal()
    Message.error('下载失败：' + (error.message || error))
  }
}

// 下载完成处理（本地覆盖：关闭弹窗）
const onDownloadComplete = async (event) => {
  const data = typeof event === 'string' ? JSON.parse(event) : event

  if (data.error) {
    closeProgressModal()
    Message.error('下载失败：' + data.error)
    return
  }

  if (!data.success || !data.file_path) {
    closeProgressModal()
    Message.error('下载完成但数据不完整')
    return
  }

  // 等待安装完成
  await new Promise(resolve => setTimeout(resolve, 3000))
  closeProgressModal()
  emit('update:modelValue', false)
}

// 生命周期
onMounted(() => {
  On('download-complete', onDownloadComplete)
})

onUnmounted(() => {
  Off('download-complete')
  closeModals()
})
</script>
