import { useEffect, useMemo, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { toast } from "sonner";
import { mapApiErrorMessage } from "../api/errorMessages";
import {
  assignAsset,
  createAsset,
  createAssetCategory,
  fetchAssetAssignees,
  fetchAssetCategories,
  fetchAssetDetail,
  fetchAssetErpTrack,
  fetchAssets,
  patchAsset,
  patchAssetCategory,
  requeueAssetErpSync,
  returnAsset,
  transferAsset,
  type AssetCategoryItem,
  type AssetErpStage,
  type AssetErpTrack,
  type AssetStatus,
} from "../api/assets";
import { fetchPurchaseRequests } from "../api/purchaseRequests";
import { fetchCostCenters, fetchDocumentCategories, fetchLegalEntities } from "../api/masterData";
import { isApiError } from "../api/types";
import { useAuth } from "../auth/AuthContext";
import { hasAnyPermission, hasPermission } from "../auth/permissions";
import { AiSuggestionCard } from "../components/ai/AiSuggestionCard";
import { StatusBadge } from "../components/common/StatusBadge";
import { TableSkeleton } from "../components/common/TableSkeleton";
import { FilterBar, ListWorkspace, PrimaryTable, WorkspaceHeader } from "../components/patterns/ListWorkspace";
import { SectionPanel } from "../components/patterns/SectionPanel";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";

function resolveError(error: unknown) {
  if (isApiError(error)) {
    return `${error.code}: ${mapApiErrorMessage(error.code, error.details, error.message)}`;
  }
  if (error instanceof Error) {
    return error.message;
  }
  return "请求失败，请稍后重试。";
}

function initialCategoryForm() {
  return {
    code: "",
    name: "",
    documentCategoryId: "",
    enabled: true,
  };
}

function initialAssetForm() {
  return {
    name: "",
    categoryId: "",
    legalEntityId: "",
    costCenterId: "",
    purchaseRequestId: "",
    serialNo: "",
    location: "",
    status: "in_stock" as AssetStatus,
    assigneeEmployeeId: "",
    activatedAt: "",
    retiredAt: "",
  };
}

function assetStatusOptions(): Array<{ value: AssetStatus | ""; label: string }> {
  return [
    { value: "", label: "全部状态" },
    { value: "in_stock", label: "库存中" },
    { value: "in_use", label: "使用中" },
    { value: "under_repair", label: "维修中" },
    { value: "retired", label: "已退役" },
    { value: "archived", label: "已归档" },
  ];
}

function formatAssetErpReason(reason: string | null) {
  switch (reason) {
    case "erp_sync_disabled":
    case "env_hard_off":
      return "ERP 总闸当前关闭";
    case "flag_force_off":
      return "ERP 功能开关当前强制关闭";
    case "missing_flag_record":
      return "ERP 功能开关记录缺失";
    default:
      return reason ?? null;
  }
}

function resolveAssetErpTimestamp(stage: AssetErpStage) {
  return stage.outbox?.updatedAt ?? stage.outbox?.processedAt ?? stage.binding?.lastSyncedAt ?? null;
}

function resolveAssetErpActionLabel(actionHint: AssetErpTrack["stage"]["actionHint"]) {
  switch (actionHint) {
    case "backfill":
      return "补发";
    case "retry":
      return "重试同步";
    case "resync":
      return "重新同步摘要";
    default:
      return null;
  }
}

export function AssetRegistryPage() {
  const navigate = useNavigate();
  const [searchParams, setSearchParams] = useSearchParams();
  const queryClient = useQueryClient();
  const { permissions } = useAuth();

  const canManage = hasPermission(permissions, "asset.manage");
  const canTransfer = hasPermission(permissions, "asset.transfer");
  const canIntegrationManage = hasPermission(permissions, "integration.manage");
  const canViewAll = hasAnyPermission(permissions, ["asset.view_all", "asset.manage", "asset.transfer", "asset.inventory"]);
  const canReadProcurementSources = canManage && hasAnyPermission(permissions, ["procurement.view_all", "procurement.manage"]);

  const [categoryForm, setCategoryForm] = useState(initialCategoryForm);
  const [editingCategoryId, setEditingCategoryId] = useState("");

  const [statusFilter, setStatusFilter] = useState<AssetStatus | "">("");
  const [categoryFilter, setCategoryFilter] = useState("");
  const [legalEntityFilter, setLegalEntityFilter] = useState("");
  const [costCenterFilter, setCostCenterFilter] = useState("");
  const [assigneeFilter, setAssigneeFilter] = useState("");
  const [mine, setMine] = useState(!canViewAll);

  const [selectedAssetId, setSelectedAssetId] = useState(searchParams.get("id") ?? "");
  const [isCreatingAsset, setIsCreatingAsset] = useState(false);
  const [assetForm, setAssetForm] = useState(initialAssetForm);
  const [assetFormError, setAssetFormError] = useState("");
  const [movementEmployeeId, setMovementEmployeeId] = useState("");
  const [movementLocation, setMovementLocation] = useState("");
  const [movementNote, setMovementNote] = useState("");
  const [movementError, setMovementError] = useState("");

  const categoriesQuery = useQuery({
    queryKey: ["assets", "categories", canManage],
    queryFn: () => fetchAssetCategories({ includeArchived: canManage, enabled: canManage ? undefined : true }),
  });

  const assetsQuery = useQuery({
    queryKey: ["assets", "list", statusFilter, categoryFilter, legalEntityFilter, costCenterFilter, assigneeFilter, mine, canViewAll],
    queryFn: () =>
      fetchAssets({
        status: statusFilter || undefined,
        categoryId: categoryFilter || undefined,
        legalEntityId: legalEntityFilter || undefined,
        costCenterId: costCenterFilter || undefined,
        assigneeId: assigneeFilter || undefined,
        mine: canViewAll ? mine : true,
      }),
  });

  const assetDetailQuery = useQuery({
    enabled: Boolean(selectedAssetId) && !isCreatingAsset,
    queryKey: ["assets", "detail", selectedAssetId],
    queryFn: () => fetchAssetDetail(selectedAssetId),
  });

  const assetErpTrackQuery = useQuery({
    enabled: canIntegrationManage && Boolean(selectedAssetId) && !isCreatingAsset,
    queryKey: ["assets", "erp-track", selectedAssetId],
    queryFn: () => fetchAssetErpTrack(selectedAssetId),
  });

  const legalEntitiesQuery = useQuery({
    queryKey: ["assets", "legal-entities"],
    queryFn: () => fetchLegalEntities({ enabled: true }),
  });

  const costCentersQuery = useQuery({
    queryKey: ["assets", "cost-centers"],
    queryFn: () => fetchCostCenters({ enabled: true }),
  });

  const documentCategoriesQuery = useQuery({
    queryKey: ["assets", "document-categories"],
    queryFn: () => fetchDocumentCategories({ entityType: "asset_card", enabled: true }),
  });

  const assigneesQuery = useQuery({
    enabled: canManage,
    queryKey: ["assets", "assignees"],
    queryFn: () => fetchAssetAssignees(),
  });

  const approvedPurchasesQuery = useQuery({
    enabled: canReadProcurementSources,
    queryKey: ["assets", "approved-purchases"],
    queryFn: () => fetchPurchaseRequests({ status: "approved", mine: false, page: 1, pageSize: 100 }),
  });

  useEffect(() => {
    const searchSelectedId = searchParams.get("id") ?? "";
    if (searchSelectedId && searchSelectedId !== selectedAssetId) {
      setSelectedAssetId(searchSelectedId);
    }
  }, [searchParams, selectedAssetId]);

  useEffect(() => {
    if (isCreatingAsset) {
      return;
    }
    if (selectedAssetId) {
      if (assetDetailQuery.isLoading) {
        return;
      }
      if (!assetDetailQuery.isError) {
        return;
      }
    }
    const nextId = assetsQuery.data?.items?.[0]?.id ?? "";
    if (nextId !== selectedAssetId) {
      setSelectedAssetId(nextId);
    }
  }, [assetDetailQuery.isError, assetDetailQuery.isLoading, assetsQuery.data?.items, isCreatingAsset, selectedAssetId]);

  useEffect(() => {
    const currentId = searchParams.get("id") ?? "";
    if (isCreatingAsset) {
      if (!currentId) {
        return;
      }
      const next = new URLSearchParams(searchParams);
      next.delete("id");
      setSearchParams(next, { replace: true });
      return;
    }
    if (!selectedAssetId && !currentId) {
      return;
    }
    if (selectedAssetId === currentId) {
      return;
    }
    const next = new URLSearchParams(searchParams);
    if (selectedAssetId) {
      next.set("id", selectedAssetId);
    } else {
      next.delete("id");
    }
    setSearchParams(next, { replace: true });
  }, [isCreatingAsset, searchParams, selectedAssetId, setSearchParams]);

  useEffect(() => {
    if (isCreatingAsset || !assetDetailQuery.data?.asset) {
      return;
    }
    const asset = assetDetailQuery.data.asset;
    setAssetForm({
      name: asset.name,
      categoryId: asset.categoryId,
      legalEntityId: asset.legalEntityId,
      costCenterId: asset.costCenterId,
      purchaseRequestId: asset.purchaseRequestId ?? "",
      serialNo: asset.serialNo ?? "",
      location: asset.location ?? "",
      status: asset.status,
      assigneeEmployeeId: asset.assigneeEmployeeId ?? "",
      activatedAt: asset.activatedAt ?? "",
      retiredAt: asset.retiredAt ?? "",
    });
    setMovementEmployeeId("");
    setMovementLocation(asset.location ?? "");
    setMovementNote("");
    setMovementError("");
    setAssetFormError("");
  }, [assetDetailQuery.data, isCreatingAsset]);

  const filteredAssetCostCenters = useMemo(() => {
    if (!assetForm.legalEntityId) {
      return [];
    }
    return (costCentersQuery.data?.items ?? []).filter((item) => item.legalEntityId === assetForm.legalEntityId);
  }, [assetForm.legalEntityId, costCentersQuery.data?.items]);

  const filteredFilterCostCenters = useMemo(() => {
    if (!legalEntityFilter) {
      return costCentersQuery.data?.items ?? [];
    }
    return (costCentersQuery.data?.items ?? []).filter((item) => item.legalEntityId === legalEntityFilter);
  }, [costCentersQuery.data?.items, legalEntityFilter]);

  const currentAsset = assetDetailQuery.data?.asset ?? null;
  const assetErpTrack = assetErpTrackQuery.data ?? null;
  const assetErpStage = assetErpTrack?.stage ?? null;
  const assetErpActionLabel = assetErpStage ? resolveAssetErpActionLabel(assetErpStage.actionHint) : null;
  const canEditCurrent = canManage && (isCreatingAsset || currentAsset?.permissions.canEdit);

  function resetCategoryEditor(category?: AssetCategoryItem) {
    if (!category) {
      setEditingCategoryId("");
      setCategoryForm(initialCategoryForm());
      return;
    }
    setEditingCategoryId(category.id);
    setCategoryForm({
      code: category.code,
      name: category.name,
      documentCategoryId: category.documentCategoryId ?? "",
      enabled: category.enabled,
    });
  }

  function resetAssetEditor() {
    setIsCreatingAsset(true);
    setSelectedAssetId("");
    setAssetForm(initialAssetForm());
    setAssetFormError("");
  }

  function buildCreateAssetPayload() {
    return {
      name: assetForm.name.trim(),
      categoryId: assetForm.categoryId,
      legalEntityId: assetForm.legalEntityId,
      costCenterId: assetForm.costCenterId,
      purchaseRequestId: assetForm.purchaseRequestId || null,
      serialNo: assetForm.serialNo.trim() || null,
      location: assetForm.location.trim() || null,
      status: assetForm.status,
      assigneeEmployeeId: assetForm.assigneeEmployeeId || null,
      activatedAt: assetForm.activatedAt || null,
      retiredAt: assetForm.retiredAt || null,
    };
  }

  function buildPatchAssetPayload() {
    return {
      name: assetForm.name.trim(),
      categoryId: assetForm.categoryId,
      legalEntityId: assetForm.legalEntityId,
      costCenterId: assetForm.costCenterId,
      serialNo: assetForm.serialNo.trim() || null,
      location: assetForm.location.trim() || null,
      status: assetForm.status,
      activatedAt: assetForm.activatedAt || null,
      retiredAt: assetForm.retiredAt || null,
    };
  }

  function validateAssetForm() {
    if (!assetForm.name.trim()) {
      throw new Error("请填写资产名称");
    }
    if (!assetForm.categoryId) {
      throw new Error("请选择资产分类");
    }
    if (!assetForm.legalEntityId) {
      throw new Error("请选择法体");
    }
    if (!assetForm.costCenterId) {
      throw new Error("请选择成本中心");
    }
  }

  const saveCategoryMutation = useMutation({
    mutationFn: async () => {
      if (!categoryForm.code.trim()) {
        throw new Error("请填写分类编码");
      }
      if (!categoryForm.name.trim()) {
        throw new Error("请填写分类名称");
      }
      const payload = {
        code: categoryForm.code.trim(),
        name: categoryForm.name.trim(),
        documentCategoryId: categoryForm.documentCategoryId || null,
        enabled: categoryForm.enabled,
      };
      return editingCategoryId ? patchAssetCategory(editingCategoryId, payload) : createAssetCategory(payload);
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["assets", "categories"] });
      toast.success(editingCategoryId ? "资产分类已更新" : "资产分类已创建");
      resetCategoryEditor();
    },
    onError: (error) => {
      toast.error(resolveError(error));
    },
  });

  const saveAssetMutation = useMutation({
    mutationFn: async () => {
      validateAssetForm();
      if (isCreatingAsset) {
        return createAsset(buildCreateAssetPayload());
      }
      if (!selectedAssetId) {
        throw new Error("请先选择资产卡片");
      }
      return patchAsset(selectedAssetId, buildPatchAssetPayload());
    },
    onSuccess: async (data) => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["assets", "list"] }),
        queryClient.invalidateQueries({ queryKey: ["assets", "detail"] }),
        queryClient.invalidateQueries({ queryKey: ["assets", "erp-track"] }),
      ]);
      setAssetFormError("");
      setSelectedAssetId(data.asset.id);
      setIsCreatingAsset(false);
      toast.success(isCreatingAsset ? "资产卡片已创建" : "资产卡片已更新");
    },
    onError: (error) => {
      const message = resolveError(error);
      setAssetFormError(message);
      toast.error(message);
    },
  });


  const requeueAssetErpMutation = useMutation({
    mutationFn: async () => {
      if (!currentAsset) {
        throw new Error("请先选择资产卡片");
      }
      return requeueAssetErpSync(currentAsset.id, true);
    },
    onSuccess: async (data) => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["assets", "erp-track"] }),
        queryClient.invalidateQueries({ queryKey: ["assets", "detail"] }),
      ]);
      const message = data.duplicated
        ? "ERP 摘要已是最新状态"
        : data.requeued
          ? "资产 ERP 同步已重新入队"
          : "资产 ERP 同步已入队";
      toast.success(message);
    },
    onError: (error) => {
      toast.error(resolveError(error));
    },
  });

  const assignAssetMutation = useMutation({
    mutationFn: async () => {
      if (!currentAsset) {
        throw new Error("请先选择资产卡片");
      }
      if (!movementEmployeeId) {
        throw new Error("请选择领用人");
      }
      return assignAsset(currentAsset.id, {
        employeeId: movementEmployeeId,
        note: movementNote.trim() || null,
      });
    },
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["assets", "list"] }),
        queryClient.invalidateQueries({ queryKey: ["assets", "detail"] }),
      ]);
      setMovementEmployeeId("");
      setMovementNote("");
      setMovementError("");
      toast.success("资产已领用");
    },
    onError: (error) => {
      const message = resolveError(error);
      setMovementError(message);
      toast.error(message);
    },
  });

  const returnAssetMutation = useMutation({
    mutationFn: async () => {
      if (!currentAsset) {
        throw new Error("请先选择资产卡片");
      }
      return returnAsset(currentAsset.id, { note: movementNote.trim() || null });
    },
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["assets", "list"] }),
        queryClient.invalidateQueries({ queryKey: ["assets", "detail"] }),
      ]);
      setMovementEmployeeId("");
      setMovementNote("");
      setMovementError("");
      toast.success("资产已归还");
    },
    onError: (error) => {
      const message = resolveError(error);
      setMovementError(message);
      toast.error(message);
    },
  });

  const transferAssetMutation = useMutation({
    mutationFn: async () => {
      if (!currentAsset) {
        throw new Error("请先选择资产卡片");
      }
      const nextLocation = movementLocation.trim() || null;
      const nextEmployeeId = movementEmployeeId || undefined;
      if (!nextEmployeeId && nextLocation === (currentAsset.location ?? null)) {
        throw new Error("请至少调整归属人或位置");
      }
      return transferAsset(currentAsset.id, {
        toEmployeeId: nextEmployeeId,
        toLocation: nextLocation,
        note: movementNote.trim() || null,
      });
    },
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["assets", "list"] }),
        queryClient.invalidateQueries({ queryKey: ["assets", "detail"] }),
      ]);
      setMovementEmployeeId("");
      setMovementNote("");
      setMovementError("");
      toast.success("资产调拨已完成");
    },
    onError: (error) => {
      const message = resolveError(error);
      setMovementError(message);
      toast.error(message);
    },
  });

  const purchaseOptions = useMemo(() => {
    const items = approvedPurchasesQuery.data?.items ?? [];
    const currentPurchase = currentAsset?.purchaseRequest;
    if (currentPurchase && !items.some((item) => item.id === currentPurchase.id)) {
      return [
        ...items,
        {
          id: currentPurchase.id,
          requestNo: currentPurchase.requestNo,
          title: currentPurchase.title,
          status: currentPurchase.status,
          applicantId: "",
          submitterId: null,
          departmentId: "",
          legalEntityId: null,
          costCenterId: null,
          supplierId: null,
          documentCategoryId: null,
          budgetPoolId: null,
          reason: null,
          currencyCode: "CNY",
          totalAmount: "0.00",
          expectedDeliveryDate: null,
          createdAt: null,
          updatedAt: null,
          applicant: null,
          submitter: null,
          department: null,
          legalEntity: null,
          costCenter: null,
          supplier: null,
          documentCategory: null,
          budgetPool: null,
        },
      ];
    }
    return items;
  }, [approvedPurchasesQuery.data?.items, currentAsset?.purchaseRequest]);

  const categoryItems = categoriesQuery.data?.items ?? [];
  const assetItems = assetsQuery.data?.items ?? [];
  const selectAsset = (assetId: string) => {
    setIsCreatingAsset(false);
    setSelectedAssetId(assetId);
  };

  return (
    <ListWorkspace>
      <WorkspaceHeader
        title="资产台账"
        subtitle="维护资产分类与资产卡片，支持法体、成本中心和采购来源引用。"
        actions={
          <div className="flex flex-wrap gap-2">
            <Button type="button" variant="secondary" onClick={() => navigate("/mobile/assets/scan") }>
              移动扫码查找
            </Button>
            {canManage ? (
              <Button type="button" data-testid="asset-create" onClick={resetAssetEditor}>
                新建资产卡片
              </Button>
            ) : null}
          </div>
        }
      />

      <div className="grid gap-6 xl:grid-cols-[380px_minmax(0,1fr)]">
        <div className="card-std space-y-4 p-4 md:p-5">
          <div className="flex items-center justify-between">
            <h3 className="text-base font-semibold text-zinc-900">资产分类</h3>
            {canManage ? (
              <Button type="button" data-testid="asset-category-reset" variant="secondary" onClick={() => resetCategoryEditor()}>
                新建分类
              </Button>
            ) : null}
          </div>

          <div className="grid gap-3">
            <div className="space-y-2">
              <label className="text-sm font-medium text-zinc-700">分类编码</label>
              <Input data-testid="asset-category-code" value={categoryForm.code} disabled={!canManage} onChange={(event) => setCategoryForm((current) => ({ ...current, code: event.target.value }))} />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium text-zinc-700">分类名称</label>
              <Input data-testid="asset-category-name" value={categoryForm.name} disabled={!canManage} onChange={(event) => setCategoryForm((current) => ({ ...current, name: event.target.value }))} />
            </div>
            <div className="space-y-2">
              <label className="text-sm font-medium text-zinc-700">单据分类</label>
              <select className="select-std" disabled={!canManage} value={categoryForm.documentCategoryId} onChange={(event) => setCategoryForm((current) => ({ ...current, documentCategoryId: event.target.value }))}>
                <option value="">使用系统默认</option>
                {(documentCategoriesQuery.data?.items ?? []).map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.name} ({item.code})
                  </option>
                ))}
              </select>
            </div>
            <label className="flex items-center gap-2 text-sm text-zinc-700">
              <input type="checkbox" className="h-4 w-4 rounded border-zinc-300" checked={categoryForm.enabled} disabled={!canManage} onChange={(event) => setCategoryForm((current) => ({ ...current, enabled: event.target.checked }))} />
              启用分类
            </label>
            {canManage ? (
              <Button data-testid="asset-category-save" type="button" onClick={() => saveCategoryMutation.mutate()} disabled={saveCategoryMutation.isPending}>
                {saveCategoryMutation.isPending ? "保存中..." : editingCategoryId ? "保存分类" : "创建分类"}
              </Button>
            ) : null}
          </div>

          {categoriesQuery.isLoading ? <TableSkeleton columns={3} rows={5} /> : null}
          {categoriesQuery.isError ? (
            <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{resolveError(categoriesQuery.error)}</p>
          ) : null}
          {!categoriesQuery.isLoading && !categoriesQuery.isError ? (
            <>
              <div className="space-y-2 md:hidden">
                {categoryItems.length ? (
                  categoryItems.map((item) => (
                    <button
                      key={item.id}
                      type="button"
                      className="w-full rounded-lg border border-zinc-200 bg-white p-3 text-left"
                      onClick={() => resetCategoryEditor(item)}
                    >
                      <div className="flex items-start justify-between gap-3">
                        <div className="min-w-0">
                          <div className="truncate text-sm font-semibold text-zinc-900">{item.name}</div>
                          <div className="mt-1 text-xs text-zinc-500">{item.code}</div>
                        </div>
                        <span className="shrink-0 rounded-full bg-zinc-100 px-2 py-1 text-xs text-zinc-600">
                          {item.enabled ? "启用" : "停用"}
                        </span>
                      </div>
                      <div className="mt-2 text-xs text-zinc-500">{item.documentCategory?.name ?? "系统默认"}</div>
                    </button>
                  ))
                ) : (
                  <div className="rounded-lg border border-zinc-200 p-3 text-sm text-zinc-500">暂无资产分类</div>
                )}
              </div>
              <PrimaryTable className="hidden md:block">
              <Table>
                <TableHeader>
                  <tr>
                    <TableHead>编码</TableHead>
                    <TableHead>名称</TableHead>
                    <TableHead>状态</TableHead>
                  </tr>
                </TableHeader>
                <TableBody>
                  {categoryItems.map((item) => (
                    <TableRow key={item.id} onClick={() => resetCategoryEditor(item)} className="cursor-pointer">
                      <TableCell className="font-medium text-zinc-900">{item.code}</TableCell>
                      <TableCell>
                        <div>{item.name}</div>
                        <div className="text-xs text-zinc-500">{item.documentCategory?.name ?? "系统默认"}</div>
                      </TableCell>
                      <TableCell>{item.enabled ? "启用" : "停用"}</TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
              </PrimaryTable>
            </>
          ) : null}
        </div>

        <div className="space-y-6">
          <FilterBar className="space-y-4">
            <div className="grid gap-3 md:grid-cols-3 xl:grid-cols-6">
              <select className="select-std" value={statusFilter} onChange={(event) => setStatusFilter(event.target.value as AssetStatus | "") }>
                {assetStatusOptions().map((item) => (
                  <option key={item.value || "all"} value={item.value}>
                    {item.label}
                  </option>
                ))}
              </select>
              <select className="select-std" value={categoryFilter} onChange={(event) => setCategoryFilter(event.target.value)}>
                <option value="">全部分类</option>
                {(categoriesQuery.data?.items ?? []).map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.name}
                  </option>
                ))}
              </select>
              <select className="select-std" value={legalEntityFilter} onChange={(event) => {
                setLegalEntityFilter(event.target.value);
                setCostCenterFilter("");
              }}>
                <option value="">全部法体</option>
                {(legalEntitiesQuery.data?.items ?? []).map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.name}
                  </option>
                ))}
              </select>
              <select className="select-std" value={costCenterFilter} onChange={(event) => setCostCenterFilter(event.target.value)}>
                <option value="">全部成本中心</option>
                {filteredFilterCostCenters.map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.name}
                  </option>
                ))}
              </select>
              <select className="select-std" value={assigneeFilter} onChange={(event) => setAssigneeFilter(event.target.value)} disabled={!canViewAll}>
                <option value="">全部归属人</option>
                {(assigneesQuery.data?.items ?? []).map((item) => (
                  <option key={item.id} value={item.id}>
                    {item.name}
                  </option>
                ))}
              </select>
              {canViewAll ? (
                <div className="flex items-center gap-2">
                  <Button type="button" variant={mine ? "default" : "secondary"} onClick={() => setMine(true)}>
                    仅自己
                  </Button>
                  <Button type="button" variant={!mine ? "default" : "secondary"} onClick={() => setMine(false)}>
                    全范围
                  </Button>
                </div>
              ) : null}
            </div>

            {assetsQuery.isLoading ? <TableSkeleton columns={4} rows={6} /> : null}
            {assetsQuery.isError ? (
              <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{resolveError(assetsQuery.error)}</p>
            ) : null}
            {!assetsQuery.isLoading && !assetsQuery.isError ? (
              <>
                <div className="space-y-3 md:hidden">
                  {assetItems.length ? (
                    assetItems.map((item) => (
                      <button
                        data-testid="asset-mobile-row"
                        type="button"
                        key={item.id}
                        onClick={() => selectAsset(item.id)}
                        className={`w-full rounded-lg border p-3 text-left ${
                          item.id === selectedAssetId && !isCreatingAsset
                            ? "border-zinc-400 bg-zinc-50"
                            : "border-zinc-200 bg-white"
                        }`}
                      >
                        <div className="flex items-start justify-between gap-3">
                          <div className="min-w-0">
                            <div className="truncate text-sm font-semibold text-zinc-900">{item.assetNo}</div>
                            <div className="mt-1 truncate text-xs text-zinc-500">{item.name}</div>
                          </div>
                          <StatusBadge status={item.status} />
                        </div>
                        <div className="mt-3 grid grid-cols-2 gap-2 text-xs text-zinc-600">
                          <div>
                            <div className="text-zinc-400">分类</div>
                            <div className="mt-0.5 truncate text-zinc-700">{item.category?.name ?? "-"}</div>
                          </div>
                          <div>
                            <div className="text-zinc-400">归属人</div>
                            <div className="mt-0.5 truncate text-zinc-700">{item.assignee?.name ?? "-"}</div>
                          </div>
                        </div>
                      </button>
                    ))
                  ) : (
                    <div className="rounded-lg border border-zinc-200 p-4 text-sm text-zinc-500">暂无资产卡片</div>
                  )}
                </div>
                <PrimaryTable className="hidden md:block">
                <Table>
                  <TableHeader>
                    <tr>
                      <TableHead>资产</TableHead>
                      <TableHead>分类</TableHead>
                      <TableHead>状态</TableHead>
                      <TableHead>归属人</TableHead>
                    </tr>
                  </TableHeader>
                  <TableBody>
                    {assetItems.length ? (
                      assetItems.map((item) => (
                        <TableRow data-testid="asset-row" key={item.id} onClick={() => {
                          selectAsset(item.id);
                        }} className={item.id === selectedAssetId && !isCreatingAsset ? "bg-zinc-50" : "cursor-pointer"}>
                          <TableCell>
                            <div className="font-medium text-zinc-900">{item.assetNo}</div>
                            <div className="text-xs text-zinc-500">{item.name}</div>
                          </TableCell>
                          <TableCell>{item.category?.name ?? "-"}</TableCell>
                          <TableCell><StatusBadge status={item.status} /></TableCell>
                          <TableCell>{item.assignee?.name ?? "-"}</TableCell>
                        </TableRow>
                      ))
                    ) : (
                      <TableRow>
                        <TableCell colSpan={4} className="py-4 text-zinc-500">
                          暂无资产卡片
                        </TableCell>
                      </TableRow>
                    )}
                  </TableBody>
                </Table>
                </PrimaryTable>
              </>
            ) : null}
          </FilterBar>

          <div className="card-std space-y-4 p-4 md:p-5">
            {!selectedAssetId && !isCreatingAsset ? (
              <div className="rounded-lg border border-dashed border-zinc-300 p-8 text-center text-sm text-zinc-500">
                请先从列表选择资产卡片，或点击“新建资产卡片”。
              </div>
            ) : null}

            {selectedAssetId && !isCreatingAsset && assetDetailQuery.isLoading ? <TableSkeleton columns={2} rows={8} /> : null}
            {selectedAssetId && !isCreatingAsset && assetDetailQuery.isError ? (
              <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{resolveError(assetDetailQuery.error)}</p>
            ) : null}

            {(isCreatingAsset || currentAsset) && !assetDetailQuery.isLoading ? (
              <>
                <div className="flex items-center justify-between gap-3">
                  <div>
                    <h3 className="text-lg font-semibold text-zinc-900">{isCreatingAsset ? "新建资产卡片" : currentAsset?.assetNo ?? "资产卡片"}</h3>
                    <p className="text-sm text-zinc-500">{isCreatingAsset ? "创建新的资产台账卡片。" : currentAsset?.name}</p>
                  </div>
                  {!isCreatingAsset && currentAsset ? <StatusBadge status={currentAsset.status} /> : null}
                </div>

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

                <div className="grid gap-4 md:grid-cols-2">
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">资产名称</label>
                    <Input data-testid="asset-name" value={assetForm.name} disabled={!canEditCurrent} onChange={(event) => setAssetForm((current) => ({ ...current, name: event.target.value }))} />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">资产状态</label>
                    <select data-testid="asset-status" className="select-std" value={assetForm.status} disabled={!canEditCurrent} onChange={(event) => setAssetForm((current) => ({ ...current, status: event.target.value as AssetStatus }))}>
                      {assetStatusOptions().filter((item) => item.value).map((item) => (
                        <option key={item.value} value={item.value}>
                          {item.label}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">资产分类</label>
                    <select data-testid="asset-category" className="select-std" value={assetForm.categoryId} disabled={!canEditCurrent} onChange={(event) => setAssetForm((current) => ({ ...current, categoryId: event.target.value }))}>
                      <option value="">请选择资产分类</option>
                      {(categoriesQuery.data?.items ?? []).filter((item) => item.enabled).map((item) => (
                        <option key={item.id} value={item.id}>
                          {item.name}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">法体</label>
                    <select data-testid="asset-legal-entity" className="select-std" value={assetForm.legalEntityId} disabled={!canEditCurrent} onChange={(event) => {
                      const legalEntityId = event.target.value;
                      setAssetForm((current) => ({
                        ...current,
                        legalEntityId,
                        costCenterId: current.costCenterId && filteredAssetCostCenters.some((item) => item.id === current.costCenterId && item.legalEntityId === legalEntityId)
                          ? current.costCenterId
                          : "",
                      }));
                    }}>
                      <option value="">请选择法体</option>
                      {(legalEntitiesQuery.data?.items ?? []).map((item) => (
                        <option key={item.id} value={item.id}>
                          {item.name}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">成本中心</label>
                    <select data-testid="asset-cost-center" className="select-std" value={assetForm.costCenterId} disabled={!canEditCurrent} onChange={(event) => setAssetForm((current) => ({ ...current, costCenterId: event.target.value }))}>
                      <option value="">请选择成本中心</option>
                      {filteredAssetCostCenters.map((item) => (
                        <option key={item.id} value={item.id}>
                          {item.name}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">归属人</label>
                    <select data-testid="asset-assignee" className="select-std" value={assetForm.assigneeEmployeeId} disabled={!canManage || !isCreatingAsset} onChange={(event) => setAssetForm((current) => ({ ...current, assigneeEmployeeId: event.target.value }))}>
                      <option value="">暂不分配</option>
                      {(assigneesQuery.data?.items ?? []).map((item) => (
                        <option key={item.id} value={item.id}>
                          {item.name} ({item.employeeNo})
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">采购来源</label>
                    <select className="select-std" value={assetForm.purchaseRequestId} disabled={!canEditCurrent || !canReadProcurementSources || !isCreatingAsset} onChange={(event) => setAssetForm((current) => ({ ...current, purchaseRequestId: event.target.value }))}>
                      <option value="">无采购来源</option>
                      {purchaseOptions.map((item) => (
                        <option key={item.id} value={item.id}>
                          {(item.requestNo ?? item.id)} · {item.title}
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">序列号</label>
                    <Input data-testid="asset-serial-no" value={assetForm.serialNo} disabled={!canEditCurrent} onChange={(event) => setAssetForm((current) => ({ ...current, serialNo: event.target.value }))} />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">存放位置</label>
                    <Input data-testid="asset-location" value={assetForm.location} disabled={!canEditCurrent} onChange={(event) => setAssetForm((current) => ({ ...current, location: event.target.value }))} />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">启用日期</label>
                    <Input type="date" value={assetForm.activatedAt} disabled={!canEditCurrent} onChange={(event) => setAssetForm((current) => ({ ...current, activatedAt: event.target.value }))} />
                  </div>
                  <div className="space-y-2">
                    <label className="text-sm font-medium text-zinc-700">退役日期</label>
                    <Input type="date" value={assetForm.retiredAt} disabled={!canEditCurrent} onChange={(event) => setAssetForm((current) => ({ ...current, retiredAt: event.target.value }))} />
                  </div>
                </div>


                {currentAsset && canTransfer && !isCreatingAsset ? (
                  <div className="rounded-xl border border-zinc-200 bg-zinc-50 p-4">
                    <div className="mb-3 flex items-center justify-between gap-3">
                      <div>
                        <h4 className="text-sm font-semibold text-zinc-900">资产流转</h4>
                        <p className="text-xs text-zinc-500">通过受控动作执行领用、归还和调拨，并写入审计记录。</p>
                      </div>
                      <div className="text-xs text-zinc-500">
                        当前归属人：{currentAsset.assignee?.name ?? "未分配"} · 位置：{currentAsset.location ?? "未设置"}
                      </div>
                    </div>

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

                    <div className="grid gap-4 md:grid-cols-3">
                      <div className="space-y-2">
                        <label className="text-sm font-medium text-zinc-700">目标归属人</label>
                        <select
                          data-testid="asset-movement-assignee"
                          className="select-std"
                          value={movementEmployeeId}
                          onChange={(event) => setMovementEmployeeId(event.target.value)}
                        >
                          <option value="">保持当前归属人</option>
                          {(assigneesQuery.data?.items ?? []).map((item) => (
                            <option key={item.id} value={item.id}>
                              {item.name} ({item.employeeNo})
                            </option>
                          ))}
                        </select>
                      </div>
                      <div className="space-y-2">
                        <label className="text-sm font-medium text-zinc-700">目标位置</label>
                        <Input
                          data-testid="asset-movement-location"
                          value={movementLocation}
                          onChange={(event) => setMovementLocation(event.target.value)}
                        />
                      </div>
                      <div className="space-y-2">
                        <label className="text-sm font-medium text-zinc-700">备注</label>
                        <Input
                          data-testid="asset-movement-note"
                          value={movementNote}
                          onChange={(event) => setMovementNote(event.target.value)}
                        />
                      </div>
                    </div>

                    <div className="mt-4 flex flex-wrap items-center gap-2">
                      <Button
                        type="button"
                        data-testid="asset-assign-submit"
                        disabled={assignAssetMutation.isPending || Boolean(currentAsset.assigneeEmployeeId) || !movementEmployeeId}
                        onClick={() => assignAssetMutation.mutate()}
                      >
                        {assignAssetMutation.isPending ? "领用中..." : "资产领用"}
                      </Button>
                      <Button
                        type="button"
                        variant="secondary"
                        data-testid="asset-return-submit"
                        disabled={returnAssetMutation.isPending || !currentAsset.assigneeEmployeeId}
                        onClick={() => returnAssetMutation.mutate()}
                      >
                        {returnAssetMutation.isPending ? "归还中..." : "资产归还"}
                      </Button>
                      <Button
                        type="button"
                        variant="secondary"
                        data-testid="asset-transfer-submit"
                        disabled={
                          transferAssetMutation.isPending ||
                          (!movementEmployeeId && movementLocation.trim() === (currentAsset.location ?? ""))
                        }
                        onClick={() => transferAssetMutation.mutate()}
                      >
                        {transferAssetMutation.isPending ? "调拨中..." : "资产调拨"}
                      </Button>
                    </div>
                  </div>
                ) : null}

                {selectedAssetId && !isCreatingAsset && canIntegrationManage ? (
                  <SectionPanel
                    title="ERP 同步状态"
                    description="仅同步资产法体、成本中心与退役/归档等财务台账摘要，不接管实物流转。"
                  >
                    {assetErpTrackQuery.isLoading ? (
                      <p className="rounded-lg bg-zinc-50 px-3 py-2 text-sm text-zinc-500">ERP 同步轨道加载中...</p>
                    ) : assetErpTrackQuery.isError ? (
                      <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">{resolveError(assetErpTrackQuery.error)}</p>
                    ) : assetErpStage ? (
                      <div className="space-y-3">
                        <div className="flex items-center justify-between gap-3">
                          <div className="space-y-1 text-xs text-zinc-500">
                            <div>
                              最近更新时间：{resolveAssetErpTimestamp(assetErpStage) ? new Date(resolveAssetErpTimestamp(assetErpStage) as string).toLocaleString() : "尚无同步记录"}
                            </div>
                            <div>变更来源：{assetErpStage.preview.sourceEventName ?? "-"}</div>
                          </div>
                          <StatusBadge status={assetErpStage.deliveryStatus} />
                        </div>

                        <div className="grid gap-2 rounded-lg bg-zinc-50 px-3 py-2 text-xs text-zinc-600 md:grid-cols-2">
                          <div>资产编号：{assetErpTrack?.asset.assetNo ?? currentAsset?.assetNo ?? "-"}</div>
                          <div>最近 changeType：{assetErpStage.preview.changeType ?? "-"}</div>
                          <div>分类：{assetErpStage.preview.categoryCode ?? "-"}</div>
                          <div>资产状态：{assetErpStage.preview.status ?? assetErpTrack?.asset.status ?? "-"}</div>
                          <div>法体：{assetErpStage.preview.legalEntityCode ?? "-"}</div>
                          <div>成本中心：{assetErpStage.preview.costCenterCode ?? "-"}</div>
                        </div>

                        {formatAssetErpReason(assetErpStage.reason) ? (
                          <div className="rounded bg-zinc-50 px-3 py-2 text-xs text-zinc-500">{formatAssetErpReason(assetErpStage.reason)}</div>
                        ) : null}

                        {assetErpStage.outbox?.lastError ? (
                          <div className="rounded bg-red-50 px-3 py-2 text-xs text-red-600">{assetErpStage.outbox.lastError}</div>
                        ) : null}

                        {assetErpTrack?.permissions.canSeeExternalRefs && (assetErpStage.binding?.externalCode || assetErpStage.binding?.externalId) ? (
                          <div className="rounded bg-zinc-50 px-3 py-2 text-xs text-zinc-600">
                            ERP 资产编号：{assetErpStage.binding?.externalCode ?? "-"}
                            {assetErpStage.binding?.externalId ? ` · ${assetErpStage.binding.externalId}` : ""}
                          </div>
                        ) : null}

                        {assetErpTrack?.permissions.canRetry && assetErpActionLabel ? (
                          <div className="flex justify-end">
                            <Button
                              type="button"
                              size="sm"
                              variant="secondary"
                              disabled={requeueAssetErpMutation.isPending}
                              onClick={() => requeueAssetErpMutation.mutate()}
                            >
                              {requeueAssetErpMutation.isPending ? "处理中..." : assetErpActionLabel}
                            </Button>
                          </div>
                        ) : null}
                      </div>
                    ) : (
                      <p className="rounded-lg bg-zinc-50 px-3 py-2 text-sm text-zinc-500">暂无 ERP 轨道信息</p>
                    )}
                  </SectionPanel>
                ) : null}

                {selectedAssetId && !isCreatingAsset && currentAsset ? (
                  <AiSuggestionCard targetType="asset_card" targetId={currentAsset.id} />
                ) : null}

                <div className="flex items-center gap-2">
                  {canManage ? (
                    <Button type="button" data-testid="asset-save" disabled={saveAssetMutation.isPending || !canEditCurrent} onClick={() => saveAssetMutation.mutate()}>
                      {saveAssetMutation.isPending ? "保存中..." : isCreatingAsset ? "创建资产卡片" : "保存资产卡片"}
                    </Button>
                  ) : null}
                  {currentAsset?.purchaseRequest ? (
                    <span className="text-sm text-zinc-500">采购来源：{currentAsset.purchaseRequest.requestNo ?? currentAsset.purchaseRequest.id}</span>
                  ) : null}
                </div>
              </>
            ) : null}
          </div>
        </div>
      </div>
    </ListWorkspace>
  );
}