/**
 * templateSocialStore 使用示例
 *
 * 这个文件展示了如何使用 templateSocialStore 来管理模板的点赞和收藏状态
 */

import { useTemplateSocialStore } from './templateSocialStore'

// 示例 1: 基本使用
export function Example1_BasicUsage() {
  const { isLiked, setLiked } = useTemplateSocialStore()

  const handleToggleLike = (templateId: string) => {
    const currentState = isLiked(templateId)
    setLiked(templateId, !currentState)
  }

  return { handleToggleLike }
}

// 示例 2: 批量更新状态（例如从 API 获取后）
export function Example2_BatchUpdate() {
  const { setLikedStates, setFavoritedStates } = useTemplateSocialStore()

  // 假设从 API 获取了模板列表及其社交状态
  const updateFromAPI = (apiResponse: {
    templates: Array<{ id: string; liked: boolean; favorited: boolean }>
  }) => {
    const likedStates: Record<string, boolean> = {}
    const favoritedStates: Record<string, boolean> = {}

    apiResponse.templates.forEach((template) => {
      likedStates[template.id] = template.liked
      favoritedStates[template.id] = template.favorited
    })

    // 批量更新
    setLikedStates(likedStates)
    setFavoritedStates(favoritedStates)
  }

  return { updateFromAPI }
}

// 示例 3: 在 React 组件中使用
export function Example3_ComponentUsage() {
  const templateId = 'template-123'

  // 获取状态和方法
  const liked = useTemplateSocialStore((state) => state.isLiked(templateId))
  const favorited = useTemplateSocialStore((state) => state.isFavorited(templateId))
  const setLiked = useTemplateSocialStore((state) => state.setLiked)
  const setFavorited = useTemplateSocialStore((state) => state.setFavorited)

  const handleLike = () => {
    setLiked(templateId, !liked)
  }

  const handleFavorite = () => {
    setFavorited(templateId, !favorited)
  }

  return {
    liked,
    favorited,
    handleLike,
    handleFavorite,
  }
}

// 示例 4: 使用选择器优化性能
export function Example4_SelectorOptimization() {
  const templateId = 'template-123'

  // 只订阅需要的状态，避免不必要的重渲染
  const liked = useTemplateSocialStore((state) => state.likedMap[templateId])
  const favorited = useTemplateSocialStore((state) => state.favoritedMap[templateId])

  return { liked, favorited }
}

// 示例 5: 清空状态（例如用户登出时）
export function Example5_ClearState() {
  const clear = useTemplateSocialStore((state) => state.clear)

  const handleLogout = () => {
    // 清空所有社交状态
    clear()
    // ... 其他登出逻辑
  }

  return { handleLogout }
}

// 示例 6: 结合 API 调用
export function Example6_WithAPI() {
  const { setLiked, isLiked } = useTemplateSocialStore()

  const handleLikeWithAPI = async (templateId: string) => {
    const currentState = isLiked(templateId)

    try {
      // 乐观更新：立即更新 UI
      setLiked(templateId, !currentState)

      // 调用 API
      // await api.likeTemplate(templateId)

      // 如果 API 调用失败，回滚状态
      // catch (error) {
      //   setLiked(templateId, currentState)
      //   throw error
      // }
    } catch (error) {
      console.error('Failed to like template:', error)
    }
  }

  return { handleLikeWithAPI }
}

// 示例 7: 获取所有点赞的模板
export function Example7_GetAllLiked() {
  const likedMap = useTemplateSocialStore((state) => state.likedMap)

  const getLikedTemplateIds = (): string[] => {
    return Object.keys(likedMap).filter((id) => likedMap[id])
  }

  const likedCount = getLikedTemplateIds().length

  return { getLikedTemplateIds, likedCount }
}

// 示例 8: 重置特定模板的状态
export function Example8_ResetTemplate() {
  const { setLiked, setFavorited } = useTemplateSocialStore()

  const resetTemplateState = (templateId: string) => {
    setLiked(templateId, false)
    setFavorited(templateId, false)
  }

  return { resetTemplateState }
}