import { useMemo, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";

import {
  exportApOperations,
  fetchApOperations,
  type ApOperationsPendingEntityType,
  type ApOperationsRiskBucket,
  type ApPartialMatchItemSummary,
} from "../api/apOperations";
import { mapApiErrorMessage } from "../api/errorMessages";
import {
  dismissRiskFlag,
  fetchRiskFlags,
  resolveRiskFlag,
  type RiskFlag,
} from "../api/feeControl";
import {
  cancelPaymentBatch,
  executePaymentBatch,
  fetchPaymentBatchDetail,
  fetchPaymentBatches,
  reviewPaymentBatch,
  type PaymentBatch,
  type PaymentBatchEntityType,
  type PaymentBatchItem,
} from "../api/paymentBatches";
import { fetchTravelTransactions } from "../api/travelPayments";
import {
  confirmTravelReconciliationItem,
  fetchTravelReconciliationBatchDetail,
  type TravelReconciliationItem,
} from "../api/travelReconciliation";
import { isApiError } from "../api/types";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { ConfirmDialog } from "../components/common/ConfirmDialog";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../components/ui/dialog";
import { Input } from "../components/ui/input";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../components/ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "../components/ui/tabs";
import { downloadBlob } from "../lib/download";

type OperationsTab = "pending" | "failed" | "risk" | "reconciliation";
type RiskActionType = "resolve" | "dismiss";
type PendingEntityFilter = ApOperationsPendingEntityType | "all";

type FailedPaymentItemRow = PaymentBatchItem & {
  batchId: string;
  batchNo: string;
  batchName: string;
  entityType: PaymentBatchEntityType;
  batchStatus: PaymentBatch["status"];
  highRisk: boolean;
  reviewRequirement: PaymentBatch["reviewRequirement"];
};

const BUDGET_RISK_CODES = new Set(["budget_exceeded", "budget_threshold_exceeded"]);

function resolveErrorMessage(error: unknown, fallback = "操作失败") {
  return isApiError(error)
    ? `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`
    : error instanceof Error
      ? error.message
      : fallback;
}

function formatDateTime(value: string | null) {
  if (!value) {
    return "-";
  }
  const date = new Date(value);
  if (Number.isNaN(date.getTime())) {
    return value;
  }
  return date.toLocaleString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
}

function statusBadgeClass(status: string) {
  if (status === "open" || status === "pending" || status === "draft") {
    return "border-amber-200 bg-amber-50 text-amber-700";
  }
  if (status === "resolved" || status === "confirmed" || status === "reviewed") {
    return "border-emerald-200 bg-emerald-50 text-emerald-700";
  }
  if (status === "dismissed" || status === "cancelled") {
    return "border-zinc-200 bg-zinc-100 text-zinc-600";
  }
  if (status === "failed") {
    return "border-red-200 bg-red-50 text-red-700";
  }
  return "border-zinc-200 bg-zinc-50 text-zinc-600";
}

function entityTypeLabel(value: string) {
  if (value === "reimbursement") return "报销";
  if (value === "travel_order") return "差旅";
  if (value === "purchase_request") return "采购";
  if (value === "travel_request") return "差旅申请";
  return value || "-";
}

function batchStatusLabel(value: string) {
  if (value === "draft") return "草稿";
  if (value === "reviewed") return "已复核";
  if (value === "executed") return "已执行";
  if (value === "failed") return "执行失败";
  if (value === "cancelled") return "已取消";
  return value || "-";
}

function riskBucketLabel(value: ApOperationsRiskBucket) {
  if (value === "budget_overspend") return "预算超支";
  if (value === "exception") return "异常风险";
  return "全部";
}

function riskLevelLabel(value: string) {
  if (value === "high") return "高";
  if (value === "medium") return "中";
  if (value === "low") return "低";
  return value || "-";
}

function matchStatusLabel(value: string) {
  if (value === "amount_mismatch") return "金额不匹配";
  if (value === "currency_mismatch") return "币种不匹配";
  if (value === "missing_transaction") return "缺少交易";
  if (value === "duplicate_charge") return "重复扣款";
  if (value === "orphan_transaction") return "孤儿交易";
  if (value === "reversed_after_payment") return "付款后冲正";
  if (value === "matched") return "已匹配";
  return value || "-";
}

function resolutionStatusLabel(value: string) {
  if (value === "pending") return "待确认";
  if (value === "confirmed") return "已确认";
  return value || "-";
}

function matchesCreatedAtRange(createdAt: string | null, dateFrom: string, dateTo: string) {
  if (!createdAt) {
    return !dateFrom && !dateTo;
  }
  const dateOnly = createdAt.slice(0, 10);
  if (dateFrom && dateOnly < dateFrom) {
    return false;
  }
  if (dateTo && dateOnly > dateTo) {
    return false;
  }
  return true;
}

function riskBucketFromCode(riskCode: string) {
  return BUDGET_RISK_CODES.has(riskCode) ? "budget_overspend" : "exception";
}

function prettyJson(value: unknown) {
  try {
    return JSON.stringify(value ?? {}, null, 2);
  } catch {
    return "{}";
  }
}

function SummaryCard({
  title,
  value,
  tone = "zinc",
}: {
  title: string;
  value: number | string;
  tone?: "zinc" | "amber" | "red" | "emerald";
}) {
  const toneClass =
    tone === "amber"
      ? "text-amber-700"
      : tone === "red"
        ? "text-red-700"
        : tone === "emerald"
          ? "text-emerald-700"
          : "text-zinc-900";

  return (
    <div className="card-std p-5">
      <div className="text-sm text-zinc-500">{title}</div>
      <div className={`mt-2 text-2xl font-bold ${toneClass}`}>{value}</div>
    </div>
  );
}

function SectionError({ message }: { message: string }) {
  return (
    <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
      {message}
    </div>
  );
}

export function ApOperationsPage() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { permissions } = useAuth();

  const canManageBatch = hasPermission(permissions, "payment.batch.manage");
  const canReviewRisk = hasPermission(permissions, "risk.review.manage");
  const canManageTravelPayments = hasPermission(permissions, "travel.payment.manage");

  const [activeTab, setActiveTab] = useState<OperationsTab>("pending");
  const [pendingEntityType, setPendingEntityType] = useState<PendingEntityFilter>("all");
  const [pendingCreatedAtFrom, setPendingCreatedAtFrom] = useState("");
  const [pendingCreatedAtTo, setPendingCreatedAtTo] = useState("");
  const [riskBucket, setRiskBucket] = useState<ApOperationsRiskBucket>("all");

  const [reviewTarget, setReviewTarget] = useState<PaymentBatch | null>(null);
  const [reviewComment, setReviewComment] = useState("");
  const [cancelTarget, setCancelTarget] = useState<PaymentBatch | null>(null);
  const [retryTarget, setRetryTarget] = useState<FailedPaymentItemRow | null>(null);

  const [failedDetailTarget, setFailedDetailTarget] = useState<FailedPaymentItemRow | null>(null);
  const [riskAction, setRiskAction] = useState<{ type: RiskActionType; item: RiskFlag } | null>(null);
  const [riskActionNote, setRiskActionNote] = useState("");

  const [reconciliationDetailTarget, setReconciliationDetailTarget] =
    useState<ApPartialMatchItemSummary | null>(null);
  const [reconciliationConfirmTarget, setReconciliationConfirmTarget] =
    useState<ApPartialMatchItemSummary | null>(null);
  const [reconciliationConfirmNote, setReconciliationConfirmNote] = useState("");

  const [resolvingTravelOrderId, setResolvingTravelOrderId] = useState<string | null>(null);
  const [travelRequestTargets, setTravelRequestTargets] = useState<Record<string, string | null>>({});

  const summaryQuery = useQuery({
    queryKey: ["ap-operations"],
    queryFn: () => fetchApOperations(),
  });

  const paymentBatchesQuery = useQuery({
    queryKey: ["payment-batches"],
    queryFn: () => fetchPaymentBatches(),
  });

  const riskFlagsQuery = useQuery({
    queryKey: ["risk-flags", "open"],
    queryFn: () => fetchRiskFlags({ status: "open" }),
  });

  const failedDetailQuery = useQuery({
    enabled: Boolean(failedDetailTarget?.batchId),
    queryKey: ["payment-batches", "detail", failedDetailTarget?.batchId],
    queryFn: () => fetchPaymentBatchDetail(failedDetailTarget!.batchId),
  });

  const reconciliationDetailQuery = useQuery({
    enabled: Boolean(reconciliationDetailTarget?.travelReconciliationBatchId),
    queryKey: [
      "travel-reconciliation",
      "detail",
      reconciliationDetailTarget?.travelReconciliationBatchId,
    ],
    queryFn: () =>
      fetchTravelReconciliationBatchDetail(reconciliationDetailTarget!.travelReconciliationBatchId),
  });

  const paymentBatches = paymentBatchesQuery.data?.items ?? [];
  const openRiskFlags = riskFlagsQuery.data?.items ?? [];
  const partialMatchItems = summaryQuery.data?.partialMatchItems ?? [];

  const pendingBatches = useMemo(
    () =>
      paymentBatches.filter(
        (item) =>
          ["draft", "reviewed", "failed"].includes(item.status) &&
          (pendingEntityType === "all" || item.entityType === pendingEntityType) &&
          matchesCreatedAtRange(item.createdAt, pendingCreatedAtFrom, pendingCreatedAtTo),
      ),
    [paymentBatches, pendingCreatedAtFrom, pendingCreatedAtTo, pendingEntityType],
  );

  const failedItems = useMemo<FailedPaymentItemRow[]>(
    () =>
      paymentBatches
        .flatMap((batch) =>
          batch.items
            .filter((item) => item.status === "failed")
            .map((item) => ({
              ...item,
              batchId: batch.id,
              batchNo: batch.batchNo,
              batchName: batch.name,
              entityType: batch.entityType,
              batchStatus: batch.status,
              highRisk: batch.highRisk,
              reviewRequirement: batch.reviewRequirement,
            })),
        )
        .sort((left, right) => {
          const leftTs = new Date(left.createdAt ?? 0).getTime();
          const rightTs = new Date(right.createdAt ?? 0).getTime();
          return rightTs - leftTs;
        }),
    [paymentBatches],
  );

  const filteredRiskFlags = useMemo(
    () =>
      openRiskFlags.filter((item) => {
        if (riskBucket === "all") {
          return true;
        }
        return riskBucketFromCode(item.riskCode) === riskBucket;
      }),
    [openRiskFlags, riskBucket],
  );

  const failedDetailItem = useMemo(() => {
    if (!failedDetailTarget) {
      return null;
    }
    return (
      failedDetailQuery.data?.item.items.find((item) => item.id === failedDetailTarget.id) ??
      failedDetailTarget
    );
  }, [failedDetailQuery.data?.item.items, failedDetailTarget]);

  const reconciliationDetailItem = useMemo<TravelReconciliationItem | null>(() => {
    if (!reconciliationDetailTarget) {
      return null;
    }
    return (
      reconciliationDetailQuery.data?.items.find((item) => item.id === reconciliationDetailTarget.id) ??
      null
    );
  }, [reconciliationDetailQuery.data?.items, reconciliationDetailTarget]);

  const refreshWorkbench = async () => {
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ["ap-operations"] }),
      queryClient.invalidateQueries({ queryKey: ["payment-batches"] }),
      queryClient.invalidateQueries({ queryKey: ["risk-flags"] }),
      failedDetailTarget?.batchId
        ? queryClient.invalidateQueries({
            queryKey: ["payment-batches", "detail", failedDetailTarget.batchId],
          })
        : Promise.resolve(),
      reconciliationDetailTarget?.travelReconciliationBatchId
        ? queryClient.invalidateQueries({
            queryKey: [
              "travel-reconciliation",
              "detail",
              reconciliationDetailTarget.travelReconciliationBatchId,
            ],
          })
        : Promise.resolve(),
    ]);
  };

  const reviewMutation = useMutation({
    mutationFn: async (batch: PaymentBatch) => {
      const comment = reviewComment.trim();
      if (!comment) {
        throw new Error("快捷复核必须填写复核意见");
      }
      const resolveRiskFlagIds = Array.from(
        new Set(batch.items.flatMap((item) => item.openRiskFlags.map((flag) => flag.id))),
      );
      return reviewPaymentBatch(batch.id, { comment, resolveRiskFlagIds });
    },
    onSuccess: async ({ item }) => {
      await refreshWorkbench();
      setReviewTarget(null);
      setReviewComment("");
      toast.success(
        item.reviewRequirement.nextStep === "ready_for_execute"
          ? "付款批次复核完成"
          : "付款批次已完成首轮复核",
      );
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error, "快捷复核失败"));
    },
  });

  const cancelMutation = useMutation({
    mutationFn: (batchId: string) => cancelPaymentBatch(batchId),
    onSuccess: async () => {
      await refreshWorkbench();
      setCancelTarget(null);
      toast.success("付款批次已取消");
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error, "取消批次失败"));
    },
  });

  const executeMutation = useMutation({
    mutationFn: (batchId: string) => executePaymentBatch(batchId),
    onSuccess: async () => {
      await refreshWorkbench();
      setRetryTarget(null);
      toast.success("付款批次已重新执行");
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error, "重试执行失败"));
    },
  });

  const riskMutation = useMutation({
    mutationFn: async (payload: { type: RiskActionType; item: RiskFlag }) => {
      const note = riskActionNote.trim();
      if (!note) {
        throw new Error(payload.type === "resolve" ? "解决说明不能为空" : "驳回理由不能为空");
      }
      if (payload.type === "resolve") {
        return resolveRiskFlag(payload.item.id, { note });
      }
      return dismissRiskFlag(payload.item.id, { note });
    },
    onSuccess: async (_, payload) => {
      await refreshWorkbench();
      setRiskAction(null);
      setRiskActionNote("");
      toast.success(payload.type === "resolve" ? "风险标记已解决" : "风险标记已驳回");
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error, "处理风险标记失败"));
    },
  });

  const reconciliationConfirmMutation = useMutation({
    mutationFn: (itemId: string) =>
      confirmTravelReconciliationItem(itemId, {
        note: reconciliationConfirmNote.trim() || null,
      }),
    onSuccess: async () => {
      await refreshWorkbench();
      setReconciliationConfirmTarget(null);
      setReconciliationConfirmNote("");
      toast.success("对账异常已确认");
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error, "确认对账异常失败"));
    },
  });

  const exportMutation = useMutation({
    mutationFn: (format: "csv" | "xlsx") =>
      exportApOperations({
        format,
        pendingEntityType: pendingEntityType === "all" ? undefined : pendingEntityType,
        pendingCreatedAtFrom: pendingCreatedAtFrom || undefined,
        pendingCreatedAtTo: pendingCreatedAtTo || undefined,
        riskBucket,
      }),
    onSuccess: (response, format) => {
      downloadBlob(response.blob, response.filename ?? `ap-operations.${format}`);
      toast.success(`AP 运营数据已导出为 ${format.toUpperCase()}`);
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error, "导出失败"));
    },
  });

  const handleJumpToBatch = (batchId: string) => {
    navigate(`/payment-batches?id=${encodeURIComponent(batchId)}`);
  };

  const handleJumpToLinkedEntity = async (item: FailedPaymentItemRow) => {
    if (item.entityType === "reimbursement") {
      navigate(`/reimbursements/${item.entityId}`);
      return;
    }

    if (!canManageTravelPayments) {
      toast.error("当前账号无权限解析差旅付款关联申请");
      return;
    }

    const cachedTarget = travelRequestTargets[item.entityId];
    if (cachedTarget) {
      navigate(`/travel-requests?tab=requests&id=${encodeURIComponent(cachedTarget)}`);
      return;
    }
    if (cachedTarget === null) {
      return;
    }

    setResolvingTravelOrderId(item.entityId);
    try {
      const response = await fetchTravelTransactions({
        travelOrderId: item.entityId,
        page: 1,
        pageSize: 1,
      });
      const targetId = response.items[0]?.travelRequestId ?? null;
      setTravelRequestTargets((current) => ({ ...current, [item.entityId]: targetId }));
      if (!targetId) {
        toast.error("未找到关联差旅申请，无法跳转");
        return;
      }
      navigate(`/travel-requests?tab=requests&id=${encodeURIComponent(targetId)}`);
    } catch (error) {
      toast.error(resolveErrorMessage(error, "解析关联差旅申请失败"));
    } finally {
      setResolvingTravelOrderId(null);
    }
  };

  if (summaryQuery.isLoading && paymentBatchesQuery.isLoading && riskFlagsQuery.isLoading) {
    return <div className="card-std p-6 text-sm text-zinc-500">加载 AP 运营工作台...</div>;
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title="AP 运营"
        subtitle="将待付款批次、异常付款、风险标记和对账异常收口在同一工作台内处理。"
        actions={
          <>
            <Button
              type="button"
              variant="secondary"
              onClick={() => refreshWorkbench()}
              disabled={summaryQuery.isFetching || paymentBatchesQuery.isFetching || riskFlagsQuery.isFetching}
            >
              刷新
            </Button>
            <Button
              type="button"
              variant="secondary"
              onClick={() => exportMutation.mutate("csv")}
              disabled={exportMutation.isPending}
            >
              {exportMutation.isPending ? "导出中..." : "导出 CSV"}
            </Button>
            <Button
              type="button"
              onClick={() => exportMutation.mutate("xlsx")}
              disabled={exportMutation.isPending}
            >
              {exportMutation.isPending ? "导出中..." : "导出 Excel"}
            </Button>
          </>
        }
      />

      {summaryQuery.isError ? (
        <SectionError message={resolveErrorMessage(summaryQuery.error, "AP 摘要加载失败")} />
      ) : null}
      {paymentBatchesQuery.isError ? (
        <SectionError message={resolveErrorMessage(paymentBatchesQuery.error, "支付批次数据加载失败")} />
      ) : null}
      {riskFlagsQuery.isError ? (
        <SectionError message={resolveErrorMessage(riskFlagsQuery.error, "风险标记数据加载失败")} />
      ) : null}

      <div className="grid gap-4 md:grid-cols-4">
        <SummaryCard title="待付款" value={summaryQuery.data?.summary.pendingPaymentCount ?? "-"} />
        <SummaryCard
          title="部分匹配"
          value={summaryQuery.data?.summary.partialMatchCount ?? "-"}
          tone="amber"
        />
        <SummaryCard title="异常" value={summaryQuery.data?.summary.exceptionCount ?? "-"} tone="red" />
        <SummaryCard
          title="预算超支"
          value={summaryQuery.data?.summary.budgetOverspendCount ?? "-"}
          tone="emerald"
        />
      </div>

      <div className="card-std p-6">
        <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as OperationsTab)}>
          <TabsList className="flex w-full flex-wrap justify-start gap-1">
            <TabsTrigger value="pending">待付款 {pendingBatches.length}</TabsTrigger>
            <TabsTrigger value="failed">异常付款 {failedItems.length}</TabsTrigger>
            <TabsTrigger value="risk">风险标记 {filteredRiskFlags.length}</TabsTrigger>
            <TabsTrigger value="reconciliation">对账异常 {partialMatchItems.length}</TabsTrigger>
          </TabsList>

          <TabsContent value="pending" className="mt-6 space-y-4">
            <div className="grid gap-3 md:grid-cols-4">
              <div className="space-y-2">
                <div className="text-sm font-medium text-zinc-700">实体类型</div>
                <select
                  className="select-std"
                  value={pendingEntityType}
                  onChange={(event) => setPendingEntityType(event.target.value as PendingEntityFilter)}
                >
                  <option value="all">全部</option>
                  <option value="reimbursement">报销</option>
                  <option value="travel_order">差旅</option>
                </select>
              </div>
              <div className="space-y-2">
                <div className="text-sm font-medium text-zinc-700">创建时间从</div>
                <Input
                  type="date"
                  value={pendingCreatedAtFrom}
                  onChange={(event) => setPendingCreatedAtFrom(event.target.value)}
                />
              </div>
              <div className="space-y-2">
                <div className="text-sm font-medium text-zinc-700">创建时间至</div>
                <Input
                  type="date"
                  value={pendingCreatedAtTo}
                  onChange={(event) => setPendingCreatedAtTo(event.target.value)}
                />
              </div>
              <div className="flex items-end">
                <Button
                  type="button"
                  variant="ghost"
                  onClick={() => {
                    setPendingEntityType("all");
                    setPendingCreatedAtFrom("");
                    setPendingCreatedAtTo("");
                  }}
                >
                  清空筛选
                </Button>
              </div>
            </div>

            <div className="rounded-lg border border-zinc-200">
              <Table>
                <TableHeader>
                  <tr>
                    <TableHead>批次</TableHead>
                    <TableHead>实体</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>金额</TableHead>
                    <TableHead>创建时间</TableHead>
                    <TableHead className="w-[280px]">操作</TableHead>
                  </tr>
                </TableHeader>
                <TableBody>
                  {pendingBatches.length ? (
                    pendingBatches.map((item) => {
                      const canReviewSelectedBatch =
                        canReviewRisk &&
                        ((item.status === "draft" &&
                          item.reviewRequirement.nextStep === "first_review") ||
                          (item.status === "reviewed" &&
                            item.reviewRequirement.nextStep === "second_review"));
                      const canCancelSelectedBatch =
                        canManageBatch && !["executed", "cancelled"].includes(item.status);

                      return (
                        <TableRow key={item.id}>
                          <TableCell>
                            <div className="font-medium text-zinc-900">{item.batchNo}</div>
                            <div className="text-xs text-zinc-500">{item.name}</div>
                          </TableCell>
                          <TableCell>{entityTypeLabel(item.entityType)}</TableCell>
                          <TableCell>
                            <div className="flex flex-wrap items-center gap-2">
                              <span
                                className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${statusBadgeClass(item.status)}`}
                              >
                                {batchStatusLabel(item.status)}
                              </span>
                              {item.highRisk ? (
                                <span className="inline-flex rounded-full border border-red-200 bg-red-50 px-2 py-0.5 text-xs font-medium text-red-700">
                                  高风险
                                </span>
                              ) : null}
                            </div>
                            <div className="mt-1 text-xs text-zinc-500">
                              复核 {item.reviewRequirement.completedReviewCount}/
                              {item.reviewRequirement.requiredReviewCount}
                            </div>
                          </TableCell>
                          <TableCell>{item.totalAmount}</TableCell>
                          <TableCell>{formatDateTime(item.createdAt)}</TableCell>
                          <TableCell>
                            <div className="flex flex-wrap gap-2">
                              <Button
                                type="button"
                                variant="secondary"
                                size="sm"
                                onClick={() => handleJumpToBatch(item.id)}
                              >
                                查看批次
                              </Button>
                              {canReviewRisk ? (
                                <Button
                                  type="button"
                                  size="sm"
                                  disabled={!canReviewSelectedBatch}
                                  onClick={() => {
                                    setReviewTarget(item);
                                    setReviewComment("");
                                  }}
                                >
                                  快捷复核
                                </Button>
                              ) : null}
                              {canManageBatch ? (
                                <Button
                                  type="button"
                                  variant="secondary"
                                  size="sm"
                                  disabled={!canCancelSelectedBatch}
                                  onClick={() => setCancelTarget(item)}
                                >
                                  快捷取消
                                </Button>
                              ) : null}
                            </div>
                          </TableCell>
                        </TableRow>
                      );
                    })
                  ) : (
                    <TableRow>
                      <TableCell colSpan={6} className="py-8 text-center text-sm text-zinc-500">
                        当前筛选下暂无待付款批次。
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </div>
          </TabsContent>

          <TabsContent value="failed" className="mt-6 space-y-4">
            <div className="rounded-lg border border-zinc-200">
              <Table>
                <TableHeader>
                  <tr>
                    <TableHead>异常项</TableHead>
                    <TableHead>批次</TableHead>
                    <TableHead>失败原因</TableHead>
                    <TableHead>金额</TableHead>
                    <TableHead>创建时间</TableHead>
                    <TableHead className="w-[320px]">操作</TableHead>
                  </tr>
                </TableHeader>
                <TableBody>
                  {failedItems.length ? (
                    failedItems.map((item) => {
                      const canRetry =
                        canManageBatch &&
                        ["reviewed", "failed"].includes(item.batchStatus) &&
                        item.reviewRequirement.nextStep === "ready_for_execute";
                      const cachedTravelRequestId =
                        item.entityType === "travel_order"
                          ? travelRequestTargets[item.entityId]
                          : undefined;
                      const jumpDisabled =
                        item.entityType === "travel_order"
                          ? !canManageTravelPayments ||
                            cachedTravelRequestId === null ||
                            resolvingTravelOrderId === item.entityId
                          : false;

                      return (
                        <TableRow key={item.id}>
                          <TableCell>
                            <div className="font-medium text-zinc-900">{item.entityCode}</div>
                            <div className="text-xs text-zinc-500">{item.entityTitle}</div>
                          </TableCell>
                          <TableCell>
                            <div className="font-medium text-zinc-900">{item.batchNo}</div>
                            <div className="text-xs text-zinc-500">{item.batchName}</div>
                          </TableCell>
                          <TableCell>
                            <div className="text-sm text-zinc-700">
                              {item.failureMessage ?? item.failureCode ?? "执行失败"}
                            </div>
                            <div className="text-xs text-zinc-500">
                              {item.failureCode ?? "无失败码"}
                            </div>
                          </TableCell>
                          <TableCell>
                            {item.amount} {item.currencyCode}
                          </TableCell>
                          <TableCell>{formatDateTime(item.createdAt)}</TableCell>
                          <TableCell>
                            <div className="flex flex-wrap gap-2">
                              {canManageBatch ? (
                                <Button
                                  type="button"
                                  size="sm"
                                  disabled={!canRetry}
                                  onClick={() => setRetryTarget(item)}
                                >
                                  重试执行
                                </Button>
                              ) : null}
                              <Button
                                type="button"
                                variant="secondary"
                                size="sm"
                                onClick={() => setFailedDetailTarget(item)}
                              >
                                查看详情
                              </Button>
                              <Button
                                type="button"
                                variant="secondary"
                                size="sm"
                                disabled={jumpDisabled}
                                onClick={() => handleJumpToLinkedEntity(item)}
                              >
                                {item.entityType === "travel_order" &&
                                travelRequestTargets[item.entityId] === null
                                  ? "无法定位申请单"
                                  : resolvingTravelOrderId === item.entityId
                                    ? "解析中..."
                                    : "跳转关联单据"}
                              </Button>
                            </div>
                          </TableCell>
                        </TableRow>
                      );
                    })
                  ) : (
                    <TableRow>
                      <TableCell colSpan={6} className="py-8 text-center text-sm text-zinc-500">
                        当前没有失败付款项。
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </div>
          </TabsContent>

          <TabsContent value="risk" className="mt-6 space-y-4">
            <div className="flex flex-wrap items-center gap-2">
              {(
                [
                  { value: "all", label: "全部" },
                  { value: "exception", label: "异常风险" },
                  { value: "budget_overspend", label: "预算超支" },
                ] as Array<{ value: ApOperationsRiskBucket; label: string }>
              ).map((item) => (
                <Button
                  key={item.value}
                  type="button"
                  size="sm"
                  variant={riskBucket === item.value ? "default" : "secondary"}
                  onClick={() => setRiskBucket(item.value)}
                >
                  {item.label}
                </Button>
              ))}
            </div>

            <div className="rounded-lg border border-zinc-200">
              <Table>
                <TableHeader>
                  <tr>
                    <TableHead>风险项</TableHead>
                    <TableHead>分组</TableHead>
                    <TableHead>等级</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>创建时间</TableHead>
                    <TableHead className="w-[220px]">操作</TableHead>
                  </tr>
                </TableHeader>
                <TableBody>
                  {filteredRiskFlags.length ? (
                    filteredRiskFlags.map((item) => (
                      <TableRow key={item.id}>
                        <TableCell>
                          <div className="font-medium text-zinc-900">{item.title}</div>
                          <div className="text-xs text-zinc-500">
                            {item.detail || `${item.entityType}:${item.entityId}`}
                          </div>
                        </TableCell>
                        <TableCell>{riskBucketLabel(riskBucketFromCode(item.riskCode))}</TableCell>
                        <TableCell>{riskLevelLabel(item.level)}</TableCell>
                        <TableCell>
                          <span
                            className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${statusBadgeClass(item.status)}`}
                          >
                            {item.status}
                          </span>
                        </TableCell>
                        <TableCell>{formatDateTime(item.createdAt)}</TableCell>
                        <TableCell>
                          <div className="flex flex-wrap gap-2">
                            {canReviewRisk ? (
                              <>
                                <Button
                                  type="button"
                                  size="sm"
                                  onClick={() => {
                                    setRiskAction({ type: "resolve", item });
                                    setRiskActionNote("");
                                  }}
                                >
                                  解决
                                </Button>
                                <Button
                                  type="button"
                                  size="sm"
                                  variant="secondary"
                                  onClick={() => {
                                    setRiskAction({ type: "dismiss", item });
                                    setRiskActionNote("");
                                  }}
                                >
                                  驳回
                                </Button>
                              </>
                            ) : (
                              <span className="text-xs text-zinc-500">当前账号仅可查看</span>
                            )}
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  ) : (
                    <TableRow>
                      <TableCell colSpan={6} className="py-8 text-center text-sm text-zinc-500">
                        当前筛选下暂无开放风险标记。
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </div>
          </TabsContent>

          <TabsContent value="reconciliation" className="mt-6 space-y-4">
            <div className="rounded-lg border border-zinc-200">
              <Table>
                <TableHeader>
                  <tr>
                    <TableHead>异常</TableHead>
                    <TableHead>金额差异</TableHead>
                    <TableHead>状态</TableHead>
                    <TableHead>创建时间</TableHead>
                    <TableHead className="w-[240px]">操作</TableHead>
                  </tr>
                </TableHeader>
                <TableBody>
                  {partialMatchItems.length ? (
                    partialMatchItems.map((item) => (
                      <TableRow key={item.id}>
                        <TableCell>
                          <div className="font-medium text-zinc-900">
                            {item.anomalyCode ?? matchStatusLabel(item.matchStatus)}
                          </div>
                          <div className="text-xs text-zinc-500">{matchStatusLabel(item.matchStatus)}</div>
                        </TableCell>
                        <TableCell>
                          <div>订单 {item.orderAmount ?? "-"}</div>
                          <div className="text-xs text-zinc-500">
                            交易 {item.transactionAmount ?? "-"} {item.currency}
                          </div>
                        </TableCell>
                        <TableCell>
                          <span
                            className={`inline-flex rounded-full border px-2 py-0.5 text-xs font-medium ${statusBadgeClass(item.resolutionStatus)}`}
                          >
                            {resolutionStatusLabel(item.resolutionStatus)}
                          </span>
                        </TableCell>
                        <TableCell>{formatDateTime(item.createdAt)}</TableCell>
                        <TableCell>
                          <div className="flex flex-wrap gap-2">
                            <Button
                              type="button"
                              variant="secondary"
                              size="sm"
                              onClick={() => setReconciliationDetailTarget(item)}
                            >
                              查看详情
                            </Button>
                            {canManageTravelPayments ? (
                              <Button
                                type="button"
                                size="sm"
                                disabled={item.resolutionStatus !== "pending"}
                                onClick={() => {
                                  setReconciliationConfirmTarget(item);
                                  setReconciliationConfirmNote("");
                                }}
                              >
                                确认
                              </Button>
                            ) : (
                              <span className="text-xs text-zinc-500">缺少 travel.payment.manage</span>
                            )}
                          </div>
                        </TableCell>
                      </TableRow>
                    ))
                  ) : (
                    <TableRow>
                      <TableCell colSpan={5} className="py-8 text-center text-sm text-zinc-500">
                        当前没有待确认的对账异常。
                      </TableCell>
                    </TableRow>
                  )}
                </TableBody>
              </Table>
            </div>
          </TabsContent>
        </Tabs>
      </div>

      <Dialog
        open={Boolean(reviewTarget)}
        onOpenChange={(open) => {
          if (!open) {
            setReviewTarget(null);
            setReviewComment("");
          }
        }}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>快捷复核</DialogTitle>
            <DialogDescription>
              {reviewTarget
                ? `${reviewTarget.batchNo} · ${reviewTarget.name}`
                : "填写复核意见后提交。"}
            </DialogDescription>
          </DialogHeader>
          {reviewTarget?.highRisk ? (
            <div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800">
              此批次为高风险，需二次复核。
            </div>
          ) : null}
          <textarea
            className="min-h-32 w-full rounded-lg border border-zinc-300 px-3 py-2 text-sm"
            placeholder="请输入复核意见"
            value={reviewComment}
            onChange={(event) => setReviewComment(event.target.value)}
          />
          <DialogFooter>
            <Button
              type="button"
              variant="secondary"
              onClick={() => {
                setReviewTarget(null);
                setReviewComment("");
              }}
            >
              取消
            </Button>
            <Button
              type="button"
              disabled={reviewMutation.isPending || !reviewTarget}
              onClick={() => reviewTarget && reviewMutation.mutate(reviewTarget)}
            >
              {reviewMutation.isPending ? "提交中..." : "提交复核"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog
        open={Boolean(failedDetailTarget)}
        onOpenChange={(open) => {
          if (!open) {
            setFailedDetailTarget(null);
          }
        }}
      >
        <DialogContent className="max-h-[85vh] max-w-3xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>失败付款项详情</DialogTitle>
            <DialogDescription>
              {failedDetailTarget
                ? `${failedDetailTarget.batchNo} · ${failedDetailTarget.entityCode}`
                : "查看失败快照"}
            </DialogDescription>
          </DialogHeader>
          {failedDetailQuery.isLoading ? (
            <div className="text-sm text-zinc-500">加载失败项详情...</div>
          ) : failedDetailQuery.isError ? (
            <SectionError message={resolveErrorMessage(failedDetailQuery.error, "加载失败项详情失败")} />
          ) : failedDetailItem ? (
            <div className="space-y-4 text-sm">
              <div className="grid gap-3 md:grid-cols-2">
                <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-3">
                  <div className="text-xs text-zinc-500">单据编号</div>
                  <div className="mt-1 font-medium text-zinc-900">{failedDetailItem.entityCode}</div>
                </div>
                <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-3">
                  <div className="text-xs text-zinc-500">金额</div>
                  <div className="mt-1 font-medium text-zinc-900">
                    {failedDetailItem.amount} {failedDetailItem.currencyCode}
                  </div>
                </div>
                <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-3">
                  <div className="text-xs text-zinc-500">失败码</div>
                  <div className="mt-1 font-medium text-zinc-900">
                    {failedDetailItem.failureCode ?? "-"}
                  </div>
                </div>
                <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-3">
                  <div className="text-xs text-zinc-500">失败原因</div>
                  <div className="mt-1 font-medium text-zinc-900">
                    {failedDetailItem.failureMessage ?? "-"}
                  </div>
                </div>
              </div>
              <div>
                <div className="mb-2 text-sm font-medium text-zinc-700">快照</div>
                <pre className="overflow-x-auto rounded-lg border border-zinc-200 bg-zinc-950/95 p-4 text-xs text-zinc-100">
                  {prettyJson(failedDetailItem.snapshotJson)}
                </pre>
              </div>
            </div>
          ) : null}
        </DialogContent>
      </Dialog>

      <Dialog
        open={Boolean(riskAction)}
        onOpenChange={(open) => {
          if (!open) {
            setRiskAction(null);
            setRiskActionNote("");
          }
        }}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>{riskAction?.type === "resolve" ? "解决风险标记" : "驳回风险标记"}</DialogTitle>
            <DialogDescription>
              {riskAction ? `${riskAction.item.title} · ${riskAction.item.riskCode}` : "填写说明后提交。"}
            </DialogDescription>
          </DialogHeader>
          <textarea
            className="min-h-32 w-full rounded-lg border border-zinc-300 px-3 py-2 text-sm"
            placeholder={riskAction?.type === "resolve" ? "请输入解决说明" : "请输入驳回理由"}
            value={riskActionNote}
            onChange={(event) => setRiskActionNote(event.target.value)}
          />
          <DialogFooter>
            <Button
              type="button"
              variant="secondary"
              onClick={() => {
                setRiskAction(null);
                setRiskActionNote("");
              }}
            >
              取消
            </Button>
            <Button
              type="button"
              disabled={riskMutation.isPending || !riskAction}
              onClick={() => riskAction && riskMutation.mutate(riskAction)}
            >
              {riskMutation.isPending ? "提交中..." : "确认提交"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog
        open={Boolean(reconciliationDetailTarget)}
        onOpenChange={(open) => {
          if (!open) {
            setReconciliationDetailTarget(null);
          }
        }}
      >
        <DialogContent className="max-h-[85vh] max-w-3xl overflow-y-auto">
          <DialogHeader>
            <DialogTitle>对账异常详情</DialogTitle>
            <DialogDescription>
              {reconciliationDetailTarget
                ? `${reconciliationDetailTarget.anomalyCode ?? reconciliationDetailTarget.matchStatus}`
                : "查看订单金额、交易金额与快照"}
            </DialogDescription>
          </DialogHeader>
          {reconciliationDetailQuery.isLoading ? (
            <div className="text-sm text-zinc-500">加载对账异常详情...</div>
          ) : reconciliationDetailQuery.isError ? (
            <SectionError message={resolveErrorMessage(reconciliationDetailQuery.error, "加载对账异常详情失败")} />
          ) : reconciliationDetailItem ? (
            <div className="space-y-4 text-sm">
              <div className="grid gap-3 md:grid-cols-2">
                <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-3">
                  <div className="text-xs text-zinc-500">订单金额</div>
                  <div className="mt-1 font-medium text-zinc-900">
                    {reconciliationDetailItem.orderAmount ?? "-"}
                  </div>
                </div>
                <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-3">
                  <div className="text-xs text-zinc-500">交易金额</div>
                  <div className="mt-1 font-medium text-zinc-900">
                    {reconciliationDetailItem.transactionAmount ?? "-"}
                  </div>
                </div>
                <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-3">
                  <div className="text-xs text-zinc-500">异常编码</div>
                  <div className="mt-1 font-medium text-zinc-900">
                    {reconciliationDetailItem.anomalyCode ?? "-"}
                  </div>
                </div>
                <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-3">
                  <div className="text-xs text-zinc-500">确认状态</div>
                  <div className="mt-1 font-medium text-zinc-900">
                    {resolutionStatusLabel(reconciliationDetailItem.resolutionStatus)}
                  </div>
                </div>
              </div>
              <div>
                <div className="mb-2 text-sm font-medium text-zinc-700">快照</div>
                <pre className="overflow-x-auto rounded-lg border border-zinc-200 bg-zinc-950/95 p-4 text-xs text-zinc-100">
                  {prettyJson(reconciliationDetailItem.snapshot)}
                </pre>
              </div>
            </div>
          ) : null}
        </DialogContent>
      </Dialog>

      <Dialog
        open={Boolean(reconciliationConfirmTarget)}
        onOpenChange={(open) => {
          if (!open) {
            setReconciliationConfirmTarget(null);
            setReconciliationConfirmNote("");
          }
        }}
      >
        <DialogContent>
          <DialogHeader>
            <DialogTitle>确认对账异常</DialogTitle>
            <DialogDescription>
              {reconciliationConfirmTarget
                ? `${reconciliationConfirmTarget.anomalyCode ?? reconciliationConfirmTarget.matchStatus}`
                : "可选填写备注"}
            </DialogDescription>
          </DialogHeader>
          <textarea
            className="min-h-28 w-full rounded-lg border border-zinc-300 px-3 py-2 text-sm"
            placeholder="备注可空"
            value={reconciliationConfirmNote}
            onChange={(event) => setReconciliationConfirmNote(event.target.value)}
          />
          <DialogFooter>
            <Button
              type="button"
              variant="secondary"
              onClick={() => {
                setReconciliationConfirmTarget(null);
                setReconciliationConfirmNote("");
              }}
            >
              取消
            </Button>
            <Button
              type="button"
              disabled={reconciliationConfirmMutation.isPending || !reconciliationConfirmTarget}
              onClick={() =>
                reconciliationConfirmTarget &&
                reconciliationConfirmMutation.mutate(reconciliationConfirmTarget.id)
              }
            >
              {reconciliationConfirmMutation.isPending ? "提交中..." : "确认异常"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <ConfirmDialog
        open={Boolean(cancelTarget)}
        onOpenChange={(open) => {
          if (!open) {
            setCancelTarget(null);
          }
        }}
        title="确认取消付款批次"
        description={
          cancelTarget
            ? `将取消 ${cancelTarget.batchNo}，该操作与支付批次页保持一致。`
            : undefined
        }
        variant="destructive"
        confirmLabel="确认取消"
        onConfirm={async () => {
          if (!cancelTarget) {
            return;
          }
          await cancelMutation.mutateAsync(cancelTarget.id);
        }}
      />

      <ConfirmDialog
        open={Boolean(retryTarget)}
        onOpenChange={(open) => {
          if (!open) {
            setRetryTarget(null);
          }
        }}
        title="确认重试付款批次"
        description={
          retryTarget
            ? `将重新执行 ${retryTarget.batchNo}，失败项 ${retryTarget.entityCode} 将按原批次流程重试。`
            : undefined
        }
        confirmLabel="确认重试"
        onConfirm={async () => {
          if (!retryTarget) {
            return;
          }
          await executeMutation.mutateAsync(retryTarget.batchId);
        }}
      />
    </div>
  );
}