import { defineStore } from 'pinia'
import { ref } from 'vue'
import { api } from '@/services/api'

export const useSettingsStore = defineStore('settings', () => {
  const bgType = ref('color')
  const bgColor = ref('#f5f5f5')
  const bgImage = ref('')
  const bgOpacity = ref(1)
  const language = ref('zh')
  const favicon = ref('')
  // 现在存储 {id, url} 而不是 {id, data: base64}
  const uploadedImages = ref([])
  const uploadedIcons = ref([])
  const loading = ref(false)
  let initialized = false

  async function loadSettings() {
    loading.value = true
    try {
      const data = await api.getSettings()
      bgType.value = data.bgType || 'color'
      bgColor.value = data.bgColor || '#f5f5f5'
      bgImage.value = data.bgImage || ''
      bgOpacity.value = data.bgOpacity ?? 1
      language.value = data.language || 'zh'
      favicon.value = data.favicon || ''
      uploadedImages.value = data.uploadedImages || []
      uploadedIcons.value = data.uploadedIcons || []
      applyFavicon(favicon.value)
      initialized = true
    } catch (error) {
      console.error('加载设置失败:', error)
      initialized = true
      // 降级到 localStorage
      const saved = localStorage.getItem('site-settings')
      if (saved) {
        try {
          const settings = JSON.parse(saved)
          bgType.value = settings.bgType || 'color'
          bgColor.value = settings.bgColor || '#f5f5f5'
          bgImage.value = settings.bgImage || ''
          bgOpacity.value = settings.bgOpacity || 1
          language.value = settings.language || 'zh'
          favicon.value = settings.favicon || ''
          uploadedImages.value = settings.uploadedImages || []
          uploadedIcons.value = settings.uploadedIcons || []
        } catch {
          // ignore
        }
      }
    } finally {
      loading.value = false
    }
  }

  async function saveSettings() {
    if (!initialized) {
      console.warn('saveSettings 跳过：还未初始化')
      return
    }
    try {
      await api.updateSettings({
        bgType: bgType.value,
        bgColor: bgColor.value,
        bgImage: bgImage.value,
        bgOpacity: bgOpacity.value,
        language: language.value,
        favicon: favicon.value,
        uploadedImages: uploadedImages.value,
        uploadedIcons: uploadedIcons.value
      })
    } catch (error) {
      console.warn('保存到服务器失败:', error.message)
    }
  }

  // 上传图片到 RUSTFS，返回 {id, url}
  async function uploadImageToRustfs(imageData, type = 'background') {
    try {
      const result = await api.uploadImage(imageData, type)
      return { id: result.id, url: result.url }
    } catch (error) {
      console.error('图片上传失败:', error)
      throw error
    }
  }

  // 批量上传图片到 RUSTFS
  async function uploadImagesToRustfs(imageDataList, type = 'background') {
    try {
      const images = imageDataList.map((data, index) => ({
        id: `${Date.now()}-${index}`,
        data
      }))
      const result = await api.uploadImages(images, type)
      return result.images
    } catch (error) {
      console.error('批量图片上传失败:', error)
      throw error
    }
  }

  // 添加单张图片（上传到 RUSTFS）
  async function addUploadedImage(imageData) {
    const result = await uploadImageToRustfs(imageData, 'background')
    uploadedImages.value.push(result)
    await saveSettings()
    return result.id
  }

  // 批量添加图片（不上传到服务器）
  function addUploadedImagesBatchLocal(imageDataList) {
    const baseId = Date.now()
    const tempImages = imageDataList.map((imageData, index) => ({
      id: `${baseId}-${index}`,
      data: imageData
    }))
    return tempImages
  }

  // 批量上传图片
  async function addUploadedImagesBatch(imageDataList) {
    const uploaded = await uploadImagesToRustfs(imageDataList, 'background')
    for (const img of uploaded) {
      if (img.url) {
        uploadedImages.value.push({ id: img.id, url: img.url })
      }
    }
    await saveSettings()
  }

  // 设置背景图片（使用 URL）
  async function setBgImage(value) {
    bgImage.value = value
    await saveSettings()
  }

  // 设置背景图片（上传 base64 后设置）
  async function setBgImageFromData(imageData) {
    const result = await uploadImageToRustfs(imageData, 'background')
    bgImage.value = result.url
    await saveSettings()
  }

  function setBgType(value) {
    bgType.value = value
    saveSettings()
  }

  function setBgColor(value) {
    bgColor.value = value
    saveSettings()
  }

  function setBgOpacity(value) {
    bgOpacity.value = value
    saveSettings()
  }

  function setLanguage(value) {
    language.value = value
    saveSettings()
  }

  // 设置图标（上传到 RUSTFS）
  async function setFaviconFromData(imageData) {
    const result = await uploadImageToRustfs(imageData, 'icon')
    favicon.value = result.url
    applyFavicon(result.url)
    await saveSettings()
  }

  // 设置图标（使用已有 URL）
  async function setFavicon(value) {
    favicon.value = value
    applyFavicon(value)
    await saveSettings()
  }

  // 添加图标到图标库（上传到 RUSTFS）
  async function addUploadedIcon(imageData) {
    const result = await uploadImageToRustfs(imageData, 'icon')
    uploadedIcons.value.push(result)
    await saveSettings()
    return result.id
  }

  // 批量添加图标
  async function addUploadedIconsBatch(imageDataList) {
    const uploaded = await uploadImagesToRustfs(imageDataList, 'icon')
    for (const icon of uploaded) {
      if (icon.url) {
        uploadedIcons.value.push({ id: icon.id, url: icon.url })
      }
    }
    await saveSettings()
  }

  function removeUploadedImage(id) {
    uploadedImages.value = uploadedImages.value.filter(img => img.id !== id)
    // bgImage 现在是 URL，检查是否是被删除图片的 URL
    const img = uploadedImages.value.find(img => img.url === bgImage.value)
    if (!img && bgImage.value) {
      // 当前背景图片被删除了，重置为默认
      bgImage.value = ''
    }
    saveSettings()
  }

  function removeUploadedIcon(id) {
    uploadedIcons.value = uploadedIcons.value.filter(icon => icon.id !== id)
    // favicon 现在是 URL，检查是否是被删除图标的 URL
    const icon = uploadedIcons.value.find(icon => icon.url === favicon.value)
    if (!icon && favicon.value) {
      favicon.value = ''
      applyFavicon('')
    }
    saveSettings()
  }

  function applyFavicon(value) {
    const link = document.querySelector("link[rel='icon']")
    if (link) {
      if (value) {
        link.href = value
      } else {
        link.href = '/favicon.ico'
      }
    }
  }

  return {
    bgType,
    bgColor,
    bgImage,
    bgOpacity,
    language,
    favicon,
    uploadedImages,
    uploadedIcons,
    loading,
    initialized,
    loadSettings,
    saveSettings,
    setBgImage,
    setBgImageFromData,
    setBgType,
    setBgColor,
    setBgOpacity,
    setLanguage,
    setFavicon,
    setFaviconFromData,
    addUploadedImage,
    addUploadedImagesBatch,
    addUploadedImagesBatchLocal,
    removeUploadedImage,
    addUploadedIcon,
    addUploadedIconsBatch,
    removeUploadedIcon,
    applyFavicon
  }
})