import { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import {
  batchDisableUsers,
  batchEnableUsers,
  batchSetEmployeesManager,
  batchTransferEmployeesDepartment,
  fetchEmployees,
  fetchEmployeeOrganization,
  fetchWecomHrMasterSyncRuns,
  regularizeEmployee,
  retryEmployeeWecomDirectorySync,
  runWecomHrMasterSync,
  startEmployeeOffboarding,
  startEmployeeOnboarding,
  type EmployeeEmploymentStatus,
  type EmployeeSummary,
  type WecomHrMasterSyncRun,
  type WecomDirectoryState,
  type OrganizationTreeNode,
} from "../api/employees";
import { exportEmployees } from "../api/exports";
import { fetchDepartments } from "../api/departments";
import { isApiError } from "../api/types";
import { mapApiErrorMessage } from "../api/errorMessages";
import { useAuth } from "../auth/AuthContext";
import { hasPermission } from "../auth/permissions";
import { EmployeeAvatar } from "../components/common/EmployeeAvatar";
import { ConfirmDialog } from "../components/common/ConfirmDialog";
import { DateTextInput } from "../components/common/DateTextInput";
import { PageHeader } from "../components/common/PageHeader";
import { Button } from "../components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../components/ui/dialog";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../components/ui/dropdown-menu";
import { Input } from "../components/ui/input";
import { StatusBadge } from "../components/common/StatusBadge";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
import { downloadBlob } from "../lib/download";
import { toast } from "sonner";

const EMPLOYMENT_STATUS_OPTIONS: Array<{ value: EmployeeEmploymentStatus; label: string }> = [
  { value: "onboarding", label: "待入职" },
  { value: "probation", label: "试用期" },
  { value: "active", label: "在职" },
  { value: "offboarding", label: "离职办理中" },
  { value: "inactive", label: "已离职" },
];

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

function employmentStatusLabel(status: EmployeeEmploymentStatus | null) {
  return EMPLOYMENT_STATUS_OPTIONS.find((item) => item.value === status)?.label ?? "-";
}

function wecomDirectoryStatusView(state?: WecomDirectoryState) {
  const errorCode = state?.latestSync?.errorCode ?? "";
  if (!state) {
    return { label: "未同步", status: "not_triggered", hint: "无记录" };
  }
  if (state.status === "synced" || state.status === "sync_success") {
    return { label: "同步成功", status: "succeeded", hint: state.externalUserId ?? "已绑定" };
  }
  if (state.status === "bound") {
    return { label: "已绑定", status: "bound", hint: state.externalUserId ?? "已绑定" };
  }
  if (state.status === "sync_failed") {
    return { label: "同步失败", status: "failed", hint: state.latestSync?.errorCode ?? "待重试" };
  }
  if (state.status === "sync_skipped") {
    return {
      label: errorCode === "wecom_contact_config_missing" || errorCode === "wecom_contact_sync_disabled" ? "配置缺失" : "已跳过",
      status: "skipped",
      hint: state.latestSync?.errorCode ?? "未执行",
    };
  }
  return { label: "未绑定", status: "not_triggered", hint: "待创建" };
}

function shouldShowWecomRetry(state?: WecomDirectoryState) {
  return !state || ["unbound", "sync_failed", "sync_skipped"].includes(state.status);
}

function wecomHrMasterRunStatusLabel(status: WecomHrMasterSyncRun["status"]) {
  const map: Record<WecomHrMasterSyncRun["status"], string> = {
    running: "执行中",
    success: "已完成",
    partial: "部分完成",
    failed: "失败",
    skipped: "已跳过",
  };
  return map[status] ?? status;
}

function wecomHrMasterModeLabel(mode: WecomHrMasterSyncRun["mode"]) {
  return mode === "apply" ? "写入" : "预检";
}

function formatSyncSummary(run?: WecomHrMasterSyncRun | null) {
  const summary = run?.summary;
  if (!summary) return "暂无统计";
  return [
    `总数 ${summary.total ?? 0}`,
    `新建 ${summary.created ?? 0}`,
    `更新 ${summary.updated ?? 0}`,
    `跳过 ${summary.skipped ?? 0}`,
    `冲突 ${summary.conflicts ?? 0}`,
    `失败 ${summary.failed ?? 0}`,
  ].join(" / ");
}

function collectOrganizationEmployees(nodes: OrganizationTreeNode[], target: Map<string, { id: string; name: string; employeeNo: string; departmentName: string }>) {
  for (const node of nodes) {
    if (!target.has(node.id)) {
      target.set(node.id, {
        id: node.id,
        name: node.name,
        employeeNo: node.employeeNo,
        departmentName: node.department?.name ?? "未分配部门",
      });
    }
    collectOrganizationEmployees(node.children, target);
  }
}

export function PeoplePage() {
  const { permissions } = useAuth();
  const queryClient = useQueryClient();
  const canManageUsers = hasPermission(permissions, "system.users");
  const canViewStats = canManageUsers || hasPermission(permissions, "report.dashboard.view");

  const [q, setQ] = useState("");
  const [status, setStatus] = useState<"" | "active" | "archived">("");
  const [departmentId, setDepartmentId] = useState("");
  const [title, setTitle] = useState("");
  const [managerId, setManagerId] = useState("");
  const [hireDateFrom, setHireDateFrom] = useState("");
  const [hireDateTo, setHireDateTo] = useState("");
  const [employmentStatus, setEmploymentStatus] = useState<"" | EmployeeEmploymentStatus>("");
  const [exportError, setExportError] = useState("");
  const [selectedEmployeeIds, setSelectedEmployeeIds] = useState<string[]>([]);
  const [transferDialogOpen, setTransferDialogOpen] = useState(false);
  const [managerDialogOpen, setManagerDialogOpen] = useState(false);
  const [enableConfirmOpen, setEnableConfirmOpen] = useState(false);
  const [disableConfirmOpen, setDisableConfirmOpen] = useState(false);
  const [wecomHrApplyConfirmOpen, setWecomHrApplyConfirmOpen] = useState(false);
  const [offboardingTarget, setOffboardingTarget] = useState<EmployeeSummary | null>(null);
  const [targetDepartmentId, setTargetDepartmentId] = useState("");
  const [targetManagerId, setTargetManagerId] = useState("");

  const departmentsQuery = useQuery({
    queryKey: ["departments", "people-page", "active"],
    queryFn: () => fetchDepartments({ includeArchived: false }),
  });

  const organizationQuery = useQuery({
    queryKey: ["employee-organization", "people-page"],
    queryFn: fetchEmployeeOrganization,
  });

  const employeesQuery = useQuery({
    queryKey: ["employees", "people-page", q, status, departmentId, title, managerId, hireDateFrom, hireDateTo, employmentStatus],
    queryFn: () =>
      fetchEmployees({
        page: 1,
        pageSize: 100,
        q: q || undefined,
        status: status || undefined,
        departmentId: departmentId || undefined,
        title: title || undefined,
        managerId: managerId || undefined,
        hireDateFrom: hireDateFrom || undefined,
        hireDateTo: hireDateTo || undefined,
        employmentStatus: employmentStatus || undefined,
      }),
  });

  const wecomHrMasterRunsQuery = useQuery({
    queryKey: ["wecom-hr-master-sync", "runs"],
    queryFn: () => fetchWecomHrMasterSyncRuns(5),
    enabled: canManageUsers,
    retry: false,
  });

  useEffect(() => {
    setSelectedEmployeeIds([]);
  }, [q, status, departmentId, title, managerId, hireDateFrom, hireDateTo, employmentStatus]);

  async function invalidatePeopleQueries() {
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ["employees"] }),
      queryClient.invalidateQueries({ queryKey: ["employee-organization"] }),
      queryClient.invalidateQueries({ queryKey: ["employee-stats"] }),
    ]);
  }

  const onboardingMutation = useMutation({
    mutationFn: (employeeId: string) => startEmployeeOnboarding(employeeId),
    onSuccess: async () => {
      await invalidatePeopleQueries();
      toast.success("已发起入职流程");
    },
    onError: (error) => {
      toast.error(mapApiMessage(error, "发起入职失败"));
    },
  });

  const regularizeMutation = useMutation({
    mutationFn: (employeeId: string) => regularizeEmployee(employeeId),
    onSuccess: async () => {
      await invalidatePeopleQueries();
      toast.success("已完成转正");
    },
    onError: (error) => {
      toast.error(mapApiMessage(error, "转正失败"));
    },
  });

  const offboardingMutation = useMutation({
    mutationFn: (employeeId: string) => startEmployeeOffboarding(employeeId),
    onSuccess: async () => {
      await invalidatePeopleQueries();
      setOffboardingTarget(null);
      toast.success("已发起离职流程");
    },
    onError: (error) => {
      toast.error(mapApiMessage(error, "发起离职失败"));
    },
  });

  const wecomDirectoryRetryMutation = useMutation({
    mutationFn: (employeeId: string) => retryEmployeeWecomDirectorySync(employeeId),
    onSuccess: async (result) => {
      await invalidatePeopleQueries();
      const code = result.result?.code;
      if (result.result?.skipped) {
        toast.warning(code ? `企微同步已跳过：${code}` : "企微同步已跳过");
        return;
      }
      if (result.result?.status === "failed") {
        toast.error(code ? `企微同步失败：${code}` : "企微同步失败");
        return;
      }
      toast.success("企微同步已提交");
    },
    onError: (error) => {
      toast.error(mapApiMessage(error, "企微同步重试失败"));
    },
  });

  const wecomHrDryRunMutation = useMutation({
    mutationFn: () => runWecomHrMasterSync({ mode: "dry_run", limit: 50 }),
    onSuccess: async (run) => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["wecom-hr-master-sync"] }),
        invalidatePeopleQueries(),
      ]);
      toast.success(`企微 HR 主数据预检完成：${formatSyncSummary(run)}`);
    },
    onError: (error) => {
      toast.error(mapApiMessage(error, "企微 HR 主数据预检失败"));
    },
  });

  const wecomHrApplyMutation = useMutation({
    mutationFn: () => runWecomHrMasterSync({ mode: "apply", limit: 50 }),
    onSuccess: async (run) => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["wecom-hr-master-sync"] }),
        invalidatePeopleQueries(),
      ]);
      setWecomHrApplyConfirmOpen(false);
      toast.success(`企微 HR 主数据写入完成：${formatSyncSummary(run)}`);
    },
    onError: (error) => {
      toast.error(mapApiMessage(error, "企微 HR 主数据写入失败"));
    },
  });

  const exportMutation = useMutation({
    mutationFn: (format: "csv" | "xlsx") =>
      exportEmployees({
        format,
        q: q || undefined,
        status: status || undefined,
        departmentId: departmentId || undefined,
        title: title || undefined,
        managerId: managerId || undefined,
        hireDateFrom: hireDateFrom || undefined,
        hireDateTo: hireDateTo || undefined,
        employmentStatus: employmentStatus || undefined,
      }),
    onSuccess: (response, format) => {
      downloadBlob(response.blob, response.filename ?? `employees.${format}`);
      setExportError("");
      toast.success("导出完成");
    },
    onError: (error) => {
      const message = mapApiMessage(error, "导出失败");
      setExportError(message);
      toast.error(message);
    },
  });

  const transferDepartmentMutation = useMutation({
    mutationFn: () =>
      batchTransferEmployeesDepartment({
        employeeIds: selectedEmployeeIds,
        departmentId: targetDepartmentId,
      }),
    onSuccess: async (result) => {
      await invalidatePeopleQueries();
      setSelectedEmployeeIds([]);
      setTransferDialogOpen(false);
      setTargetDepartmentId("");
      toast.success(`已批量调部门 ${result.summary.updated} 人`);
    },
    onError: (error) => {
      toast.error(mapApiMessage(error, "批量调部门失败"));
    },
  });

  const setManagerMutation = useMutation({
    mutationFn: () =>
      batchSetEmployeesManager({
        employeeIds: selectedEmployeeIds,
        managerId: targetManagerId,
      }),
    onSuccess: async (result) => {
      await invalidatePeopleQueries();
      setSelectedEmployeeIds([]);
      setManagerDialogOpen(false);
      setTargetManagerId("");
      toast.success(`已批量设置上级 ${result.summary.updated} 人`);
    },
    onError: (error) => {
      toast.error(mapApiMessage(error, "批量设置上级失败"));
    },
  });

  const batchEnableMutation = useMutation({
    mutationFn: () => batchEnableUsers({ employeeIds: selectedEmployeeIds }),
    onSuccess: async (result) => {
      await invalidatePeopleQueries();
      setSelectedEmployeeIds([]);
      toast.success(`已批量启用 ${result.summary.updated} 人`);
    },
    onError: (error) => {
      toast.error(mapApiMessage(error, "批量启用失败"));
    },
  });

  const batchDisableMutation = useMutation({
    mutationFn: () => batchDisableUsers({ employeeIds: selectedEmployeeIds }),
    onSuccess: async (result) => {
      await invalidatePeopleQueries();
      setSelectedEmployeeIds([]);
      toast.success(`已批量禁用 ${result.summary.updated} 人`);
    },
    onError: (error) => {
      toast.error(mapApiMessage(error, "批量禁用失败"));
    },
  });

  const items = employeesQuery.data?.items ?? [];
  const departments = departmentsQuery.data?.items ?? [];
  const managerMap = new Map<string, { id: string; name: string; employeeNo: string; departmentName: string }>();
  for (const section of organizationQuery.data?.items ?? []) {
    collectOrganizationEmployees(section.roots, managerMap);
  }
  const managerOptions = Array.from(managerMap.values()).sort(
    (left, right) => left.departmentName.localeCompare(right.departmentName) || left.employeeNo.localeCompare(right.employeeNo),
  );
  const batchPending =
    transferDepartmentMutation.isPending ||
    setManagerMutation.isPending ||
    batchEnableMutation.isPending ||
    batchDisableMutation.isPending ||
    wecomDirectoryRetryMutation.isPending ||
    wecomHrDryRunMutation.isPending ||
    wecomHrApplyMutation.isPending;
  const tableColumnCount = canManageUsers ? 8 : 7;
  const latestWecomHrRun = wecomHrMasterRunsQuery.data?.items?.[0] ?? null;
  const wecomHrMasterError = wecomHrMasterRunsQuery.isError
    ? mapApiMessage(wecomHrMasterRunsQuery.error, "企微 HR 主数据同步未就绪")
    : "";

  function toggleSelection(employeeId: string, checked: boolean) {
    setSelectedEmployeeIds((current) => {
      if (!checked) {
        return current.filter((item) => item !== employeeId);
      }
      if (current.includes(employeeId)) {
        return current;
      }
      if (current.length >= 50) {
        toast.error("单次最多选择 50 名员工");
        return current;
      }
      return [...current, employeeId];
    });
  }

  return (
    <div className="space-y-6">
      <PageHeader
        title="人员管理"
        subtitle="按当前员工档案与账号状态做筛选、批量处理和统计查看。"
        actions={
          <div className="flex flex-wrap gap-2">
            {canManageUsers ? (
              <Button asChild variant="secondary" type="button">
                <Link to="/payroll">薪资管理</Link>
              </Button>
            ) : null}
            {canManageUsers ? (
              <Button asChild variant="secondary" type="button">
                <Link to="/performance">绩效考核</Link>
              </Button>
            ) : null}
            {canViewStats ? (
              <Button asChild variant="secondary" type="button">
                <Link to="/people/stats">员工统计</Link>
              </Button>
            ) : null}
            {canManageUsers ? (
              <DropdownMenu>
                <DropdownMenuTrigger asChild>
                  <Button variant="secondary" type="button" disabled={exportMutation.isPending}>
                    {exportMutation.isPending ? "导出中..." : "导出"}
                  </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                  <DropdownMenuItem onSelect={() => exportMutation.mutate("csv")}>
                    导出 CSV
                  </DropdownMenuItem>
                  <DropdownMenuItem onSelect={() => exportMutation.mutate("xlsx")}>
                    导出 Excel
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            ) : null}
            {canManageUsers ? (
              <Button asChild variant="secondary" type="button">
                <Link to="/system/users">先新建账号</Link>
              </Button>
            ) : null}
          </div>
        }
      />

      {canManageUsers ? (
        <div className="card-std p-4">
          <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
            <div className="space-y-2">
              <div className="flex flex-wrap items-center gap-2">
                <h2 className="text-base font-semibold text-zinc-900">企微 HR 主数据镜像</h2>
                {latestWecomHrRun ? (
                  <StatusBadge
                    status={latestWecomHrRun.status}
                    label={`${wecomHrMasterModeLabel(latestWecomHrRun.mode)} · ${wecomHrMasterRunStatusLabel(latestWecomHrRun.status)}`}
                  />
                ) : null}
              </div>
              <div className="text-sm text-zinc-600">
                {latestWecomHrRun
                  ? `${formatSyncSummary(latestWecomHrRun)} · ${latestWecomHrRun.finishedAt ?? latestWecomHrRun.createdAt ?? "-"}`
                  : "企微/人事助手作为人员主源；OA 保存镜像、账号、权限和审计。"}
              </div>
              {wecomHrMasterError ? (
                <div className="text-xs text-amber-700">{wecomHrMasterError}</div>
              ) : null}
              {latestWecomHrRun?.items?.length ? (
                <div className="text-xs text-zinc-500">
                  最近失败项：{latestWecomHrRun.items.filter((item) => item.status === "failed" || item.status === "conflict").length}
                </div>
              ) : null}
            </div>
            <div className="flex flex-wrap gap-2">
              <Button
                type="button"
                variant="secondary"
                disabled={batchPending}
                onClick={() => wecomHrDryRunMutation.mutate()}
              >
                {wecomHrDryRunMutation.isPending ? "预检中..." : "同步预检"}
              </Button>
              <Button
                type="button"
                disabled={batchPending}
                onClick={() => setWecomHrApplyConfirmOpen(true)}
              >
                {wecomHrApplyMutation.isPending ? "写入中..." : "确认写入"}
              </Button>
            </div>
          </div>
        </div>
      ) : null}

      <div className="card-std space-y-4 p-4">
        <div className="grid gap-3 md:grid-cols-3 xl:grid-cols-4">
          <Input
            placeholder="搜索姓名、工号、手机号、邮箱"
            value={q}
            onChange={(event) => setQ(event.target.value)}
          />
          <select
            className="select-std w-full"
            value={departmentId}
            onChange={(event) => setDepartmentId(event.target.value)}
          >
            <option value="">全部部门</option>
            {departments.map((item) => (
              <option key={item.id} value={item.id}>
                {item.name}
              </option>
            ))}
          </select>
          <select
            className="select-std w-full"
            value={status}
            onChange={(event) => setStatus(event.target.value as "" | "active" | "archived")}
          >
            <option value="">全部账号状态</option>
            <option value="active">生效中</option>
            <option value="archived">已归档</option>
          </select>
          <Input
            placeholder="按职位模糊筛选"
            value={title}
            onChange={(event) => setTitle(event.target.value)}
          />
          <select
            className="select-std w-full"
            value={managerId}
            onChange={(event) => setManagerId(event.target.value)}
          >
            <option value="">全部直属上级</option>
            {managerOptions.map((item) => (
              <option key={item.id} value={item.id}>
                {item.name} · {item.employeeNo} · {item.departmentName}
              </option>
            ))}
          </select>
          <select
            className="select-std w-full"
            value={employmentStatus}
            onChange={(event) => setEmploymentStatus(event.target.value as "" | EmployeeEmploymentStatus)}
          >
            <option value="">全部雇用状态</option>
            {EMPLOYMENT_STATUS_OPTIONS.map((item) => (
              <option key={item.value} value={item.value}>
                {item.label}
              </option>
            ))}
          </select>
          <DateTextInput
            value={hireDateFrom}
            onChange={(event) => setHireDateFrom(event.target.value)}
          />
          <DateTextInput
            value={hireDateTo}
            onChange={(event) => setHireDateTo(event.target.value)}
          />
        </div>
        <div className="flex flex-wrap items-center gap-2 text-xs text-zinc-500">
          <span>入职日期从</span>
          <span>{hireDateFrom || "-"}</span>
          <span>到</span>
          <span>{hireDateTo || "-"}</span>
        </div>
      </div>

      {canManageUsers && selectedEmployeeIds.length ? (
        <div className="card-std flex flex-wrap items-center justify-between gap-3 p-4">
          <div className="text-sm text-zinc-700">
            已选 <span className="font-semibold text-zinc-900">{selectedEmployeeIds.length}</span> 名员工
          </div>
          <div className="flex flex-wrap gap-2">
            <Button
              type="button"
              variant="secondary"
              disabled={batchPending}
              onClick={() => {
                setTargetDepartmentId("");
                setTransferDialogOpen(true);
              }}
            >
              批量调部门
            </Button>
            <Button
              type="button"
              variant="secondary"
              disabled={batchPending}
              onClick={() => {
                setTargetManagerId("");
                setManagerDialogOpen(true);
              }}
            >
              批量设置上级
            </Button>
            <Button type="button" variant="secondary" disabled={batchPending} onClick={() => setEnableConfirmOpen(true)}>
              批量启用
            </Button>
            <Button type="button" variant="secondary" disabled={batchPending} onClick={() => setDisableConfirmOpen(true)}>
              批量禁用
            </Button>
            <Button type="button" variant="secondary" disabled={batchPending} onClick={() => setSelectedEmployeeIds([])}>
              清空选择
            </Button>
          </div>
        </div>
      ) : null}

      <div className="card-std p-6">
        {exportError ? (
          <p className="mb-4 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
            {exportError}
          </p>
        ) : null}
        {employeesQuery.isError ? (
          <p className="mb-4 rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-600">
            {mapApiMessage(employeesQuery.error, "加载人员列表失败")}
          </p>
        ) : null}
        <Table>
          <TableHeader>
            <TableRow>
              {canManageUsers ? <TableHead>选择</TableHead> : null}
              <TableHead>员工</TableHead>
              <TableHead>部门 / 上级</TableHead>
              <TableHead>岗位 / 雇用状态</TableHead>
              <TableHead>角色</TableHead>
              <TableHead>账号状态</TableHead>
              <TableHead>企业微信</TableHead>
              <TableHead>操作</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {items.length ? (
              items.map((item) => {
                const wecomView = wecomDirectoryStatusView(item.wecomDirectory);
                return (
                  <TableRow key={item.id}>
                    {canManageUsers ? (
                      <TableCell>
                        <input
                          aria-label={`选择员工 ${item.name}`}
                          checked={selectedEmployeeIds.includes(item.id)}
                          className="size-4 rounded border-zinc-300 text-zinc-900 focus:ring-zinc-400"
                          disabled={batchPending}
                          type="checkbox"
                          onChange={(event) => toggleSelection(item.id, event.target.checked)}
                        />
                      </TableCell>
                    ) : null}
                    <TableCell>
                      <div className="flex items-center gap-3">
                        <EmployeeAvatar name={item.name} src={item.avatarUrl} />
                        <div>
                          <div className="font-medium text-zinc-900">{item.name}</div>
                          <div className="text-xs text-zinc-500">
                            {item.employeeNo} · {item.email}
                          </div>
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="space-y-1 text-sm">
                        <div className="text-zinc-900">{item.department?.name ?? "-"}</div>
                        <div className="text-xs text-zinc-500">
                          上级：{item.directManager ? `${item.directManager.name} · ${item.directManager.employeeNo}` : "-"}
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="space-y-1 text-sm">
                        <div className="text-zinc-900">{item.title || "-"}</div>
                        <div className="text-xs text-zinc-500">
                          {employmentStatusLabel(item.employmentStatus)} · 入职 {item.hireDate ?? "-"}
                        </div>
                      </div>
                    </TableCell>
                    <TableCell>{item.roleCodes.join(" / ") || "-"}</TableCell>
                    <TableCell>
                      <StatusBadge status={item.status} />
                    </TableCell>
                    <TableCell>
                      <div className="space-y-1">
                        <StatusBadge status={wecomView.status} label={wecomView.label} />
                        <div className="max-w-40 truncate text-xs text-zinc-500">{wecomView.hint}</div>
                      </div>
                    </TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-2">
                        <Button asChild size="sm" variant="secondary" type="button">
                          <Link to={`/people/${item.id}`}>查看档案</Link>
                        </Button>
                        {canManageUsers ? (
                          <>
                            <Button size="sm" type="button" disabled={onboardingMutation.isPending} onClick={() => onboardingMutation.mutate(item.id)}>
                              发起入职
                            </Button>
                            <Button size="sm" variant="secondary" type="button" disabled={regularizeMutation.isPending} onClick={() => regularizeMutation.mutate(item.id)}>
                              转正
                            </Button>
                            {shouldShowWecomRetry(item.wecomDirectory) ? (
                              <Button
                                size="sm"
                                variant="secondary"
                                type="button"
                                disabled={wecomDirectoryRetryMutation.isPending}
                                onClick={() => wecomDirectoryRetryMutation.mutate(item.id)}
                              >
                                企微重试
                              </Button>
                            ) : null}
                            <Button
                              size="sm"
                              variant="secondary"
                              type="button"
                              disabled={offboardingMutation.isPending}
                              onClick={() => setOffboardingTarget(item)}
                            >
                              发起离职
                            </Button>
                          </>
                        ) : null}
                      </div>
                    </TableCell>
                  </TableRow>
                );
              })
            ) : (
              <TableRow>
                <TableCell className="py-3 text-zinc-500" colSpan={tableColumnCount}>
                  暂无匹配员工
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>

      <Dialog open={transferDialogOpen} onOpenChange={setTransferDialogOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>批量调部门</DialogTitle>
            <DialogDescription>
              将对已选 {selectedEmployeeIds.length} 名员工统一调部门，并写入 transfer 生命周期事件。
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-2">
            <label className="text-sm font-medium text-zinc-700" htmlFor="people-batch-department">
              目标部门
            </label>
            <select
              id="people-batch-department"
              className="select-std w-full"
              value={targetDepartmentId}
              onChange={(event) => setTargetDepartmentId(event.target.value)}
            >
              <option value="">请选择目标部门</option>
              {departments.map((item) => (
                <option key={item.id} value={item.id}>
                  {item.name}
                </option>
              ))}
            </select>
          </div>
          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => setTransferDialogOpen(false)}>
              取消
            </Button>
            <Button
              type="button"
              disabled={!targetDepartmentId || transferDepartmentMutation.isPending}
              onClick={() => transferDepartmentMutation.mutate()}
            >
              {transferDepartmentMutation.isPending ? "处理中..." : "确认调部门"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <Dialog open={managerDialogOpen} onOpenChange={setManagerDialogOpen}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle>批量设置直属上级</DialogTitle>
            <DialogDescription>
              将对已选 {selectedEmployeeIds.length} 名员工统一设置直属上级，并写入 transfer 生命周期事件。
            </DialogDescription>
          </DialogHeader>
          <div className="space-y-2">
            <label className="text-sm font-medium text-zinc-700" htmlFor="people-batch-manager">
              目标上级
            </label>
            <select
              id="people-batch-manager"
              className="select-std w-full"
              value={targetManagerId}
              onChange={(event) => setTargetManagerId(event.target.value)}
            >
              <option value="">请选择直属上级</option>
              {managerOptions.map((item) => (
                <option key={item.id} value={item.id}>
                  {item.name} · {item.employeeNo} · {item.departmentName}
                </option>
              ))}
            </select>
          </div>
          <DialogFooter>
            <Button type="button" variant="secondary" onClick={() => setManagerDialogOpen(false)}>
              取消
            </Button>
            <Button
              type="button"
              disabled={!targetManagerId || setManagerMutation.isPending}
              onClick={() => setManagerMutation.mutate()}
            >
              {setManagerMutation.isPending ? "处理中..." : "确认设置"}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <ConfirmDialog
        open={enableConfirmOpen}
        onOpenChange={setEnableConfirmOpen}
        title="批量启用账号"
        description={`将统一启用已选 ${selectedEmployeeIds.length} 名员工账号，并吊销当前登录会话。`}
        confirmLabel={batchEnableMutation.isPending ? "处理中..." : "确认启用"}
        onConfirm={async () => {
          await batchEnableMutation.mutateAsync();
        }}
      />

      <ConfirmDialog
        open={disableConfirmOpen}
        onOpenChange={setDisableConfirmOpen}
        title="批量禁用账号"
        description={`将统一禁用已选 ${selectedEmployeeIds.length} 名员工账号，并立即吊销当前登录会话。`}
        confirmLabel={batchDisableMutation.isPending ? "处理中..." : "确认禁用"}
        variant="destructive"
        onConfirm={async () => {
          await batchDisableMutation.mutateAsync();
        }}
      />

      <ConfirmDialog
        open={wecomHrApplyConfirmOpen}
        onOpenChange={setWecomHrApplyConfirmOpen}
        title="写入企微 HR 主数据镜像"
        description="将按当前企微/人事助手主数据创建或更新 OA 员工、部门、角色和企业微信绑定；不自动禁用不在职账号。"
        confirmLabel={wecomHrApplyMutation.isPending ? "写入中..." : "确认写入"}
        onConfirm={async () => {
          await wecomHrApplyMutation.mutateAsync();
        }}
      />

      <ConfirmDialog
        open={Boolean(offboardingTarget)}
        onOpenChange={(open) => {
          if (!open) setOffboardingTarget(null);
        }}
        title="发起离职流程"
        description={
          offboardingTarget
            ? `将为 ${offboardingTarget.name} 发起离职清单；清单完成后会禁用 OA 账号并尝试禁用企业微信成员。`
            : ""
        }
        confirmLabel={offboardingMutation.isPending ? "处理中..." : "确认发起"}
        variant="destructive"
        onConfirm={async () => {
          if (offboardingTarget) {
            await offboardingMutation.mutateAsync(offboardingTarget.id);
          }
        }}
      />
    </div>
  );
}

export default PeoplePage;