import { useCallback, useEffect, useMemo, useState } from "react";

import { Plus, Search } from "lucide-react";
import { ApiRequestError, type Employee, type Role, type Workspace } from "../../services/api";
import { useApi, useAuth } from "../../context/AuthContext";
import { ConfirmDialog } from "~/components/common/ConfirmDialog";
import { Button } from "~/components/ui/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "~/components/ui/table";
import { AdminColgroup, USER_PROJECT_COL_WIDTHS } from "./AdminTable";
import { AdminPagination } from "./AdminPagination";
import { UserFormDialog, type UserFormState } from "./UserFormDialog";
import { ResetPasswordDialog } from "./ResetPasswordDialog";
import { useCursorPage } from "./useCursorPage";
import {
  adminEmptyClass,
  adminPageClass,
  adminReadonlyClass,
  adminToolbarClass,
  adminToolbarInputClass,
  adminToolbarSearchClass,
  employeeActionsClass,
  employeeAvatarClass,
  employeeNameClass,
  rolePillClass,
  rowButtonClass,
  rowDangerButtonClass,
  statusPillClass,
} from "./adminUi";

import { primaryGradientButtonClass } from "~/components/common/buttonClasses";
import { useDebouncedValue } from "./useDebouncedValue";

const EMPTY_FORM: UserFormState = {
  username: "",
  display_name: "",
  email: "",
  role_code: "developer",
  password: "",
  status: "active",
};

export function UserManagementPage({
  onNotify,
  onConnectionChange,
}: {
  onNotify: (notice: { tone: "success" | "error" | "info"; message: string }) => void;
  onConnectionChange: (online: boolean) => void;
}) {
  const api = useApi();
  const { user } = useAuth();
  const [roles, setRoles] = useState<Role[]>([]);
  const [saving, setSaving] = useState(false);
  const [editing, setEditing] = useState<Employee | null>(null);
  const [dialogOpen, setDialogOpen] = useState(false);
  const [form, setForm] = useState<UserFormState>(EMPTY_FORM);
  const [userSearchTerm, setUserSearchTerm] = useState("");
  const [deleteTarget, setDeleteTarget] = useState<Employee | null>(null);
  const [resetTarget, setResetTarget] = useState<Employee | null>(null);
  const [resetSaving, setResetSaving] = useState(false);
  const [createProjects, setCreateProjects] = useState<Workspace[]>([]);
  const [createProjectsLoading, setCreateProjectsLoading] = useState(false);
  const [selectedWorkspaceIds, setSelectedWorkspaceIds] = useState<string[]>([]);
  const debouncedSearch = useDebouncedValue(userSearchTerm, 300);

  const canManage = user?.role_code === "admin";

  const fetchEmployees = useCallback(
    async (input: { limit: number; cursor: string | null; q: string }) => {
      try {
        const page = await api.listPlatformEmployees(input);
        onConnectionChange(true);
        return page;
      } catch (error) {
        onConnectionChange(false);
        onNotify({
          tone: "error",
          message: error instanceof Error ? error.message : "用户列表加载失败",
        });
        throw error;
      }
    },
    [api, onConnectionChange, onNotify],
  );

  const {
    items: employees,
    setItems: setEmployees,
    page,
    loading,
    meta,
    totalPages,
    goNext,
    goPrev,
    goToPage,
    canGoToPage,
    reload,
    refreshFromStart,
  } = useCursorPage(fetchEmployees, debouncedSearch);

  useEffect(() => {
    void api.listPlatformRoles().then(setRoles).catch(() => {
      /* roles only needed for dialog */
    });
  }, [api]);

  const createRoleOptions = useMemo(
    () => roles.filter((role) => role.role_code !== "admin"),
    [roles],
  );

  const loadCreateProjects = useCallback(async (): Promise<void> => {
    setCreateProjectsLoading(true);
    try {
      const page = await api.listWorkspaces({ limit: 200, cursor: null, q: "" });
      setCreateProjects(page.items.filter((item) => item.status === "active"));
    } catch {
      setCreateProjects([]);
      onNotify({ tone: "error", message: "项目列表加载失败" });
    } finally {
      setCreateProjectsLoading(false);
    }
  }, [api, onNotify]);

  const openCreate = (): void => {
    setEditing(null);
    setForm(EMPTY_FORM);
    setSelectedWorkspaceIds([]);
    setDialogOpen(true);
    void loadCreateProjects();
  };

  const openEdit = (employee: Employee): void => {
    setEditing(employee);
    setForm({
      username: employee.username,
      display_name: employee.display_name,
      email: employee.email ?? "",
      role_code: employee.role_code,
      password: "",
      status: employee.status,
    });
    setSelectedWorkspaceIds([]);
    setDialogOpen(true);
  };

  const toggleCreateWorkspace = (workspaceId: string): void => {
    setSelectedWorkspaceIds((current) =>
      current.includes(workspaceId)
        ? current.filter((id) => id !== workspaceId)
        : [...current, workspaceId],
    );
  };

  const submit = async (event: React.FormEvent): Promise<void> => {
    event.preventDefault();
    if (!form.display_name.trim() || (!editing && !form.username.trim())) return;
    if (!editing && !form.password.trim()) {
      onNotify({ tone: "error", message: "请输入密码" });
      return;
    }
    if (editing) {
      const editingSelf = editing.user_id === user?.user_id;
      const targetIsAdmin = editing.role_code === "admin";
      if (editingSelf && form.status !== editing.status) {
        onNotify({ tone: "error", message: "不能停用当前登录账号" });
        return;
      }
      if (targetIsAdmin && form.status !== editing.status) {
        onNotify({ tone: "error", message: "不能停用或锁定管理员账号" });
        return;
      }
      if (editingSelf && form.role_code !== editing.role_code) {
        onNotify({ tone: "error", message: "不能降级自身管理员角色" });
        return;
      }
    }
    if (form.password && (form.password.length < 8 || form.password.length > 72)) {
      onNotify({ tone: "error", message: "密码长度必须在 8~72 字符之间" });
      return;
    }
    if (!editing && form.role_code === "admin") {
      onNotify({ tone: "error", message: "新建用户不能指定管理员角色" });
      return;
    }
    setSaving(true);
    try {
      if (editing) {
        const updated = await api.updatePlatformEmployee(editing.user_id, {
          display_name: form.display_name.trim(),
          email: form.email.trim() || null,
          role_code: form.role_code,
          status: form.status,
        });
        setEmployees((current) =>
          current.map((item) => (item.user_id === updated.user_id ? updated : item)),
        );
        onNotify({ tone: "success", message: "用户信息已更新" });
      } else {
        const created = await api.createPlatformEmployee({
          username: form.username.trim(),
          display_name: form.display_name.trim(),
          email: form.email.trim() || undefined,
          password: form.password,
          role_code: form.role_code,
        });
        if (selectedWorkspaceIds.length > 0) {
          const results = await Promise.allSettled(
            selectedWorkspaceIds.map((workspaceId) =>
              api.addWorkspaceMember(workspaceId, { user_id: created.user_id }),
            ),
          );
          const failed = results.filter((item) => item.status === "rejected").length;
          const joined = results.length - failed;
          if (failed === 0) {
            onNotify({
              tone: "success",
              message: `用户已添加，并加入 ${joined} 个项目`,
            });
          } else {
            onNotify({
              tone: "error",
              message: `用户已创建，但有 ${failed} 个项目加入失败`,
            });
          }
        } else {
          onNotify({
            tone: "info",
            message: "用户已添加",
          });
        }
        await refreshFromStart();
      }
      setDialogOpen(false);
    } catch (error) {
      onNotify({
        tone: "error",
        message: error instanceof ApiRequestError ? error.message : "保存用户失败",
      });
    } finally {
      setSaving(false);
    }
  };

  const executeRemove = async (employee: Employee): Promise<void> => {
    try {
      await api.deletePlatformEmployee(employee.user_id);
      onNotify({ tone: "success", message: "用户已删除" });
      if (employees.length <= 1 && page > 1) {
        goPrev();
      } else {
        reload();
      }
    } catch (error) {
      onNotify({
        tone: "error",
        message: error instanceof Error ? error.message : "删除用户失败",
      });
    }
  };

  const executeResetPassword = async (newPassword: string): Promise<void> => {
    if (!resetTarget) return;
    setResetSaving(true);
    try {
      await api.resetPlatformEmployeePassword(resetTarget.user_id, newPassword);
      onNotify({ tone: "success", message: "密码已重置" });
      setResetTarget(null);
    } catch (error) {
      onNotify({
        tone: "error",
        message: error instanceof Error ? error.message : "重置密码失败",
      });
    } finally {
      setResetSaving(false);
    }
  };

  const emptyMessage = useMemo(() => {
    if (loading) return "正在加载用户…";
    if (debouncedSearch.trim()) return "未找到匹配的用户";
    return "暂无用户";
  }, [loading, debouncedSearch]);

  return (
    <section className={adminPageClass}>
      <div className={adminToolbarClass}>
        <div className={adminToolbarSearchClass}>
          <Search size={14} />
          <input
            type="text"
            placeholder="请输入用户名"
            className={adminToolbarInputClass}
            value={userSearchTerm}
            onChange={(event) => setUserSearchTerm(event.target.value)}
          />
        </div>
        <Button
          variant="default"
          size="sm"
          type="button"
          disabled={!canManage}
          onClick={openCreate}
          className={primaryGradientButtonClass}
        >
          <Plus size={15} />
          新建用户
        </Button>
      </div>

      {!canManage && <div className={adminReadonlyClass}>当前为开发人员，只能查看用户列表。</div>}
      <Table className="rounded-[9px] border border-line overflow-hidden text-[11px] text-[#44576a] [--border-color:var(--color-line)] table-fixed bg-white">
        <AdminColgroup widths={USER_PROJECT_COL_WIDTHS} />
        <TableHeader className="bg-[#f5f8fb] text-ink-caption">
          <TableRow className="hover:bg-transparent border-b border-[#edf1f5]">
            <TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">用户</TableHead>
            <TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">账号</TableHead>
            <TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">角色</TableHead>
            <TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">状态</TableHead>
            <TableHead className="h-10 px-4 text-[10px] font-bold text-ink-caption">操作</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {loading || employees.length === 0 ? (
            <TableRow className="min-h-[64px] border-t border-[#edf1f5] hover:bg-transparent data-[state=selected]:bg-transparent">
              <TableCell colSpan={5} className="p-0">
                <p className={adminEmptyClass}>{emptyMessage}</p>
              </TableCell>
            </TableRow>
          ) : (
            employees.map((employee) => {
              const isProtectedAdmin = employee.role_code === "admin";
              return (
                <TableRow key={employee.user_id} className="min-h-[64px] border-t border-[#edf1f5] hover:bg-[#f7fafc] data-[state=selected]:bg-transparent">
                  <TableCell className="p-3 px-4 align-middle"><span className={employeeNameClass}><b className={employeeAvatarClass}>{employee.display_name.slice(0, 1)}</b><span><strong>{employee.display_name}</strong><small>{employee.email ?? "未设置邮箱"}</small></span></span></TableCell>
                  <TableCell className="p-3 px-4 align-middle"><code>{employee.username}</code></TableCell>
                  <TableCell className="p-3 px-4 align-middle">{employee.role_code ? (<span className={rolePillClass(employee.role_code)}>{employee.role_name}</span>) : (<span>-</span>)}</TableCell>
                  <TableCell className="p-3 px-4 align-middle"><span className={statusPillClass(employee.status)}>{employee.status === "active" ? "正常" : employee.status === "disabled" ? "已停用" : "已锁定"}</span></TableCell>
                  <TableCell className="p-3 px-4 align-middle"><span className={employeeActionsClass}>
                    <Button
                      variant="outline"
                      size="xs"
                      type="button"
                      disabled={!canManage}
                      onClick={() => openEdit(employee)}
                      className={rowButtonClass}
                    >
                      编辑
                    </Button>
                    <Button
                      variant="destructive"
                      size="xs"
                      type="button"
                      disabled={!canManage || isProtectedAdmin}
                      title={isProtectedAdmin ? "管理员账号不能删除" : "删除"}
                      onClick={() => setDeleteTarget(employee)}
                      className={rowDangerButtonClass}
                    >
                      删除
                    </Button>
                  </span></TableCell>
                </TableRow>
              );
            })
          )}
        </TableBody>
      </Table>

      <AdminPagination
        page={page}
        totalPages={totalPages}
        totalCount={meta.total_count}
        loading={loading}
        hasMore={meta.has_more}
        canGoToPage={canGoToPage}
        onPrev={goPrev}
        onNext={goNext}
        onGoToPage={goToPage}
      />

      <UserFormDialog
        open={dialogOpen}
        editing={editing}
        form={form}
        saving={saving}
        currentUserId={user?.user_id}
        roles={roles}
        createRoleOptions={createRoleOptions}
        createProjects={createProjects}
        createProjectsLoading={createProjectsLoading}
        selectedWorkspaceIds={selectedWorkspaceIds}
        onChangeForm={setForm}
        onToggleWorkspace={toggleCreateWorkspace}
        onSubmit={(event) => void submit(event)}
        onClose={() => setDialogOpen(false)}
        onResetPassword={
          editing
            ? () => {
                setResetTarget(editing);
                setDialogOpen(false);
              }
            : undefined
        }
      />

      <ConfirmDialog
        open={deleteTarget !== null}
        onOpenChange={(nextOpen) => {
          if (!nextOpen) setDeleteTarget(null);
        }}
        title="确定删除用户？"
        description={
          deleteTarget
            ? `确定从平台删除用户"${deleteTarget.display_name}"吗？`
            : ""
        }
        confirmLabel="删除"
        destructive
        onConfirm={async () => {
          if (!deleteTarget) return;
          await executeRemove(deleteTarget);
          setDeleteTarget(null);
        }}
      />

      <ResetPasswordDialog
        open={resetTarget !== null}
        displayName={resetTarget?.display_name ?? ""}
        username={resetTarget?.username ?? ""}
        saving={resetSaving}
        onSubmit={executeResetPassword}
        onClose={() => setResetTarget(null)}
      />
    </section>
  );
}