import { useEffect, useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { isApiError } from "../api/types";
import { mapApiErrorMessage } from "../api/errorMessages";
import { fetchMyDelegations } from "../api/delegations";
import { exportInvoicePool } from "../api/exports";
import {
  archiveInvoice,
  bindInvoice,
  fetchInvoicePoolDetail,
  fetchInvoicePoolList,
  fetchInvoiceSignedUrl,
  overrideInvoiceDuplicate,
  patchInvoice,
  retryInvoiceOcr,
  unbindInvoice,
  uploadInvoice,
  type InvoicePoolStatus,
} from "../api/invoicePool";
import { fetchReimbursements } from "../api/reimbursements";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { downloadBlob } from "../lib/download";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import { Card } from "../components/ui/card";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";

const PAGE_SIZE = 20;

export function InvoicePoolPage() {
  const queryClient = useQueryClient();
  const { permissions, me } = useAuth();
  const canManageInvoice = hasPermission(permissions, "invoice.manage");
  const canOverrideDuplicate = hasPermission(permissions, "expense.finance.override_duplicate");
  const canUploadInvoice = hasPermission(permissions, "invoice.upload");
  const canProxySubmit = hasPermission(permissions, "expense.proxy_submit");
  const isAdministration = (me?.roleCodes ?? []).includes("administration");
  const showProxyOwnerSelector = canProxySubmit && isAdministration;
  const [status, setStatus] = useState<InvoicePoolStatus | "">("");
  const [ownerScope, setOwnerScope] = useState<"own" | "all">("own");
  const [page, setPage] = useState(1);
  const [selectedFile, setSelectedFile] = useState<File | null>(null);
  const [uploadOwnerEmployeeId, setUploadOwnerEmployeeId] = useState("");
  const [selectedInvoiceId, setSelectedInvoiceId] = useState("");
  const [selectedReimbursementId, setSelectedReimbursementId] = useState("");
  const [detailInvoiceId, setDetailInvoiceId] = useState("");
  const [editOpen, setEditOpen] = useState(false);
  const [editSetAvailable, setEditSetAvailable] = useState(false);
  const [editRemarks, setEditRemarks] = useState("");
  const [editInvoiceCode, setEditInvoiceCode] = useState("");
  const [editInvoiceNumber, setEditInvoiceNumber] = useState("");
  const [editInvoiceDate, setEditInvoiceDate] = useState("");
  const [editTotalAmount, setEditTotalAmount] = useState("");
  const [error, setError] = useState("");

  const listQuery = useQuery({
    queryKey: ["invoice-pool", "list", status, ownerScope, page],
    queryFn: () =>
      fetchInvoicePoolList({
        status: status || undefined,
        ownerScope,
        page,
        pageSize: PAGE_SIZE,
      }),
  });

  const reimbursementQuery = useQuery({
    queryKey: ["reimbursements", "for-bind"],
    queryFn: () => fetchReimbursements({ page: 1, pageSize: 50, scope: "own" }),
  });

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

  const detailQuery = useQuery({
    enabled: Boolean(detailInvoiceId),
    queryKey: ["invoice-pool", "detail", detailInvoiceId],
    queryFn: () => fetchInvoicePoolDetail(detailInvoiceId),
    refetchInterval: (query) => {
      const statusValue = query.state.data?.status;
      if (statusValue === "pending_ocr") {
        return 3_000;
      }
      return false;
    },
  });

  useEffect(() => {
    if (!detailQuery.data || editOpen) {
      return;
    }

    setEditSetAvailable(false);
    setEditRemarks(detailQuery.data.remarks ?? "");
    setEditInvoiceCode(detailQuery.data.invoiceCode ?? "");
    setEditInvoiceNumber(detailQuery.data.invoiceNumber ?? "");
    setEditInvoiceDate(detailQuery.data.invoiceDate ?? "");
    setEditTotalAmount(detailQuery.data.totalAmount ?? "");
  }, [detailQuery.data, editOpen]);

  const uploadMutation = useMutation({
    mutationFn: async () => {
      if (!selectedFile) {
        throw new Error("请选择文件");
      }
      return uploadInvoice(selectedFile, "vat", uploadOwnerEmployeeId || undefined);
    },
    onSuccess: async (data) => {
      await queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
      setDetailInvoiceId(data.invoicePoolId);
      setSelectedFile(null);
      setError("");
    },
    onError: (err) => {
      if (isApiError(err)) {
        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
      } else if (err instanceof Error) {
        setError(err.message);
      } else {
        setError("上传失败，请稍后重试");
      }
    },
  });

  const bindMutation = useMutation({
    mutationFn: async () => {
      if (!selectedInvoiceId || !selectedReimbursementId) {
        throw new Error("请选择票据与报销单");
      }
      return bindInvoice(selectedInvoiceId, selectedReimbursementId);
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
      setError("");
    },
    onError: (err) => {
      if (isApiError(err)) {
        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
      } else if (err instanceof Error) {
        setError(err.message);
      } else {
        setError("绑定失败，请稍后重试");
      }
    },
  });

  const signedUrlMutation = useMutation({
    mutationFn: async (invoiceId: string) => fetchInvoiceSignedUrl(invoiceId),
    onSuccess: (data) => {
      window.open(data.signedUrl, "_blank", "noopener,noreferrer");
    },
    onError: (err) => {
      if (isApiError(err)) {
        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
      } else {
        setError("预览链接获取失败");
      }
    },
  });

  useEffect(() => {
    if (!canManageInvoice && ownerScope === "all") {
      setOwnerScope("own");
    }
  }, [canManageInvoice, ownerScope]);

  useEffect(() => {
    if (!detailInvoiceId && listQuery.data?.items?.length) {
      setDetailInvoiceId(listQuery.data.items[0].id);
    }
  }, [detailInvoiceId, listQuery.data?.items]);

  const patchMutation = useMutation({
    mutationFn: async () => {
      if (!detailInvoiceId) {
        throw new Error("请选择一条票据");
      }

      return patchInvoice(detailInvoiceId, {
        ...(editSetAvailable ? { status: "available" } : {}),
        remarks: editRemarks.trim() ? editRemarks.trim() : null,
        invoiceCode: editInvoiceCode.trim() ? editInvoiceCode.trim() : null,
        invoiceNumber: editInvoiceNumber.trim() ? editInvoiceNumber.trim() : null,
        invoiceDate: editInvoiceDate ? editInvoiceDate : null,
        totalAmount: editTotalAmount.trim() ? editTotalAmount.trim() : null,
      });
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
      setEditOpen(false);
      setError("");
    },
    onError: (err) => {
      if (isApiError(err)) {
        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
      } else if (err instanceof Error) {
        setError(err.message);
      } else {
        setError("保存失败，请稍后重试");
      }
    },
  });

  const archiveMutation = useMutation({
    mutationFn: async (invoiceId: string) => archiveInvoice(invoiceId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
      setError("");
    },
    onError: (err) => {
      if (isApiError(err)) {
        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
      } else {
        setError("归档失败，请稍后重试");
      }
    },
  });

  const unbindMutation = useMutation({
    mutationFn: async (invoiceId: string) => unbindInvoice(invoiceId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
      setError("");
    },
    onError: (err) => {
      if (isApiError(err)) {
        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
      } else {
        setError("解绑失败，请稍后重试");
      }
    },
  });

  const retryOcrMutation = useMutation({
    mutationFn: async (invoiceId: string) => retryInvoiceOcr(invoiceId),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
      setError("");
    },
    onError: (err) => {
      if (isApiError(err)) {
        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
      } else {
        setError("OCR 重试失败，请稍后再试");
      }
    },
  });

  const overrideDuplicateMutation = useMutation({
    mutationFn: async (params: { invoiceId: string; refFormNumber: string; reason: string }) =>
      overrideInvoiceDuplicate(params.invoiceId, {
        refFormNumber: params.refFormNumber,
        reason: params.reason,
      }),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["invoice-pool"] });
      setError("");
    },
    onError: (err) => {
      if (isApiError(err)) {
        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
      } else {
        setError("判重例外失败，请稍后重试");
      }
    },
  });

  const exportMutation = useMutation({
    mutationFn: (format: "csv" | "xlsx") =>
      exportInvoicePool({
        format,
        status: status || undefined,
        ownerScope,
      }),
    onSuccess: (response, format) => {
      downloadBlob(response.blob, response.filename ?? `invoice-pool.${format}`);
      setError("");
    },
    onError: (err) => {
      if (isApiError(err)) {
        setError(`${err.code}: ${mapApiErrorMessage(err.code, err.details, err.message)}`);
      } else {
        setError("导出失败，请稍后重试");
      }
    },
  });

  const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
  const detail = detailQuery.data;
  const canEditDetail = Boolean(
    detail &&
      (canManageInvoice ||
        detail.ownerEmployeeId === me?.id ||
        detail.uploadedByEmployeeId === me?.id),
  );

  return (
    <div className="space-y-6">
      <PageHeader
        title="票据中心"
        subtitle="支持上传、OCR 状态轮询、绑定报销与签名预览。"
        actions={
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button
                data-testid="invoice-export"
                variant="secondary"
                type="button"
                disabled={exportMutation.isPending}
              >
                {exportMutation.isPending ? "导出中..." : "导出"}
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem data-testid="invoice-export-csv" onSelect={() => exportMutation.mutate("csv")}>
                导出 CSV
              </DropdownMenuItem>
              <DropdownMenuItem data-testid="invoice-export-xlsx" onSelect={() => exportMutation.mutate("xlsx")}>
                导出 Excel
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        }
      />

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

      <Card className="space-y-3 p-6">
        <h3 className="text-base font-semibold text-slate-900">上传票据（VAT OCR）</h3>
        {showProxyOwnerSelector ? (
          <select
            className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
            data-testid="invoice-upload-owner"
            onChange={(event) => setUploadOwnerEmployeeId(event.target.value)}
            value={uploadOwnerEmployeeId}
          >
            <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}
        <input
          accept="application/pdf,image/jpeg,image/png,image/webp"
          data-testid="invoice-upload-file"
          onChange={(event) => setSelectedFile(event.target.files?.[0] ?? null)}
          type="file"
        />
        <Button
          data-testid="invoice-upload-submit"
          disabled={uploadMutation.isPending || !selectedFile}
          onClick={() => uploadMutation.mutate()}
          type="button"
        >
          {uploadMutation.isPending ? "上传中..." : "上传并触发OCR"}
        </Button>
      </Card>

      <Card className="space-y-3 p-6">
        <h3 className="text-base font-semibold text-slate-900">筛选与列表</h3>
        <div className="flex flex-wrap gap-2">
          <select
            className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
            data-testid="invoice-filter-status"
            onChange={(event) => {
              setStatus(event.target.value as InvoicePoolStatus | "");
              setPage(1);
            }}
            value={status}
          >
            <option value="">全部状态</option>
            <option value="pending_ocr">pending_ocr</option>
            <option value="available">available</option>
            <option value="ocr_failed">ocr_failed</option>
            <option value="bound">bound</option>
            <option value="archived">archived</option>
          </select>

          <select
            className="h-11 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
            data-testid="invoice-filter-owner-scope"
            onChange={(event) => {
              setOwnerScope(event.target.value as "own" | "all");
              setPage(1);
            }}
            value={ownerScope}
          >
            <option value="own">own</option>
            <option value="all">all</option>
          </select>
        </div>

        <div className="rounded-lg border border-slate-200">
          <Table data-testid="invoice-pool-table">
            <TableHeader>
              <tr>
                <TableHead>ID</TableHead>
                <TableHead>状态</TableHead>
                <TableHead>发票号</TableHead>
                <TableHead>OCR</TableHead>
                <TableHead className="w-40">操作</TableHead>
              </tr>
            </TableHeader>
            <TableBody>
              {(listQuery.data?.items ?? []).length ? (
                listQuery.data?.items.map((item) => (
                  <TableRow data-testid="invoice-row" key={item.id}>
                    <TableCell className="font-mono text-xs">{item.id}</TableCell>
                    <TableCell>{item.status}</TableCell>
                    <TableCell>
                      {item.invoiceCode || "-"}-{item.invoiceNumber || "-"}
                    </TableCell>
                    <TableCell>
                      {item.status === "pending_ocr" ? (
                        <span className="text-amber-700">
                          OCR 处理中（attempts={item.ocrAttempts}）
                        </span>
                      ) : item.status === "ocr_failed" ? (
                        <span className="text-red-600">
                          OCR 失败（{item.ocrLastError || "unknown"}）
                        </span>
                      ) : (
                        <span className="text-slate-600">attempts={item.ocrAttempts}</span>
                      )}
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-2">
                        <Button
                          data-testid="invoice-detail-button"
                          size="sm"
                          variant="secondary"
                          onClick={() => setDetailInvoiceId(item.id)}
                          type="button"
                        >
                          详情
                        </Button>
                        <Button
                          data-testid="invoice-preview-button"
                          size="sm"
                          variant="secondary"
                          onClick={() => signedUrlMutation.mutate(item.id)}
                          type="button"
                        >
                          预览
                        </Button>
                      </div>
                    </TableCell>
                  </TableRow>
                ))
              ) : (
                <TableRow>
                  <TableCell className="py-3 text-slate-500" colSpan={5}>
                    暂无数据
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>

        <div className="flex items-center justify-between text-sm">
          <span>
            第 {page} / {totalPages} 页
          </span>
          <div className="flex gap-2">
            <Button
              data-testid="invoice-prev-page"
              variant="secondary"
              disabled={page <= 1}
              onClick={() => setPage((current) => Math.max(1, current - 1))}
              type="button"
            >
              上一页
            </Button>
            <Button
              data-testid="invoice-next-page"
              variant="secondary"
              disabled={page >= totalPages}
              onClick={() => setPage((current) => Math.min(totalPages, current + 1))}
              type="button"
            >
              下一页
            </Button>
          </div>
        </div>
      </Card>

      <Card className="space-y-3 p-6">
        <h3 className="text-base font-semibold text-slate-900">绑定报销</h3>
        <select
          className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
          data-testid="invoice-bind-invoice"
          onChange={(event) => setSelectedInvoiceId(event.target.value)}
          value={selectedInvoiceId}
        >
          <option value="">选择票据</option>
          {(listQuery.data?.items ?? []).map((item) => (
            <option key={item.id} value={item.id}>
              {item.id} ({item.status})
            </option>
          ))}
        </select>

        <select
          className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
          data-testid="invoice-bind-reimbursement"
          onChange={(event) => setSelectedReimbursementId(event.target.value)}
          value={selectedReimbursementId}
        >
          <option value="">选择报销单</option>
          {(reimbursementQuery.data?.items ?? []).map((item) => (
            <option key={item.id} value={item.id}>
              {item.formNumber ?? item.id} ({item.status})
            </option>
          ))}
        </select>

        <Button
          data-testid="invoice-bind-submit"
          variant="secondary"
          disabled={bindMutation.isPending || !selectedInvoiceId || !selectedReimbursementId}
          onClick={() => bindMutation.mutate()}
          type="button"
        >
          {bindMutation.isPending ? "绑定中..." : "绑定票据"}
        </Button>
      </Card>

      <Card className="space-y-2 p-6 text-sm" data-testid="invoice-detail-panel">
        <h3 className="text-base font-semibold text-slate-900">详情轮询</h3>
        {detail ? (
          <>
            <div>票据ID：{detail.id}</div>
            <div>状态：{detail.status}</div>
            <div>OCR错误：{detail.ocrLastError || "-"}</div>
            <div>
              发票号：{detail.invoiceCode || "-"}-{detail.invoiceNumber || "-"}
            </div>
            <div>开票日期：{detail.invoiceDate || "-"}</div>
            <div>总金额：{detail.totalAmount || "-"}</div>
            <div>备注：{detail.remarks || "-"}</div>
            <div>关联报销：{detail.linkedReimbursementId || "-"}</div>
            <div>
              判重例外：{detail.isDuplicateOverride ? "已例外" : "否"}{" "}
              {detail.overrideRefFormNumber ? `(ref=${detail.overrideRefFormNumber})` : ""}
            </div>

            <div className="flex flex-wrap gap-2 pt-2">
              {canEditDetail ? (
                <Button
                  data-testid="invoice-edit-open"
                  size="sm"
                  variant="secondary"
                  type="button"
                  disabled={patchMutation.isPending}
                  onClick={() => setEditOpen((prev) => !prev)}
                >
                  {editOpen ? "关闭编辑" : "人工修正"}
                </Button>
              ) : null}

              {canEditDetail && detail.status === "ocr_failed" ? (
                <Button
                  data-testid="invoice-retry-ocr"
                  size="sm"
                  variant="secondary"
                  type="button"
                  disabled={retryOcrMutation.isPending}
                  onClick={() => {
                    if (!window.confirm("确认重试 OCR？将重新进入 pending_ocr 并消耗一次尝试次数。")) return;
                    retryOcrMutation.mutate(detail.id);
                  }}
                >
                  重试 OCR
                </Button>
              ) : null}

              {canEditDetail && canUploadInvoice && detail.status === "bound" ? (
                <Button
                  data-testid="invoice-unbind"
                  size="sm"
                  variant="secondary"
                  type="button"
                  disabled={unbindMutation.isPending}
                  onClick={() => {
                    if (!window.confirm("确认解绑该票据？仅草稿/驳回报销允许解绑。")) return;
                    unbindMutation.mutate(detail.id);
                  }}
                >
                  解绑
                </Button>
              ) : null}

              {canEditDetail && detail.status !== "bound" && detail.status !== "archived" ? (
                <Button
                  data-testid="invoice-archive"
                  size="sm"
                  variant="secondary"
                  type="button"
                  disabled={archiveMutation.isPending}
                  onClick={() => {
                    if (!window.confirm("确认归档该票据？归档后将不再用于绑定与判重。")) return;
                    archiveMutation.mutate(detail.id);
                  }}
                >
                  手工归档
                </Button>
              ) : null}

              {canOverrideDuplicate &&
              !detail.isDuplicateOverride &&
              ["available", "ocr_failed"].includes(detail.status) ? (
                <Button
                  data-testid="invoice-override-duplicate"
                  size="sm"
                  variant="secondary"
                  type="button"
                  disabled={overrideDuplicateMutation.isPending}
                  onClick={() => {
                    if (!window.confirm("确认执行判重例外？该操作将写入审计并影响判重口径。")) return;
                    const refFormNumber = window.prompt("请输入参考单号（必填）");
                    if (!refFormNumber?.trim()) return;
                    const reason = window.prompt("请输入例外原因（必填）");
                    if (!reason?.trim()) return;
                    overrideDuplicateMutation.mutate({
                      invoiceId: detail.id,
                      refFormNumber: refFormNumber.trim(),
                      reason: reason.trim(),
                    });
                  }}
                >
                  判重例外
                </Button>
              ) : null}
            </div>

            {editOpen ? (
              <div className="mt-4 space-y-3 rounded-lg border border-slate-200 p-4">
                <p className="text-sm font-medium text-slate-800">人工修正（仅必要字段）</p>

                {detail.status === "ocr_failed" ? (
                  <label className="flex items-center gap-2 text-sm">
                    <input
                      data-testid="invoice-edit-set-available"
                      checked={editSetAvailable}
                      onChange={(event) => setEditSetAvailable(event.target.checked)}
                      type="checkbox"
                    />
                    <span>将状态标记为 available（人工确认可用）</span>
                  </label>
                ) : null}

                <div className="grid gap-3 md:grid-cols-2">
                  <div className="space-y-1">
                    <label className="text-xs text-slate-600" htmlFor="invoiceCode">
                      发票代码
                    </label>
                    <input
                      className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
                      data-testid="invoice-edit-code"
                      id="invoiceCode"
                      onChange={(event) => setEditInvoiceCode(event.target.value)}
                      value={editInvoiceCode}
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-xs text-slate-600" htmlFor="invoiceNumber">
                      发票号码
                    </label>
                    <input
                      className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
                      data-testid="invoice-edit-number"
                      id="invoiceNumber"
                      onChange={(event) => setEditInvoiceNumber(event.target.value)}
                      value={editInvoiceNumber}
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-xs text-slate-600" htmlFor="invoiceDate">
                      开票日期
                    </label>
                    <input
                      className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
                      data-testid="invoice-edit-date"
                      id="invoiceDate"
                      onChange={(event) => setEditInvoiceDate(event.target.value)}
                      type="date"
                      value={editInvoiceDate}
                    />
                  </div>
                  <div className="space-y-1">
                    <label className="text-xs text-slate-600" htmlFor="invoiceTotalAmount">
                      总金额
                    </label>
                    <input
                      className="h-11 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
                      data-testid="invoice-edit-total-amount"
                      id="invoiceTotalAmount"
                      onChange={(event) => setEditTotalAmount(event.target.value)}
                      value={editTotalAmount}
                    />
                  </div>
                  <div className="space-y-1 md:col-span-2">
                    <label className="text-xs text-slate-600" htmlFor="invoiceRemarks">
                      备注
                    </label>
                    <textarea
                      className="w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm"
                      data-testid="invoice-edit-remarks"
                      id="invoiceRemarks"
                      onChange={(event) => setEditRemarks(event.target.value)}
                      rows={2}
                      value={editRemarks}
                    />
                  </div>
                </div>

                <div className="flex flex-wrap gap-2">
                  <Button
                    data-testid="invoice-edit-save"
                    disabled={patchMutation.isPending}
                    onClick={() => patchMutation.mutate()}
                    type="button"
                  >
                    {patchMutation.isPending ? "保存中..." : "保存修正"}
                  </Button>
                  <Button
                    data-testid="invoice-edit-cancel"
                    variant="secondary"
                    disabled={patchMutation.isPending}
                    onClick={() => setEditOpen(false)}
                    type="button"
                  >
                    取消
                  </Button>
                </div>
              </div>
            ) : null}
          </>
        ) : (
          <p className="text-slate-500">请选择一条票据查看详情</p>
        )}
      </Card>
    </div>
  );
}