import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
import { AnimatePresence, motion } from "motion/react";
import {
  AlertTriangle,
  ArrowLeft,
  ArrowRightLeft,
  BriefcaseBusiness,
  Building2,
  CheckCircle2,
  Search,
  ShieldAlert,
  Users,
  X,
} from "lucide-react";
import { useNavigate } from "react-router-dom";
import ActionDialog from "@/components/ActionDialog";
import { useIsMobileViewport } from "@/hooks/useIsMobileViewport";
import {
  executeOwnerTransfer,
  getCurrentUser,
  getStoredCurrentUserId,
  listOwnerTransferTargetUsers,
  previewOwnerTransfer,
  type AdminUserSummary,
  type OwnerTransferItem,
  type OwnerTransferPayload,
  type OwnerTransferPreview,
} from "@/lib/auth";
import { cn } from "@/lib/utils";

type TransferTab = "opportunities" | "sales" | "channels";
type TransferKind = "opportunity" | "sales" | "channel";
type SelectionState = {
  opportunityIds: number[];
  salesExpansionIds: number[];
  channelExpansionIds: number[];
};

type TransferConfirmState = {
  title: string;
  description: string;
  payload: OwnerTransferPayload;
  successText: string;
  confirmText: string;
  sourceLabel: string;
  targetLabel: string;
  subjectLabel?: string;
  badges: string[];
};

const TAB_META: Array<{
  key: TransferTab;
  label: string;
  icon: typeof BriefcaseBusiness;
}> = [
  { key: "opportunities", label: "商机", icon: BriefcaseBusiness },
  { key: "sales", label: "拓展销售人员", icon: Users },
  { key: "channels", label: "拓展渠道", icon: Building2 },
];

function getActiveTenantId() {
  const rawValue = localStorage.getItem("activeTenantId");
  const tenantId = Number(rawValue || 0);
  return Number.isFinite(tenantId) ? tenantId : 0;
}

function getDisplayUserName(user?: AdminUserSummary | null) {
  if (!user) {
    return "未选择";
  }
  return `${user.displayName || user.username} (${user.username})`;
}

function filterTransferItems(items: OwnerTransferItem[], keyword: string) {
  const normalizedKeyword = keyword.trim().toLowerCase();
  if (!normalizedKeyword) {
    return items;
  }
  return items.filter((item) => `${item.name || ""} ${item.code || ""}`.toLowerCase().includes(normalizedKeyword));
}

function countLabel(value?: number) {
  return typeof value === "number" && Number.isFinite(value) ? value : 0;
}

function createEmptySelectionState(): SelectionState {
  return {
    opportunityIds: [],
    salesExpansionIds: [],
    channelExpansionIds: [],
  };
}

function getSelectionKey(kind: TransferKind) {
  if (kind === "sales") {
    return "salesExpansionIds";
  }
  if (kind === "channel") {
    return "channelExpansionIds";
  }
  return "opportunityIds";
}

function getTransferTabKind(tab: TransferTab): TransferKind {
  if (tab === "sales") {
    return "sales";
  }
  if (tab === "channels") {
    return "channel";
  }
  return "opportunity";
}

export default function OwnerTransfer({
  embedded = false,
  onClose,
  onFooterChange,
}: {
  embedded?: boolean;
  onClose?: () => void;
  onFooterChange?: (footer: ReactNode | null) => void;
}) {
  const navigate = useNavigate();
  const isMobileViewport = useIsMobileViewport();
  const [users, setUsers] = useState<AdminUserSummary[]>([]);
  const [currentUser, setCurrentUser] = useState<AdminUserSummary | null>(null);
  const [loadingUsers, setLoadingUsers] = useState(false);
  const [previewLoading, setPreviewLoading] = useState(false);
  const [executing, setExecuting] = useState(false);
  const [pageError, setPageError] = useState("");
  const [successMessage, setSuccessMessage] = useState("");
  const [preview, setPreview] = useState<OwnerTransferPreview | null>(null);
  const [fromUserId, setFromUserId] = useState(() => {
    const storedUserId = getStoredCurrentUserId();
    return storedUserId ? String(storedUserId) : "";
  });
  const [toUserId, setToUserId] = useState("");
  const [targetPickerOpen, setTargetPickerOpen] = useState(false);
  const [targetPickerKeyword, setTargetPickerKeyword] = useState("");
  const [activeTab, setActiveTab] = useState<TransferTab>("opportunities");
  const [searchKeyword, setSearchKeyword] = useState("");
  const [selection, setSelection] = useState<SelectionState>(createEmptySelectionState);
  const [detailsExpanded, setDetailsExpanded] = useState(false);
  const [confirmState, setConfirmState] = useState<TransferConfirmState | null>(null);

  const activeTenantId = getActiveTenantId();
  const tenantSelected = activeTenantId > 0;
  const numericFromUserId = fromUserId ? Number(fromUserId) : undefined;
  const numericToUserId = toUserId ? Number(toUserId) : undefined;
  const fromUser = useMemo(
    () => users.find((item) => item.userId === numericFromUserId) ?? currentUser,
    [currentUser, numericFromUserId, users],
  );
  const toUser = useMemo(
    () => users.find((item) => item.userId === numericToUserId) ?? null,
    [numericToUserId, users],
  );
  const selectedPreviewHasSalesConflict = Boolean(preview?.salesConflicts?.length);

  const loadCurrentUser = useCallback(async () => {
    try {
      const profile = await getCurrentUser();
      const nextCurrentUser: AdminUserSummary = {
        userId: profile.userId,
        username: profile.username,
        displayName: profile.displayName || profile.username,
        status: profile.status,
        tenantId: profile.tenantId,
      };
      setCurrentUser(nextCurrentUser);
      if (profile.userId) {
        setFromUserId(String(profile.userId));
      }
    } catch (error) {
      setCurrentUser(null);
      setPageError(error instanceof Error ? error.message : "获取当前登录账号失败");
    }
  }, []);

  const loadUsers = useCallback(async () => {
    if (!tenantSelected) {
      setUsers([]);
      return;
    }

    setLoadingUsers(true);
    setPageError("");
    try {
      const response = await listOwnerTransferTargetUsers();
      setUsers(response ?? []);
    } catch (error) {
      setUsers([]);
      setPageError(error instanceof Error ? error.message : "加载用户列表失败");
    } finally {
      setLoadingUsers(false);
    }
  }, [activeTenantId, tenantSelected]);

  const loadPreview = useCallback(async (sourceUserId?: number, targetUserId?: number) => {
    if (!currentUser?.userId) {
      setPreview(null);
      return;
    }
    if (
      !tenantSelected
      || !sourceUserId
      || !targetUserId
      || sourceUserId <= 0
      || targetUserId <= 0
      || sourceUserId === targetUserId
      || sourceUserId !== currentUser.userId
    ) {
      setPreview(null);
      return;
    }

    setPreviewLoading(true);
    setPageError("");
    try {
      const response = await previewOwnerTransfer(sourceUserId, targetUserId);
      setPreview(response);
    } catch (error) {
      setPreview(null);
      setPageError(error instanceof Error ? error.message : "加载转移预检失败");
    } finally {
      setPreviewLoading(false);
    }
  }, [currentUser?.userId, tenantSelected]);

  useEffect(() => {
    void loadCurrentUser();
  }, [loadCurrentUser]);

  useEffect(() => {
    void loadUsers();
  }, [loadUsers]);

  useEffect(() => {
    void loadPreview(numericFromUserId, numericToUserId);
  }, [loadPreview, numericFromUserId, numericToUserId]);

  useEffect(() => {
    setSearchKeyword("");
  }, [activeTab, preview?.fromUserId, preview?.toUserId]);

  useEffect(() => {
    setSelection(createEmptySelectionState());
  }, [preview?.fromUserId, preview?.toUserId]);

  useEffect(() => {
    if (!isMobileViewport) {
      setDetailsExpanded(true);
      return;
    }
    setDetailsExpanded(false);
  }, [isMobileViewport, preview?.fromUserId, preview?.toUserId]);

  const selectableUsers = useMemo(
    () => users.filter((user) => String(user.userId) !== fromUserId && user.status !== 0),
    [fromUserId, users],
  );
  const filteredSelectableUsers = useMemo(() => {
    const normalizedKeyword = targetPickerKeyword.trim().toLowerCase();
    if (!normalizedKeyword) {
      return selectableUsers;
    }
    return selectableUsers.filter((user) => {
      const haystack = `${user.displayName || ""} ${user.username || ""}`.toLowerCase();
      return haystack.includes(normalizedKeyword);
    });
  }, [selectableUsers, targetPickerKeyword]);

  const filteredItems = useMemo(() => {
    if (!preview) {
      return [];
    }
    if (activeTab === "sales") {
      return filterTransferItems(preview.salesExpansions || [], searchKeyword);
    }
    if (activeTab === "channels") {
      return filterTransferItems(preview.channelExpansions || [], searchKeyword);
    }
    return filterTransferItems(preview.opportunities || [], searchKeyword);
  }, [activeTab, preview, searchKeyword]);

  const selectedIdsForActiveTab = useMemo(() => {
    if (activeTab === "sales") {
      return selection.salesExpansionIds;
    }
    if (activeTab === "channels") {
      return selection.channelExpansionIds;
    }
    return selection.opportunityIds;
  }, [activeTab, selection.channelExpansionIds, selection.opportunityIds, selection.salesExpansionIds]);

  const selectableFilteredItems = useMemo(() => {
    if (activeTab === "sales") {
      return filteredItems.filter((item) => !item.conflict);
    }
    return filteredItems;
  }, [activeTab, filteredItems]);

  const totalSelectedCount = selection.opportunityIds.length + selection.salesExpansionIds.length + selection.channelExpansionIds.length;
  const activeTabSelectedCount = selectedIdsForActiveTab.length;
  const selectedOpportunityCount = selection.opportunityIds.length;
  const selectedSalesCount = selection.salesExpansionIds.length;
  const selectedChannelCount = selection.channelExpansionIds.length;
  const selectableFilteredIds = selectableFilteredItems.map((item) => item.id);
  const areAllFilteredItemsSelected = selectableFilteredIds.length > 0
    && selectableFilteredIds.every((id) => selectedIdsForActiveTab.includes(id));
  const activePreviewCount = activeTab === "sales"
    ? countLabel(preview?.salesExpansionCount)
    : activeTab === "channels"
      ? countLabel(preview?.channelExpansionCount)
      : countLabel(preview?.opportunityCount);
  const primaryActionLabel = executing
    ? "执行中..."
    : totalSelectedCount > 0
      ? `转移已勾选 ${totalSelectedCount} 条`
      : "请选择转移数据";
  const bottomActionSummary = totalSelectedCount > 0
    ? `已勾选 ${totalSelectedCount} 条待转移数据`
    : "请先勾选需要转移的数据";

  const runTransfer = useCallback(async (payload: OwnerTransferPayload, successText: string) => {
    setExecuting(true);
    setPageError("");
    setSuccessMessage("");
    try {
      const result = await executeOwnerTransfer(payload);
      setSuccessMessage(
        `${successText} 本次共转移：商机 ${countLabel(result.transferredOpportunityCount)} 条、拓展销售人员 ${countLabel(result.transferredSalesExpansionCount)} 条、拓展渠道 ${countLabel(result.transferredChannelExpansionCount)} 条。`,
      );
      setSelection(createEmptySelectionState());
      await loadUsers();
      await loadPreview(payload.fromUserId, payload.toUserId);
    } catch (error) {
      setPageError(error instanceof Error ? error.message : "执行归属人转移失败");
    } finally {
      setExecuting(false);
    }
  }, [loadPreview, loadUsers]);

  const confirmTransfer = useCallback(async () => {
    if (!confirmState) {
      return;
    }

    await runTransfer(confirmState.payload, confirmState.successText);
    setConfirmState(null);
  }, [confirmState, runTransfer]);

  const handleExecute = async () => {
    if (!numericFromUserId || !numericToUserId) {
      setPageError("请先选择原归属人和新归属人");
      return;
    }
    if (numericFromUserId === numericToUserId) {
      setPageError("原归属人和新归属人不能相同");
      return;
    }
    if (totalSelectedCount <= 0) {
      setPageError("请先勾选需要转移的数据");
      return;
    }

    setConfirmState({
      title: "确认执行转移？",
      description: "",
      payload: {
        fromUserId: numericFromUserId,
        toUserId: numericToUserId,
        transferOpportunities: selection.opportunityIds.length > 0,
        transferSalesExpansions: selection.salesExpansionIds.length > 0,
        transferChannelExpansions: selection.channelExpansionIds.length > 0,
        selection: {
          opportunityIds: selection.opportunityIds,
          salesExpansionIds: selection.salesExpansionIds,
          channelExpansionIds: selection.channelExpansionIds,
        },
      },
      successText: "已勾选数据转移完成。",
      confirmText: "确认转移",
      sourceLabel: getDisplayUserName(fromUser),
      targetLabel: getDisplayUserName(toUser),
      badges: [
        selectedOpportunityCount > 0 ? `商机 ${selectedOpportunityCount} 条` : "",
        selectedSalesCount > 0 ? `拓展销售 ${selectedSalesCount} 条` : "",
        selectedChannelCount > 0 ? `拓展渠道 ${selectedChannelCount} 条` : "",
      ].filter(Boolean),
    });
  };

  const handleSingleTransfer = async (kind: TransferKind, item: OwnerTransferItem) => {
    if (!numericFromUserId || !numericToUserId) {
      setPageError("请先选择原归属人和新归属人");
      return;
    }
    if (kind === "sales" && item.conflict) {
      setPageError("目标归属人下已存在相同工号的拓展销售人员，请先处理冲突后再试");
      return;
    }

    const itemTypeLabel = kind === "sales" ? "拓展销售人员" : kind === "channel" ? "拓展渠道" : "商机";
    setConfirmState({
      title: "确认转移当前数据？",
      description: "",
      payload: {
        fromUserId: numericFromUserId,
        toUserId: numericToUserId,
        transferOpportunities: kind === "opportunity",
        transferSalesExpansions: kind === "sales",
        transferChannelExpansions: kind === "channel",
        selection: {
          opportunityIds: kind === "opportunity" ? [item.id] : [],
          salesExpansionIds: kind === "sales" ? [item.id] : [],
          channelExpansionIds: kind === "channel" ? [item.id] : [],
        },
      },
      successText: "单条归属人转移已完成。",
      confirmText: "确认单条转移",
      sourceLabel: getDisplayUserName(fromUser),
      targetLabel: getDisplayUserName(toUser),
      subjectLabel: `${itemTypeLabel} · ${item.name || "未命名对象"}`,
      badges: [itemTypeLabel],
    });
  };

  const toggleItemSelection = (kind: TransferKind, itemId: number) => {
    const selectionKey = getSelectionKey(kind);
    setSelection((current) => {
      const currentIds = current[selectionKey];
      const nextIds = currentIds.includes(itemId)
        ? currentIds.filter((id) => id !== itemId)
        : [...currentIds, itemId];
      return {
        ...current,
        [selectionKey]: nextIds,
      };
    });
  };

  const handleToggleSelectAllFiltered = () => {
    const kind = getTransferTabKind(activeTab);
    const selectionKey = getSelectionKey(kind);
    setSelection((current) => {
      const currentIds = current[selectionKey];
      const nextIds = areAllFilteredItemsSelected
        ? currentIds.filter((id) => !selectableFilteredIds.includes(id))
        : Array.from(new Set([...currentIds, ...selectableFilteredIds]));
      return {
        ...current,
        [selectionKey]: nextIds,
      };
    });
  };

  const handleClearActiveSelection = () => {
    const kind = getTransferTabKind(activeTab);
    const selectionKey = getSelectionKey(kind);
    setSelection((current) => ({
      ...current,
      [selectionKey]: [],
    }));
  };

  const embeddedFooter = useMemo(() => {
    if (!embedded) {
      return null;
    }
    return (
      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="min-w-0 sm:flex-1">
          <p className="truncate text-sm font-semibold text-slate-900 dark:text-white">
            {toUser ? `转移给 ${toUser.displayName || toUser.username}` : "请选择新归属人"}
          </p>
          <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
            {bottomActionSummary}
          </p>
        </div>
        <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
          <button
            type="button"
            onClick={() => onClose?.()}
            className="crm-btn crm-btn-secondary"
          >
            取消
          </button>
          <button
            type="button"
            onClick={() => void handleExecute()}
            disabled={!tenantSelected || executing || previewLoading || totalSelectedCount <= 0}
            className="crm-btn crm-btn-primary disabled:cursor-not-allowed disabled:opacity-60"
          >
            {primaryActionLabel}
          </button>
        </div>
      </div>
    );
  }, [
    bottomActionSummary,
    embedded,
    executing,
    handleExecute,
    onClose,
    previewLoading,
    primaryActionLabel,
    tenantSelected,
    toUser,
    totalSelectedCount,
  ]);

  useEffect(() => {
    if (!embedded || !onFooterChange) {
      return;
    }
    onFooterChange(embeddedFooter);
    return () => onFooterChange(null);
  }, [embedded, embeddedFooter, onFooterChange]);

  return (
    <div className={embedded ? "crm-section-stack" : "crm-page-stack"}>
      {!embedded ? (
        <header className="crm-page-header">
          <div className="crm-page-heading">
            <button
              type="button"
              onClick={() => navigate("/profile")}
              className="mb-3 inline-flex items-center gap-2 text-sm font-medium text-slate-500 transition-colors hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200"
            >
              <ArrowLeft className="h-4 w-4" />
              返回我的
            </button>
            <h1 className="crm-page-title">项目归属转移</h1>
          </div>
        </header>
      ) : null}

      {!tenantSelected ? (
        <div className="crm-alert crm-alert-info">
          请先切换到具体租户后再操作归属人转移。
        </div>
      ) : null}

      {pageError ? (
        <div className="crm-alert crm-alert-error">{pageError}</div>
      ) : null}

      {successMessage ? (
        <div className="crm-alert crm-alert-success">{successMessage}</div>
      ) : null}

      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        className="crm-card crm-card-pad-lg rounded-2xl"
      >
        <div className="crm-section-stack">
          <div className="flex items-start justify-between gap-3">
            <div>
              <h2 className="text-base font-semibold text-slate-900 dark:text-white">转移设置</h2>

            </div>
            <div className={cn(
              "flex items-center justify-center rounded-2xl bg-violet-50 text-violet-600 dark:bg-violet-500/10 dark:text-violet-300",
              isMobileViewport ? "h-10 w-10" : "h-11 w-11",
            )}>
              <ArrowRightLeft className="h-5 w-5" />
            </div>
          </div>

          <div className="crm-form-grid">
            <label className="space-y-2">
              <span className="text-sm font-medium text-slate-700 dark:text-slate-300">新归属人</span>
              <button
                type="button"
                onClick={() => setTargetPickerOpen(true)}
                disabled={!tenantSelected || loadingUsers}
                className="crm-btn-sm crm-input-text flex w-full items-center justify-between border border-slate-200 bg-white text-left outline-none transition-colors hover:border-slate-300 focus:border-violet-500 focus:ring-1 focus:ring-violet-500 disabled:cursor-not-allowed disabled:opacity-60 dark:border-slate-800 dark:bg-slate-900/50 dark:hover:border-slate-700"
              >
                <span className={toUser ? "break-anywhere text-slate-900 dark:text-white" : "crm-field-note"}>
                  {toUser ? getDisplayUserName(toUser) : "请选择新的归属人"}
                </span>
                <span className="text-slate-400">⌄</span>
              </button>
            </label>
          </div>

          {selectedPreviewHasSalesConflict ? (
            <div className="rounded-2xl border border-amber-200 bg-amber-50/80 px-4 py-3 text-sm text-amber-900 dark:border-amber-500/20 dark:bg-amber-500/10 dark:text-amber-100">
              存在拓展销售人员工号冲突，请先处理冲突，或仅勾选下方可转移的数据后再执行。
            </div>
          ) : null}

        </div>
      </motion.div>

      <motion.div
        initial={{ opacity: 0, y: 10 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ delay: 0.05 }}
        className="crm-card crm-card-pad-lg rounded-2xl"
      >
        <div className="crm-section-stack">
          <div className="flex items-start justify-between gap-3">
            <div className="min-w-0 flex-1">
              <div className="flex items-center justify-between gap-3">
                <h2 className="text-base font-semibold text-slate-900 dark:text-white">转移预检</h2>
                <div className="flex shrink-0 items-center gap-3 text-sm">
                  {preview ? (
                    <>
                      <button
                        type="button"
                        onClick={handleToggleSelectAllFiltered}
                        disabled={selectableFilteredIds.length === 0}
                        className="inline-flex h-8 items-center justify-center rounded-full border border-slate-200 bg-white px-3 text-sm font-medium text-slate-600 transition-colors hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900/50 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800 dark:hover:text-white"
                      >
                        {areAllFilteredItemsSelected ? "取消全选" : "全选"}
                      </button>
                      <button
                        type="button"
                        onClick={handleClearActiveSelection}
                        disabled={activeTabSelectedCount === 0}
                        className="inline-flex h-8 items-center justify-center rounded-full border border-slate-200 bg-white px-3 text-sm font-medium text-slate-600 transition-colors hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900/50 dark:text-slate-300 dark:hover:border-slate-600 dark:hover:bg-slate-800 dark:hover:text-white"
                      >
                        清空
                      </button>
                    </>
                  ) : null}
                  {previewLoading ? <p className="text-sm text-slate-400 dark:text-slate-500">加载中...</p> : null}
                </div>
              </div>
              <p className="mt-1 text-sm text-slate-500 dark:text-slate-400">从 {preview?.fromUserName || getDisplayUserName(fromUser)} 转移到 {preview?.toUserName || getDisplayUserName(toUser)} 的预检结果。</p>
            </div>
          </div>

          {!preview && !previewLoading ? (
            <div className="crm-empty-panel">选择原归属人和新归属人后，系统会显示当前可转移数量及冲突检查结果。</div>
          ) : null}

          {preview ? (
            <>
              {isMobileViewport ? (
                <div className="grid grid-cols-3 gap-2">
                  {TAB_META.map((tab) => {
                    const count = tab.key === "sales"
                      ? countLabel(preview.salesExpansionCount)
                      : tab.key === "channels"
                        ? countLabel(preview.channelExpansionCount)
                        : countLabel(preview.opportunityCount);
                    return (
                      <button
                        key={tab.key}
                        type="button"
                        onClick={() => setActiveTab(tab.key)}
                        className={cn(
                          "rounded-xl border px-3 py-2.5 text-left shadow-sm transition-all",
                          activeTab === tab.key
                            ? "border-violet-400 bg-violet-50 shadow-[0_8px_20px_rgba(124,58,237,0.12)] ring-1 ring-violet-200 dark:border-violet-400/50 dark:bg-violet-500/15 dark:ring-violet-500/20"
                            : "border-slate-200 bg-slate-50/40 opacity-75 dark:border-slate-800 dark:bg-slate-800/20 dark:opacity-80",
                        )}
                      >
                        <p
                          className={cn(
                          "text-[11px] font-medium",
                            activeTab === tab.key
                              ? "text-violet-600 dark:text-violet-300"
                              : "text-slate-400 dark:text-slate-500",
                          )}
                        >
                          {tab.key === "opportunities" ? "商机" : tab.key === "sales" ? "销售" : "渠道"}
                        </p>
                        <p
                          className={cn(
                            "mt-1 text-xl font-bold leading-none",
                            activeTab === tab.key
                              ? "text-violet-700 dark:text-violet-100"
                              : "text-slate-500 dark:text-slate-300",
                          )}
                        >
                          {count}
                        </p>
                      </button>
                    );
                  })}
                </div>
              ) : (
                <div className="grid gap-3 sm:grid-cols-3">
                  {TAB_META.map((tab) => {
                    const count = tab.key === "sales"
                      ? countLabel(preview.salesExpansionCount)
                      : tab.key === "channels"
                        ? countLabel(preview.channelExpansionCount)
                        : countLabel(preview.opportunityCount);
                    return (
                      <button
                        key={tab.key}
                        type="button"
                        onClick={() => setActiveTab(tab.key)}
                        className={cn(
                          "rounded-2xl border p-4 text-left shadow-sm transition-all",
                          activeTab === tab.key
                            ? "border-violet-400 bg-violet-50 shadow-[0_10px_24px_rgba(124,58,237,0.12)] ring-1 ring-violet-200 dark:border-violet-400/50 dark:bg-violet-500/15 dark:ring-violet-500/20"
                            : "border-slate-200 bg-slate-50/50 dark:border-slate-800 dark:bg-slate-800/20",
                        )}
                      >
                        <p
                          className={cn(
                            "text-xs font-medium uppercase tracking-[0.16em]",
                            activeTab === tab.key
                              ? "text-violet-500 dark:text-violet-300"
                              : "text-slate-400 dark:text-slate-500",
                          )}
                        >
                          {tab.key === "opportunities" ? "商机数量" : tab.key === "sales" ? "拓展销售" : "拓展渠道"}
                        </p>
                        <p
                          className={cn(
                            "mt-2 text-2xl font-bold",
                            activeTab === tab.key
                              ? "text-violet-700 dark:text-violet-100"
                              : "text-slate-900 dark:text-white",
                          )}
                        >
                          {count}
                        </p>
                      </button>
                    );
                  })}
                </div>
              )}

              {!isMobileViewport || detailsExpanded || isMobileViewport ? (
                <>
              <div className={cn("gap-2", isMobileViewport ? "space-y-2" : "grid grid-cols-[minmax(0,1fr)_auto] items-center")}>
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                  <input
                    type="text"
                    value={searchKeyword}
                    onChange={(event) => setSearchKeyword(event.target.value)}
                    placeholder="搜索名称或工号"
                    className={cn(
                      "crm-input-text w-full border border-slate-200 bg-white pl-10 outline-none focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-800 dark:bg-slate-900/50",
                      isMobileViewport ? "crm-input-box" : "h-10 rounded-xl px-3 text-sm",
                    )}
                  />
                </div>

                {!isMobileViewport ? <div /> : null}
              </div>

              {activeTab === "sales" && preview.salesConflicts.length > 0 ? (
                <div className="rounded-2xl border border-amber-200 bg-amber-50/80 p-4 dark:border-amber-500/20 dark:bg-amber-500/10">
                  <div className="flex items-start gap-3">
                    <ShieldAlert className="mt-0.5 h-5 w-5 shrink-0 text-amber-600 dark:text-amber-300" />
                    <div className="min-w-0">
                      <p className="text-sm font-semibold text-amber-900 dark:text-amber-100">拓展销售人员工号冲突</p>
                      <p className="mt-1 text-sm text-amber-800 dark:text-amber-200">目标归属人名下已存在相同工号时，系统会阻止执行“拓展销售人员”转移。</p>
                      <div className="mt-3 space-y-2">
                        {preview.salesConflicts.map((conflict) => (
                          <div key={`${conflict.employeeNo}-${conflict.candidateName}`} className="rounded-xl bg-white/80 px-3 py-2 text-sm text-amber-900 dark:bg-slate-900/40 dark:text-amber-100">
                            工号 {conflict.employeeNo || "-"} · 人员姓名 {conflict.candidateName || "-"}
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                </div>
              ) : null}

              <div className="px-1 text-xs leading-5 text-slate-500 dark:text-slate-400">
                当前页签已选 {activeTabSelectedCount} 条，全部已选 {totalSelectedCount} 条。
              </div>

              <div className="space-y-3">
                {filteredItems.length > 0 ? filteredItems.map((item) => (
                  <div
                    key={`${activeTab}-${item.id}`}
                    className={cn(
                      "rounded-xl border px-3 py-3 transition-colors sm:px-4 sm:py-3",
                      selectedIdsForActiveTab.includes(item.id) && !item.conflict
                        ? "ring-2 ring-violet-400/40"
                        : "",
                      item.conflict
                        ? "border-amber-200 bg-amber-50/70 dark:border-amber-500/20 dark:bg-amber-500/10"
                        : "border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900/50",
                    )}
                  >
                    <div className="flex items-center justify-between gap-3">
                      <div className="min-w-0 flex-1">
                        <div className="flex items-center gap-2">
                          <input
                            type="checkbox"
                            checked={selectedIdsForActiveTab.includes(item.id)}
                            disabled={item.conflict}
                            onChange={() => toggleItemSelection(getTransferTabKind(activeTab), item.id)}
                            className="h-4 w-4 accent-violet-600 disabled:cursor-not-allowed"
                          />
                          <p className="min-w-0 break-anywhere text-sm font-semibold text-slate-900 dark:text-white">{item.name || "未命名对象"}</p>
                          {activeTab === "sales" ? (
                            <span className="shrink-0 text-xs text-slate-500 dark:text-slate-400">工号 {item.code || "-"}</span>
                          ) : null}
                          {item.conflict ? (
                            <span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-amber-100 px-2 py-0.5 text-[11px] font-medium text-amber-800 dark:bg-amber-500/15 dark:text-amber-200">
                              <AlertTriangle className="h-3.5 w-3.5" />
                              有冲突
                            </span>
                          ) : (
                            <span className="inline-flex shrink-0 items-center gap-1 rounded-full bg-emerald-100 px-2 py-0.5 text-[11px] font-medium text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-300">
                              <CheckCircle2 className="h-3.5 w-3.5" />
                              可转移
                            </span>
                          )}
                        </div>
                      </div>
                      <button
                        type="button"
                        onClick={() => void handleSingleTransfer(
                          activeTab === "sales" ? "sales" : activeTab === "channels" ? "channel" : "opportunity",
                          item,
                        )}
                        disabled={executing || item.conflict}
                        title="单条转移"
                        aria-label="单条转移"
                        className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-full border border-slate-200 bg-white text-slate-700 transition-colors hover:border-violet-300 hover:text-violet-700 disabled:cursor-not-allowed disabled:opacity-60 dark:border-slate-700 dark:bg-slate-900/50 dark:text-slate-300 dark:hover:border-violet-500/40 dark:hover:text-violet-300"
                      >
                        <ArrowRightLeft className="h-4 w-4" />
                      </button>
                    </div>
                  </div>
                )) : (
                  <div className="crm-empty-panel">暂无数据</div>
                )}
              </div>

                </>
              ) : null}
            </>
          ) : null}
        </div>
      </motion.div>

      {targetPickerOpen ? (
        <>
          <div
            className="fixed inset-0 z-[140] bg-slate-900/35 backdrop-blur-sm dark:bg-slate-950/70"
            onClick={() => setTargetPickerOpen(false)}
          />
          <div className="fixed inset-0 z-[150] flex items-center justify-center p-4">
            <div className="w-full max-w-xl rounded-3xl border border-slate-200 bg-white shadow-2xl dark:border-slate-800 dark:bg-slate-900">
              <div className="flex items-center justify-between border-b border-slate-100 px-5 py-4 dark:border-slate-800">
                <div>
                  <p className="text-base font-semibold text-slate-900 dark:text-white">选择新归属人</p>
                  <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">搜索并选择接收归属数据的账号</p>
                </div>
                <button
                  type="button"
                  onClick={() => setTargetPickerOpen(false)}
                  className="rounded-full p-2 text-slate-400 transition-colors hover:bg-slate-100 dark:hover:bg-slate-800"
                >
                  <X className="h-5 w-5" />
                </button>
              </div>
              <div className="space-y-3 px-5 py-4">
                <div className="relative">
                  <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
                  <input
                    type="text"
                    value={targetPickerKeyword}
                    onChange={(event) => setTargetPickerKeyword(event.target.value)}
                    placeholder="搜索姓名或账号"
                    className="w-full rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 pl-10 pr-24 text-sm text-slate-700 outline-none transition-colors focus:border-violet-500 focus:ring-1 focus:ring-violet-500 dark:border-slate-700 dark:bg-slate-800/70 dark:text-slate-100"
                  />
                  {targetPickerKeyword ? (
                    <button
                      type="button"
                      onClick={() => setTargetPickerKeyword("")}
                      className="absolute right-3 top-1/2 -translate-y-1/2 rounded-full px-2 py-1 text-xs font-medium text-slate-500 transition-colors hover:bg-slate-100 hover:text-slate-800 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-slate-200"
                    >
                      清空搜索
                    </button>
                  ) : null}
                </div>
                <div className="max-h-[min(60vh,28rem)] space-y-2 overflow-y-auto pr-1">
                  {filteredSelectableUsers.length > 0 ? filteredSelectableUsers.map((user) => {
                    const selected = String(user.userId) === toUserId;
                    return (
                      <button
                        key={user.userId}
                        type="button"
                        onClick={() => {
                          setToUserId(String(user.userId));
                          setTargetPickerOpen(false);
                        }}
                        className={cn(
                          "flex w-full items-center justify-between rounded-2xl px-4 py-3 text-left text-sm transition-colors",
                          selected
                            ? "bg-violet-600 text-white shadow-sm"
                            : "border border-transparent text-slate-700 hover:bg-slate-50 dark:text-slate-200 dark:hover:bg-slate-800",
                        )}
                      >
                        <span className="break-anywhere">{getDisplayUserName(user)}</span>
                        {selected ? <CheckCircle2 className="h-4 w-4 shrink-0" /> : null}
                      </button>
                    );
                  }) : (
                    <div className="rounded-2xl border border-dashed border-slate-200 px-4 py-8 text-center text-sm text-slate-500 dark:border-slate-700 dark:text-slate-400">
                      未找到匹配的归属人
                    </div>
                  )}
                </div>
              </div>
            </div>
          </div>
        </>
      ) : null}

      <AnimatePresence>
        {confirmState ? (
          <ActionDialog
            title={confirmState.title}
            description={confirmState.description}
            tone="violet"
            icon={<ArrowRightLeft className="h-6 w-6" />}
            confirmText={confirmState.confirmText}
            loading={executing}
            onClose={() => setConfirmState(null)}
            onConfirm={confirmTransfer}
          >
            <div className="space-y-3">
              {confirmState.subjectLabel ? (
                <div className="rounded-2xl border border-slate-200/80 bg-white/90 px-4 py-3 dark:border-slate-800 dark:bg-slate-950/60">
                  <p className="text-xs font-medium uppercase tracking-[0.18em] text-slate-400 dark:text-slate-500">
                    转移对象
                  </p>
                  <p className="mt-1 break-anywhere text-sm font-semibold text-slate-900 dark:text-white">
                    {confirmState.subjectLabel}
                  </p>
                </div>
              ) : null}

              <div className="grid gap-2 sm:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] sm:items-center">
                <div className="rounded-2xl border border-slate-200/80 bg-white/90 px-4 py-3 dark:border-slate-800 dark:bg-slate-950/60">
                  <p className="text-xs text-slate-400 dark:text-slate-500">原归属人</p>
                  <p className="mt-1 break-anywhere text-sm font-semibold text-slate-900 dark:text-white">
                    {confirmState.sourceLabel}
                  </p>
                </div>

                <div className="flex justify-center py-1 text-violet-500 dark:text-violet-300">
                  <ArrowRightLeft className="h-4 w-4" />
                </div>

                <div className="rounded-2xl border border-violet-200/80 bg-violet-50/80 px-4 py-3 dark:border-violet-500/20 dark:bg-violet-500/10">
                  <p className="text-xs text-violet-600 dark:text-violet-300">新归属人</p>
                  <p className="mt-1 break-anywhere text-sm font-semibold text-slate-900 dark:text-white">
                    {confirmState.targetLabel}
                  </p>
                </div>
              </div>

              {confirmState.badges.length > 0 ? (
                <div className="flex flex-wrap gap-2">
                  {confirmState.badges.map((badge) => (
                    <span
                      key={badge}
                      className="inline-flex items-center rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-600 dark:bg-slate-800 dark:text-slate-300"
                    >
                      {badge}
                    </span>
                  ))}
                </div>
              ) : null}

              <div className="text-xs leading-5 text-slate-500 dark:text-slate-400">
                确认后将立即生效，请确保选择无误。
              </div>
            </div>
          </ActionDialog>
        ) : null}
      </AnimatePresence>

      {!embedded && !isMobileViewport ? (
        <div className="w-full shrink-0 border-t border-slate-200/80 bg-slate-50/95 backdrop-blur dark:border-slate-800/80 dark:bg-slate-900/90">
          <div className="px-4 py-4 sm:px-0">
            <div className="flex items-center gap-3 rounded-2xl border border-slate-200 bg-white px-4 py-4 dark:border-slate-800 dark:bg-slate-900/60">
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-semibold text-slate-900 dark:text-white">
                  {toUser ? `转移给 ${toUser.displayName || toUser.username}` : "请选择新归属人"}
                </p>
                <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                  {bottomActionSummary}
                </p>
              </div>
              <button
                type="button"
                onClick={() => void handleExecute()}
                disabled={!tenantSelected || executing || previewLoading || totalSelectedCount <= 0}
                className="crm-btn crm-btn-primary shrink-0 px-5 disabled:cursor-not-allowed disabled:opacity-60"
              >
                {primaryActionLabel}
              </button>
            </div>
          </div>
        </div>
      ) : null}

      {!embedded && isMobileViewport ? <div className="h-28" aria-hidden="true" /> : null}

      {!embedded && isMobileViewport ? (
        <div className="fixed inset-x-0 bottom-0 z-40 border-t border-slate-200 bg-white/95 px-4 pb-[calc(0.9rem+env(safe-area-inset-bottom))] pt-3 shadow-[0_-10px_30px_rgba(15,23,42,0.08)] backdrop-blur dark:border-slate-800 dark:bg-slate-950/92">
          <div className="mx-auto flex max-w-screen-sm items-center gap-3">
            <div className="min-w-0 flex-1">
              <p className="truncate text-sm font-semibold text-slate-900 dark:text-white">
                {toUser ? `转移给 ${toUser.displayName || toUser.username}` : "请选择新归属人"}
              </p>
              <p className="mt-1 text-xs text-slate-500 dark:text-slate-400">
                {bottomActionSummary}
              </p>
            </div>
            <button
              type="button"
              onClick={() => void handleExecute()}
              disabled={!tenantSelected || executing || previewLoading || totalSelectedCount <= 0}
              className="crm-btn crm-btn-primary shrink-0 px-5 disabled:cursor-not-allowed disabled:opacity-60"
            >
              {primaryActionLabel}
            </button>
          </div>
        </div>
      ) : null}
    </div>
  );
}