xiaoxia-saas/apps/web/src/pages/editing-planner/components/GenerationHistoryModal.tsx

/**
 * 生成历史弹窗 — 展示当前剪辑计划的生成任务记录
 * 从 EditingPlanner 拆分，避免主文件过大
 */
import React from "react";
import { CloseOutlined, InboxOutlined } from "@ant-design/icons";
import type { EditPlanGeneration } from "@/api/editPlans";
import { PLAN_STATUS_LABELS } from "@/api/editPlans";

interface GenerationHistoryModalProps {
  open: boolean;
  loading: boolean;
  history: EditPlanGeneration[];
  onClose: () => void;
  onCancel?: (taskId: string) => void;
  cancelLoading?: boolean;
}

const GenerationHistoryModal: React.FC<GenerationHistoryModalProps> = ({
  open,
  loading,
  history,
  onClose,
  onCancel,
  cancelLoading,
}) => {
  if (!open) return null;

  return (
    <div className="ep-modal-overlay" onClick={onClose}>
      <div
        className="ep-modal ep-gh-modal"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="ep-modal-header">
          <h3>生成历史</h3>
          <button className="ep-modal-close" onClick={onClose}>
            <CloseOutlined />
          </button>
        </div>
        <div className="ep-modal-body ep-gh-body">
          {loading ? (
            <div className="ep-gh-empty">
              <div className="ep-skeleton">
                <div className="ep-skeleton-item ep-skeleton-item--header" />
                <div className="ep-skeleton-item" />
                <div className="ep-skeleton-item" />
                <div className="ep-skeleton-item" />
              </div>
            </div>
          ) : history.length === 0 ? (
            <div className="ep-gh-empty">
              <InboxOutlined style={{ fontSize: 32, opacity: 0.4 }} />
              <span>暂无生成记录</span>
            </div>
          ) : (
            <table className="ep-gh-table">
              <thead>
                <tr className="ep-gh-table-header-row">
                  <th className="ep-gh-th">任务ID</th>
                  <th className="ep-gh-th">状态</th>
                  <th className="ep-gh-th">创建时间</th>
                  <th className="ep-gh-th">更新时间</th>
                  {onCancel && <th className="ep-gh-th">操作</th>}
                </tr>
              </thead>
              <tbody>
                {history.map((gen) => {
                  const statusClass = `ep-gh-status-tag--${gen.status}`;
                  const canCancel =
                    gen.status === "rendering" || gen.status === "editing";
                  return (
                    <tr key={gen.id} className="ep-gh-table-row">
                      <td className="ep-gh-td ep-gh-td-id">
                        {gen.id ? `${gen.id.slice(0, 8)}...` : "—"}
                      </td>
                      <td className="ep-gh-td">
                        <span className={`ep-gh-status-tag ${statusClass}`}>
                          {PLAN_STATUS_LABELS[gen.status] || gen.status}
                        </span>
                      </td>
                      <td className="ep-gh-td ep-gh-td-time">
                        {gen.created_at
                          ? new Date(gen.created_at).toLocaleString("zh-CN")
                          : "—"}
                      </td>
                      <td className="ep-gh-td ep-gh-td-time">
                        {gen.updated_at
                          ? new Date(gen.updated_at).toLocaleString("zh-CN")
                          : "—"}
                      </td>
                      {onCancel && (
                        <td className="ep-gh-td ep-gh-td-action">
                          {canCancel ? (
                            <button
                              className="ep-gh-cancel-btn"
                              onClick={() => onCancel(gen.id)}
                              disabled={cancelLoading}
                            >
                              取消
                            </button>
                          ) : (
                            <span className="ep-gh-action-placeholder">—</span>
                          )}
                        </td>
                      )}
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
        </div>
        <div className="ep-modal-footer">
          <button className="ep-btn ep-btn-secondary" onClick={onClose}>
            关闭
          </button>
        </div>
      </div>
    </div>
  );
};

export default GenerationHistoryModal;