xiaoxia-saas/apps/web/src/components/title/useTitleTemplates.ts

/**
 * 标题模板 CRUD Hook（#2003）
 *
 * - 内存态 + localStorage 持久化
 * - 系统模板（来自 TITLE_PRESETS）始终前置、不可删除/编辑源
 * - 用户模板 CRUD：新增/复制/更新/删除/导出/导入
 */
import { useCallback, useEffect, useMemo, useState } from "react"
import { TITLE_PRESETS } from "./constants"
import type { TitleStyleConfig } from "./types"
import type { TitleTemplate } from "./template-types"

const STORAGE_KEY = "xiaoxia.title.templates.v1"

function uid(): string {
  return "usr:" + Math.random().toString(36).slice(2, 10) + Date.now().toString(36)
}

/** 把 TITLE_PRESETS 转为内置 TitleTemplate 列表 */
function buildBuiltinTemplates(): TitleTemplate[] {
  const now = "2026-09-22T00:00:00+08:00"
  return TITLE_PRESETS.map((p) => ({
    id: `sys:${p.key}`,
    name: p.label,
    description: "系统内置模板",
    isBuiltin: true,
    emoji: p.emoji,
    createdAt: now,
    updatedAt: now,
    style: { ...p.style },
  }))
}

function loadUserTemplates(): TitleTemplate[] {
  if (typeof window === "undefined") return []
  try {
    const raw = window.localStorage.getItem(STORAGE_KEY)
    if (!raw) return []
    const parsed = JSON.parse(raw)
    if (!Array.isArray(parsed)) return []
    return parsed.filter((t) => t && !t.isBuiltin && t.id.startsWith("usr:"))
  } catch {
    return []
  }
}

function saveUserTemplates(list: TitleTemplate[]) {
  if (typeof window === "undefined") return
  try {
    window.localStorage.setItem(STORAGE_KEY, JSON.stringify(list))
  } catch {
    /* ignore quota */
  }
}

export interface UseTitleTemplatesResult {
  templates: TitleTemplate[]
  builtin: TitleTemplate[]
  custom: TitleTemplate[]
  /** 新建自定义模板：传入样式（snake_case），返回新建模板 id */
  createTemplate: (input: {
    name: string
    description?: string
    emoji?: string
    style: Partial<TitleStyleConfig>
  }) => TitleTemplate
  /** 复制模板（内置模板也可复制，自动加"副本"后缀） */
  duplicateTemplate: (id: string) => TitleTemplate | null
  /** 更新自定义模板（系统模板不可改） */
  updateTemplate: (id: string, patch: Partial<Omit<TitleTemplate, "id" | "isBuiltin">>) => void
  /** 删除自定义模板 */
  deleteTemplate: (id: string) => void
  /** 导出单个模板为 JSON 字符串 */
  exportTemplate: (id: string) => string | null
  /** 导入 JSON 字符串作为新模板，返回新建模板 */
  importTemplate: (json: string) => TitleTemplate | null
  /** 根据 id 查询模板 */
  getById: (id: string) => TitleTemplate | undefined
}

export function useTitleTemplates(): UseTitleTemplatesResult {
  const [custom, setCustom] = useState<TitleTemplate[]>(() => loadUserTemplates())

  // 跨 tab 同步
  useEffect(() => {
    const onStorage = (e: StorageEvent) => {
      if (e.key === STORAGE_KEY) setCustom(loadUserTemplates())
    }
    window.addEventListener("storage", onStorage)
    return () => window.removeEventListener("storage", onStorage)
  }, [])

  const builtin = useMemo(() => buildBuiltinTemplates(), [])
  const templates = useMemo(() => [...builtin, ...custom], [builtin, custom])

  const persist = useCallback((next: TitleTemplate[]) => {
    setCustom(next)
    saveUserTemplates(next)
  }, [])

  const getById = useCallback((id: string) => templates.find((t) => t.id === id), [templates])

  const createTemplate = useCallback<UseTitleTemplatesResult["createTemplate"]>(
    ({ name, description, emoji, style }) => {
      const now = new Date().toISOString()
      const t: TitleTemplate = {
        id: uid(),
        name: name.trim() || "未命名模板",
        description: description?.trim() || undefined,
        emoji: emoji || "✨",
        isBuiltin: false,
        createdAt: now,
        updatedAt: now,
        style: { ...style },
      }
      persist([...custom, t])
      return t
    },
    [custom, persist],
  )

  const duplicateTemplate = useCallback<UseTitleTemplatesResult["duplicateTemplate"]>(
    (id) => {
      const src = templates.find((t) => t.id === id)
      if (!src) return null
      const now = new Date().toISOString()
      const t: TitleTemplate = {
        id: uid(),
        name: `${src.name} 副本`,
        description: src.description,
        emoji: src.emoji,
        isBuiltin: false,
        createdAt: now,
        updatedAt: now,
        style: { ...src.style },
      }
      persist([...custom, t])
      return t
    },
    [templates, custom, persist],
  )

  const updateTemplate = useCallback<UseTitleTemplatesResult["updateTemplate"]>(
    (id, patch) => {
      if (id.startsWith("sys:")) return
      const next = custom.map((t) =>
        t.id === id
          ? { ...t, ...patch, id: t.id, isBuiltin: false, updatedAt: new Date().toISOString() }
          : t,
      )
      persist(next)
    },
    [custom, persist],
  )

  const deleteTemplate = useCallback<UseTitleTemplatesResult["deleteTemplate"]>(
    (id) => {
      if (id.startsWith("sys:")) return
      persist(custom.filter((t) => t.id !== id))
    },
    [custom, persist],
  )

  const exportTemplate = useCallback<UseTitleTemplatesResult["exportTemplate"]>(
    (id) => {
      const t = templates.find((x) => x.id === id)
      if (!t) return null
      return JSON.stringify(
        {
          name: t.name,
          description: t.description,
          emoji: t.emoji,
          style: t.style,
          exportedAt: new Date().toISOString(),
        },
        null,
        2,
      )
    },
    [templates],
  )

  const importTemplate = useCallback<UseTitleTemplatesResult["importTemplate"]>(
    (json) => {
      try {
        const data = JSON.parse(json)
        if (!data || typeof data !== "object" || !data.style) return null
        return createTemplate({
          name: data.name || "导入模板",
          description: data.description,
          emoji: data.emoji || "✨",
          style: data.style,
        })
      } catch {
        return null
      }
    },
    [createTemplate],
  )

  return {
    templates,
    builtin,
    custom,
    createTemplate,
    duplicateTemplate,
    updateTemplate,
    deleteTemplate,
    exportTemplate,
    importTemplate,
    getById,
  }
}