import {
  type UseMutationResult,
  useInfiniteQuery,
  useMutation,
  useQuery,
} from "@tanstack/react-query";
import { useVirtualizer } from "@tanstack/react-virtual";
import type { AxiosError } from "axios";
import {
  ArrowDown,
  ArrowUp,
  ArrowUpDown,
  Building2,
  ChevronDown,
  ChevronRight,
  Download,
  ExternalLink,
  FileSpreadsheet,
  LayoutDashboard,
  List,
  Network,
  Plus,
  RefreshCw,
  Search,
  Trash2,
  Upload,
} 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 {
  commonStickyTableHeaderClass,
  commonTableShellClass,
  commonTableViewportClass,
} from "../../../../../common/ui/table";
import { RoleGuard } from "../../../components/auth/RoleGuard";
import { Badge } from "../../../components/ui/badge";
import { Button } from "../../../components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "../../../components/ui/card";
import { Checkbox } from "../../../components/ui/checkbox";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "../../../components/ui/dialog";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "../../../components/ui/dropdown-menu";
import { Input } from "../../../components/ui/input";
import { ScrollArea } from "../../../components/ui/scroll-area";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../../../components/ui/select";
import { Separator } from "../../../components/ui/separator";
import { Switch } from "../../../components/ui/switch";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../../../components/ui/table";
import { toast } from "../../../components/ui/use-toast";
import type { UserProfileResponse } from "../../../lib/adminApi";
import {
  deleteTenant,
  deleteTenantsBulk,
  exportTenantsCSV,
  fetchMe,
  fetchTenants,
  importTenantsCSV,
  type TenantSummary,
  updateTenant,
} from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";
import { normalizeAdminRole } from "../../../lib/roles";
import { buildTenantFullTree, type TenantNode } from "../../../lib/tenantTree";
import {
  buildAuthenticatedOrgChartTenantPickerUrl,
  filterNonHanmacFamilyTenants,
  isHanmacFamilyUser,
  parseOrgChartTenantSelection,
} from "../../users/orgChartPicker";
import { isSeedTenant } from "../utils/protectedTenants";
import {
  buildTenantImportParentOptionGroups,
  buildTenantImportPreview,
  inferTenantImportRootParentSlug,
  parseTenantCSV,
  serializeTenantImportCSV,
  type TenantImportPreviewRow,
  type TenantImportResolution,
} from "../utils/tenantCsvImport";
import {
  filterTenantsByScope,
  getTenantViewRows,
  resolveTenantSelectionIds,
  type TenantViewMode,
  type TenantViewRow,
  tenantMatchesListSearch,
} from "./tenantListView";

const tenantCSVTemplate =
  "name,type,parent_tenant_slug,slug,memo,email_domain,visibility,org_unit_type\n";
const tenantPageSize = 500;
const tenantVirtualizationThreshold = 250;
const tenantEstimatedRowHeight = 73;
const tenantLoadAheadPx = 360;
const tenantLoadAheadRows = 30;

type TenantSortKey = keyof TenantSummary | "recursiveMemberCount";
type TenantListRow = TenantSummary & { recursiveMemberCount: number };

const getTenantIcon = (type?: string) => {
  switch (type?.toUpperCase()) {
    case "COMPANY_GROUP":
      return Network;
    case "ORGANIZATION":
    case "USER_GROUP":
      return Network;
    default:
      return Building2;
  }
};

const noImportParentRef = "__none__";

function tenantParentRef(tenantId: string) {
  return `tenant:${tenantId}`;
}

function previewParentRef(rowNumber: number) {
  return `row:${rowNumber}`;
}

function slugParentRef(slug: string) {
  return `slug:${slug}`;
}

function getImportParentGroupLabel(type: string) {
  switch (type) {
    case "COMPANY_GROUP":
      return t(
        "ui.admin.tenants.import_preview.parent_company_groups",
        "기존 Company Group",
      );
    case "COMPANY":
      return t(
        "ui.admin.tenants.import_preview.parent_companies",
        "기존 Company",
      );
    case "ORGANIZATION":
      return t(
        "ui.admin.tenants.import_preview.parent_organizations",
        "기존 Organization",
      );
    default:
      return type;
  }
}

function resolveDefaultImportParentRef(
  preview: TenantImportPreviewRow,
  previewRows: TenantImportPreviewRow[],
  tenants: TenantSummary[],
) {
  if (preview.row.parentTenantId) {
    const parentPreview = previewRows.find(
      (candidate) =>
        candidate.row.rowNumber !== preview.row.rowNumber &&
        candidate.row.tenantId === preview.row.parentTenantId,
    );
    if (parentPreview) {
      return previewParentRef(parentPreview.row.rowNumber);
    }
    return tenantParentRef(preview.row.parentTenantId);
  }
  if (!preview.row.parentTenantSlug) {
    return noImportParentRef;
  }

  const normalizedSlug = preview.row.parentTenantSlug.toLowerCase();
  const existingTenant = tenants.find(
    (tenant) => tenant.slug.toLowerCase() === normalizedSlug,
  );
  if (existingTenant) {
    return tenantParentRef(existingTenant.id);
  }

  const parentPreview = previewRows.find(
    (candidate) =>
      candidate.row.rowNumber !== preview.row.rowNumber &&
      candidate.row.slug.toLowerCase() === normalizedSlug,
  );
  if (parentPreview) {
    return previewParentRef(parentPreview.row.rowNumber);
  }

  return slugParentRef(preview.row.parentTenantSlug);
}

function selectedImportSlug(
  preview: TenantImportPreviewRow,
  selectedCreateSlugs: Record<number, string>,
) {
  return (
    selectedCreateSlugs[preview.row.rowNumber] || preview.defaultCreateSlug
  );
}

function resolveImportParentSelection(
  parentRef: string,
  previewRows: TenantImportPreviewRow[],
  selectedMatches: Record<number, string>,
  selectedCreateSlugs: Record<number, string>,
) {
  if (!parentRef || parentRef === noImportParentRef) {
    return { parentTenantId: "", parentTenantSlug: "" };
  }
  if (parentRef.startsWith("tenant:")) {
    return {
      parentTenantId: parentRef.slice("tenant:".length),
      parentTenantSlug: "",
    };
  }
  if (parentRef.startsWith("slug:")) {
    return { parentTenantSlug: parentRef.slice("slug:".length) };
  }
  if (parentRef.startsWith("row:")) {
    const rowNumber = Number(parentRef.slice("row:".length));
    const selected = selectedMatches[rowNumber] ?? "__create__";
    if (selected && selected !== "__create__") {
      return { parentTenantId: selected, parentTenantSlug: "" };
    }
    const parentPreview = previewRows.find(
      (preview) => preview.row.rowNumber === rowNumber,
    );
    return {
      parentTenantSlug: parentPreview
        ? selectedImportSlug(parentPreview, selectedCreateSlugs)
        : "",
    };
  }
  return {};
}

function TenantListPage() {
  const navigate = useNavigate();
  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
  const [search, setSearch] = React.useState("");
  const [viewMode, setViewMode] = React.useState<TenantViewMode>("tree");
  const [scopeTenantId, setScopeTenantId] = React.useState("");
  const [scopePickerOpen, setScopePickerOpen] = React.useState(false);
  const [sortConfig, setSortConfig] =
    React.useState<SortConfig<TenantSortKey> | null>({
      key: "createdAt",
      direction: "desc",
    });
  const fileInputRef = React.useRef<HTMLInputElement | null>(null);
  const [importMessage, setImportMessage] = React.useState("");
  const [previewRows, setPreviewRows] = React.useState<
    TenantImportPreviewRow[]
  >([]);
  const [selectedMatches, setSelectedMatches] = React.useState<
    Record<number, string>
  >({});
  const [selectedCreateSlugs, setSelectedCreateSlugs] = React.useState<
    Record<number, string>
  >({});
  const [selectedParentRefs, setSelectedParentRefs] = React.useState<
    Record<number, string>
  >({});
  const [previewOpen, setPreviewOpen] = React.useState(false);
  const [selectedBulkStatus, setSelectedBulkStatus] = React.useState("");
  const tenantTableScrollRef = React.useRef<HTMLDivElement | null>(null);

  const { data: profile } = useQuery({
    queryKey: ["me"],
    queryFn: fetchMe,
  });
  const profileRole = normalizeAdminRole(profile?.role);

  // Redirect tenant_admin ONLY if they have one or fewer manageable tenants in the list
  React.useEffect(() => {
    if (profile && profileRole === "tenant_admin") {
      const manageableCount = profile.manageableTenants?.length ?? 0;
      if (
        (manageableCount === 1 || manageableCount === 0) &&
        profile.tenantId
      ) {
        navigate(`/tenants/${profile.tenantId}`, { replace: true });
      }
    }
  }, [profile, profileRole, navigate]);

  const query = useInfiniteQuery({
    queryKey: ["tenants", "lazy"],
    queryFn: ({ pageParam }) =>
      fetchTenants(
        tenantPageSize,
        0,
        undefined,
        pageParam ? pageParam : undefined,
      ),
    initialPageParam: "",
    getNextPageParam: (lastPage) =>
      lastPage.nextCursor || lastPage.next_cursor || undefined,
    enabled:
      profileRole === "super_admin" ||
      (profileRole === "tenant_admin" &&
        (profile?.manageableTenants?.length ?? 0) > 1),
  });

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

  const deleteBulkMutation = useMutation({
    mutationFn: (ids: string[]) => deleteTenantsBulk(ids),
    onSuccess: () => {
      setSelectedIds([]);
      query.refetch();
    },
  });

  const statusMutation = useMutation({
    mutationFn: ({ tenantId, status }: { tenantId: string; status: string }) =>
      updateTenant(tenantId, { status }),
    onSuccess: () => {
      query.refetch();
    },
    onError: () => {
      toast.error(
        t("msg.admin.tenants.status_error", "테넌트 상태 변경에 실패했습니다."),
      );
    },
  });

  const bulkUpdateStatusMutation = useMutation({
    mutationFn: async ({
      tenantIds,
      status,
    }: {
      tenantIds: string[];
      status: string;
    }) => {
      // Execute sequential updates to avoid rate limits or partial failures
      await Promise.all(tenantIds.map((id) => updateTenant(id, { status })));
    },
    onSuccess: () => {
      query.refetch();
      setSelectedIds([]);
      setSelectedBulkStatus("");
      toast.success(
        t(
          "msg.admin.tenants.bulk.update_success",
          "선택한 테넌트들의 상태가 수정되었습니다.",
        ),
      );
    },
    onError: () => {
      toast.error(
        t(
          "msg.admin.tenants.bulk.update_error",
          "테넌트 일괄 상태 변경에 실패했습니다.",
        ),
      );
    },
  });

  const handleApplyBulkStatus = () => {
    if (selectedIds.length === 0 || !selectedBulkStatus) return;
    bulkUpdateStatusMutation.mutate({
      tenantIds: selectedIds,
      status: selectedBulkStatus,
    });
  };

  const exportMutation = useMutation({
    mutationFn: (includeIds: boolean) => exportTenantsCSV(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);
    },
  });

  const importMutation = useMutation({
    mutationFn: (file: File) => importTenantsCSV(file),
    onSuccess: (result) => {
      setImportMessage(
        t(
          "msg.admin.tenants.import_result",
          "생성 {{created}}, 갱신 {{updated}}, 실패 {{failed}}",
          {
            created: result.created,
            updated: result.updated,
            failed: result.failed,
          },
        ),
      );
      setPreviewOpen(false);
      setPreviewRows([]);
      setSelectedMatches({});
      setSelectedParentRefs({});
      query.refetch();
    },
    onError: (error: AxiosError<{ error?: string }>) => {
      setImportMessage(
        error.response?.data?.error ??
          t(
            "msg.admin.tenants.import_error",
            "테넌트 가져오기에 실패했습니다.",
          ),
      );
    },
  });

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

  const tenantPages = React.useMemo(
    () => query.data?.pages ?? [],
    [query.data?.pages],
  );
  const rawTenants = React.useMemo(
    () => tenantPages.flatMap((page) => page.items),
    [tenantPages],
  );
  const tenantTotal = tenantPages[0]?.total ?? 0;
  const hanmacFamilyTenantId = React.useMemo(() => {
    const envTenantId = import.meta.env.VITE_HANMAC_FAMILY_TENANT_ID;
    if (typeof envTenantId === "string" && envTenantId.trim()) {
      return envTenantId.trim();
    }
    return rawTenants.find((tenant) => tenant.slug === "hanmac-family")?.id;
  }, [rawTenants]);
  const allTenants = React.useMemo(() => {
    if (profileRole === "super_admin") {
      return rawTenants;
    }
    if (
      profile &&
      isHanmacFamilyUser(profile, rawTenants, hanmacFamilyTenantId)
    ) {
      return rawTenants;
    }
    return filterNonHanmacFamilyTenants(rawTenants, hanmacFamilyTenantId);
  }, [hanmacFamilyTenantId, profile, profileRole, rawTenants]);
  const scopedTenants = React.useMemo(
    () => filterTenantsByScope(allTenants, scopeTenantId),
    [allTenants, scopeTenantId],
  );
  const selectedScopeTenant = React.useMemo(
    () => allTenants.find((tenant) => tenant.id === scopeTenantId),
    [allTenants, scopeTenantId],
  );
  const scopePickerUrl = buildAuthenticatedOrgChartTenantPickerUrl(
    import.meta.env.ORGFRONT_URL,
    hanmacFamilyTenantId ? { tenantId: hanmacFamilyTenantId } : {},
  );
  const importParentOptionGroups =
    buildTenantImportParentOptionGroups(allTenants);

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

  const getSortIcon = (key: TenantSortKey) => {
    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 deletableTenants = React.useMemo(
    () => scopedTenants.filter((tenant) => !isSeedTenant(tenant)),
    [scopedTenants],
  );

  React.useEffect(() => {
    const selectableIds = new Set(deletableTenants.map((tenant) => tenant.id));
    setSelectedIds((prev) => {
      const next = prev.filter((id) => selectableIds.has(id));
      if (next.length === prev.length) {
        return prev;
      }
      return next;
    });
  }, [deletableTenants]);

  React.useEffect(() => {
    if (!scopePickerOpen) return;

    const onMessage = (event: MessageEvent) => {
      const selection = parseOrgChartTenantSelection(event.data);
      if (!selection) return;
      if (!allTenants.some((tenant) => tenant.id === selection.id)) return;

      setScopeTenantId(selection.id);
      setScopePickerOpen(false);
    };

    window.addEventListener("message", onMessage);
    return () => window.removeEventListener("message", onMessage);
  }, [allTenants, scopePickerOpen]);

  if (
    profile &&
    profileRole !== "super_admin" &&
    profileRole !== "tenant_admin"
  ) {
    return (
      <div className="flex h-[50vh] flex-col items-center justify-center space-y-4">
        <h3 className="text-lg font-bold">
          {t("msg.admin.common.forbidden", "접근 권한이 없습니다.")}
        </h3>
        <Button onClick={() => navigate("/")}>
          {t("ui.common.go_home", "홈으로 이동")}
        </Button>
      </div>
    );
  }

  if (
    profileRole === "tenant_admin" &&
    (profile?.manageableTenants?.length ?? 0) <= 1
  ) {
    return null;
  }

  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedIds(deletableTenants.map((t) => t.id));
    } else {
      setSelectedIds([]);
    }
  };

  const handleSelect = (tenant: TenantSummary, checked: boolean) => {
    if (isSeedTenant(tenant)) {
      return;
    }
    setSelectedIds((prev) =>
      resolveTenantSelectionIds({
        currentIds: prev,
        tenant,
        checked,
        tenants: allTenants,
        deletableTenants,
      }),
    );
  };

  const handleDeleteBulk = () => {
    if (selectedIds.length === 0) return;
    const deletableIds = selectedIds.filter((id) =>
      deletableTenants.some((tenant) => tenant.id === id),
    );
    if (deletableIds.length === 0) return;
    if (
      !window.confirm(
        t(
          "msg.admin.tenants.delete_bulk_confirm",
          "선택한 {{count}}개 테넌트를 삭제할까요?",
          { count: deletableIds.length },
        ),
      )
    ) {
      return;
    }
    deleteBulkMutation.mutate(deletableIds);
  };

  const handleTemplateDownload = () => {
    const blob = new Blob([tenantCSVTemplate], { type: "text/csv" });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.href = url;
    link.download = "tenant-import-template.csv";
    document.body.appendChild(link);
    link.click();
    link.remove();
    window.URL.revokeObjectURL(url);
  };

  const handleImportFile = async (
    event: React.ChangeEvent<HTMLInputElement>,
  ) => {
    const file = event.target.files?.[0];
    event.target.value = "";
    if (!file) return;
    setImportMessage("");
    const text = await file.text();
    const rows = parseTenantCSV(text, {
      rootParentSlug: inferTenantImportRootParentSlug(file.name, allTenants),
    });
    if (rows.length === 0) {
      setImportMessage(
        t("msg.admin.tenants.import_empty", "가져올 테넌트 행이 없습니다."),
      );
      return;
    }
    const preview = buildTenantImportPreview(rows, allTenants);
    setPreviewRows(preview);
    setSelectedMatches(
      Object.fromEntries(
        preview.map((row) => [
          row.row.rowNumber,
          row.defaultTenantId || "__create__",
        ]),
      ),
    );
    setSelectedCreateSlugs(
      Object.fromEntries(
        preview.map((row) => [row.row.rowNumber, row.defaultCreateSlug]),
      ),
    );
    setSelectedParentRefs(
      Object.fromEntries(
        preview.map((row) => [
          row.row.rowNumber,
          resolveDefaultImportParentRef(row, preview, allTenants),
        ]),
      ),
    );
    setPreviewOpen(true);
  };

  const handleImportConfirm = () => {
    const resolutions: Record<number, TenantImportResolution> =
      Object.fromEntries(
        previewRows.map((preview) => {
          const selected = selectedMatches[preview.row.rowNumber] ?? "";
          if (selected && selected !== "__create__") {
            return [
              preview.row.rowNumber,
              {
                mode: "existing",
                tenantId: selected,
                ...resolveImportParentSelection(
                  selectedParentRefs[preview.row.rowNumber] ??
                    resolveDefaultImportParentRef(
                      preview,
                      previewRows,
                      allTenants,
                    ),
                  previewRows,
                  selectedMatches,
                  selectedCreateSlugs,
                ),
              },
            ];
          }

          return [
            preview.row.rowNumber,
            {
              mode: "create",
              slug:
                selectedCreateSlugs[preview.row.rowNumber] ||
                preview.defaultCreateSlug,
              ...resolveImportParentSelection(
                selectedParentRefs[preview.row.rowNumber] ??
                  resolveDefaultImportParentRef(
                    preview,
                    previewRows,
                    allTenants,
                  ),
                previewRows,
                selectedMatches,
                selectedCreateSlugs,
              ),
            },
          ];
        }),
      );
    const csv = serializeTenantImportCSV(previewRows, resolutions);
    const file = new File([csv], "tenants.csv", { type: "text/csv" });
    importMutation.mutate(file);
  };

  const handleDelete = (tenantId: string, tenantName: string) => {
    const tenant = allTenants.find((item) => item.id === tenantId);
    if (tenant && isSeedTenant(tenant)) {
      return;
    }
    if (
      !window.confirm(
        t(
          "msg.admin.tenants.delete_confirm",
          '테넌트 "{{name}}"를 삭제할까요?',
          { name: tenantName },
        ),
      )
    ) {
      return;
    }
    deleteMutation.mutate(tenantId);
  };

  return (
    <div className="space-y-6 flex flex-col h-[calc(100vh-theme(spacing.32))]">
      <PageHeader
        sticky
        titleAs="h2"
        icon={<Building2 size={20} />}
        title={t("ui.admin.tenants.title", "테넌트 목록")}
        description={t(
          "msg.admin.tenants.subtitle",
          "시스템에 등록된 모든 테넌트를 평면 목록으로 확인하고 관리합니다.",
        )}
        actions={
          <>
            <div className="flex items-center gap-2">
              <div className="relative mr-2 w-64">
                <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                <Input
                  placeholder={t(
                    "ui.admin.tenants.list.search_placeholder",
                    "테넌트 이름, 슬러그, UUID 검색...",
                  )}
                  className="h-9 pl-9"
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                />
              </div>

              <div
                className="flex rounded-md border bg-background p-0.5"
                data-testid="tenant-view-mode-toggle"
              >
                <Button
                  type="button"
                  variant={viewMode === "tree" ? "default" : "ghost"}
                  size="sm"
                  className="h-8 gap-1.5"
                  aria-pressed={viewMode === "tree"}
                  onClick={() => setViewMode("tree")}
                  data-testid="tenant-view-tree-btn"
                >
                  <Network size={14} />
                  {t("ui.admin.tenants.view.tree", "트리")}
                </Button>
                <Button
                  type="button"
                  variant={viewMode === "table" ? "default" : "ghost"}
                  size="sm"
                  className="h-8 gap-1.5"
                  aria-pressed={viewMode === "table"}
                  onClick={() => setViewMode("table")}
                  data-testid="tenant-view-table-btn"
                >
                  <List size={14} />
                  {t("ui.admin.tenants.view.table", "평면")}
                </Button>
              </div>

              <Button
                type="button"
                variant={scopeTenantId ? "default" : "outline"}
                size="sm"
                className="h-9 gap-2"
                onClick={() => setScopePickerOpen(true)}
                data-testid="tenant-scope-picker-btn"
              >
                <Network size={16} />
                {selectedScopeTenant
                  ? t("ui.admin.tenants.scope.active", "{{name}} 하위", {
                      name: selectedScopeTenant.name,
                    })
                  : t("ui.admin.tenants.scope.pick", "상위 범위 선택")}
              </Button>
              {scopeTenantId ? (
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="h-9"
                  onClick={() => setScopeTenantId("")}
                  data-testid="tenant-scope-clear-btn"
                >
                  {t("ui.common.clear", "초기화")}
                </Button>
              ) : null}

              <RoleGuard roles={["super_admin"]}>
                <input
                  ref={fileInputRef}
                  type="file"
                  accept=".csv,text/csv"
                  className="hidden"
                  data-testid="tenant-import-input"
                  onChange={handleImportFile}
                />
                <DropdownMenu>
                  <DropdownMenuTrigger asChild>
                    <Button
                      variant="outline"
                      data-testid="tenant-data-mgmt-btn"
                      className="gap-2"
                    >
                      <LayoutDashboard size={16} />
                      {t("ui.admin.tenants.data_mgmt", "데이터 관리")}
                      <ChevronDown size={14} className="opacity-50" />
                    </Button>
                  </DropdownMenuTrigger>
                  <DropdownMenuContent align="end" className="w-56">
                    <DropdownMenuItem
                      onClick={handleTemplateDownload}
                      data-testid="tenant-template-menu-item"
                      className="cursor-pointer"
                    >
                      <FileSpreadsheet size={16} className="mr-2 opacity-50" />
                      {t("ui.admin.tenants.csv_template", "템플릿 다운로드")}
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem
                      onClick={() => fileInputRef.current?.click()}
                      disabled={importMutation.isPending}
                      data-testid="tenant-import-menu-item"
                      className="cursor-pointer"
                    >
                      <Upload size={16} className="mr-2 opacity-50" />
                      {t("ui.admin.tenants.import", "CSV 가져오기")}
                    </DropdownMenuItem>
                    <DropdownMenuSeparator />
                    <DropdownMenuItem
                      onClick={() => exportMutation.mutate(false)}
                      disabled={exportMutation.isPending}
                      data-testid="tenant-export-menu-item"
                      className="cursor-pointer"
                    >
                      <Download size={16} className="mr-2 opacity-50" />
                      {t(
                        "ui.admin.tenants.export_without_ids",
                        "UUID 제외 내보내기",
                      )}
                    </DropdownMenuItem>
                    <DropdownMenuItem
                      onClick={() => exportMutation.mutate(true)}
                      disabled={exportMutation.isPending}
                      data-testid="tenant-export-with-ids-menu-item"
                      className="cursor-pointer"
                    >
                      <Download size={16} className="mr-2 opacity-50" />
                      {t(
                        "ui.admin.tenants.export_with_ids",
                        "UUID 포함 내보내기",
                      )}
                    </DropdownMenuItem>
                  </DropdownMenuContent>
                </DropdownMenu>
              </RoleGuard>

              <Button
                variant="outline"
                onClick={() => query.refetch()}
                disabled={query.isFetching}
                className="w-9 px-0"
                title={t("ui.common.refresh", "새로고침")}
              >
                <RefreshCw size={16} />
                <span className="sr-only">
                  {t("ui.common.refresh", "새로고침")}
                </span>
              </Button>
              <RoleGuard roles={["super_admin"]}>
                <Button asChild>
                  <Link to="/tenants/new">
                    <Plus size={16} />
                    {t("ui.admin.tenants.add", "테넌트 추가")}
                  </Link>
                </Button>
              </RoleGuard>
            </div>
            {importMessage ? (
              <div
                className="rounded-md border border-border bg-secondary px-3 py-2 text-sm"
                data-testid="tenant-import-result"
              >
                {importMessage}
              </div>
            ) : null}
          </>
        }
      />

      <Card className="bg-[var(--color-panel)] flex-1 flex flex-col min-h-0 overflow-hidden">
        <CardHeader className="flex flex-row items-center justify-between flex-shrink-0">
          <div className="flex items-center gap-6">
            <div>
              <CardTitle className="text-lg font-bold flex items-center gap-2">
                {t("ui.admin.tenants.registry.title", "Tenant Registry")}
              </CardTitle>
              <CardDescription>
                {t(
                  "msg.admin.tenants.registry.count",
                  "총 {{count}}개의 테넌트가 등록되어 있습니다.",
                  {
                    count: scopeTenantId ? scopedTenants.length : tenantTotal,
                  },
                )}
              </CardDescription>
            </div>
          </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>
          )}

          <TenantHierarchyView
            tenants={allTenants}
            selectedIds={selectedIds}
            onSelect={handleSelect}
            onSelectAll={handleSelectAll}
            onDelete={handleDelete}
            isDeletePending={deleteMutation.isPending}
            search={search}
            deletableTenants={deletableTenants}
            statusMutation={statusMutation}
            profile={profile}
            sortConfig={sortConfig}
            requestSort={requestSort}
            getSortIcon={getSortIcon}
            viewMode={viewMode}
            scopeTenantId={scopeTenantId}
          />
        </CardContent>
      </Card>

      <Dialog open={scopePickerOpen} onOpenChange={setScopePickerOpen}>
        <DialogContent className="max-w-[480px] p-4">
          <DialogHeader>
            <DialogTitle>
              {t("ui.admin.tenants.scope.pick", "상위 범위 선택")}
            </DialogTitle>
            <DialogDescription>
              {t(
                "msg.admin.tenants.scope.description",
                "orgfront 조직 선택기에서 상위 테넌트를 선택하면 해당 하위 테넌트만 표시합니다.",
              )}
            </DialogDescription>
          </DialogHeader>
          <iframe
            title={t("ui.admin.tenants.scope.pick", "상위 범위 선택")}
            src={scopePickerUrl}
            className="h-[600px] w-full rounded-md border"
            data-testid="tenant-scope-picker-frame"
          />
        </DialogContent>
      </Dialog>

      {/* Bulk Action Bar */}
      {selectedIds.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="tenant-bulk-action-bar"
        >
          <span className="text-sm font-medium border-r border-background/20 pr-4 mr-2">
            {t("ui.admin.tenants.bulk.selected_count", "{{count}}개 선택됨", {
              count: selectedIds.length,
            })}
          </span>
          <div className="flex items-center gap-2">
            <Select
              value={selectedBulkStatus}
              onValueChange={setSelectedBulkStatus}
            >
              <SelectTrigger
                className="h-8 w-[150px] bg-transparent border-background/20 text-background text-xs"
                data-testid="tenant-bulk-status-select"
              >
                <SelectValue
                  placeholder={t(
                    "ui.admin.tenants.bulk.status_placeholder",
                    "상태 선택",
                  )}
                />
              </SelectTrigger>
              <SelectContent>
                {/* Available tenant status options */}
                <SelectItem value="active">
                  {t("ui.common.status.active", "활성화")}
                </SelectItem>
                <SelectItem value="inactive">
                  {t("ui.common.status.inactive", "비활성화")}
                </SelectItem>
              </SelectContent>
            </Select>
            <Button
              variant="ghost"
              size="sm"
              className="text-background hover:bg-background/10 h-8"
              onClick={handleApplyBulkStatus}
              disabled={
                !selectedBulkStatus || bulkUpdateStatusMutation.isPending
              }
              data-testid="tenant-bulk-apply-status-btn"
            >
              {t("ui.common.apply", "적용")}
            </Button>
            <div className="w-px h-4 bg-background/20 mx-1" />
            <RoleGuard roles={["super_admin"]}>
              <Button
                variant="ghost"
                size="sm"
                className="text-destructive-foreground hover:bg-destructive/20 h-8 gap-1.5"
                onClick={handleDeleteBulk}
                disabled={deleteBulkMutation.isPending}
                data-testid="tenant-bulk-delete-btn"
              >
                <Trash2 size={14} />
                {t("ui.common.delete", "삭제")}
              </Button>
            </RoleGuard>
          </div>
          <Button
            variant="ghost"
            size="icon"
            className="text-background/50 hover:text-background h-8 w-8 ml-2"
            onClick={() => setSelectedIds([])}
            aria-label={t("ui.common.close", "닫기")}
            data-testid="tenant-bulk-close-btn"
          >
            <Plus size={16} className="rotate-45" />
          </Button>
        </div>
      )}

      <Dialog open={previewOpen} onOpenChange={setPreviewOpen}>
        <DialogContent className="max-w-5xl">
          <DialogHeader>
            <DialogTitle>
              {t("ui.admin.tenants.import_preview.title", "CSV 가져오기 확인")}
            </DialogTitle>
            <DialogDescription>
              {t(
                "msg.admin.tenants.import_preview.description",
                "tenant_id가 없는 행은 기존 테넌트 후보와 비교한 뒤 신규 생성 또는 기존 테넌트 갱신으로 처리합니다.",
              )}
            </DialogDescription>
          </DialogHeader>

          <div className="max-h-[60vh] overflow-auto rounded-md border">
            <Table>
              <TableHeader className={commonStickyTableHeaderClass}>
                <TableRow>
                  <TableHead className="w-[72px]">
                    {t("ui.common.row", "행")}
                  </TableHead>
                  <TableHead>
                    {t("ui.admin.tenants.table.name", "NAME")}
                  </TableHead>
                  <TableHead>
                    {t("ui.admin.tenants.table.slug", "SLUG")}
                  </TableHead>
                  <TableHead>
                    {t("ui.admin.tenants.import_preview.parent", "상위")}
                  </TableHead>
                  <TableHead>
                    {t("ui.admin.tenants.import_preview.match", "매칭")}
                  </TableHead>
                  <TableHead>
                    {t("ui.admin.tenants.import_preview.candidates", "후보")}
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {previewRows.map((preview) => (
                  <TableRow
                    key={preview.row.rowNumber}
                    data-testid={`tenant-import-preview-row-${preview.row.rowNumber}`}
                  >
                    <TableCell className="font-mono text-xs">
                      {preview.row.rowNumber}
                    </TableCell>
                    <TableCell className="font-medium">
                      {preview.row.name}
                    </TableCell>
                    <TableCell className="font-mono text-xs">
                      {preview.row.slug}
                      {preview.conflicts.length > 0 && (
                        <div className="mt-1 flex flex-wrap gap-1">
                          {preview.conflicts.map((conflict) => (
                            <Badge
                              key={conflict}
                              variant="outline"
                              className="text-[10px]"
                            >
                              {conflict === "external_tenant_id"
                                ? t(
                                    "ui.admin.tenants.import_preview.external_id",
                                    "외부 ID",
                                  )
                                : conflict === "slug_exists"
                                  ? t(
                                      "ui.admin.tenants.import_preview.slug_exists",
                                      "slug 충돌",
                                    )
                                  : t(
                                      "ui.admin.tenants.import_preview.parent_unresolved",
                                      "부모 확인 필요",
                                    )}
                            </Badge>
                          ))}
                        </div>
                      )}
                    </TableCell>
                    <TableCell>
                      <select
                        className="h-9 w-full min-w-[220px] rounded-md border border-input bg-background px-3 text-sm"
                        value={
                          selectedParentRefs[preview.row.rowNumber] ??
                          resolveDefaultImportParentRef(
                            preview,
                            previewRows,
                            allTenants,
                          )
                        }
                        data-testid={`tenant-import-parent-select-${preview.row.rowNumber}`}
                        onChange={(event) =>
                          setSelectedParentRefs((prev) => ({
                            ...prev,
                            [preview.row.rowNumber]: event.target.value,
                          }))
                        }
                      >
                        <option value={noImportParentRef}>
                          {t("ui.common.none", "없음")}
                        </option>
                        {importParentOptionGroups.map((group) => (
                          <optgroup
                            key={group.type}
                            label={getImportParentGroupLabel(group.type)}
                          >
                            {group.tenants.map((tenant) => (
                              <option
                                key={tenant.id}
                                value={tenantParentRef(tenant.id)}
                              >
                                {tenant.name} ({tenant.slug}) - {tenant.type}
                              </option>
                            ))}
                          </optgroup>
                        ))}
                        <optgroup
                          label={t(
                            "ui.admin.tenants.import_preview.csv_parents",
                            "가져오기 CSV",
                          )}
                        >
                          {previewRows
                            .filter(
                              (candidate) =>
                                candidate.row.rowNumber !==
                                preview.row.rowNumber,
                            )
                            .map((candidate) => (
                              <option
                                key={candidate.row.rowNumber}
                                value={previewParentRef(
                                  candidate.row.rowNumber,
                                )}
                              >
                                {candidate.row.name} (
                                {selectedImportSlug(
                                  candidate,
                                  selectedCreateSlugs,
                                )}
                                )
                              </option>
                            ))}
                        </optgroup>
                        {(
                          selectedParentRefs[preview.row.rowNumber] ??
                          resolveDefaultImportParentRef(
                            preview,
                            previewRows,
                            allTenants,
                          )
                        ).startsWith("slug:") && (
                          <option
                            value={
                              selectedParentRefs[preview.row.rowNumber] ??
                              resolveDefaultImportParentRef(
                                preview,
                                previewRows,
                                allTenants,
                              )
                            }
                          >
                            {preview.row.parentTenantSlug}
                          </option>
                        )}
                      </select>
                    </TableCell>
                    <TableCell>
                      <div className="space-y-2">
                        <select
                          className="h-9 w-full rounded-md border border-input bg-background px-3 text-sm"
                          value={
                            selectedMatches[preview.row.rowNumber] ??
                            "__create__"
                          }
                          data-testid={`tenant-import-match-select-${preview.row.rowNumber}`}
                          onChange={(event) =>
                            setSelectedMatches((prev) => ({
                              ...prev,
                              [preview.row.rowNumber]: event.target.value,
                            }))
                          }
                        >
                          <option value="__create__">
                            {t(
                              "ui.admin.tenants.import_preview.create_new_reset",
                              "신규 생성 (ID/slug 재설정)",
                            )}
                          </option>
                          {preview.candidates.map((candidate) => (
                            <option
                              key={candidate.tenantId}
                              value={candidate.tenantId}
                            >
                              {candidate.name} ({candidate.slug})
                            </option>
                          ))}
                        </select>
                        {(selectedMatches[preview.row.rowNumber] ??
                          "__create__") === "__create__" && (
                          <Input
                            value={
                              selectedCreateSlugs[preview.row.rowNumber] ?? ""
                            }
                            data-testid={`tenant-import-create-slug-${preview.row.rowNumber}`}
                            onChange={(event) =>
                              setSelectedCreateSlugs((prev) => ({
                                ...prev,
                                [preview.row.rowNumber]: event.target.value,
                              }))
                            }
                          />
                        )}
                      </div>
                    </TableCell>
                    <TableCell>
                      {preview.candidates.length > 0 ? (
                        <div className="flex flex-wrap gap-1">
                          {preview.candidates.map((candidate) => (
                            <Badge
                              key={candidate.tenantId}
                              variant={
                                candidate.score >= 0.95 ? "default" : "outline"
                              }
                              data-testid="tenant-import-candidate"
                            >
                              {candidate.name}{" "}
                              {Math.round(candidate.score * 100)}%
                            </Badge>
                          ))}
                        </div>
                      ) : (
                        <span className="text-sm text-muted-foreground">
                          {t(
                            "ui.admin.tenants.import_preview.no_candidates",
                            "후보 없음",
                          )}
                        </span>
                      )}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </div>

          <DialogFooter>
            <Button variant="outline" onClick={() => setPreviewOpen(false)}>
              {t("ui.common.cancel", "취소")}
            </Button>
            <Button
              onClick={handleImportConfirm}
              disabled={importMutation.isPending}
              data-testid="tenant-import-confirm-btn"
            >
              {t("ui.admin.tenants.import_preview.confirm", "가져오기 실행")}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

// --- Internal Support Components ---

const TenantHierarchyView: React.FC<{
  tenants: TenantSummary[];
  selectedIds: string[];
  onSelect: (tenant: TenantSummary, checked: boolean) => void;
  onSelectAll: (checked: boolean) => void;
  onDelete: (tenantId: string, tenantName: string) => void;
  isDeletePending: boolean;
  search: string;
  deletableTenants: TenantSummary[];
  statusMutation: UseMutationResult<
    TenantSummary,
    Error,
    { tenantId: string; status: string },
    unknown
  >;
  profile: UserProfileResponse | undefined;
  sortConfig: SortConfig<TenantSortKey> | null;
  requestSort: (key: TenantSortKey) => void;
  getSortIcon: (key: TenantSortKey) => React.ReactNode;
  viewMode: TenantViewMode;
  scopeTenantId: string;
}> = ({
  tenants,
  selectedIds,
  onSelect,
  onSelectAll,
  onDelete,
  isDeletePending,
  search,
  deletableTenants,
  statusMutation,
  profile,
  sortConfig,
  requestSort,
  getSortIcon,
  viewMode,
  scopeTenantId,
}) => {
  const { subTree } = React.useMemo(
    () => buildTenantFullTree(tenants, scopeTenantId || undefined),
    [scopeTenantId, tenants],
  );

  // Initial expanded state: everything open
  const [expandedIds, setExpandedIds] = React.useState<Set<string>>(() => {
    const ids = new Set<string>();
    const collect = (nodes: TenantNode[]) => {
      for (const n of nodes) {
        ids.add(n.id);
        if (n.children) collect(n.children);
      }
    };
    collect(subTree);
    return ids;
  });

  React.useEffect(() => {
    const ids = new Set<string>();
    const collect = (nodes: TenantNode[]) => {
      for (const n of nodes) {
        ids.add(n.id);
        if (n.children) collect(n.children);
      }
    };
    collect(subTree);
    setExpandedIds((prev) => new Set([...prev, ...ids]));
  }, [subTree]);

  const toggleExpand = (id: string) => {
    setExpandedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) {
        next.delete(id);
      } else {
        next.add(id);
      }
      return next;
    });
  };

  const tenantSortResolvers = React.useMemo<
    SortResolverMap<TenantNode, TenantSortKey>
  >(
    () => ({
      recursiveMemberCount: (tenant) => tenant.recursiveMemberCount,
    }),
    [],
  );

  const flattenedRows = React.useMemo(() => {
    if (viewMode === "table") {
      return sortItems(
        getTenantViewRows(tenants, "table", scopeTenantId).filter((tenant) =>
          tenantMatchesListSearch(tenant, search),
        ),
        sortConfig,
        tenantSortResolvers,
      );
    }

    const result: TenantViewRow[] = [];
    const term = search.toLowerCase().trim();

    // When searching, we show matched nodes and all their ancestors.
    const matchedIds = new Set<string>();
    if (term) {
      const findMatches = (nodes: TenantNode[]) => {
        for (const node of nodes) {
          if (tenantMatchesListSearch(node, term)) {
            matchedIds.add(node.id);
          }
          if (node.children) findMatches(node.children);
        }
      };
      findMatches(subTree);
    }

    const collect = (nodes: TenantNode[], depth: number) => {
      // Sort nodes at the current depth
      const sortedNodes = sortItems(nodes, sortConfig, tenantSortResolvers);

      for (const node of sortedNodes) {
        // If searching, show node if it matches OR any of its descendants match.
        const hasMatchingDescendant = (n: TenantNode): boolean => {
          if (matchedIds.has(n.id)) return true;
          return n.children.some(hasMatchingDescendant);
        };

        if (!term || hasMatchingDescendant(node)) {
          result.push({ ...node, depth });
          if (
            (term || expandedIds.has(node.id)) &&
            node.children &&
            node.children.length > 0
          ) {
            collect(node.children, depth + 1);
          }
        }
      }
    };
    collect(subTree, 0);
    return result;
  }, [
    expandedIds,
    scopeTenantId,
    search,
    sortConfig,
    subTree,
    tenantSortResolvers,
    tenants,
    viewMode,
  ]);

  const visibleSelectableIds = React.useMemo(
    () => new Set(deletableTenants.map((tenant) => tenant.id)),
    [deletableTenants],
  );
  const visibleSelectedCount = selectedIds.filter((id) =>
    visibleSelectableIds.has(id),
  ).length;

  return (
    <div className="flex-1 rounded-md border overflow-hidden flex flex-col mt-4">
      <div className="flex-1 overflow-auto relative custom-scrollbar">
        <Table className="min-w-[1180px]">
          <TableHeader className="sticky top-0 z-10 bg-secondary shadow-sm">
            <TableRow>
              <TableHead className="w-[48px] whitespace-nowrap">
                <Checkbox
                  checked={
                    deletableTenants.length > 0 &&
                    visibleSelectedCount === deletableTenants.length
                  }
                  onCheckedChange={(checked) => onSelectAll(!!checked)}
                />
              </TableHead>
              <TableHead
                className="min-w-[280px] cursor-pointer hover:bg-muted/50 transition-colors whitespace-nowrap"
                onClick={() => requestSort("name")}
              >
                <div className="flex items-center">
                  {t("ui.admin.tenants.table.name", "NAME")}
                  {getSortIcon("name")}
                </div>
              </TableHead>
              <TableHead
                className="min-w-[220px] cursor-pointer hover:bg-muted/50 transition-colors whitespace-nowrap"
                onClick={() => requestSort("id")}
              >
                <div className="flex items-center">
                  {t("ui.admin.tenants.table.id", "ID")}
                  {getSortIcon("id")}
                </div>
              </TableHead>
              <TableHead
                className="cursor-pointer hover:bg-muted/50 transition-colors whitespace-nowrap"
                onClick={() => requestSort("type")}
              >
                <div className="flex items-center">
                  {t("ui.admin.tenants.table.type", "TYPE")}
                  {getSortIcon("type")}
                </div>
              </TableHead>
              <TableHead
                className="cursor-pointer hover:bg-muted/50 transition-colors whitespace-nowrap"
                onClick={() => requestSort("slug")}
              >
                <div className="flex items-center">
                  {t("ui.admin.tenants.table.slug", "SLUG")}
                  {getSortIcon("slug")}
                </div>
              </TableHead>
              <TableHead
                className="cursor-pointer hover:bg-muted/50 transition-colors whitespace-nowrap"
                onClick={() => requestSort("status")}
              >
                <div className="flex items-center">
                  {t("ui.admin.tenants.table.status", "STATUS")}
                  {getSortIcon("status")}
                </div>
              </TableHead>
              <TableHead
                className="cursor-pointer hover:bg-muted/50 transition-colors whitespace-nowrap"
                onClick={() => requestSort("recursiveMemberCount")}
              >
                <div className="flex items-center">
                  {t("ui.admin.tenants.table.members", "MEMBERS")}
                  {getSortIcon("recursiveMemberCount")}
                </div>
              </TableHead>
              <TableHead
                className="cursor-pointer hover:bg-muted/50 transition-colors whitespace-nowrap"
                onClick={() => requestSort("updatedAt")}
              >
                <div className="flex items-center">
                  {t("ui.admin.tenants.table.updated", "UPDATED")}
                  {getSortIcon("updatedAt")}
                </div>
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {flattenedRows.length === 0 && (
              <TableRow>
                <TableCell
                  colSpan={8}
                  className="text-center py-8 text-muted-foreground"
                >
                  {t(
                    "msg.admin.tenants.empty",
                    "아직 등록된 테넌트가 없습니다.",
                  )}
                </TableCell>
              </TableRow>
            )}
            {flattenedRows.map((node) => {
              const hasChildren =
                viewMode === "tree" &&
                node.children &&
                node.children.length > 0;
              const isExpanded =
                viewMode === "tree" && (expandedIds.has(node.id) || !!search);
              const TypeIcon = getTenantIcon(node.type);

              return (
                <TableRow
                  key={node.id}
                  className={
                    selectedIds.includes(node.id) ? "bg-primary/5" : ""
                  }
                >
                  <TableCell className="text-center">
                    {isSeedTenant(node) ? (
                      <span className="inline-block h-4 w-4" />
                    ) : (
                      <Checkbox
                        checked={selectedIds.includes(node.id)}
                        onCheckedChange={(checked) => onSelect(node, !!checked)}
                      />
                    )}
                  </TableCell>
                  <TableCell className="font-semibold p-0">
                    <div
                      className="flex items-center h-full min-h-[3rem] py-1"
                      style={{ paddingLeft: `${node.depth * 28 + 12}px` }}
                    >
                      <div className="w-5 flex items-center justify-center mr-1.5 shrink-0">
                        {hasChildren && !search ? (
                          <button
                            type="button"
                            onClick={() => toggleExpand(node.id)}
                            className="p-0.5 hover:bg-black/5 rounded cursor-pointer transition-colors text-muted-foreground hover:text-foreground"
                          >
                            {isExpanded ? (
                              <ChevronDown size={16} />
                            ) : (
                              <ChevronRight size={16} />
                            )}
                          </button>
                        ) : (
                          node.depth > 0 && (
                            <div className="w-1 h-1 rounded-full bg-border" />
                          )
                        )}
                      </div>

                      <TypeIcon
                        size={14}
                        className="mr-2 text-muted-foreground shrink-0"
                      />

                      <div className="flex flex-wrap items-center gap-2 min-w-0">
                        <Link
                          to={`/tenants/${node.id}`}
                          className="hover:underline text-primary cursor-pointer truncate"
                        >
                          {node.name}
                        </Link>
                        {isSeedTenant(node) && (
                          <Badge
                            variant="secondary"
                            className="text-[10px] shrink-0"
                          >
                            {t("ui.admin.tenants.seed_badge", "초기 설정")}
                          </Badge>
                        )}
                      </div>
                    </div>
                  </TableCell>
                  <TableCell
                    className="max-w-[260px] break-all font-mono text-xs text-muted-foreground"
                    data-testid={`tenant-internal-id-${node.id}`}
                  >
                    {node.id}
                  </TableCell>
                  <TableCell className="whitespace-nowrap">
                    <Badge variant="outline" className="text-[10px] font-mono">
                      {node.type}
                    </Badge>
                  </TableCell>
                  <TableCell className="font-mono text-xs">
                    {node.slug}
                  </TableCell>
                  <TableCell className="whitespace-nowrap">
                    <div className="flex items-center gap-2">
                      <Switch
                        checked={node.status === "active"}
                        onCheckedChange={(checked) =>
                          statusMutation.mutate({
                            tenantId: node.id,
                            status: checked ? "active" : "inactive",
                          })
                        }
                        disabled={
                          statusMutation.isPending ||
                          node.id === profile?.tenantId ||
                          isSeedTenant(node)
                        }
                        aria-label={t(
                          "ui.admin.tenants.toggle_status",
                          "{{name}} 활성 상태",
                          { name: node.name },
                        )}
                      />
                      <span className="text-sm text-muted-foreground">
                        {t(`ui.common.status.${node.status}`, node.status)}
                      </span>
                    </div>
                  </TableCell>
                  <TableCell className="font-medium">
                    {node.recursiveMemberCount}
                  </TableCell>
                  <TableCell className="whitespace-nowrap text-xs">
                    {node.updatedAt
                      ? new Date(node.updatedAt).toLocaleString("ko-KR")
                      : "-"}
                  </TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </div>
    </div>
  );
};

export default TenantListPage;