xiaoxia-saas/apps/web/src/pages/templates/hooks/useTemplateLibrary.ts

import { useState, useMemo, useCallback } from "react"
import { useNavigate } from "react-router-dom"
import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"
import { message } from "antd"
import {
  getTemplates,
  toggleFavoriteTemplate,
  copyTemplate,
  type TemplateItem,
  type TemplateListParams,
} from "@/api/templates"
import type { EditTemplateType, DurationRange } from "../types/templateLibrary"
import { DEFAULT_PAGE_SIZE } from "../constants/templateLibrary"

export const useTemplateLibrary = () => {
  const navigate = useNavigate()
  const queryClient = useQueryClient()

  /* 筛选状态 */
  const [searchText, setSearchText] = useState("")
  const [activeType, setActiveType] = useState<EditTemplateType | "全部">("全部")
  const [durationRange, setDurationRange] = useState<DurationRange>("")
  const [page, setPage] = useState(1)
  const [pageSize] = useState(DEFAULT_PAGE_SIZE)

  /* 构建查询参数 */
  const queryParams: TemplateListParams = useMemo(() => {
    const params: TemplateListParams = {
      page,
      page_size: pageSize,
    }
    if (activeType !== "全部") params.category = activeType
    if (searchText.trim()) params.keyword = searchText.trim()
    if (durationRange) params.duration_range = durationRange
    return params
  }, [page, pageSize, activeType, searchText, durationRange])

  /* 获取模板列表 */
  const {
    data: templateData,
    isLoading,
    isError,
    error,
  } = useQuery({
    queryKey: ["templates", queryParams],
    queryFn: () => getTemplates(queryParams),
    staleTime: 30_000,
  })

  const templates = templateData?.items ?? []
  const totalTemplates = templateData?.total ?? 0

  /* 收藏 mutation */
  const favMutation = useMutation({
    mutationFn: toggleFavoriteTemplate,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ["templates"] })
    },
  })

  /* 复制模板 mutation */
  const copyMutation = useMutation({
    mutationFn: copyTemplate,
    onSuccess: (data) => {
      message.success(`模板「${data.name}」已复制到「我的模板」`)
      queryClient.invalidateQueries({ queryKey: ["templates"] })
    },
    onError: () => {
      message.error("复制模板失败，请稍后重试")
    },
  })

  /* 操作：切换收藏 */
  const toggleFavorite = useCallback(
    (id: string, e?: React.MouseEvent) => {
      e?.stopPropagation()
      favMutation.mutate(id)
    },
    [favMutation],
  )

  /* 操作：复制模板 */
  const handleCopy = useCallback(
    (template: TemplateItem) => {
      copyMutation.mutate(template.id)
    },
    [copyMutation],
  )

  /* 操作：使用模板 → 跳转剪辑模板 */
  const handleUse = useCallback(
    (template: TemplateItem) => {
      navigate(`/app/editing-planner?templateId=${template.id}`)
    },
    [navigate],
  )

  /* 操作：创建模板 */
  const handleCreate = useCallback(() => {
    navigate("/app/editing-planner")
  }, [navigate])

  /* 搜索 */
  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchText(e.target.value)
    setPage(1)
  }, [])

  /* 切换分类 */
  const handleCategoryChange = useCallback((type: EditTemplateType | "全部") => {
    setActiveType(type)
    setPage(1)
  }, [])

  /* 切换时长筛选 */
  const handleDurationChange = useCallback((value: DurationRange) => {
    setDurationRange(value)
    setPage(1)
  }, [])

  return {
    /* 状态 */
    templates,
    totalTemplates,
    isLoading,
    isError,
    error,
    searchText,
    activeType,
    durationRange,
    page,
    pageSize,
    /* mutations */
    favMutation,
    copyMutation,
    /* setters */
    setPage,
    /* handlers */
    toggleFavorite,
    handleCopy,
    handleUse,
    handleCreate,
    handleSearchChange,
    handleCategoryChange,
    handleDurationChange,
  }
}