import { useMutation, useQuery } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import {
  ArrowDown,
  ArrowUp,
  ArrowUpDown,
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  FileDown,
  LayoutDashboard,
  Plus,
  RefreshCw,
  Search,
  Settings2,
  ShieldCheck,
  Trash2,
} from "lucide-react";
import * as React from "react";
import { Link, useNavigate } from "react-router-dom";
import { PageHeader } from "../../../../common/core/components/page";
import {
  SortableTableHead,
  sortableTableHeadBaseClassName,
  sortableTableHeaderClassName,
} from "../../../../common/core/components/sort";
import {
  type SortConfig,
  type SortResolverMap,
  sortItems,
  toggleSort,
} from "../../../../common/core/utils";
import { SearchFilterBar } from "../../../../common/ui/search-filter-bar";
import {
  commonTableShellClass,
  commonTableViewportClass,
} from "../../../../common/ui/table";
import { Button } from "../../components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "../../components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../../components/ui/dropdown-menu";
import { Input } from "../../components/ui/input";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../../components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../../components/ui/table";
import { toast } from "../../components/ui/use-toast";
import {
  type UserSummary,
  bulkDeleteUsers,
  bulkUpdateUsers,
  deleteUser,
  exportUsersCSV,
  fetchAllTenants,
  fetchMe,
  fetchTenant,
  fetchUsers,
  updateUser,
} from "../../lib/adminApi";
import { t } from "../../lib/i18n";
import { isSuperAdminRole } from "../../lib/roles";
import { UserBulkUploadModal } from "./components/UserBulkUploadModal";
import {
  normalizeUserStatusValue,
  type UserStatusValue,
  userStatusLabel,
  userStatusValues,
} from "./userStatus";

type UserSchemaField = {
  key: string;
  label: string;
  type: string;
};

type UserSortKey = string;

const bulkPermissionOptions = [
  {
    value: "super_admin",
    labelKey: "ui.admin.role.super_admin",
    fallback: "시스템 관리자",
  },
  {
    value: "user",
    labelKey: "ui.admin.role.user",
    fallback: "일반 사용자",
  },
] as const;

function assignableSystemRoleValue(role?: string | null) {
  return isSuperAdminRole(role) ? "super_admin" : "user";
}

function UserListPage() {
  const navigate = useNavigate();
  const [page, setPage] = React.useState(1);
  const [search, setSearch] = React.useState("");
  const [searchDraft, setSearchDraft] = React.useState("");
  const [selectedCompany, setSelectedCompany] = React.useState<string>("");
  const [visibleColumns, setVisibleColumns] = React.useState<
    Record<string, boolean>
  >({});
  const [selectedUserIds, setSelectedUserIds] = React.useState<string[]>([]);
  const [selectedBulkStatus, setSelectedBulkStatus] = React.useState<
    UserStatusValue | ""
  >("");
  const [selectedBulkPermission, setSelectedBulkPermission] =
    React.useState("");
  const [sortConfig, setSortConfig] =
    React.useState<SortConfig<UserSortKey> | null>(null);

  const limit = 1000;
  const offset = (page - 1) * limit;

  const { data: profile } = useQuery({
    queryKey: ["me"],
    queryFn: fetchMe,
  });

  const { data: tenantsData } = useQuery({
    queryKey: ["tenants", "all"],
    queryFn: () => fetchAllTenants(),
  });
  const tenants = tenantsData?.items ?? [];

  // Lock company for tenant_admin
  React.useEffect(() => {
    if (profile?.role === "tenant_admin" && profile.tenantSlug) {
      setSelectedCompany(profile.tenantSlug);
    }
  }, [profile]);

  const selectedTenantId = React.useMemo(() => {
    return tenants.find((t) => t.slug === selectedCompany)?.id ?? "";
  }, [tenants, selectedCompany]);

  const { data: tenantDetail } = useQuery({
    queryKey: ["tenant", selectedTenantId],
    queryFn: () => fetchTenant(selectedTenantId),
    enabled: selectedTenantId.length > 0,
  });

  const userSchema: UserSchemaField[] = Array.isArray(
    tenantDetail?.config?.userSchema,
  )
    ? (tenantDetail?.config?.userSchema as UserSchemaField[])
    : [];

  // Initialize visible columns when schema changes
  React.useEffect(() => {
    if (userSchema.length > 0) {
      const initial: Record<string, boolean> = {};
      for (const field of userSchema) {
        initial[field.key] = true;
      }
      setVisibleColumns((prev) => {
        // Only set if not already set for these keys to avoid reset on every render
        const next = { ...initial, ...prev };
        return next;
      });
    }
  }, [userSchema]);

  const toggleColumn = (key: string) => {
    setVisibleColumns((prev) => ({
      ...prev,
      [key]: !prev[key],
    }));
  };

  const query = useQuery({
    queryKey: ["users", { limit, offset, search, tenantSlug: selectedCompany }],
    queryFn: () => fetchUsers(limit, offset, search, selectedCompany),
    placeholderData: (previousData) => previousData,
  });

  const deleteMutation = useMutation({
    mutationFn: (userId: string) => deleteUser(userId),
    onSuccess: () => {
      query.refetch();
    },
  });

  const exportMutation = useMutation({
    mutationFn: (includeIds: boolean) =>
      exportUsersCSV(search, selectedCompany, includeIds),
    onSuccess: ({ blob, filename }) => {
      const url = window.URL.createObjectURL(blob);
      const link = document.createElement("a");
      link.href = url;
      link.download = filename;
      document.body.appendChild(link);
      link.click();
      link.remove();
      window.URL.revokeObjectURL(url);
    },
    onError: () => {
      toast.error(
        t("msg.admin.users.export_error", "사용자 내보내기에 실패했습니다."),
      );
    },
  });

  const statusMutation = useMutation({
    mutationFn: ({ userId, status }: { userId: string; status: string }) =>
      updateUser(userId, { status }),
    onSuccess: () => {
      query.refetch();
    },
    onError: () => {
      toast.error(
        t("msg.admin.users.status_error", "사용자 상태 변경에 실패했습니다."),
      );
    },
  });

  const handleSearch = () => {
    setSearch(searchDraft);
    setPage(1);
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      handleSearch();
    }
  };

  const handleExport = (includeIds = false) => {
    exportMutation.mutate(includeIds);
  };

  const errorMsg = (query.error as AxiosError<{ error?: string }>)?.response
    ?.data?.error;
  const fallbackError =
    !errorMsg && query.isError
      ? t(
          "msg.admin.users.list.fetch_error",
          "사용자 목록 조회에 실패했습니다.",
        )
      : null;

  const rawItems = query.data?.items ?? [];
  const userSortResolvers = React.useMemo<
    SortResolverMap<UserSummary, UserSortKey>
  >(
    () =>
      userSchema.reduce<SortResolverMap<UserSummary, UserSortKey>>(
        (accumulator, field) => {
          accumulator[field.key] = (user) => {
            const value = user.metadata?.[field.key];
            return typeof value === "string" ||
              typeof value === "number" ||
              typeof value === "boolean"
              ? value
              : null;
          };
          return accumulator;
        },
        {
          name_email: (user) =>
            `${user.name ?? ""} ${user.email ?? ""} ${user.phone ?? ""}`,
          tenant_dept: (user) =>
            `${user.tenant?.name ?? user.tenantSlug ?? ""} ${user.department ?? ""}`,
        },
      ),
    [userSchema],
  );
  const items = React.useMemo(() => {
    return sortItems(rawItems, sortConfig, userSortResolvers);
  }, [rawItems, sortConfig, userSortResolvers]);

  const requestSort = (key: UserSortKey) => {
    setSortConfig((current) => toggleSort(current, key));
  };

  const getSortIcon = (key: UserSortKey) => {
    if (!sortConfig || sortConfig.key !== key) {
      return <ArrowUpDown size={14} className="ml-1 opacity-50" />;
    }
    return sortConfig.direction === "asc" ? (
      <ArrowUp size={14} className="ml-1" />
    ) : (
      <ArrowDown size={14} className="ml-1" />
    );
  };

  const total = query.data?.total ?? 0;
  const totalPages = Math.ceil(total / limit);
  const canPromoteSuperAdmin = isSuperAdminRole(profile?.role);

  const toggleSelectAll = () => {
    if (selectedUserIds.length === items.length) {
      setSelectedUserIds([]);
    } else {
      setSelectedUserIds(items.map((u) => u.id));
    }
  };

  const toggleSelectUser = (id: string) => {
    setSelectedUserIds((prev) =>
      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id],
    );
  };

  const bulkDeleteMutation = useMutation({
    mutationFn: bulkDeleteUsers,
    onSuccess: (_, variables) => {
      query.refetch();
      setSelectedUserIds([]);
      toast.success(
        t(
          "msg.admin.users.bulk.delete_success",
          "{{count}}명의 사용자가 삭제되었습니다.",
          { count: variables.length },
        ),
      );
    },
  });

  const bulkUpdateMutation = useMutation({
    mutationFn: bulkUpdateUsers,
    onSuccess: () => {
      query.refetch();
      setSelectedUserIds([]);
      setSelectedBulkStatus("");
      setSelectedBulkPermission("");
      toast.success(
        t(
          "msg.admin.users.bulk.update_success",
          "선택한 사용자들의 정보가 수정되었습니다.",
        ),
      );
    },
  });

  const handleApplyBulkStatus = () => {
    if (selectedUserIds.length === 0 || !selectedBulkStatus) return;
    bulkUpdateMutation.mutate({
      userIds: selectedUserIds,
      status: selectedBulkStatus,
    });
  };

  const handleApplyBulkPermission = () => {
    if (selectedUserIds.length === 0 || !selectedBulkPermission) return;
    bulkUpdateMutation.mutate({
      userIds: selectedUserIds,
      role: selectedBulkPermission,
    });
  };

  const handleBulkDelete = () => {
    if (selectedUserIds.length === 0) return;
    if (
      window.confirm(
        t(
          "msg.admin.users.bulk.delete_confirm",
          "{{count}}명의 사용자를 정말 삭제하시겠습니까?",
          { count: selectedUserIds.length },
        ),
      )
    ) {
      bulkDeleteMutation.mutate(selectedUserIds);
    }
  };

  const handleDelete = (userId: string, userName: string) => {
    if (
      !window.confirm(
        t(
          "msg.admin.users.list.delete_confirm",
          '사용자 "{{name}}"을(를) 정말 삭제하시겠습니까?',
          { name: userName },
        ),
      )
    ) {
      return;
    }
    deleteMutation.mutate(userId);
  };

  return (
    <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
      <PageHeader
        sticky
        titleAs="h2"
        title={
          <span data-testid="page-title">
            {t("ui.admin.users.list.title", "사용자 관리")}
          </span>
        }
        description={t(
          "msg.admin.users.list.subtitle",
          "시스템 사용자를 조회하고 관리합니다.",
        )}
        actions={
          <>
            <SearchFilterBar
              primary={
                <>
                  <div className="relative w-48">
                    <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                    <Input
                      placeholder={t(
                        "ui.admin.users.list.search_placeholder",
                        "이름 또는 이메일 검색...",
                      )}
                      className="h-9 pl-9"
                      value={searchDraft}
                      onChange={(e) => setSearchDraft(e.target.value)}
                      onKeyDown={handleKeyDown}
                    />
                  </div>

                  <select
                    className="flex h-9 w-[160px] rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:opacity-50"
                    value={selectedCompany}
                    onChange={(e) => {
                      setSelectedCompany(e.target.value);
                      setPage(1);
                    }}
                    disabled={profile?.role === "tenant_admin"}
                  >
                    <option value="">
                      {t("ui.common.all", "전체 테넌트")}
                    </option>
                    {tenants.map((t) => (
                      <option key={t.id} value={t.slug}>
                        {t.name}
                      </option>
                    ))}
                  </select>

                  <Button
                    variant="secondary"
                    size="sm"
                    onClick={handleSearch}
                    className="h-9"
                  >
                    {t("ui.common.search", "검색")}
                  </Button>
                </>
              }
            />

            <Button
              variant="outline"
              size="sm"
              className="h-9"
              onClick={() => query.refetch()}
              disabled={query.isFetching}
            >
              <RefreshCw size={16} />
              {t("ui.common.refresh", "새로고침")}
            </Button>
            <Button
              variant="outline"
              onClick={() => handleExport(false)}
              className="gap-2"
              disabled={exportMutation.isPending}
              data-testid="user-export-without-ids-btn"
            >
              <FileDown size={16} />
              {t("ui.common.export_without_ids", "UUID 제외 내보내기")}
            </Button>
            <Button
              variant="outline"
              onClick={() => handleExport(true)}
              className="gap-2"
              disabled={exportMutation.isPending}
              data-testid="user-export-with-ids-btn"
            >
              <FileDown size={16} />
              {t("ui.common.export_with_ids", "UUID 포함")}
            </Button>
            <UserBulkUploadModal onSuccess={() => query.refetch()} />
            <Dialog>
              <DialogTrigger asChild>
                <Button variant="outline" size="icon" className="h-9 w-9">
                  <Settings2 size={16} />
                </Button>
              </DialogTrigger>
              <DialogContent>
                <DialogHeader>
                  <DialogTitle>
                    {t("ui.admin.users.list.columns.title", "표시 컬럼 설정")}
                  </DialogTitle>
                  <DialogDescription>
                    {t(
                      "msg.admin.users.list.columns.description",
                      "사용자 목록에 표시할 커스텀 필드를 선택하세요.",
                    )}
                  </DialogDescription>
                </DialogHeader>
                <div className="grid gap-4 py-4">
                  {userSchema.length === 0 && (
                    <p className="py-4 text-center text-sm text-muted-foreground">
                      {t(
                        "msg.admin.users.list.columns.no_custom",
                        "현재 테넌트에 정의된 커스텀 필드가 없습니다.",
                      )}
                    </p>
                  )}
                  {userSchema.map((field) => (
                    <label
                      key={field.key}
                      className="flex cursor-pointer items-center gap-3 rounded-lg p-2 hover:bg-muted/50"
                    >
                      <input
                        type="checkbox"
                        className="h-4 w-4 rounded border-gray-300 text-primary focus:ring-primary"
                        checked={visibleColumns[field.key] !== false}
                        onChange={() => toggleColumn(field.key)}
                      />
                      <div className="flex flex-col">
                        <span className="text-sm font-medium">
                          {field.label}
                        </span>
                        <span className="font-mono text-xs text-muted-foreground">
                          {field.key}
                        </span>
                      </div>
                    </label>
                  ))}
                </div>
                <DialogFooter>
                  <DialogTrigger asChild>
                    <Button variant="secondary">
                      {t("ui.common.close", "닫기")}
                    </Button>
                  </DialogTrigger>
                </DialogFooter>
              </DialogContent>
            </Dialog>
            <Button asChild size="sm" className="h-9">
              <Link to="/users/new">
                <Plus size={16} />
                {t("ui.admin.users.list.add", "사용자 추가")}
              </Link>
            </Button>
          </>
        }
      />

      <Card className="flex-1 flex flex-col min-h-0 bg-[var(--color-panel)] overflow-hidden">
        <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
          <div>
            <CardTitle>
              {t("ui.admin.users.list.registry.title", "User Registry")}
            </CardTitle>
            <CardDescription>
              {t(
                "msg.admin.users.list.registry.count",
                "총 {{count}}명의 사용자가 등록되어 있습니다.",
                { count: total },
              )}
            </CardDescription>
          </div>
        </CardHeader>
        <CardContent className="flex-1 flex flex-col min-h-0 pt-0">
          {(errorMsg || fallbackError) && (
            <div className="mb-4 rounded-lg border border-destructive/40 bg-destructive/10 px-3 py-2 text-sm text-destructive flex-shrink-0">
              {errorMsg ?? fallbackError}
            </div>
          )}

          <div className={commonTableShellClass}>
            <div className={commonTableViewportClass}>
              <Table>
                <TableHeader className={sortableTableHeaderClassName}>
                  <TableRow>
                    <TableHead
                      className={`${sortableTableHeadBaseClassName} w-12`}
                    >
                      <input
                        type="checkbox"
                        className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer"
                        checked={
                          items.length > 0 &&
                          selectedUserIds.length === items.length
                        }
                        onChange={toggleSelectAll}
                      />
                    </TableHead>
                    <TableHead
                      className="min-w-[120px] whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
                      onClick={() => requestSort("name")}
                    >
                      <div className="flex items-center">
                        {t("ui.admin.users.list.table.name", "이름")}
                        {getSortIcon("name")}
                      </div>
                    </TableHead>
                    <TableHead
                      className="min-w-[180px] whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
                      onClick={() => requestSort("email")}
                    >
                      <div className="flex items-center">
                        {t("ui.admin.users.list.table.email", "이메일")}
                        {getSortIcon("email")}
                      </div>
                    </TableHead>
                    <TableHead
                      className="min-w-[140px] whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
                      onClick={() => requestSort("phone")}
                    >
                      <div className="flex items-center">
                        {t("ui.admin.users.list.table.phone", "전화번호")}
                        {getSortIcon("phone")}
                      </div>
                    </TableHead>
                    <TableHead
                      className="min-w-[220px] whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
                      onClick={() => requestSort("id")}
                    >
                      <div className="flex items-center">
                        {t("ui.admin.users.list.table.id", "ID")}
                        {getSortIcon("id")}
                      </div>
                    </TableHead>
                    <TableHead
                      className="whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
                      onClick={() => requestSort("status")}
                    >
                      <div className="flex items-center">
                        {t("ui.admin.users.list.table.status", "STATUS")}
                        {getSortIcon("status")}
                      </div>
                    </TableHead>
                    <TableHead
                      className="whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
                      onClick={() => requestSort("role")}
                    >
                      <div className="flex items-center">
                        {t("ui.admin.users.list.table.role", "ROLE")}
                        {getSortIcon("role")}
                      </div>
                    </TableHead>
                    <TableHead
                      className="whitespace-nowrap cursor-pointer hover:bg-muted/50 transition-colors"
                      onClick={() => requestSort("tenant_dept")}
                    >
                      <div className="flex items-center">
                        {t(
                          "ui.admin.users.list.table.tenant_dept",
                          "TENANT / DEPT",
                        )}
                        {getSortIcon("tenant_dept")}
                      </div>
                    </TableHead>
                    {/* Dynamic Columns from Schema */}
                    {userSchema.map(
                      (field) =>
                        visibleColumns[field.key] !== false && (
                          <SortableTableHead
                            key={field.key}
                            className="whitespace-nowrap"
                            label={field.label}
                            onSort={requestSort}
                            sortConfig={sortConfig}
                            sortKey={field.key}
                          />
                        ),
                    )}
                    <SortableTableHead
                      className="whitespace-nowrap"
                      label={t("ui.admin.users.list.table.created", "CREATED")}
                      onSort={requestSort}
                      sortConfig={sortConfig}
                      sortKey="createdAt"
                    />
                  </TableRow>
                </TableHeader>
                <TableBody>
                  {query.isLoading && (
                    <TableRow>
                      <TableCell
                        colSpan={7 + userSchema.length}
                        className="h-24 text-center"
                      >
                        {t("msg.common.loading", "로딩 중...")}
                      </TableCell>
                    </TableRow>
                  )}
                  {!query.isLoading && items.length === 0 && (
                    <TableRow>
                      <TableCell
                        colSpan={7 + userSchema.length}
                        className="h-24 text-center"
                      >
                        {t(
                          "msg.admin.users.list.empty",
                          "검색 결과가 없습니다.",
                        )}
                      </TableCell>
                    </TableRow>
                  )}
                  {items.map((user) => (
                    <TableRow
                      key={user.id}
                      className={
                        selectedUserIds.includes(user.id) ? "bg-primary/5" : ""
                      }
                    >
                      <TableCell>
                        <input
                          type="checkbox"
                          className="w-4 h-4 rounded border-gray-300 text-primary focus:ring-primary cursor-pointer disabled:opacity-30 disabled:cursor-not-allowed"
                          checked={selectedUserIds.includes(user.id)}
                          onChange={() => toggleSelectUser(user.id)}
                          disabled={user.id === profile?.id}
                          title={
                            user.id === profile?.id
                              ? t(
                                  "msg.admin.users.self_delete_blocked",
                                  "본인 계정은 삭제할 수 없습니다.",
                                )
                              : undefined
                          }
                        />
                      </TableCell>
                      <TableCell>
                        <Link
                          to={`/users/${user.id}`}
                          className="font-medium hover:underline text-primary truncate block max-w-[150px]"
                          title={user.name}
                        >
                          {user.name}
                        </Link>
                      </TableCell>
                      <TableCell
                        className="text-sm text-muted-foreground truncate max-w-[200px]"
                        title={user.email}
                      >
                        {user.email}
                      </TableCell>
                      <TableCell className="text-sm text-muted-foreground whitespace-nowrap">
                        {user.phone || "-"}
                      </TableCell>
                      <TableCell
                        className="max-w-[220px] break-all font-mono text-xs text-muted-foreground"
                        data-testid={`user-internal-id-${user.id}`}
                      >
                        {user.id}
                      </TableCell>
                      <TableCell>
                        <Select
                          value={normalizeUserStatusValue(user.status)}
                          onValueChange={(status) =>
                            statusMutation.mutate({
                              userId: user.id,
                              status,
                            })
                          }
                          disabled={
                            statusMutation.isPending || user.id === profile?.id
                          }
                        >
                          <SelectTrigger
                            className="h-8 w-[150px] border-none bg-transparent hover:bg-muted/50 transition-colors px-0 font-medium"
                            aria-label={t(
                              "ui.admin.users.list.change_status",
                              "{{name}} 상태 변경",
                              { name: user.name },
                            )}
                            data-testid={`user-status-select-${user.id}`}
                          >
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            {userStatusValues.map((status) => (
                              <SelectItem key={status} value={status}>
                                {userStatusLabel(status)}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </TableCell>
                      <TableCell>
                        <Select
                          value={assignableSystemRoleValue(user.role)}
                          onValueChange={(value) =>
                            bulkUpdateMutation.mutate({
                              userIds: [user.id],
                              role: value,
                            })
                          }
                          disabled={
                            bulkUpdateMutation.isPending ||
                            !isSuperAdminRole(profile?.role) ||
                            user.id === profile?.id
                          }
                        >
                          <SelectTrigger className="h-8 w-[140px] border-none bg-transparent hover:bg-muted/50 transition-colors px-0 font-medium">
                            <SelectValue />
                          </SelectTrigger>
                          <SelectContent>
                            {bulkPermissionOptions.map((option) => (
                              <SelectItem
                                key={option.value}
                                value={option.value}
                              >
                                {t(option.labelKey, option.fallback)}
                              </SelectItem>
                            ))}
                          </SelectContent>
                        </Select>
                      </TableCell>
                      <TableCell>
                        <div className="flex flex-col gap-1">
                          <span className="text-sm font-medium">
                            {user.tenant?.name ||
                              user.tenantSlug ||
                              t("ui.common.unassigned", "미배정")}
                          </span>
                          {user.department && (
                            <span className="text-xs text-muted-foreground">
                              {user.department}
                            </span>
                          )}
                        </div>
                      </TableCell>
                      {/* Dynamic Metadata Cells */}
                      {userSchema.map(
                        (field) =>
                          visibleColumns[field.key] !== false && (
                            <TableCell key={field.key} className="text-sm">
                              {String(user.metadata?.[field.key] ?? "-")}
                            </TableCell>
                          ),
                      )}
                      <TableCell className="text-sm text-muted-foreground">
                        {new Date(user.createdAt).toLocaleDateString()}
                      </TableCell>
                    </TableRow>
                  ))}
                </TableBody>
              </Table>
            </div>
          </div>

          {/* Bulk Action Bar */}
          {selectedUserIds.length > 0 && (
            <div
              className="fixed bottom-8 left-1/2 -translate-x-1/2 z-50 flex items-center gap-4 px-6 py-3 rounded-2xl bg-foreground text-background shadow-2xl animate-in slide-in-from-bottom-4 duration-300"
              data-testid="bulk-action-bar"
            >
              <span className="text-sm font-medium border-r border-background/20 pr-4 mr-2">
                {t("ui.admin.users.bulk.selected_count", "{{count}}명 선택됨", {
                  count: selectedUserIds.length,
                })}
              </span>
              <div className="flex items-center gap-2">
                <Select
                  value={selectedBulkStatus}
                  onValueChange={(value) =>
                    setSelectedBulkStatus(value as UserStatusValue)
                  }
                >
                  <SelectTrigger
                    className="h-8 w-[120px] bg-transparent border-background/20 text-background text-xs"
                    data-testid="bulk-status-select"
                  >
                    <SelectValue
                      placeholder={t(
                        "ui.admin.users.bulk.status_placeholder",
                        "상태 선택",
                      )}
                    />
                  </SelectTrigger>
                  <SelectContent>
                    {userStatusValues.map((status) => (
                      <SelectItem key={status} value={status}>
                        {userStatusLabel(status)}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {canPromoteSuperAdmin && (
                  <Select
                    value={selectedBulkPermission}
                    onValueChange={setSelectedBulkPermission}
                  >
                    <SelectTrigger
                      className="h-8 w-[120px] bg-transparent border-background/20 text-background text-xs"
                      data-testid="bulk-permission-select"
                    >
                      <SelectValue
                        placeholder={t(
                          "ui.admin.users.bulk.permission_placeholder",
                          "권한 선택",
                        )}
                      />
                    </SelectTrigger>
                    <SelectContent>
                      {bulkPermissionOptions.map((option) => (
                        <SelectItem key={option.value} value={option.value}>
                          {t(option.labelKey, option.fallback)}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                )}
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-background hover:bg-background/10 h-8 gap-1.5"
                  onClick={() => {
                    const payload: {
                      userIds: string[];
                      status?: UserStatusValue;
                      role?: string;
                    } = { userIds: selectedUserIds };
                    let hasChanges = false;
                    if (selectedBulkStatus) {
                      payload.status = selectedBulkStatus;
                      hasChanges = true;
                    }
                    if (selectedBulkPermission && canPromoteSuperAdmin) {
                      payload.role = selectedBulkPermission;
                      hasChanges = true;
                    }
                    if (hasChanges) {
                      bulkUpdateMutation.mutate(payload);
                    }
                  }}
                  disabled={
                    (!selectedBulkStatus && !selectedBulkPermission) ||
                    bulkUpdateMutation.isPending
                  }
                  data-testid="bulk-apply-btn"
                >
                  <ShieldCheck size={14} />
                  {t("ui.common.apply", "적용")}
                </Button>
                <div className="w-px h-4 bg-background/20 mx-1" />
                <Button
                  variant="ghost"
                  size="sm"
                  className="text-destructive-foreground hover:bg-destructive/20 h-8 gap-1.5"
                  onClick={handleBulkDelete}
                  data-testid="bulk-delete-btn"
                >
                  <Trash2 size={14} />
                  {t("ui.common.delete", "삭제")}
                </Button>
              </div>
              <Button
                variant="ghost"
                size="icon"
                className="text-background/50 hover:text-background h-8 w-8 ml-2"
                onClick={() => setSelectedUserIds([])}
                aria-label={t("ui.common.close", "닫기")}
                data-testid="bulk-close-btn"
              >
                <Plus size={16} className="rotate-45" />
              </Button>
            </div>
          )}

          {/* Pagination */}
          {totalPages > 1 && (
            <div className="mt-4 flex flex-shrink-0 items-center justify-end gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={() => setPage((p) => Math.max(1, p - 1))}
                disabled={page === 1 || query.isFetching}
              >
                <ChevronLeft size={16} />
                {t("ui.common.previous", "Previous")}
              </Button>
              <div className="text-sm text-muted-foreground">
                {t("ui.common.page_of", "Page {{page}} of {{total}}", {
                  page,
                  total: totalPages,
                })}
              </div>
              <Button
                variant="outline"
                size="sm"
                onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
                disabled={page === totalPages || query.isFetching}
              >
                {t("ui.common.next", "Next")}
                <ChevronRight size={16} />
              </Button>
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  );
}

export default UserListPage;