import { resolveErrorMessage as resolveUserErrorMessage } from "../lib/resolveErrorMessage";
import { useState } from "react";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { fetchDepartments } from "../api/departments";
import { fetchEmployees } from "../api/employees";
import {
  createUser,
  disableUser,
  enableUser,
  fetchUsers,
  resetUserPassword,
  setUserRoles,
  type UserStatus,
  type UserSummary,
} from "../api/users";
import { ListWorkspace, WorkspaceHeader } from "../components/patterns/ListWorkspace";
import { Button } from "../components/ui/button";
import { Input } from "../components/ui/input";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../components/ui/table";
import { toast } from "sonner";
import { TableSkeleton } from "../components/common/TableSkeleton";
import { StatusBadge } from "../components/common/StatusBadge";
import { Pagination } from "../components/common/Pagination";
import { CreateUserDialog, type CreateUserFormData } from "./user-management/CreateUserDialog";
import { UserImportDialog } from "./user-management/UserImportDialog";
import { UserRoleDialog } from "./user-management/UserRoleDialog";
import { useAuth } from "../auth/AuthContext";

const PAGE_SIZE = 20;

const ROLE_LABELS: Record<string, string> = {
  employee: "员工",
  manager: "直属经理",
  ceo: "公司负责人",
  finance: "财务",
  system_admin: "OA 系统管理员",
  finance_mgr: "财务负责人（兼容）",
  administration: "行政（兼容）",
  hr: "人事（兼容）",
  admin: "应急超级管理员",
};

const ORDINARY_ROLE_OPTIONS = [
  "employee",
  "manager",
  "ceo",
  "finance",
  "system_admin",
  "finance_mgr",
  "administration",
  "hr",
] as const;

function formatRoleCodes(roleCodes: string[]) {
  return roleCodes.length ? roleCodes.map((roleCode) => ROLE_LABELS[roleCode] ?? roleCode).join("、") : "-";
}

function isProtectedUserAccount(user: UserSummary) {
  return user.roleCodes.some((roleCode) => roleCode === "admin" || roleCode === "system_admin");
}

export function UserManagementPage() {
  const { me } = useAuth();
  const queryClient = useQueryClient();
  const isEmergencyAdmin = (me?.roleCodes ?? []).includes("admin");
  const roleOptions = ORDINARY_ROLE_OPTIONS.map((code) => ({
    code,
    label: ROLE_LABELS[code],
    disabled: code === "system_admin" && !isEmergencyAdmin,
  }));
  const [status, setStatus] = useState<UserStatus | "">("");
  const [q, setQ] = useState("");
  const [page, setPage] = useState(1);
  const [error, setError] = useState("");
  const [credentialResult, setCredentialResult] = useState<{
    mode: "create" | "reset";
    userId: string;
    employeeNo?: string;
    password: string;
  } | null>(null);

  const [createOpen, setCreateOpen] = useState(false);
  const [importOpen, setImportOpen] = useState(false);
  const [roleDialogUser, setRoleDialogUser] = useState<UserSummary | null>(null);

  const listQuery = useQuery({
    queryKey: ["users", "list", status, q, page],
    queryFn: () => fetchUsers({ page, pageSize: PAGE_SIZE, status: status || undefined, q: q || undefined }),
  });

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

  const managersQuery = useQuery({
    queryKey: ["employees", "active"],
    queryFn: () => fetchEmployees({ page: 1, pageSize: 200, status: "active" }),
  });

  const totalPages = Math.max(1, Math.ceil((listQuery.data?.total ?? 0) / PAGE_SIZE));
  const users = listQuery.data?.items ?? [];
  const userStats = {
    total: listQuery.data?.total ?? 0,
    active: users.filter((item) => item.status === "active").length,
    archived: users.filter((item) => item.status === "archived").length,
    roles: new Set(users.flatMap((item) => item.roleCodes)).size,
  };

  const createMutation = useMutation({
    mutationFn: (payload: CreateUserFormData) => createUser(payload),
    onSuccess: async (data) => {
      await queryClient.invalidateQueries({ queryKey: ["users"] });
      setCreateOpen(false);
      setError("");
      setCredentialResult({
        mode: "create",
        userId: data.id,
        employeeNo: data.employeeNo,
        password: data.oneTimePassword,
      });
      toast.success("用户已创建");
    },
    onError: (err) => {
      const msg = resolveUserErrorMessage(err, "创建用户失败");
      setError(msg);
      toast.error(msg);
    },
  });

  const toggleMutation = useMutation({
    mutationFn: async (item: UserSummary) => {
      if (item.status === "active") {
        return disableUser(item.id);
      }
      return enableUser(item.id);
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["users"] });
      setError("");
      toast.success("状态已更新");
    },
    onError: (err) => {
      const msg = resolveUserErrorMessage(err, "更新用户状态失败");
      setError(msg);
      toast.error(msg);
    },
  });

  const resetMutation = useMutation({
    mutationFn: async (item: UserSummary) => resetUserPassword(item.id),
    onSuccess: async (data) => {
      setCredentialResult({ mode: "reset", userId: data.id, password: data.oneTimePassword });
      await queryClient.invalidateQueries({ queryKey: ["users"] });
      setError("");
      toast.success("密码已重置");
    },
    onError: (err) => {
      const msg = resolveUserErrorMessage(err, "重置密码失败");
      setError(msg);
      toast.error(msg);
    },
  });

  const rolesMutation = useMutation({
    mutationFn: async ({ userId, roles }: { userId: string; roles: string[] }) => {
      return setUserRoles(userId, roles);
    },
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["users"] });
      setRoleDialogUser(null);
      setError("");
      toast.success("角色已更新");
    },
    onError: (err) => {
      const msg = resolveUserErrorMessage(err, "更新角色失败");
      setError(msg);
      toast.error(msg);
    },
  });

  return (
    <ListWorkspace>
      <WorkspaceHeader
        title="系统用户管理"
        subtitle="账号开通、停用、角色和一次性口令集中处理。"
        actions={
          <div className="flex gap-2">
            <UserImportDialog
              open={importOpen}
              onOpenChange={setImportOpen}
              onImported={async () => {
                await Promise.all([
                  queryClient.invalidateQueries({ queryKey: ["users"] }),
                  queryClient.invalidateQueries({ queryKey: ["employees"] }),
                ]);
              }}
            />
            <CreateUserDialog
              open={createOpen}
              onOpenChange={setCreateOpen}
              onSubmit={(data) => createMutation.mutate(data)}
              isPending={createMutation.isPending}
              departments={{
                isLoading: departmentsQuery.isLoading,
                items: departmentsQuery.data?.items ?? [],
              }}
              managers={{
                isLoading: managersQuery.isLoading,
                items: (managersQuery.data?.items ?? []).map((item) => ({
                  id: item.id,
                  name: item.name,
                  employeeNo: item.employeeNo,
                })),
              }}
              roleOptions={roleOptions}
            />
          </div>
        }
      />

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

      {credentialResult ? (
        <p className="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-sm text-amber-800" data-testid="users-reset-result">
          {credentialResult.mode === "create"
            ? (
              <>
                已创建用户（user={credentialResult.userId}
                {credentialResult.employeeNo ? `，工号=${credentialResult.employeeNo}` : ""}
                ），一次性口令：<span className="font-mono">{credentialResult.password}</span>
              </>
            )
            : (
              <>
                已重置密码（user={credentialResult.userId}），一次性口令：<span className="font-mono">{credentialResult.password}</span>
              </>
            )}
        </p>
      ) : null}

      <div className="finance-status-strip" data-testid="users-summary">
        <div className="finance-metric-card"><div className="finance-metric-card__label">用户总数</div><div className="finance-metric-card__value">{userStats.total}</div></div>
        <div className="finance-metric-card"><div className="finance-metric-card__label">当前页生效</div><div className="finance-metric-card__value">{userStats.active}</div></div>
        <div className="finance-metric-card"><div className="finance-metric-card__label">当前页停用</div><div className="finance-metric-card__value">{userStats.archived}</div></div>
        <div className="finance-metric-card"><div className="finance-metric-card__label">当前页角色</div><div className="finance-metric-card__value">{userStats.roles}</div></div>
        <div className="finance-metric-card"><div className="finance-metric-card__label">当前页</div><div className="finance-metric-card__value">{page}</div></div>
      </div>

      <div className="admin-command-panel space-y-4">
        <div className="ops-command-bar__row">
          <Input
            data-testid="users-search"
            value={q}
            onChange={(e) => {
              setQ(e.target.value);
              setPage(1);
            }}
            placeholder="搜索工号/姓名/手机号/邮箱"
          />
          <select
            className="select-std w-auto"
            data-testid="users-status-filter"
            value={status}
            onChange={(e) => {
              setStatus(e.target.value as UserStatus | "");
              setPage(1);
            }}
          >
            <option value="">全部状态</option>
            <option value="active">生效中</option>
            <option value="archived">已停用</option>
          </select>
        </div>

        {listQuery.isLoading ? <TableSkeleton columns={5} rows={5} /> : null}
        {listQuery.isError ? (
          <p className="text-sm text-red-600">
            {resolveUserErrorMessage(listQuery.error, "加载用户列表失败")}
          </p>
        ) : null}

        <div className="ops-table-focus overflow-x-auto">
          <Table data-testid="users-table">
            <TableHeader>
              <tr>
                <TableHead>工号/姓名</TableHead>
                <TableHead>联系方式</TableHead>
                <TableHead>状态</TableHead>
                <TableHead>角色</TableHead>
                <TableHead className="w-56">操作</TableHead>
              </tr>
            </TableHeader>
            <TableBody>
              {users.length ? (
                users.map((item) => {
                  const protectedAccount = isProtectedUserAccount(item);
                  const canManageAccount = isEmergencyAdmin || !protectedAccount;
                  const isCurrentAccount = item.id === me?.id;
                  const canToggleAccount = canManageAccount && !isCurrentAccount;
                  const canResetPassword = canManageAccount;
                  const canEditRoles = canManageAccount && !isCurrentAccount;

                  return (
                    <TableRow data-testid="users-row" key={item.id}>
                    <TableCell>
                      <div className="font-medium text-zinc-900">
                        {item.employeeNo} / {item.name}
                      </div>
                      <div className="text-xs text-zinc-500 font-mono">{item.id}</div>
                    </TableCell>
                    <TableCell className="text-sm">
                      <div>{item.email}</div>
                      <div className="text-zinc-500">{item.phone ?? "手机号未填写"}</div>
                    </TableCell>
                    <TableCell><StatusBadge status={item.status} /></TableCell>
                    <TableCell className="text-xs">{formatRoleCodes(item.roleCodes)}</TableCell>
                    <TableCell>
                      <div className="flex flex-wrap gap-2">
                        {canToggleAccount ? (
                          <Button
                            data-testid="users-toggle"
                            size="sm"
                            variant="secondary"
                            disabled={toggleMutation.isPending}
                            onClick={() => toggleMutation.mutate(item)}
                            type="button"
                          >
                            {item.status === "active" ? "禁用" : "启用"}
                          </Button>
                        ) : null}

                        {canResetPassword ? (
                          <Button
                            data-testid="users-reset-password"
                            size="sm"
                            variant="secondary"
                            disabled={resetMutation.isPending}
                            onClick={() => resetMutation.mutate(item)}
                            type="button"
                          >
                            重置密码
                          </Button>
                        ) : null}

                        {canEditRoles ? (
                          <Button
                            data-testid="users-edit-roles"
                            size="sm"
                            variant="secondary"
                            disabled={rolesMutation.isPending}
                            onClick={() => setRoleDialogUser(item)}
                            type="button"
                          >
                            {item.roleCodes.includes("admin") ? "应急账号" : "角色"}
                          </Button>
                        ) : null}

                        {protectedAccount && !isEmergencyAdmin ? (
                          <span
                            className="inline-flex items-center text-xs text-zinc-500"
                            data-testid="users-protected-account"
                          >
                            受保护账号
                          </span>
                        ) : null}
                      </div>
                    </TableCell>
                    </TableRow>
                  );
                })
              ) : (
                <TableRow>
                  <TableCell colSpan={5} className="py-3 text-zinc-500">
                    暂无数据
                  </TableCell>
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>

        <Pagination
          page={page}
          totalPages={totalPages}
          onPageChange={setPage}
          testIdPrefix="users"
        />
      </div>

      <UserRoleDialog
        open={Boolean(roleDialogUser)}
        onOpenChange={(open) => {
          if (!open) {
            setRoleDialogUser(null);
          }
        }}
        user={roleDialogUser}
        roleOptions={roleOptions}
        onSubmit={(roles) => {
          if (roleDialogUser) {
            rolesMutation.mutate({ userId: roleDialogUser.id, roles });
          }
        }}
        isPending={rolesMutation.isPending}
      />
    </ListWorkspace>
  );
}