hyb-oa/client/src/pages/WorkflowTaskDetailPage.tsx

import { useMemo, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { isApiError } from "../api/types";
import { mapApiErrorMessage } from "../api/errorMessages";
import {
  approveWorkflowTask,
  fetchWorkflowApprovers,
  fetchWorkflowTaskDetail,
  rejectWorkflowTask,
  returnWorkflowTask,
  transferWorkflowTask,
} from "../api/workflow";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import { Card } from "../components/ui/card";
import { Textarea } from "../components/ui/textarea";

export function WorkflowTaskDetailPage() {
  const { taskId = "" } = useParams();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { permissions } = useAuth();

  const [rejectComment, setRejectComment] = useState("请补充必要说明后重提");
  const [returnComment, setReturnComment] = useState("请补充报销说明并修正后重新提交");
  const [transferReason, setTransferReason] = useState("当前事项需转交对应审批人处理，请尽快处理。");
  const [selectedApprover, setSelectedApprover] = useState("");
  const [actionError, setActionError] = useState("");

  const detailQuery = useQuery({
    enabled: Boolean(taskId),
    queryKey: ["workflow", "task", taskId],
    queryFn: () => fetchWorkflowTaskDetail(taskId),
  });

  const approverQuery = useQuery({
    enabled: hasPermission(permissions, "expense.transfer"),
    queryKey: ["workflow", "approvers"],
    queryFn: () => fetchWorkflowApprovers({ page: 1, pageSize: 50 }),
  });

  const allowedActions = useMemo(() => {
    return new Set(detailQuery.data?.allowedActions ?? []);
  }, [detailQuery.data?.allowedActions]);

  const mutation = useMutation({
    mutationFn: async (action: "approve" | "reject" | "return" | "transfer") => {
      if (!taskId) {
        throw new Error("missing taskId");
      }

      if (action === "approve") {
        return approveWorkflowTask(taskId);
      }

      if (action === "reject") {
        return rejectWorkflowTask(taskId, rejectComment.trim());
      }

      if (action === "return") {
        return returnWorkflowTask(taskId, returnComment.trim());
      }

      if (!selectedApprover) {
        throw new Error("请选择转审目标");
      }

      return transferWorkflowTask(taskId, selectedApprover, transferReason.trim());
    },
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["workflow", "tasks"] }),
        queryClient.invalidateQueries({ queryKey: ["workflow", "task", taskId] }),
      ]);
      setActionError("");
    },
    onError: (error) => {
      if (error instanceof Error && !isApiError(error)) {
        setActionError(error.message);
        return;
      }

      if (isApiError(error)) {
        setActionError(
          `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`,
        );
        return;
      }

      setActionError("动作执行失败，请稍后重试");
    },
  });

  if (!taskId) {
    return (
      <Card className="p-6">
        <p className="text-sm text-red-600">缺少 taskId 参数。</p>
      </Card>
    );
  }

  if (detailQuery.isLoading) {
    return (
      <Card className="p-6">
        <p className="text-sm text-slate-500">加载任务详情中...</p>
      </Card>
    );
  }

  if (detailQuery.isError || !detailQuery.data) {
    const message = isApiError(detailQuery.error)
      ? `${detailQuery.error.code}: ${mapApiErrorMessage(
          detailQuery.error.code,
          detailQuery.error.details,
          detailQuery.error.message,
        )}`
      : "加载失败，请返回列表重试";

    return (
      <Card className="space-y-3 p-6">
        <p className="text-sm text-red-600">{message}</p>
        <Button
          variant="secondary"
          onClick={() => navigate("/workflow/tasks")}
          type="button"
        >
          返回待办列表
        </Button>
      </Card>
    );
  }

  const detail = detailQuery.data;

  return (
    <div className="space-y-6">
      <PageHeader
        title={`任务详情 ${detail.task.stepName}`}
        subtitle={`任务ID: ${detail.task.id}`}
        actions={
          <Button asChild variant="secondary" data-testid="workflow-task-back">
            <Link to="/workflow/tasks">返回待办列表</Link>
          </Button>
        }
      />

      <Card className="space-y-2 p-6 text-sm" data-testid="workflow-task-summary">
        <div>状态：{detail.task.status}</div>
        <div>实例：{detail.workflowInstance?.id ?? "-"}</div>
        <div>报销单号：{detail.reimbursement?.formNumber ?? "-"}</div>
        <div>报销金额：{detail.reimbursement?.totalAmount ?? "-"}</div>
        <div>提交人：{detail.reimbursement?.submitter?.name ?? "-"}</div>
        <div>报销人：{detail.reimbursement?.owner?.name ?? "-"}</div>
      </Card>

      <Card className="space-y-4 p-6">
        <h3 className="text-base font-semibold text-slate-900">审批动作</h3>

        {actionError ? (
          <p
            className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600"
            data-testid="workflow-task-action-error"
          >
            {actionError}
          </p>
        ) : null}

        <div className="flex flex-wrap gap-2">
          <Button
            data-testid="workflow-task-approve"
            disabled={!allowedActions.has("approve") || mutation.isPending}
            onClick={() => mutation.mutate("approve")}
            type="button"
          >
            通过
          </Button>
        </div>

        <div className="space-y-2 rounded-lg border border-slate-200 p-4">
          <p className="text-sm font-medium text-slate-800">驳回</p>
          <Textarea
            data-testid="workflow-task-reject-comment"
            onChange={(event) => setRejectComment(event.target.value)}
            rows={2}
            value={rejectComment}
          />
          <Button
            data-testid="workflow-task-reject"
            variant="secondary"
            disabled={!allowedActions.has("reject") || mutation.isPending || rejectComment.trim().length < 1}
            onClick={() => mutation.mutate("reject")}
            type="button"
          >
            提交驳回
          </Button>
        </div>

        <div className="space-y-2 rounded-lg border border-slate-200 p-4">
          <p className="text-sm font-medium text-slate-800">退回</p>
          <Textarea
            data-testid="workflow-task-return-comment"
            onChange={(event) => setReturnComment(event.target.value)}
            rows={2}
            value={returnComment}
          />
          <Button
            data-testid="workflow-task-return"
            variant="secondary"
            disabled={!allowedActions.has("return") || mutation.isPending || returnComment.trim().length < 1}
            onClick={() => mutation.mutate("return")}
            type="button"
          >
            提交退回
          </Button>
        </div>

        <div className="space-y-2 rounded-lg border border-slate-200 p-4">
          <p className="text-sm font-medium text-slate-800">转审</p>
          <select
            className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
            data-testid="workflow-task-transfer-to-approver"
            onChange={(event) => setSelectedApprover(event.target.value)}
            value={selectedApprover}
          >
            <option value="">请选择目标审批人</option>
            {(approverQuery.data?.items ?? []).map((item) => (
              <option key={item.id} value={item.id}>
                {item.name} ({item.employeeNo})
              </option>
            ))}
          </select>
          <Textarea
            data-testid="workflow-task-transfer-reason"
            onChange={(event) => setTransferReason(event.target.value)}
            rows={2}
            value={transferReason}
          />
          <Button
            data-testid="workflow-task-transfer"
            variant="secondary"
            disabled={
              !allowedActions.has("transfer") ||
              mutation.isPending ||
              !selectedApprover ||
              transferReason.trim().length < 10
            }
            onClick={() => mutation.mutate("transfer")}
            type="button"
          >
            提交转审
          </Button>
        </div>
      </Card>

      <Card className="space-y-3 p-6">
        <h3 className="text-base font-semibold text-slate-900">处理历史</h3>
        <div className="space-y-2">
          {detail.history.length ? (
            detail.history.map((item) => (
              <div className="rounded-lg border border-slate-200 px-3 py-2 text-sm" key={item.id}>
                <div className="font-medium text-slate-900">
                  {item.action} · {item.actorName || item.actorId}
                </div>
                <div className="text-slate-600">{item.comment || "-"}</div>
                <div className="text-xs text-slate-500">{item.createdAt || "-"}</div>
              </div>
            ))
          ) : (
            <p className="text-sm text-slate-500">暂无历史记录</p>
          )}
        </div>
      </Card>
    </div>
  );
}