import { useState } from "react";
import { Link, useSearchParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  createContractRegistry,
  exportContractsRegistry,
  fetchContractsRegistry,
  fetchExpiringContracts,
  patchContractRegistry,
  renewContractRegistry,
  type ContractRegistryExportFormat,
  type ContractRegistryFilters,
  type ContractRegistryItem,
  type ContractRegistryPersistedStatus,
  type ContractRegistryStatus,
  type ContractRegistryType,
} from "../api/contractsRegistry";
import { fetchEmployees } from "../api/employees";
import { mapApiErrorMessage } from "../api/errorMessages";
import { fetchProjects, type ConfidentialityLevel } from "../api/projects";
import { isApiError } from "../api/types";
import { useAuth } from "../auth/AuthContext";
import { hasAnyPermission } from "../auth/permissions";
import { PageHeader } from "../components/common/PageHeader";
import { StatusBadge } from "../components/common/StatusBadge";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Label } from "../components/ui/label";
import { Textarea } from "../components/ui/textarea";
import { downloadBlob } from "../lib/download";
import { toast } from "sonner";

const CONFIDENTIALITY_OPTIONS: ConfidentialityLevel[] = ["public", "internal", "confidential", "restricted"];
const CONTRACT_TYPE_OPTIONS: ContractRegistryType[] = ["purchase", "sales", "service", "framework", "other"];
const FILTER_STATUS_OPTIONS: Array<{ value: ContractRegistryStatus; label: string }> = [
  { value: "active", label: "生效中" },
  { value: "expired", label: "已过期" },
  { value: "draft", label: "草稿" },
  { value: "archived", label: "已归档" },
];
const EDITOR_STATUS_OPTIONS: Array<{ value: ContractRegistryPersistedStatus; label: string }> = [
  { value: "active", label: "active" },
  { value: "draft", label: "draft" },
  { value: "archived", label: "archived" },
];
const AMOUNT_PATTERN = /^\d{1,12}(\.\d{1,2})?$/;
const EXPIRING_DAYS = 30;

type FiltersState = {
  projectId: string;
  status: "" | ContractRegistryStatus;
  contractType: "" | ContractRegistryType;
  counterpartyName: string;
  expiryDateFrom: string;
  expiryDateTo: string;
};

type EditorState = {
  contractNo: string;
  projectId: string;
  contractType: ContractRegistryType;
  counterpartyName: string;
  summary: string;
  amount: string;
  currency: string;
  signedDate: string;
  effectiveDate: string;
  expiryDate: string;
  confidentialityLevel: ConfidentialityLevel;
  archiveLocation: string;
  offlineArchiveNo: string;
  ownerEmployeeId: string;
  status: ContractRegistryPersistedStatus;
};

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

function confidentialityLabel(value: ConfidentialityLevel) {
  if (value === "public") return "公开";
  if (value === "internal") return "内部";
  if (value === "confidential") return "机密";
  return "限制";
}

function contractTypeLabel(value: ContractRegistryType) {
  if (value === "purchase") return "采购合同";
  if (value === "sales") return "销售合同";
  if (value === "service") return "服务合同";
  if (value === "framework") return "框架协议";
  return "其他";
}

function buildEmptyEditor(projectId = ""): EditorState {
  return {
    contractNo: "",
    projectId,
    contractType: "other",
    counterpartyName: "",
    summary: "",
    amount: "",
    currency: "CNY",
    signedDate: "",
    effectiveDate: "",
    expiryDate: "",
    confidentialityLevel: "internal",
    archiveLocation: "",
    offlineArchiveNo: "",
    ownerEmployeeId: "",
    status: "active",
  };
}

function buildFiltersPayload(filters: FiltersState): ContractRegistryFilters {
  return {
    ...(filters.projectId ? { projectId: filters.projectId } : {}),
    ...(filters.status ? { status: filters.status } : {}),
    ...(filters.contractType ? { contractType: filters.contractType } : {}),
    ...(filters.counterpartyName.trim() ? { counterpartyName: filters.counterpartyName.trim() } : {}),
    ...(filters.expiryDateFrom ? { expiryDateFrom: filters.expiryDateFrom } : {}),
    ...(filters.expiryDateTo ? { expiryDateTo: filters.expiryDateTo } : {}),
  };
}

function buildSavePayload(form: EditorState, options: { includeOwnerEmployeeId?: boolean } = {}) {
  const includeOwnerEmployeeId = options.includeOwnerEmployeeId ?? true;

  return {
    contractNo: form.contractNo.trim(),
    projectId: form.projectId || null,
    contractType: form.contractType,
    counterpartyName: form.counterpartyName.trim(),
    summary: form.summary.trim(),
    amount: form.amount.trim() ? form.amount.trim() : null,
    currency: form.currency.trim().toUpperCase(),
    signedDate: form.signedDate || null,
    effectiveDate: form.effectiveDate || null,
    expiryDate: form.expiryDate || null,
    confidentialityLevel: form.confidentialityLevel,
    archiveLocation: form.archiveLocation.trim(),
    offlineArchiveNo: form.offlineArchiveNo.trim() || null,
    ...(includeOwnerEmployeeId && form.ownerEmployeeId ? { ownerEmployeeId: form.ownerEmployeeId } : {}),
    status: form.status,
  };
}

function loadEditorFromItem(item: ContractRegistryItem): EditorState {
  return {
    contractNo: item.contractNo,
    projectId: item.projectId ?? "",
    contractType: item.contractType,
    counterpartyName: item.counterpartyName,
    summary: item.summary,
    amount: item.amount ?? "",
    currency: item.currency,
    signedDate: item.signedDate ?? "",
    effectiveDate: item.effectiveDate ?? "",
    expiryDate: item.expiryDate ?? "",
    confidentialityLevel: item.confidentialityLevel,
    archiveLocation: item.archiveLocation,
    offlineArchiveNo: item.offlineArchiveNo ?? "",
    ownerEmployeeId: item.ownerEmployeeId,
    status: item.persistedStatus,
  };
}

function nextPersistedStatus(item: ContractRegistryItem): ContractRegistryPersistedStatus {
  return item.persistedStatus === "archived" ? "active" : "archived";
}

export function ContractsRegistryPage() {
  const queryClient = useQueryClient();
  const { permissions } = useAuth();
  const [searchParams] = useSearchParams();
  const initialProjectId = searchParams.get("projectId") ?? "";
  const canBrowseEmployees = hasAnyPermission(permissions, ["system.users", "report.dashboard.view"]);

  const [filters, setFilters] = useState<FiltersState>({
    projectId: initialProjectId,
    status: "",
    contractType: "",
    counterpartyName: "",
    expiryDateFrom: "",
    expiryDateTo: "",
  });
  const [editorId, setEditorId] = useState<string | null>(null);
  const [editor, setEditor] = useState<EditorState>(() => buildEmptyEditor(initialProjectId));
  const [showExpiring, setShowExpiring] = useState(false);

  const filterPayload = buildFiltersPayload(filters);
  const contractsQuery = useQuery({
    queryKey: ["contracts-registry", filterPayload],
    queryFn: () => fetchContractsRegistry(filterPayload),
  });
  const expiringQuery = useQuery({
    queryKey: ["contracts-registry", "expiring", EXPIRING_DAYS],
    queryFn: () => fetchExpiringContracts(EXPIRING_DAYS),
  });
  const projectsQuery = useQuery({
    queryKey: ["projects", "contracts-page"],
    queryFn: () => fetchProjects({}),
  });
  const employeesQuery = useQuery({
    enabled: canBrowseEmployees,
    queryKey: ["employees", "contracts-page"],
    queryFn: () => fetchEmployees({ page: 1, pageSize: 100, status: "active" }),
  });

  const projectOptions = projectsQuery.data?.items ?? [];
  const employeeOptions = canBrowseEmployees ? employeesQuery.data?.items ?? [] : [];
  const contracts = contractsQuery.data?.items ?? [];
  const expiringItems = expiringQuery.data?.items ?? [];
  const editingItem = editorId ? contracts.find((item) => item.id === editorId) ?? null : null;
  const readonlyOwnerLabel = editingItem?.owner
    ? `${editingItem.owner.name} · ${editingItem.owner.employeeNo}`
    : editor.ownerEmployeeId
      ? "保留现有责任人"
      : "默认当前用户";
  const amountInvalid = Boolean(editor.amount.trim()) && !AMOUNT_PATTERN.test(editor.amount.trim());

  const refreshAll = async () => {
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ["contracts-registry"] }),
      queryClient.invalidateQueries({ queryKey: ["projects"] }),
    ]);
  };

  const resetEditor = () => {
    setEditorId(null);
    setEditor(buildEmptyEditor(filters.projectId));
  };

  const saveMutation = useMutation({
    mutationFn: async () => {
      const payload = buildSavePayload(editor, { includeOwnerEmployeeId: canBrowseEmployees });
      if (editorId) {
        return patchContractRegistry(editorId, payload);
      }
      return createContractRegistry(payload);
    },
    onSuccess: async () => {
      await refreshAll();
      resetEditor();
      toast.success(editorId ? "合同台账已更新" : "合同台账已创建");
    },
    onError: (error) => toast.error(resolveError(error, editorId ? "更新合同台账失败" : "创建合同台账失败")),
  });

  const toggleStatusMutation = useMutation({
    mutationFn: (item: ContractRegistryItem) => patchContractRegistry(item.id, { status: nextPersistedStatus(item) }),
    onSuccess: async () => {
      await refreshAll();
      toast.success("合同状态已更新");
    },
    onError: (error) => toast.error(resolveError(error, "更新合同状态失败")),
  });

  const renewMutation = useMutation({
    mutationFn: (item: ContractRegistryItem) => renewContractRegistry(item.id),
    onSuccess: async () => {
      await refreshAll();
      toast.success("合同已续约，新的草稿合同已创建");
    },
    onError: (error) => toast.error(resolveError(error, "续约合同失败")),
  });

  const exportMutation = useMutation({
    mutationFn: (format: ContractRegistryExportFormat) =>
      exportContractsRegistry({
        ...filterPayload,
        format,
      }),
    onSuccess: (response, format) => {
      downloadBlob(response.blob, response.filename ?? `contracts-registry.${format}`);
      toast.success(`合同台账已导出为 ${format.toUpperCase()}`);
    },
    onError: (error) => toast.error(resolveError(error, "导出合同台账失败")),
  });

  return (
    <div className="space-y-6">
      <PageHeader
        title="合同台账"
        subtitle="维护合同元数据、生命周期、到期预警与导出，不在 OA 存放涉密正文附件。"
        actions={
          <div className="flex flex-wrap gap-2">
            <Button
              type="button"
              variant="secondary"
              disabled={exportMutation.isPending}
              onClick={() => exportMutation.mutate("csv")}
            >
              导出 CSV
            </Button>
            <Button
              type="button"
              variant="secondary"
              disabled={exportMutation.isPending}
              onClick={() => exportMutation.mutate("xlsx")}
            >
              导出 Excel
            </Button>
            <Button asChild variant="secondary" type="button">
              <Link to="/projects">返回项目</Link>
            </Button>
          </div>
        }
      />

      <div className="card-std space-y-4 p-6">
        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <div className="text-sm text-zinc-500">到期预警</div>
            <div className="mt-1 text-3xl font-semibold text-zinc-900">{expiringQuery.data?.total ?? 0}</div>
            <div className="text-sm text-zinc-600">份合同将在 {EXPIRING_DAYS} 天内到期</div>
          </div>
          <div className="flex flex-wrap gap-2">
            <Button
              type="button"
              variant="secondary"
              disabled={expiringQuery.isLoading}
              onClick={() => setShowExpiring((value) => !value)}
            >
              {showExpiring ? "收起到期列表" : "展开到期列表"}
            </Button>
          </div>
        </div>

        {expiringQuery.isError ? (
          <div className="text-sm text-red-600">{resolveError(expiringQuery.error, "加载到期预警失败")}</div>
        ) : null}

        {showExpiring ? (
          <div className="space-y-3 border-t border-zinc-200 pt-4">
            {expiringItems.map((item) => (
              <div
                key={item.id}
                className="flex flex-col gap-2 rounded-lg border border-amber-200 bg-amber-50/70 p-4 lg:flex-row lg:items-center lg:justify-between"
              >
                <div>
                  <div className="font-medium text-zinc-900">
                    {item.contractNo} · {item.counterpartyName}
                  </div>
                  <div className="mt-1 text-sm text-zinc-600">
                    {contractTypeLabel(item.contractType)} · 到期日 {item.expiryDate ?? "-"} · 责任人 {item.owner?.name ?? "-"}
                  </div>
                </div>
                <div className="flex gap-2">
                  <Button
                    type="button"
                    size="sm"
                    variant="secondary"
                    onClick={() => {
                      setEditorId(item.id);
                      setEditor(loadEditorFromItem(item));
                    }}
                  >
                    编辑
                  </Button>
                </div>
              </div>
            ))}
            {!expiringQuery.isLoading && !expiringItems.length ? (
              <div className="text-sm text-zinc-500">未来 {EXPIRING_DAYS} 天内暂无即将到期合同。</div>
            ) : null}
          </div>
        ) : null}
      </div>

      <div className="grid gap-6 xl:grid-cols-[400px,minmax(0,1fr)]">
        <div className="card-std space-y-4 p-6">
          <div className="flex items-start justify-between gap-3">
            <div>
              <h3 className="text-base font-semibold text-zinc-900">{editorId ? "编辑合同台账" : "新建合同台账"}</h3>
              <p className="mt-1 text-sm text-zinc-500">
                补齐合同类型、金额、签署/生效/到期日期，续约将自动创建新的草稿合同。
              </p>
            </div>
            {editorId ? (
              <Button type="button" variant="secondary" size="sm" onClick={resetEditor}>
                切换到新建
              </Button>
            ) : null}
          </div>

          {editingItem?.status === "expired" ? (
            <div className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-900">
              当前合同因到期日已过，列表状态显示为“已过期”；保存时仍以数据库状态 {editingItem.persistedStatus} 持久化。
            </div>
          ) : null}

          <div className="space-y-2">
            <Label>合同编号</Label>
            <Input
              value={editor.contractNo}
              onChange={(event) => setEditor((current) => ({ ...current, contractNo: event.target.value }))}
              placeholder="例如 HT-2026-001"
            />
          </div>

          <div className="grid gap-3 md:grid-cols-2">
            <div className="space-y-2">
              <Label>合同类型</Label>
              <select
                className="select-std"
                value={editor.contractType}
                onChange={(event) => setEditor((current) => ({ ...current, contractType: event.target.value as ContractRegistryType }))}
              >
                {CONTRACT_TYPE_OPTIONS.map((item) => (
                  <option key={item} value={item}>
                    {contractTypeLabel(item)}
                  </option>
                ))}
              </select>
            </div>
            <div className="space-y-2">
              <Label>状态</Label>
              <select
                className="select-std"
                value={editor.status}
                onChange={(event) => setEditor((current) => ({ ...current, status: event.target.value as ContractRegistryPersistedStatus }))}
              >
                {EDITOR_STATUS_OPTIONS.map((item) => (
                  <option key={item.value} value={item.value}>
                    {item.label}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <div className="space-y-2">
            <Label>关联项目</Label>
            <select
              className="select-std"
              value={editor.projectId}
              onChange={(event) => setEditor((current) => ({ ...current, projectId: event.target.value }))}
            >
              <option value="">未关联</option>
              {projectOptions.map((item) => (
                <option key={item.id} value={item.id}>
                  {item.projectNo} · {item.name}
                </option>
              ))}
            </select>
          </div>

          <div className="space-y-2">
            <Label>相对方</Label>
            <Input
              value={editor.counterpartyName}
              onChange={(event) => setEditor((current) => ({ ...current, counterpartyName: event.target.value }))}
              placeholder="合同对方名称"
            />
          </div>

          <div className="space-y-2">
            <Label>摘要</Label>
            <Textarea
              value={editor.summary}
              onChange={(event) => setEditor((current) => ({ ...current, summary: event.target.value }))}
              placeholder="只写最小必要摘要，不录入涉密正文"
            />
          </div>

          <div className="grid gap-3 md:grid-cols-2">
            <div className="space-y-2">
              <Label>合同金额</Label>
              <Input
                value={editor.amount}
                onChange={(event) => setEditor((current) => ({ ...current, amount: event.target.value }))}
                placeholder="例如 100000.00"
              />
            </div>
            <div className="space-y-2">
              <Label>币种</Label>
              <Input
                value={editor.currency}
                onChange={(event) => setEditor((current) => ({ ...current, currency: event.target.value.toUpperCase() }))}
                placeholder="CNY"
              />
            </div>
          </div>
          {amountInvalid ? <div className="text-xs text-red-600">合同金额需为最多 12 位整数、最多 2 位小数。</div> : null}

          <div className="grid gap-3 md:grid-cols-3">
            <div className="space-y-2">
              <Label>签署日期</Label>
              <Input
                type="date"
                value={editor.signedDate}
                onChange={(event) => setEditor((current) => ({ ...current, signedDate: event.target.value }))}
              />
            </div>
            <div className="space-y-2">
              <Label>生效日期</Label>
              <Input
                type="date"
                value={editor.effectiveDate}
                onChange={(event) => setEditor((current) => ({ ...current, effectiveDate: event.target.value }))}
              />
            </div>
            <div className="space-y-2">
              <Label>到期日期</Label>
              <Input
                type="date"
                value={editor.expiryDate}
                onChange={(event) => setEditor((current) => ({ ...current, expiryDate: event.target.value }))}
              />
            </div>
          </div>

          <div className="space-y-2">
            <Label>归档位置</Label>
            <Input
              value={editor.archiveLocation}
              onChange={(event) => setEditor((current) => ({ ...current, archiveLocation: event.target.value }))}
              placeholder="NAS/文件柜/共享盘路径"
            />
          </div>

          <div className="grid gap-3 md:grid-cols-2">
            <div className="space-y-2">
              <Label>离线档案号</Label>
              <Input
                value={editor.offlineArchiveNo}
                onChange={(event) => setEditor((current) => ({ ...current, offlineArchiveNo: event.target.value }))}
                placeholder="可选"
              />
            </div>
            <div className="space-y-2">
              <Label>密级</Label>
              <select
                className="select-std"
                value={editor.confidentialityLevel}
                onChange={(event) => setEditor((current) => ({ ...current, confidentialityLevel: event.target.value as ConfidentialityLevel }))}
              >
                {CONFIDENTIALITY_OPTIONS.map((item) => (
                  <option key={item} value={item}>
                    {confidentialityLabel(item)}
                  </option>
                ))}
              </select>
            </div>
          </div>

          <div className="space-y-2">
            <Label>责任人</Label>
            {canBrowseEmployees ? (
              <select
                className="select-std"
                value={editor.ownerEmployeeId}
                onChange={(event) => setEditor((current) => ({ ...current, ownerEmployeeId: event.target.value }))}
              >
                <option value="">默认当前用户</option>
                {employeeOptions.map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.name} · {item.employeeNo}
                  </option>
                ))}
              </select>
            ) : (
              <div className="rounded-lg border border-zinc-200 bg-zinc-50 px-3 py-2 text-sm">
                <div className="font-medium text-zinc-900">{readonlyOwnerLabel}</div>
                <div className="mt-1 text-xs text-zinc-500">
                  当前账号无人员目录权限，新建时使用当前用户，编辑时保留原责任人。
                </div>
              </div>
            )}
          </div>

          <Button
            type="button"
            disabled={
              saveMutation.isPending ||
              amountInvalid ||
              !editor.contractNo.trim() ||
              !editor.counterpartyName.trim() ||
              !editor.summary.trim() ||
              !editor.archiveLocation.trim() ||
              !editor.currency.trim()
            }
            onClick={() => saveMutation.mutate()}
          >
            {saveMutation.isPending ? (editorId ? "保存中..." : "创建中...") : editorId ? "保存修改" : "创建合同台账"}
          </Button>
        </div>

        <div className="card-std space-y-4 p-6">
          <div className="flex flex-col gap-4 xl:flex-row xl:items-start xl:justify-between">
            <div>
              <h3 className="text-base font-semibold text-zinc-900">台账列表</h3>
              <div className="mt-1 text-sm text-zinc-500">{filters.projectId ? "已按项目过滤" : "显示全部可见合同"}</div>
            </div>
            <Button
              type="button"
              variant="secondary"
              onClick={() => {
                setFilters({
                  projectId: initialProjectId,
                  status: "",
                  contractType: "",
                  counterpartyName: "",
                  expiryDateFrom: "",
                  expiryDateTo: "",
                });
                setEditorId(null);
                setEditor(buildEmptyEditor(initialProjectId));
              }}
            >
              重置筛选
            </Button>
          </div>

          <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
            <div className="space-y-2">
              <Label>项目</Label>
              <select
                className="select-std"
                value={filters.projectId}
                onChange={(event) => setFilters((current) => ({ ...current, projectId: event.target.value }))}
              >
                <option value="">全部项目</option>
                {projectOptions.map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.projectNo} · {item.name}
                  </option>
                ))}
              </select>
            </div>

            <div className="space-y-2">
              <Label>状态</Label>
              <select
                className="select-std"
                value={filters.status}
                onChange={(event) => setFilters((current) => ({ ...current, status: event.target.value as FiltersState["status"] }))}
              >
                <option value="">全部状态</option>
                {FILTER_STATUS_OPTIONS.map((item) => (
                  <option key={item.value} value={item.value}>
                    {item.label}
                  </option>
                ))}
              </select>
            </div>

            <div className="space-y-2">
              <Label>合同类型</Label>
              <select
                className="select-std"
                value={filters.contractType}
                onChange={(event) => setFilters((current) => ({ ...current, contractType: event.target.value as FiltersState["contractType"] }))}
              >
                <option value="">全部类型</option>
                {CONTRACT_TYPE_OPTIONS.map((item) => (
                  <option key={item} value={item}>
                    {contractTypeLabel(item)}
                  </option>
                ))}
              </select>
            </div>

            <div className="space-y-2">
              <Label>相对方模糊筛选</Label>
              <Input
                value={filters.counterpartyName}
                onChange={(event) => setFilters((current) => ({ ...current, counterpartyName: event.target.value }))}
                placeholder="输入相对方名称关键字"
              />
            </div>

            <div className="space-y-2">
              <Label>到期日开始</Label>
              <Input
                type="date"
                value={filters.expiryDateFrom}
                onChange={(event) => setFilters((current) => ({ ...current, expiryDateFrom: event.target.value }))}
              />
            </div>

            <div className="space-y-2">
              <Label>到期日结束</Label>
              <Input
                type="date"
                value={filters.expiryDateTo}
                onChange={(event) => setFilters((current) => ({ ...current, expiryDateTo: event.target.value }))}
              />
            </div>
          </div>

          {contractsQuery.isLoading ? <div className="text-sm text-zinc-500">加载中...</div> : null}
          {contractsQuery.isError ? (
            <div className="text-sm text-red-600">{resolveError(contractsQuery.error, "加载合同台账失败")}</div>
          ) : null}

          <div className="space-y-3">
            {contracts.map((item) => (
              <div key={item.id} className="rounded-lg border border-zinc-200 p-4">
                <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
                  <div className="space-y-2">
                    <div className="flex flex-wrap items-center gap-3">
                      <div className="font-semibold text-zinc-900">{item.contractNo}</div>
                      <StatusBadge status={item.status} />
                      <span className="rounded-full bg-zinc-100 px-2 py-1 text-xs text-zinc-600">
                        {confidentialityLabel(item.confidentialityLevel)}
                      </span>
                    </div>
                    <div className="text-sm text-zinc-900">{item.counterpartyName}</div>
                    <div className="text-sm text-zinc-600">{item.summary}</div>
                    <div className="text-xs text-zinc-500">
                      {contractTypeLabel(item.contractType)}
                      {item.amount ? ` · ${item.amount} ${item.currency}` : " · 金额未录入"}
                      {item.expiryDate ? ` · 到期日 ${item.expiryDate}` : " · 未设置到期日"}
                    </div>
                    <div className="text-xs text-zinc-500">
                      项目：{item.project ? `${item.project.projectNo} · ${item.project.name}` : "未关联"} · 责任人：
                      {item.owner?.name ?? "-"}
                    </div>
                    <div className="text-xs text-zinc-500">
                      签署：{item.signedDate ?? "-"} · 生效：{item.effectiveDate ?? "-"} · 归档：{item.archiveLocation}
                      {item.offlineArchiveNo ? ` · 离线档案号 ${item.offlineArchiveNo}` : ""}
                    </div>
                  </div>

                  <div className="flex flex-wrap gap-2 md:max-w-[260px] md:justify-end">
                    <Button
                      type="button"
                      size="sm"
                      variant="secondary"
                      onClick={() => {
                        setEditorId(item.id);
                        setEditor(loadEditorFromItem(item));
                      }}
                    >
                      编辑
                    </Button>
                    <Button
                      type="button"
                      size="sm"
                      variant="secondary"
                      disabled={renewMutation.isPending || !["active", "expired"].includes(item.status)}
                      onClick={() => renewMutation.mutate(item)}
                    >
                      续约
                    </Button>
                    {item.project ? (
                      <Button asChild size="sm" variant="secondary" type="button">
                        <Link to={`/projects/${item.project.id}`}>查看项目</Link>
                      </Button>
                    ) : null}
                    <Button
                      type="button"
                      size="sm"
                      variant="secondary"
                      disabled={toggleStatusMutation.isPending}
                      onClick={() => toggleStatusMutation.mutate(item)}
                    >
                      {item.persistedStatus === "archived" ? "恢复为 active" : "归档"}
                    </Button>
                  </div>
                </div>
              </div>
            ))}

            {!contractsQuery.isLoading && !contracts.length ? (
              <div className="text-sm text-zinc-500">暂无符合筛选条件的合同台账。</div>
            ) : null}
          </div>
        </div>
      </div>
    </div>
  );
}

export default ContractsRegistryPage;