xiaoxia-saas/apps/web/src/pages/templates/TemplateLibrary.tsx

/**
 * 模板库页面（升级版）— V21 设计系统
 * 对接后端模板管理 API：
 * - 分页查询（page/page_size/category/keyword/duration_range）
 * - 模板详情（素材规则、字幕样式、BGM、比例等参数配置）
 * - 复制模板 / 从模板生成
 * - 卡片网格布局 + 类型筛选 + 搜索 + 收藏
 */
import React from "react"
import { useTemplateLibrary } from "./hooks/useTemplateLibrary"
import { useTemplateDetail } from "./hooks/useTemplateDetail"
import { TemplateHeader } from "./components/template-library/TemplateHeader"
import { TemplateToolbar } from "./components/template-library/TemplateToolbar"
import { TemplateGrid } from "./components/template-library/TemplateGrid"
import { TemplateDetailModal } from "./components/template-library/TemplateDetailModal"
import "./templates.css"

const TemplateLibrary: React.FC = () => {
  const {
    templates,
    totalTemplates,
    isLoading,
    isError,
    error,
    searchText,
    activeType,
    durationRange,
    page,
    pageSize,
    setPage,
    toggleFavorite,
    handleCopy,
    handleUse,
    handleCreate,
    handleSearchChange,
    handleCategoryChange,
    handleDurationChange,
  } = useTemplateLibrary()

  const {
    previewTemplate,
    detailLoading,
    handlePreview,
    handleClose,
    handleToggleFavorite,
    handleUse: handleUseFromDetail,
    handleCopy: handleCopyFromDetail,
  } = useTemplateDetail({
    onToggleFavorite: (id) => toggleFavorite(id),
    onUse: handleUse,
    onCopy: handleCopy,
  })

  return (
    <div className="xx-templates-page">
      {/* 页面头部 */}
      <TemplateHeader onCreateClick={handleCreate} />

      {/* 工具栏：搜索 + 类型按钮组 + 时长筛选 */}
      <TemplateToolbar
        searchText={searchText}
        onSearchChange={handleSearchChange}
        activeType={activeType}
        onTypeChange={handleCategoryChange}
        durationRange={durationRange}
        onDurationChange={handleDurationChange}
      />

      {/* 模板展示区 */}
      <TemplateGrid
        templates={templates}
        total={totalTemplates}
        page={page}
        pageSize={pageSize}
        isLoading={isLoading}
        isError={isError}
        errorMessage={error?.message}
        searchText={searchText}
        activeType={activeType}
        durationRange={durationRange}
        onPageChange={setPage}
        onPreview={handlePreview}
        onToggleFavorite={toggleFavorite}
        onUse={handleUse}
      />

      {/* 详情弹窗 */}
      {previewTemplate && (
        <TemplateDetailModal
          template={previewTemplate}
          isFavorite={previewTemplate.is_favorite ?? false}
          onClose={handleClose}
          onToggleFavorite={handleToggleFavorite}
          onUse={handleUseFromDetail}
          onCopy={handleCopyFromDetail}
        />
      )}

      {/* 详情加载中的提示 */}
      {detailLoading && previewTemplate && (
        <div className="xx-template-detail-loading">加载中...</div>
      )}
    </div>
  )
}

export default TemplateLibrary