xiaoxia-saas/apps/web/src/pages/history/TaskHistory.tsx

/**
 * 任务历史页面 — V21 设计系统
 * 页面头部 + 圆角胶囊 Tab 筛选（含计数）+ 卡片式任务列表 + 分页 + 空状态
 */
import React from "react"
import { PageHeader, LoadingState, ErrorState, EmptyState } from "./components/States"
import { HistoryTabs, TaskItem, Pagination } from "./components/TaskList"
import { useTaskHistory } from "./hooks/useTaskHistory"
import "./history.css"

const TaskHistory: React.FC = () => {
  const {
    activeTab,
    currentPage,
    totalPages,
    tabs,
    tabCounts,
    paginatedTasks,
    isLoading,
    isError,
    error,
    retryLoading,
    setCurrentPage,
    handleTabChange,
    handleRetry,
    handleView,
    refetch,
  } = useTaskHistory()

  // Loading 状态
  if (isLoading) {
    return (
      <div className="xx-history-page">
        <PageHeader />
        <LoadingState />
      </div>
    )
  }

  // Error 状态
  if (isError) {
    return (
      <div className="xx-history-page">
        <PageHeader />
        <ErrorState message={error?.message} onRetry={() => refetch()} />
      </div>
    )
  }

  const totalCount = tabCounts[activeTab] ?? paginatedTasks.length

  return (
    <div className="xx-history-page">
      <PageHeader />

      <HistoryTabs
        tabs={tabs}
        activeTab={activeTab}
        tabCounts={tabCounts}
        onChange={handleTabChange}
      />

      {/* 任务列表 */}
      {paginatedTasks.length === 0 ? (
        <EmptyState activeTab={activeTab} />
      ) : (
        <div className="xx-history-task-list">
          {paginatedTasks.map((task) => (
            <TaskItem
              key={task.id}
              task={task}
              onRetry={handleRetry}
              onView={handleView}
              retryLoading={retryLoading}
            />
          ))}
        </div>
      )}

      <Pagination
        currentPage={currentPage}
        totalPages={totalPages}
        total={totalCount}
        onChange={setCurrentPage}
      />
    </div>
  )
}

export default TaskHistory