import { useMemo, useState } from "react";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { ArrowRight, Clock3, FilePenLine, RotateCcw, Wrench } from "lucide-react";
import { isApiError } from "../api/types";
import { mapApiErrorMessage } from "../api/errorMessages";
import { fetchMyDelegations } from "../api/delegations";
import { exportReimbursements } from "../api/exports";
import { fetchReimbursementTemplates } from "../api/reimbursementTemplates";
import {
  createReimbursement,
  deleteReimbursement,
  fetchLinkableTravelRequests,
  fetchReimbursements,
  type ReimbursementCreatePayload,
  type ReimbursementListItem,
  type ReimbursementStatus,
} from "../api/reimbursements";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { toast } from "sonner";
import { downloadBlob } from "../lib/download";
import { resolveReimbursementDisplayCode } from "../lib/reimbursementDisplay";
import { Pagination } from "../components/common/Pagination";
import { ActionConfirmDialog } from "../components/common/ActionConfirmDialog";
import { StatusBadge } from "../components/common/StatusBadge";
import { TableSkeleton } from "../components/common/TableSkeleton";
import { FilterBar, ListWorkspace, PrimaryTable, WorkspaceHeader } from "../components/patterns/ListWorkspace";
import { Button } from "../components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../components/ui/dropdown-menu";
import { Tabs, TabsList, TabsTrigger } from "../components/ui/tabs";

const PAGE_SIZE = 20;

type ExportFormat = "csv" | "xlsx";

const REIMBURSEMENT_STATUS_OPTIONS: Array<{ value: ReimbursementStatus; label: string }> = [
  { value: "draft", label: "草稿" },
  { value: "rejected", label: "被驳回" },
  { value: "reviewing", label: "审批中" },
  { value: "approved", label: "已通过" },
  { value: "paid", label: "已支付" },
  { value: "cancelled", label: "已取消" },
];

const REIMBURSEMENT_TASK_STATUS_OPTIONS = [
  {
    value: "rejected",
    title: "被驳回待补正",
    idleNote: "暂无需要补正的报销",
    activeNote: "优先补齐说明或附件后重新提交",
    icon: RotateCcw,
    accentClass: "border-red-200 bg-red-50 text-red-700",
  },
  {
    value: "draft",
    title: "草稿待完善",
    idleNote: "还没有报销草稿",
    activeNote: "继续完善明细、发票和附件",
    icon: FilePenLine,
    accentClass: "border-amber-200 bg-amber-50 text-amber-700",
  },
  {
    value: "reviewing",
    title: "审批中进度",
    idleNote: "暂无审批中的报销",
    activeNote: "查看当前节点和处理进度",
    icon: Clock3,
    accentClass: "border-sky-200 bg-sky-50 text-sky-700",
  },
] satisfies Array<{
  value: ReimbursementStatus;
  title: string;
  idleNote: string;
  activeNote: string;
  icon: typeof RotateCcw;
  accentClass: string;
}>;

function formatCurrency(value: number) {
  return new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(value);
}

function resolveErrorMessage(error: unknown, fallback: string) {
  if (isApiError(error)) {
    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
  }
  return error instanceof Error ? error.message : fallback;
}

function resolveEmptyStateCopy(status: ReimbursementStatus) {
  if (status === "draft") {
    return {
      title: "还没有报销草稿",
      description: "需要报销时先新建单据，再补充明细、发票和附件。",
    };
  }
  if (status === "rejected") {
    return {
      title: "暂无需要补正的报销",
      description: "后续有驳回单据时，会在这里继续编辑并重新提交。",
    };
  }
  if (status === "reviewing") {
    return {
      title: "暂无审批中的报销",
      description: "提交后的报销会在这里显示当前审批进度。",
    };
  }
  if (status === "approved") {
    return {
      title: "暂无已通过记录",
      description: "审批通过但未支付的报销会在这里留存。",
    };
  }
  if (status === "paid") {
    return {
      title: "暂无已支付记录",
      description: "财务支付完成后会在这里查看付款结果。",
    };
  }
  return {
    title: "暂无已取消记录",
    description: "撤回或取消的报销记录会在这里留存。",
  };
}

function resolveWorkflowHint(item: ReimbursementListItem) {
  const stepName = item.pendingWorkflow?.task?.stepName;
  if (!stepName) {
    return null;
  }

  const actionableByCurrentUser = item.pendingWorkflow?.allowedActions.length ? true : false;
  return {
    label: `${actionableByCurrentUser ? "待你处理" : "当前节点"}：${stepName}`,
    className: actionableByCurrentUser ? "text-amber-700" : "text-zinc-500",
  };
}

function resolveListAction(item: ReimbursementListItem) {
  if (["draft", "rejected"].includes(item.status)) {
    return {
      label: "编辑",
      mobileLabel: "继续编辑",
      to: `/reimbursements/${item.id}`,
      primary: true,
    };
  }

  const taskId = item.pendingWorkflow?.task?.id;
  if (taskId && item.pendingWorkflow?.allowedActions.length) {
    return {
      label: "查看处理",
      mobileLabel: "查看处理",
      to: `/workflow/tasks/${taskId}`,
      primary: false,
    };
  }

  return {
    label: item.status === "reviewing" ? "查看进度" : "详情",
    mobileLabel: item.status === "reviewing" ? "查看进度" : "查看详情",
    to: `/reimbursements/${item.id}`,
    primary: false,
  };
}

export function ReimbursementsPage() {
  const [searchParams, setSearchParams] = useSearchParams();
  const navigate = useNavigate();
  const { permissions, me } = useAuth();
  const queryClient = useQueryClient();
  const [exportError, setExportError] = useState("");
  const [proxyOwnerEmployeeId, setProxyOwnerEmployeeId] = useState("");
  const [deleteTarget, setDeleteTarget] = useState<ReimbursementListItem | null>(null);
  const [exportConfirmFormat, setExportConfirmFormat] = useState<ExportFormat | null>(null);
  const [showLedgerTools, setShowLedgerTools] = useState(false);

  const status = (searchParams.get("status") as ReimbursementStatus | null) ?? "draft";
  const page = Number(searchParams.get("page") ?? "1") || 1;
  const scope = (searchParams.get("scope") as "own" | "all" | null) ?? "own";
  const canCreateExpense = hasPermission(permissions, "expense.create");
  const canDeleteExpense = hasPermission(permissions, "expense.delete_own");
  const canViewAll = hasPermission(permissions, "expense.view_all");
  const canProxySubmit = hasPermission(permissions, "expense.proxy_submit");
  const canUseFinanceTools =
    hasPermission(permissions, "expense.finance.pay") ||
    hasPermission(permissions, "payment.batch.manage") ||
    hasPermission(permissions, "risk.review.manage") ||
    hasPermission(permissions, "invoice.manage");
  const isAdministration = (me?.roleCodes ?? []).includes("administration");
  const showProxyOwnerSelector = canProxySubmit && isAdministration;
  const canShowLedgerEntry = canViewAll || showProxyOwnerSelector || canUseFinanceTools;
  const showAdvancedTools = canShowLedgerEntry && (showLedgerTools || scope === "all" || showProxyOwnerSelector);
  const shouldLoadCreateOptions = showAdvancedTools && canCreateExpense;

  const listQuery = useQuery({
    queryKey: ["reimbursements", "list", status, page, scope],
    queryFn: () => fetchReimbursements({ status, page, pageSize: PAGE_SIZE, scope }),
  });

  const rejectedSummaryQuery = useQuery({
    queryKey: ["reimbursements", "task-summary", "own", "rejected"],
    queryFn: () => fetchReimbursements({ status: "rejected", page: 1, pageSize: 1, scope: "own" }),
  });

  const draftSummaryQuery = useQuery({
    queryKey: ["reimbursements", "task-summary", "own", "draft"],
    queryFn: () => fetchReimbursements({ status: "draft", page: 1, pageSize: 1, scope: "own" }),
  });

  const reviewingSummaryQuery = useQuery({
    queryKey: ["reimbursements", "task-summary", "own", "reviewing"],
    queryFn: () => fetchReimbursements({ status: "reviewing", page: 1, pageSize: 1, scope: "own" }),
  });

  const proxyDelegationsQuery = useQuery({
    enabled: showProxyOwnerSelector,
    queryKey: ["delegations", "mine", "active"],
    queryFn: () => fetchMyDelegations("active"),
  });

  const templateOptionsQuery = useQuery({
    enabled: shouldLoadCreateOptions,
    queryKey: ["reimbursement-templates", "enabled", "create-menu"],
    queryFn: () => fetchReimbursementTemplates({ enabled: true }),
  });

  const linkableTravelRequestsQuery = useQuery({
    enabled: shouldLoadCreateOptions,
    queryKey: ["reimbursements", "linkable-travel-requests", proxyOwnerEmployeeId || me?.id || "self"],
    queryFn: () =>
      fetchLinkableTravelRequests({
        ownerEmployeeId: proxyOwnerEmployeeId || undefined,
      }),
  });

  const items = listQuery.data?.items ?? [];
  const stats = useMemo(() => {
    return items.reduce(
      (acc, item) => {
        acc.currentPageCount += 1;
        acc.currentPageAmount += Number(item.totalAmount ?? 0);
        if (item.status === "reviewing") acc.reviewing += 1;
        if (item.status === "paid") acc.paid += 1;
        return acc;
      },
      { currentPageCount: 0, currentPageAmount: 0, reviewing: 0, paid: 0 },
    );
  }, [items]);

  const templateOptions = templateOptionsQuery.data?.items ?? [];
  const linkableTravelRequests = linkableTravelRequestsQuery.data?.items ?? [];

  const taskSummaryTotalByStatus = {
    rejected: rejectedSummaryQuery.data?.total,
    draft: draftSummaryQuery.data?.total,
    reviewing: reviewingSummaryQuery.data?.total,
  } satisfies Record<(typeof REIMBURSEMENT_TASK_STATUS_OPTIONS)[number]["value"], number | undefined>;
  const canShowCreateOptionsMenu =
    canCreateExpense && shouldLoadCreateOptions && (templateOptions.length > 0 || linkableTravelRequests.length > 0);
  const emptyState = resolveEmptyStateCopy(status);

  const createMutation = useMutation({
    mutationFn: (payload: ReimbursementCreatePayload) => createReimbursement(payload),
    onSuccess: async (response, payload) => {
      await queryClient.invalidateQueries({ queryKey: ["reimbursements"] });
      if (payload.linkedTravelRequestId) {
        toast.success("已按差旅申请创建报销单");
      } else if (payload.templateId) {
        toast.success("已按模板创建报销单");
      } else {
        toast.success("报销单已创建");
      }
      navigate(`/reimbursements/${response.id}`);
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error, "创建报销单失败"));
    },
  });

  const deleteMutation = useMutation({
    mutationFn: (reimbursementId: string) => deleteReimbursement(reimbursementId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["reimbursements"] });
      toast.success("草稿已删除");
    },
    onError: (error) => {
      toast.error(resolveErrorMessage(error, "删除草稿失败"));
    },
  });

  const handleDeleteDraft = (item: ReimbursementListItem) => {
    setDeleteTarget(item);
  };

  const exportMutation = useMutation({
    mutationFn: (format: ExportFormat) => exportReimbursements({ format, status, scope }),
    onSuccess: (response, format) => {
      downloadBlob(response.blob, response.filename ?? `reimbursements.${format}`);
      setExportError("");
      toast.success("导出完成");
    },
    onError: (error) => {
      const message = resolveErrorMessage(error, "导出失败");
      setExportError(message);
      toast.error(message);
    },
  });

  const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));

  function startCreateReimbursement(payload: Omit<ReimbursementCreatePayload, "ownerEmployeeId"> = {}) {
    createMutation.mutate({
      ownerEmployeeId: proxyOwnerEmployeeId || undefined,
      ...payload,
    });
  }

  return (
    <ListWorkspace>
      <WorkspaceHeader
        eyebrow="报销"
        title={scope === "all" ? "报销台账" : "我的报销"}
        actions={
          canCreateExpense ? (
            <Button
              data-testid="reimbursements-create"
              disabled={createMutation.isPending}
              onClick={() => startCreateReimbursement()}
              type="button"
            >
              {createMutation.isPending ? "创建中..." : "新建报销"}
            </Button>
          ) : null
        }
      />

      {createMutation.error && isApiError(createMutation.error) ? (
        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
          {createMutation.error.code}:
          {mapApiErrorMessage(
            createMutation.error.code,
            createMutation.error.details,
            createMutation.error.message,
          )}
        </p>
      ) : null}

      {exportError ? (
        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
          {exportError}
        </p>
      ) : null}

      <section className="grid gap-3 md:grid-cols-3" aria-label="我的报销任务">
        {REIMBURSEMENT_TASK_STATUS_OPTIONS.map((item) => {
          const Icon = item.icon;
          const count = taskSummaryTotalByStatus[item.value];
          const active = status === item.value && scope === "own";
          const displayCount = typeof count === "number" ? count : "-";

          return (
            <button
              className={`card-std min-h-[124px] p-4 text-left transition hover:border-primary/40 hover:shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-200 ${
                active ? "border-primary/40 bg-primary/5" : ""
              }`}
              data-testid={`reimbursements-task-card-${item.value}`}
              key={item.value}
              onClick={() => setSearchParams({ status: item.value, page: "1", scope: "own" })}
              type="button"
            >
              <div className="flex items-start justify-between gap-3">
                <span className={`flex size-9 items-center justify-center rounded-lg border ${item.accentClass}`}>
                  <Icon aria-hidden className="size-4" />
                </span>
                <ArrowRight aria-hidden className="mt-1 size-4 text-zinc-300" />
              </div>
              <div className="mt-4 flex items-end justify-between gap-3">
                <div className="min-w-0">
                  <div className="text-sm font-semibold text-zinc-900">{item.title}</div>
                  <div className="mt-1 text-xs leading-5 text-zinc-500">
                    {typeof count === "number" && count > 0 ? item.activeNote : item.idleNote}
                  </div>
                </div>
                <div className="text-3xl font-semibold tabular-nums text-zinc-950">{displayCount}</div>
              </div>
            </button>
          );
        })}
      </section>

      <FilterBar className="ops-command-bar space-y-3 !p-3 md:!p-3.5">
        <div className="ops-command-bar__row">
          <div className="min-w-0 space-y-2">
            <div className="text-xs font-semibold text-zinc-500">报销记录</div>
            <Tabs
              data-testid="reimbursements-status-tabs"
              value={status}
              onValueChange={(value) => setSearchParams({ status: value, page: "1", scope })}
            >
              <TabsList className="ops-command-bar__tabs !h-auto !justify-start !bg-slate-50">
                {REIMBURSEMENT_STATUS_OPTIONS.map((item) => (
                  <TabsTrigger
                    data-testid={`reimbursements-tab-${item.value}`}
                    key={item.value}
                    value={item.value}
                  >
                    {item.label}
                  </TabsTrigger>
                ))}
              </TabsList>
            </Tabs>
          </div>

          <div className="ops-command-bar__actions">
            {canShowLedgerEntry ? (
              <Button
                size="sm"
                variant={showAdvancedTools ? "default" : "secondary"}
                onClick={() => setShowLedgerTools((current) => !current)}
                type="button"
              >
                <Wrench aria-hidden className="mr-1 size-4" />
                台账工具
              </Button>
            ) : null}
          </div>
        </div>

        {showAdvancedTools ? (
          <div className="rounded-lg border border-slate-200 bg-slate-50/70 p-3">
            <div className="grid gap-3 text-sm md:grid-cols-4">
              <div>
                <div className="text-xs text-zinc-500">当前列表</div>
                <div className="mt-1 font-semibold text-zinc-900">{stats.currentPageCount} 条 / 共 {listQuery.data?.total ?? 0} 条</div>
              </div>
              <div>
                <div className="text-xs text-zinc-500">当前金额</div>
                <div className="mt-1 font-semibold text-zinc-900">{formatCurrency(stats.currentPageAmount)}</div>
              </div>
              <div>
                <div className="text-xs text-zinc-500">审批中</div>
                <div className={stats.reviewing > 0 ? "mt-1 font-semibold text-amber-700" : "mt-1 font-semibold text-zinc-900"}>{stats.reviewing} 条</div>
              </div>
              <div>
                <div className="text-xs text-zinc-500">已支付</div>
                <div className="mt-1 font-semibold text-zinc-900">{stats.paid} 条</div>
              </div>
            </div>

            <div className="mt-3 flex flex-wrap items-center gap-2">
              {showProxyOwnerSelector ? (
                <select
                  className="select-sm"
                  data-testid="reimbursements-owner-select"
                  onChange={(event) => setProxyOwnerEmployeeId(event.target.value)}
                  value={proxyOwnerEmployeeId}
                >
                  <option value="">自己</option>
                  {(proxyDelegationsQuery.data?.received ?? [])
                    .filter((item) => item.status === "active")
                    .map((item) => (
                      <option key={item.id} value={item.principalEmployeeId}>
                        {item.principal?.name ?? item.principalEmployeeId}
                      </option>
                    ))}
                </select>
              ) : null}

              {canShowCreateOptionsMenu ? (
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button size="sm" variant="secondary" type="button">
                      更多创建方式
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-80">
                    <div className="px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">
                      从模板创建
                    </div>
                    {templateOptions.length ? (
                      templateOptions.map((template) => (
                        <DropdownMenuItem
                          key={template.id}
                          onSelect={() => startCreateReimbursement({ templateId: template.id })}
                        >
                          {template.name}
                        </DropdownMenuItem>
                      ))
                    ) : (
                      <DropdownMenuItem disabled>当前无可用模板</DropdownMenuItem>
                    )}

                    <DropdownMenuSeparator />
                    <div className="px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-zinc-400">
                      关联差旅申请
                    </div>
                    {linkableTravelRequests.length ? (
                      linkableTravelRequests.map((travelRequest) => (
                        <DropdownMenuItem
                          key={travelRequest.id}
                          onSelect={() => startCreateReimbursement({ linkedTravelRequestId: travelRequest.id })}
                        >
                          {travelRequest.requestNo ?? travelRequest.id} · {travelRequest.purpose}
                        </DropdownMenuItem>
                      ))
                    ) : (
                      <DropdownMenuItem disabled>当前无可关联申请</DropdownMenuItem>
                    )}
                  </DropdownMenuContent>
                </DropdownMenu>
              ) : null}

              {canViewAll ? (
                <>
                  <Button
                    data-testid="reimbursements-reviewing-ledger"
                    size="sm"
                    variant={status === "reviewing" && scope === "all" ? "default" : "secondary"}
                    onClick={() => setSearchParams({ status: "reviewing", page: "1", scope: "all" })}
                    type="button"
                  >
                    审批中台账
                  </Button>
                  <Button
                    data-testid="reimbursements-scope-own"
                    size="sm"
                    variant={scope === "own" ? "default" : "secondary"}
                    onClick={() => setSearchParams({ status, page: "1", scope: "own" })}
                    type="button"
                  >
                    仅自己
                  </Button>
                  <Button
                    data-testid="reimbursements-scope-all"
                    size="sm"
                    variant={scope === "all" ? "default" : "secondary"}
                    onClick={() => setSearchParams({ status, page: "1", scope: "all" })}
                    type="button"
                  >
                    全范围
                  </Button>
                  <Button asChild size="sm" variant="secondary" type="button">
                    <Link to="/reimbursements/dashboard">统计分析</Link>
                  </Button>
                </>
              ) : null}

              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                <Button
                  data-testid="reimbursements-export"
                  size="sm"
                  variant="secondary"
                  type="button"
                  disabled={exportMutation.isPending}
                >
                  {exportMutation.isPending ? "导出中..." : "导出"}
                </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem
                    data-testid="reimbursements-export-csv"
                    onSelect={() => setExportConfirmFormat("csv")}
                  >
                    导出 CSV
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    data-testid="reimbursements-export-xlsx"
                    onSelect={() => setExportConfirmFormat("xlsx")}
                  >
                    导出 Excel
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>

            </div>
          </div>
        ) : null}
      </FilterBar>

      {listQuery.isLoading ? <TableSkeleton columns={6} rows={5} /> : null}

      {listQuery.isError ? (
        <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
          {isApiError(listQuery.error)
            ? `${listQuery.error.code}: ${mapApiErrorMessage(
              listQuery.error.code,
              listQuery.error.details,
              listQuery.error.message,
            )}`
            : "加载报销列表失败"}
        </p>
      ) : null}

      {!listQuery.isLoading && !listQuery.isError ? (
        <>
          <div className="space-y-3 md:hidden" data-testid="reimbursements-mobile-list">
            {items.length ? (
              items.map((item) => {
                const listAction = resolveListAction(item);
                const displayCode = resolveReimbursementDisplayCode(item);
                const canDeleteDraft = item.status === "draft" && canDeleteExpense;
                const workflowHint = resolveWorkflowHint(item);

                return (
                  <article
                    className="card-std space-y-3 p-4"
                    data-testid="reimbursement-mobile-card"
                    key={item.id}
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div className="min-w-0">
                        <div className="truncate text-sm font-semibold text-zinc-900">
                          {displayCode}
                        </div>
                        <div className="mt-1 text-xs text-zinc-500">{item.reimbursementDate ?? "未填写日期"}</div>
                      </div>
                      <StatusBadge className="shrink-0" status={item.status} />
                    </div>

                    {item.project ? (
                      <div className="rounded-lg bg-zinc-50 px-3 py-2 text-xs text-zinc-600">
                        项目：{item.project.projectNo} · {item.project.name}
                      </div>
                    ) : null}

                    <div className="grid grid-cols-2 gap-3 text-sm">
                      <div>
                        <div className="text-xs text-zinc-500">金额</div>
                        <div className="font-semibold text-zinc-900">
                          {item.totalAmount != null
                            ? new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(
                                Number(item.totalAmount),
                              )
                            : "-"}
                        </div>
                      </div>
                      <div>
                        <div className="text-xs text-zinc-500">报销人</div>
                        <div className="truncate font-medium text-zinc-900">{item.owner?.name ?? "-"}</div>
                      </div>
                    </div>

                    {workflowHint ? (
                      <div className={`rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs ${workflowHint.className}`}>
                        {workflowHint.label}
                      </div>
                    ) : null}

                    <div className="flex items-center gap-2 pt-1">
                      <Button
                        asChild
                        className="min-h-11 flex-1"
                        size="sm"
                        variant={listAction.primary ? "default" : "secondary"}
                      >
                        <Link
                          to={listAction.to}
                          data-testid="reimbursement-mobile-detail-link"
                        >
                          {listAction.mobileLabel}
                        </Link>
                      </Button>
                      {canDeleteDraft ? (
                        <Button
                          className="min-h-11"
                          disabled={deleteMutation.isPending}
                          onClick={() => handleDeleteDraft(item)}
                          size="sm"
                          type="button"
                          variant="destructive"
                        >
                          删除
                        </Button>
                      ) : null}
                    </div>
                  </article>
                );
              })
            ) : (
              <div className="rounded-xl border border-dashed border-zinc-300 px-4 py-8 text-center text-sm text-zinc-500">
                <div className="font-semibold text-zinc-900">{emptyState.title}</div>
                <div className="mt-1 leading-6 text-zinc-500">{emptyState.description}</div>
                {status === "draft" && canCreateExpense ? (
                  <Button
                    className="mt-3"
                    disabled={createMutation.isPending}
                    onClick={() => startCreateReimbursement()}
                    size="sm"
                    type="button"
                  >
                    {createMutation.isPending ? "创建中..." : "新建报销"}
                  </Button>
                ) : null}
              </div>
            )}
          </div>

          <PrimaryTable className="hidden md:block ops-table-focus">
            <table className="w-full border-collapse text-left" data-testid="reimbursements-table">
              <thead className="table-header">
                <tr>
                  <th className="table-th">单号</th>
                  <th className="table-th">状态</th>
                  <th className="table-th">金额</th>
                  <th className="table-th">报销人</th>
                  <th className="table-th">日期</th>
                  <th className="table-th w-24">操作</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-zinc-50">
                {items.length ? (
                  items.map((item) => {
                    const listAction = resolveListAction(item);
                    const displayCode = resolveReimbursementDisplayCode(item);
                    const canDeleteDraft = item.status === "draft" && canDeleteExpense;
                    const workflowHint = resolveWorkflowHint(item);

                    return (
                      <tr className="table-row" data-testid="reimbursement-row" key={item.id}>
                        <td className="table-td">
                          <div className="font-semibold text-zinc-900">{displayCode}</div>
                          {item.project ? (
                            <div className="text-xs text-zinc-500">
                              项目：{item.project.projectNo} · {item.project.name}
                            </div>
                          ) : null}
                          {workflowHint ? (
                            <div className={`text-xs ${workflowHint.className}`}>
                              {workflowHint.label}
                            </div>
                          ) : null}
                        </td>
                        <td className="table-td">
                          <StatusBadge status={item.status} />
                        </td>
                        <td className="table-td-strong">
                          {item.totalAmount != null
                            ? new Intl.NumberFormat("zh-CN", { style: "currency", currency: "CNY" }).format(
                                Number(item.totalAmount),
                              )
                            : "-"}
                        </td>
                        <td className="table-td">
                          <div className="flex items-center gap-2">
                            <div className="flex size-6 items-center justify-center rounded-full bg-zinc-100 text-[10px] font-bold uppercase text-zinc-700">
                              {(item.owner?.name ?? "U").charAt(0)}
                            </div>
                            <span className="font-medium text-zinc-900">{item.owner?.name ?? "-"}</span>
                          </div>
                        </td>
                        <td className="table-td">{item.reimbursementDate ?? "-"}</td>
                        <td className="table-td">
                          <div className="flex flex-wrap gap-2">
                            <Button
                              asChild
                              size="sm"
                              variant={listAction.primary ? "default" : "secondary"}
                            >
                              <Link
                                to={listAction.to}
                                data-testid="reimbursement-detail-link"
                              >
                                {listAction.label}
                              </Link>
                            </Button>
                            {canDeleteDraft ? (
                              <DropdownMenu>
                                <DropdownMenuTrigger asChild>
                                  <Button
                                    disabled={deleteMutation.isPending}
                                    size="sm"
                                    type="button"
                                    variant="secondary"
                                  >
                                    更多
                                  </Button>
                                </DropdownMenuTrigger>
                                <DropdownMenuContent align="end">
                                  <DropdownMenuItem
                                    className="text-red-600"
                                    onSelect={() => handleDeleteDraft(item)}
                                  >
                                    删除草稿
                                  </DropdownMenuItem>
                                </DropdownMenuContent>
                              </DropdownMenu>
                            ) : null}
                          </div>
                        </td>
                      </tr>
                    );
                  })
                ) : (
                  <tr>
                    <td className="py-8 text-center text-sm text-zinc-500" colSpan={6}>
                      <div className="mx-auto max-w-sm py-3">
                        <div className="font-semibold text-zinc-900">{emptyState.title}</div>
                        <div className="mt-1 leading-6 text-zinc-500">{emptyState.description}</div>
                        {status === "draft" && canCreateExpense ? (
                          <Button
                            className="mt-3"
                            disabled={createMutation.isPending}
                            onClick={() => startCreateReimbursement()}
                            size="sm"
                            type="button"
                          >
                            {createMutation.isPending ? "创建中..." : "新建报销"}
                          </Button>
                        ) : null}
                      </div>
                    </td>
                  </tr>
                )}
              </tbody>
            </table>
          </PrimaryTable>

          <div className="mt-4">
            <Pagination
              page={page}
              totalPages={totalPages}
              onPageChange={(p) => setSearchParams({ status, scope, page: String(p) })}
              testIdPrefix="reimbursements"
            />
          </div>
        </>
      ) : null}

      <ActionConfirmDialog
        open={Boolean(deleteTarget)}
        onOpenChange={(open) => {
          if (!open) setDeleteTarget(null);
        }}
        kind="delete"
        targetName={deleteTarget ? resolveReimbursementDisplayCode(deleteTarget) : undefined}
        description="删除后无法恢复，已提交或审批中的报销单不会受到影响。"
        onConfirm={async () => {
          if (deleteTarget) {
            deleteMutation.mutate(deleteTarget.id);
          }
        }}
      />
      <ActionConfirmDialog
        open={Boolean(exportConfirmFormat)}
        onOpenChange={(open) => {
          if (!open) setExportConfirmFormat(null);
        }}
        kind="sensitiveExport"
        targetName={exportConfirmFormat === "xlsx" ? "报销 Excel" : "报销 CSV"}
        onConfirm={async () => {
          if (exportConfirmFormat) {
            exportMutation.mutate(exportConfirmFormat);
          }
        }}
      />
    </ListWorkspace>
  );
}