import { 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,
  FileSpreadsheet,
  LayoutDashboard,
  List,
  Network,
  Plus,
  RefreshCw,
  Search,
  Trash2,
  Upload,
} from "lucide-react";
import * as React from "react";
import { Link, useNavigate, useOutletContext } from "react-router-dom";
import { PageHeader } from "../../../../../common/core/components/page";
import {
  type SortConfig,
  type SortResolverMap,
  sortItems,
  toggleSort,
} from "../../../../../common/core/utils";
import { SearchFilterBar } from "../../../../../common/ui/search-filter-bar";
import { commonStickyTableHeaderClass } from "../../../../../common/ui/table";
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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "../../../components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "../../../components/ui/table";
import { Tabs, TabsList, TabsTrigger } from "../../../components/ui/tabs";
import { toast } from "../../../components/ui/use-toast";
import {
  deleteTenantsBulk,
  exportTenantsCSV,
  fetchMe,
  fetchTenants,
  importTenantsCSV,
  type TenantImportDetail,
  type TenantImportResult,
  type TenantSummary,
  updateTenant,
} from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";
import { normalizeAdminRole } from "../../../lib/roles";
import { buildTenantFullTree, type TenantNode } from "../../../lib/tenantTree";
import { cn } from "../../../lib/utils";
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 {
  TENANT_VISIBILITY_OPTIONS,
  type TenantVisibility,
} from "../utils/orgConfig";
import {
  filterTenantsByScope,
  filterTenantViewRowsBySearch,
  getTenantSearchMatchIds,
  getTenantViewRows,
  resolveTenantSelectionIds,
  type TenantViewMode,
  type TenantViewRow,
} from "./tenantListView";

const tenantCSVTemplate =
  "name,type,parent_tenant_slug,slug,memo,email_domain,visibility,org_unit_type,worksmobile_sync\n";
const tenantPageSize = 500;
const _tenantVirtualizationThreshold = 250;
const _tenantEstimatedRowHeight = 73;
type TenantSortKey = keyof TenantSummary | "recursiveMemberCount";

const tenantTableHeadClassName =
  "h-9 px-3 py-1 text-xs leading-tight align-middle whitespace-nowrap";
const tenantTableHeadInteractiveClassName = `${tenantTableHeadClassName} cursor-pointer transition-colors hover:bg-muted/50`;
const tenantTableHeadContentClassName = "flex h-full items-center gap-1";
const _tenantLoadAheadPx = 360;
const _tenantLoadAheadRows = 30;
const backendTenantSortKeys = new Set<TenantSortKey>([
  "createdAt",
  "id",
  "name",
  "slug",
  "status",
  "type",
  "updatedAt",
]);
const bulkTenantTypeOptions = [
  { value: "COMPANY", label: "COMPANY (일반 기업)" },
  { value: "COMPANY_GROUP", label: "COMPANY_GROUP (그룹사/지주사)" },
  { value: "ORGANIZATION", label: "ORGANIZATION (정규 조직)" },
  { value: "USER_GROUP", label: "USER_GROUP (내부 부서/팀)" },
  { value: "PERSONAL", label: "PERSONAL (개인 워크스페이스)" },
] as const;

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

function getTenantTypeLabel(type?: string) {
  if (!type) return "-";
  return t(`domain.tenant_type.${type.toLowerCase()}`, type);
}

function splitTenantTypeLabel(label: string) {
  const match = label.match(/^(.*?)\s*(\(.+\))$/);
  if (!match) {
    return { primary: label, secondary: null as string | null };
  }
  return {
    primary: match[1].trim(),
    secondary: match[2].trim(),
  };
}

function abbreviateUuid(value: string) {
  const parts = value.split("-");
  if (parts.length < 4) {
    return value;
  }
  return `${parts.slice(0, 4).join("-")}-...`;
}

function getTenantTypeTextClass(type?: string) {
  switch (type?.toUpperCase()) {
    case "COMPANY_GROUP":
      return "text-sky-700";
    case "COMPANY":
      return "text-violet-700";
    case "ORGANIZATION":
      return "text-emerald-700";
    case "USER_GROUP":
      return "text-amber-700";
    case "PERSONAL":
      return "text-slate-700";
    default:
      return "text-muted-foreground";
  }
}

function buildTenantParentPathMap(tenants: TenantSummary[]) {
  const tenantById = new Map(tenants.map((tenant) => [tenant.id, tenant]));
  const pathMap = new Map<string, string[]>();

  for (const tenant of tenants) {
    const names: string[] = [];
    const visited = new Set<string>();
    let currentParentId = tenant.parentId;

    while (currentParentId && !visited.has(currentParentId)) {
      visited.add(currentParentId);
      const parent = tenantById.get(currentParentId);
      if (!parent) break;
      names.unshift(parent.name);
      currentParentId = parent.parentId;
    }

    pathMap.set(tenant.id, names);
  }

  return pathMap;
}

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 [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 [importResult, setImportResult] =
    React.useState<TenantImportResult | null>(null);
  const [importResultOpen, setImportResultOpen] = React.useState(false);
  const [importResultFilter, setImportResultFilter] = React.useState<
    "all" | "created" | "updated" | "failed" | "skipped"
  >("all");

  const filteredImportDetails = React.useMemo(() => {
    if (!importResult) return [];
    if (importResultFilter === "all") return importResult.details;
    if (importResultFilter === "failed")
      return importResult.details.filter((d: TenantImportDetail) => !d.success);
    return importResult.details.filter(
      (d: TenantImportDetail) => d.action === importResultFilter,
    );
  }, [importResult, importResultFilter]);
  const [search, setSearch] = React.useState("");
  const debouncedSearch = React.useDeferredValue(search.trim());
  const [selectedBulkStatus, setSelectedBulkStatus] = React.useState("");
  const [selectedBulkType, setSelectedBulkType] = React.useState("");
  const [selectedBulkVisibility, setSelectedBulkVisibility] = React.useState<
    TenantVisibility | ""
  >("");
  const _tenantTableScrollRef = React.useRef<HTMLDivElement | null>(null);

  const { data: profile } = useQuery({
    queryKey: ["me"],
    queryFn: fetchMe,
  });
  const profileRole = normalizeAdminRole(profile?.role);
  const isWritable =
    profileRole === "super_admin" ||
    !!profile?.systemPermissions?.manage_tenants;
  const backendSortKey =
    sortConfig && backendTenantSortKeys.has(sortConfig.key)
      ? sortConfig.key
      : undefined;

  const query = useInfiniteQuery({
    queryKey: [
      "tenants",
      "lazy",
      debouncedSearch,
      scopeTenantId,
      backendSortKey,
      sortConfig?.direction,
    ],
    queryFn: ({ pageParam }) =>
      fetchTenants(
        tenantPageSize,
        0,
        scopeTenantId || undefined,
        pageParam ? (pageParam as string) : undefined,
        debouncedSearch,
        backendSortKey,
        sortConfig?.direction,
      ),
    initialPageParam: "",
    getNextPageParam: (lastPage) =>
      lastPage.nextCursor || lastPage.next_cursor || undefined,
  });

  const rawTenants = React.useMemo(
    () => query.data?.pages.flatMap((page) => page.items) ?? [],
    [query.data?.pages],
  );

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

  const bulkUpdateTenantsMutation = useMutation({
    mutationFn: async ({
      tenantIds,
      status,
      type,
      visibility,
    }: {
      tenantIds: string[];
      status?: string;
      type?: string;
      visibility?: TenantVisibility;
    }) => {
      await Promise.all(
        tenantIds.map((id) => {
          const source = rawTenants.find((tenant) => tenant.id === id);
          return updateTenant(id, {
            ...(status ? { status } : {}),
            ...(type ? { type } : {}),
            ...(visibility
              ? { config: { ...(source?.config ?? {}), visibility } }
              : {}),
          });
        }),
      );
    },
    onSuccess: () => {
      query.refetch();
      setSelectedIds([]);
      setSelectedBulkStatus("");
      setSelectedBulkType("");
      setSelectedBulkVisibility("");
      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 && !selectedBulkType && !selectedBulkVisibility)
    ) {
      return;
    }
    bulkUpdateTenantsMutation.mutate({
      tenantIds: selectedIds,
      ...(selectedBulkStatus ? { status: selectedBulkStatus } : {}),
      ...(selectedBulkType ? { type: selectedBulkType } : {}),
      ...(selectedBulkVisibility ? { visibility: selectedBulkVisibility } : {}),
    });
  };

  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) => {
      setImportResult(result);
      setImportResultOpen(true);
      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 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" &&
    !profile?.systemPermissions?.tenants
  ) {
    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>
    );
  }

  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);
  };

  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="min-w-0 space-y-2">
            <SearchFilterBar
              primary={
                <>
                  <div className="relative w-56">
                    <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",
                        "이름 또는 슬러그, ID 검색",
                      )}
                      className="h-9 pl-9"
                      value={search}
                      onChange={(e) => setSearch(e.target.value)}
                      onKeyDown={(e) => {
                        if (e.key === "Enter") {
                          query.refetch();
                        }
                      }}
                    />
                  </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-9 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-9 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}
                </>
              }
              actions={
                <>
                  {isWritable && (
                    <>
                      <input
                        ref={fileInputRef}
                        name="tenant-import-file"
                        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 h-9"
                          >
                            <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>
                    </>
                  )}

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

      <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
                      : allTenants.length,
                  },
                )}
              </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}
            search={search}
            deletableTenants={deletableTenants}
            sortConfig={sortConfig}
            requestSort={requestSort}
            getSortIcon={getSortIcon}
            viewMode={viewMode}
            scopeTenantId={scopeTenantId}
            fetchNextPage={query.fetchNextPage}
            hasNextPage={!!query.hasNextPage}
            isFetchingNextPage={query.isFetchingNextPage}
            isLoading={query.isLoading}
          />
        </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>
            <Select
              value={selectedBulkType}
              onValueChange={setSelectedBulkType}
            >
              <SelectTrigger
                className="h-8 w-[180px] bg-transparent border-background/20 text-background text-xs"
                data-testid="tenant-bulk-type-select"
              >
                <SelectValue
                  placeholder={t(
                    "ui.admin.tenants.bulk.type_placeholder",
                    "유형 선택",
                  )}
                />
              </SelectTrigger>
              <SelectContent>
                {bulkTenantTypeOptions.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {t(
                      `domain.tenant_type.${option.value.toLowerCase()}`,
                      option.label,
                    )}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Select
              value={selectedBulkVisibility}
              onValueChange={(value) =>
                setSelectedBulkVisibility(value as TenantVisibility)
              }
            >
              <SelectTrigger
                className="h-8 w-[130px] bg-transparent border-background/20 text-background text-xs"
                data-testid="tenant-bulk-visibility-select"
              >
                <SelectValue
                  placeholder={t(
                    "ui.admin.tenants.bulk.visibility_placeholder",
                    "공개 범위",
                  )}
                />
              </SelectTrigger>
              <SelectContent>
                {TENANT_VISIBILITY_OPTIONS.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Button
              variant="ghost"
              size="sm"
              className="text-background hover:bg-background/10 h-8"
              onClick={handleApplyBulkStatus}
              disabled={
                (!selectedBulkStatus &&
                  !selectedBulkType &&
                  !selectedBulkVisibility) ||
                bulkUpdateTenantsMutation.isPending
              }
              data-testid="tenant-bulk-apply-btn"
            >
              {t("ui.common.apply", "적용")}
            </Button>
            <div className="w-px h-4 bg-background/20 mx-1" />
            {isWritable && (
              <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>
            )}
          </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={importResultOpen} onOpenChange={setImportResultOpen}>
        <DialogContent className="max-w-5xl">
          <DialogHeader>
            <DialogTitle>
              {t(
                "ui.admin.tenants.import_result.title",
                "가져오기 결과 리포트",
              )}
            </DialogTitle>
          </DialogHeader>

          {importResult && (
            <div
              className="grid grid-cols-4 gap-4 py-4"
              data-testid="tenant-import-report"
            >
              <div className="flex flex-col items-center rounded-lg border bg-muted/30 p-3 shadow-sm">
                <span className="text-[10px] font-bold tracking-wider text-muted-foreground uppercase">
                  Total
                </span>
                <span className="text-2xl font-bold">
                  {importResult.details.length}
                </span>
              </div>
              <div className="flex flex-col items-center rounded-lg border border-emerald-500/20 bg-emerald-500/5 p-3 shadow-sm">
                <span className="text-[10px] font-bold tracking-wider text-emerald-600 dark:text-emerald-400 uppercase">
                  Created
                </span>
                <span className="text-2xl font-bold text-emerald-600 dark:text-emerald-400">
                  {importResult.created}
                </span>
              </div>
              <div className="flex flex-col items-center rounded-lg border border-amber-500/20 bg-amber-500/5 p-3 shadow-sm">
                <span className="text-[10px] font-bold tracking-wider text-amber-600 dark:text-amber-400 uppercase">
                  Updated
                </span>
                <span className="text-2xl font-bold text-amber-600 dark:text-amber-400">
                  {importResult.updated}
                </span>
              </div>
              <div className="flex flex-col items-center rounded-lg border border-destructive/20 bg-destructive/5 p-3 shadow-sm">
                <span className="text-[10px] font-bold tracking-wider text-destructive uppercase">
                  Failed
                </span>
                <span className="text-2xl font-bold text-destructive">
                  {importResult.failed}
                </span>
              </div>
            </div>
          )}

          <Tabs
            value={importResultFilter}
            onValueChange={(v) =>
              setImportResultFilter(
                v as "all" | "created" | "updated" | "failed" | "skipped",
              )
            }
            className="w-full"
          >
            <TabsList className="grid h-11 w-full grid-cols-5 bg-muted/50 p-1">
              <TabsTrigger
                value="all"
                className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-primary data-[state=active]:shadow-sm"
              >
                ALL
              </TabsTrigger>
              <TabsTrigger
                value="created"
                className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-emerald-600 data-[state=active]:shadow-sm dark:data-[state=active]:text-emerald-400"
              >
                CREATED
              </TabsTrigger>
              <TabsTrigger
                value="updated"
                className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-amber-600 data-[state=active]:shadow-sm dark:data-[state=active]:text-amber-400"
              >
                UPDATED
              </TabsTrigger>
              <TabsTrigger
                value="failed"
                className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-destructive data-[state=active]:shadow-sm"
              >
                FAILED
              </TabsTrigger>
              <TabsTrigger
                value="skipped"
                className="text-xs font-bold data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
              >
                SKIPPED
              </TabsTrigger>
            </TabsList>
          </Tabs>

          <div className="max-h-[50vh] 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 className="w-[120px]">
                    {t("ui.admin.tenants.import_result.status", "상태")}
                  </TableHead>
                  <TableHead>
                    {t("ui.admin.tenants.import_result.message", "상세 내용")}
                  </TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {filteredImportDetails.length === 0 ? (
                  <TableRow>
                    <TableCell
                      colSpan={5}
                      className="h-24 text-center text-muted-foreground"
                    >
                      {t("ui.common.no_results", "표시할 결과가 없습니다.")}
                    </TableCell>
                  </TableRow>
                ) : (
                  filteredImportDetails.map((detail: TenantImportDetail) => (
                    <TableRow key={detail.row}>
                      <TableCell className="font-mono text-xs text-muted-foreground">
                        {detail.row}
                      </TableCell>
                      <TableCell className="font-medium">
                        {detail.name}
                      </TableCell>
                      <TableCell className="font-mono text-xs">
                        {detail.slug}
                      </TableCell>
                      <TableCell>
                        <Badge
                          variant={
                            detail.action === "created"
                              ? "success"
                              : detail.action === "updated"
                                ? "warning"
                                : detail.action === "skipped"
                                  ? "outline"
                                  : "destructive"
                          }
                          className="w-full justify-center text-[10px]"
                        >
                          {detail.action.toUpperCase()}
                        </Badge>
                      </TableCell>
                      <TableCell className="text-xs">
                        {detail.message}
                        {detail.modifiedFields &&
                          detail.modifiedFields.length > 0 && (
                            <div className="mt-1 flex flex-wrap gap-1">
                              <span className="mr-1 text-[10px] text-muted-foreground">
                                {t(
                                  "ui.admin.tenants.import_result.modified",
                                  "수정됨:",
                                )}
                              </span>
                              {detail.modifiedFields.map((field: string) => (
                                <Badge
                                  key={field}
                                  variant="outline"
                                  className="h-4 bg-muted px-1 text-[9px] font-normal"
                                >
                                  {field}
                                </Badge>
                              ))}
                            </div>
                          )}
                      </TableCell>
                    </TableRow>
                  ))
                )}
              </TableBody>
            </Table>
          </div>

          <DialogFooter>
            <Button onClick={() => setImportResultOpen(false)}>
              {t("ui.common.confirm", "확인")}
            </Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>

      <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
                        id={`tenant-import-parent-select-${preview.row.rowNumber}`}
                        name={`tenant-import-parent-select-${preview.row.rowNumber}`}
                        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
                          id={`tenant-import-match-select-${preview.row.rowNumber}`}
                          name={`tenant-import-match-select-${preview.row.rowNumber}`}
                          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;
  search: string;
  deletableTenants: TenantSummary[];
  sortConfig: SortConfig<TenantSortKey> | null;
  requestSort: (key: TenantSortKey) => void;
  getSortIcon: (key: TenantSortKey) => React.ReactNode;
  viewMode: TenantViewMode;
  scopeTenantId: string;
  fetchNextPage: () => void;
  hasNextPage: boolean;
  isFetchingNextPage: boolean;
  isLoading: boolean;
}> = ({
  tenants,
  selectedIds,
  onSelect,
  onSelectAll,
  search,
  deletableTenants,
  sortConfig,
  requestSort,
  getSortIcon,
  viewMode,
  scopeTenantId,
  fetchNextPage,
  hasNextPage,
  isFetchingNextPage,
  isLoading,
}) => {
  const parentRef = React.useRef<HTMLDivElement>(null);
  const isSidebarCollapsed = useOutletContext<boolean>() ?? false;
  const isTest =
    (typeof process !== "undefined" && process.env.NODE_ENV === "test") ||
    (typeof window !== "undefined" &&
      (window as Window & { _IS_TEST_MODE?: boolean })._IS_TEST_MODE);
  const tenantTableGridTemplateColumns = React.useMemo(
    () =>
      isSidebarCollapsed
        ? "48px minmax(380px, 1fr) 310px 140px 240px 120px 120px 110px"
        : "48px minmax(500px, 1fr) 240px 130px 226px 100px 100px 110px",
    [isSidebarCollapsed],
  );
  const tenantTableMinWidth = "100%";

  const { subTree } = React.useMemo(
    () => buildTenantFullTree(tenants, scopeTenantId || undefined, !!search),
    [scopeTenantId, tenants, search],
  );
  const tenantParentPathMap = React.useMemo(
    () => buildTenantParentPathMap(tenants),
    [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") {
      const rows = sortItems(
        getTenantViewRows(tenants, "table", scopeTenantId, !!search),
        sortConfig,
        tenantSortResolvers,
      );
      return filterTenantViewRowsBySearch(rows, search);
    }

    const result: TenantViewRow[] = [];

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

      for (const node of sortedNodes) {
        result.push({ ...node, depth });
        if (
          expandedIds.has(node.id) &&
          node.children &&
          node.children.length > 0
        ) {
          collect(node.children, depth + 1);
        }
      }
    };
    collect(subTree, 0);
    return filterTenantViewRowsBySearch(result, search);
  }, [
    expandedIds,
    scopeTenantId,
    sortConfig,
    subTree,
    tenantSortResolvers,
    tenants,
    viewMode,
    search,
  ]);

  const rowVirtualizer = useVirtualizer({
    count: flattenedRows.length,
    getScrollElement: () => parentRef.current,
    estimateSize: () => _tenantEstimatedRowHeight,
    overscan: isTest && flattenedRows.length < 100 ? flattenedRows.length : 10,
    initialRect: isTest ? { width: 1180, height: 1000 } : undefined,
  });

  const virtualRows = rowVirtualizer.getVirtualItems();
  const shouldVirtualizeRows = !(isTest && flattenedRows.length < 100);
  const searchMatchIds = React.useMemo(
    () => new Set(getTenantSearchMatchIds(flattenedRows, search)),
    [flattenedRows, search],
  );

  React.useEffect(() => {
    if (isTest) return;
    const lastItem = virtualRows[virtualRows.length - 1];
    if (!lastItem) return;

    if (
      lastItem.index >= flattenedRows.length - 1 &&
      hasNextPage &&
      !isFetchingNextPage
    ) {
      fetchNextPage();
    }
  }, [
    virtualRows,
    flattenedRows.length,
    hasNextPage,
    isFetchingNextPage,
    fetchNextPage,
    isTest,
  ]);

  const visibleSelectableIds = React.useMemo(
    () => new Set(deletableTenants.map((tenant) => tenant.id)),
    [deletableTenants],
  );
  const visibleSelectedCount = selectedIds.filter((id) =>
    visibleSelectableIds.has(id),
  ).length;
  const normalizedSearch = search.trim();
  const emptyMessage = React.useMemo(() => {
    if (normalizedSearch) {
      return t(
        "msg.admin.tenants.empty_search",
        "검색 조건에 맞는 테넌트가 없습니다.",
      );
    }
    if (scopeTenantId) {
      return t(
        "msg.admin.tenants.empty_scope",
        "선택한 범위에 표시할 하위 테넌트가 없습니다.",
      );
    }
    return t("msg.admin.tenants.empty", "아직 등록된 테넌트가 없습니다.");
  }, [normalizedSearch, scopeTenantId]);

  const renderRow = (
    node: TenantViewRow,
    index: number,
    virtualRow?: { start: number; end: number },
  ) => {
    const isSelected = selectedIds.includes(node.id);
    const isSearchMatch = searchMatchIds.has(node.id);
    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}
        data-index={index}
        ref={virtualRow ? rowVirtualizer.measureElement : undefined}
        className={cn(
          isSelected ? "bg-primary/5" : "",
          isSearchMatch
            ? "bg-amber-50/80 ring-1 ring-inset ring-amber-300"
            : "",
          "h-[73px]",
          virtualRow ? "absolute left-0 w-full" : "",
        )}
        style={
          virtualRow
            ? {
                display: "grid",
                gridTemplateColumns: tenantTableGridTemplateColumns,
                minWidth: tenantTableMinWidth,
                position: "absolute",
                transform: `translateY(${virtualRow.start}px)`,
                width: "100%",
              }
            : {
                display: "grid",
                gridTemplateColumns: tenantTableGridTemplateColumns,
                minWidth: tenantTableMinWidth,
              }
        }
      >
        <TableCell className="text-center px-4">
          {isSeedTenant(node) ? (
            <span className="inline-block h-4 w-4" />
          ) : (
            <Checkbox
              checked={isSelected}
              onCheckedChange={(checked) => onSelect(node, !!checked)}
            />
          )}
        </TableCell>
        <TableCell className="p-0 font-semibold">
          <div
            className="flex h-full min-h-[3rem] items-center py-1"
            style={{
              paddingLeft:
                viewMode === "tree" ? `${node.depth * 28 + 12}px` : "12px",
            }}
          >
            {viewMode === "tree" && (
              <div className="w-5 flex-shrink-0 items-center justify-center mr-1.5">
                {hasChildren && !search ? (
                  <button
                    type="button"
                    onClick={() => toggleExpand(node.id)}
                    className="cursor-pointer rounded p-0.5 text-muted-foreground transition-colors hover:bg-black/5 hover:text-foreground"
                  >
                    {isExpanded ? (
                      <ChevronDown size={16} />
                    ) : (
                      <ChevronRight size={16} />
                    )}
                  </button>
                ) : (
                  node.depth > 0 && (
                    <div className="h-1 w-1 rounded-full bg-border" />
                  )
                )}
              </div>
            )}

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

            <div className="min-w-0">
              <div className="flex min-w-0 flex-wrap items-center gap-2">
                <Link
                  to={`/tenants/${node.id}`}
                  className="block max-w-full truncate text-foreground transition-colors hover:text-primary hover:underline"
                >
                  {node.name}
                </Link>
                {isSeedTenant(node) && (
                  <Badge
                    variant="secondary"
                    className="flex-shrink-0 text-[10px]"
                  >
                    {t("ui.admin.tenants.seed_badge", "초기 설정")}
                  </Badge>
                )}
                {isSearchMatch && (
                  <Badge
                    variant="outline"
                    className="flex-shrink-0 border-amber-300 bg-amber-100 text-[10px] font-semibold text-amber-900"
                    data-testid={`tenant-search-match-${node.id}`}
                  >
                    {t("ui.admin.tenants.search_match_badge", "검색 일치")}
                  </Badge>
                )}
              </div>
              {(() => {
                const parentPath = tenantParentPathMap.get(node.id) ?? [];
                return (
                  <p className="mt-0.5 truncate text-xs font-normal text-muted-foreground">
                    {parentPath.length > 0
                      ? parentPath.join(" / ")
                      : t("ui.admin.tenants.path.root", "최상위")}
                  </p>
                );
              })()}
            </div>
          </div>
        </TableCell>
        <TableCell
          className="whitespace-nowrap overflow-hidden pl-5"
          data-testid={`tenant-internal-id-${node.id}`}
        >
          <code className="inline-block max-w-full overflow-hidden rounded-md bg-secondary/60 px-2 py-1 font-mono text-xs text-muted-foreground text-ellipsis">
            {abbreviateUuid(node.id)}
          </code>
        </TableCell>
        <TableCell className="whitespace-nowrap overflow-visible">
          {(() => {
            const { primary, secondary } = splitTenantTypeLabel(
              getTenantTypeLabel(node.type),
            );
            return (
              <div className="flex min-w-0 flex-col leading-tight">
                <span
                  className={cn(
                    "block max-w-full text-xs font-medium uppercase tracking-[0.04em]",
                    getTenantTypeTextClass(node.type),
                  )}
                >
                  {primary}
                </span>
                {secondary ? (
                  <span className="mt-0.5 block max-w-none whitespace-nowrap text-[11px] text-muted-foreground">
                    {secondary}
                  </span>
                ) : null}
              </div>
            );
          })()}
        </TableCell>
        <TableCell className="whitespace-nowrap overflow-hidden">
          <code className="inline-flex max-w-full items-center overflow-hidden rounded-md bg-secondary/60 px-2 py-1 font-mono text-xs text-muted-foreground text-ellipsis">
            {node.slug}
          </code>
        </TableCell>
        <TableCell className="whitespace-nowrap">
          <Badge
            variant={node.status === "active" ? "default" : "muted"}
            className={cn(
              "px-3 py-1 text-xs uppercase",
              node.status === "active"
                ? "border-transparent bg-blue-500 text-white hover:bg-blue-500/90 hover:text-white"
                : "border-border bg-secondary/60 text-muted-foreground",
            )}
          >
            {node.status === "active"
              ? t("ui.common.status.active", "활성")
              : t("ui.common.status.inactive", "비활성")}
          </Badge>
        </TableCell>
        <TableCell className="whitespace-nowrap pl-3">
          <div className="flex flex-col leading-tight">
            <span className="font-medium">
              {t("ui.admin.tenants.table.members_count", "{{count}}명", {
                count: node.recursiveMemberCount,
              })}
            </span>
            <span className="mt-0.5 text-xs text-muted-foreground">
              {t("ui.admin.tenants.table.members_recursive", "하위 포함")}
            </span>
          </div>
        </TableCell>
        <TableCell className="whitespace-nowrap text-right pl-1">
          {node.updatedAt ? (
            <div className="flex flex-col items-end leading-tight">
              <span className="text-xs">
                {new Date(node.updatedAt).toLocaleDateString("ko-KR")}
              </span>
              <span className="mt-0.5 text-xs text-muted-foreground">
                {new Date(node.updatedAt).toLocaleTimeString("ko-KR")}
              </span>
            </div>
          ) : (
            <span className="text-xs">-</span>
          )}
        </TableCell>
      </TableRow>
    );
  };

  return (
    <div className="flex flex-1 flex-col overflow-hidden rounded-md border">
      <div
        ref={parentRef}
        className="custom-scrollbar relative flex-1 overflow-auto"
        data-testid="tenant-table-container"
      >
        <Table
          className="relative border-separate border-spacing-0"
          style={{ display: "grid", minWidth: tenantTableMinWidth }}
        >
          <TableHeader className="sticky top-0 z-10 bg-secondary shadow-sm">
            <TableRow
              style={{
                display: "grid",
                gridTemplateColumns: tenantTableGridTemplateColumns,
                minWidth: tenantTableMinWidth,
              }}
            >
              <TableHead
                className={`${tenantTableHeadClassName} w-[48px] text-center`}
              >
                <div className="flex h-full items-center justify-center">
                  <Checkbox
                    checked={
                      deletableTenants.length > 0 &&
                      visibleSelectedCount === deletableTenants.length
                    }
                    onCheckedChange={(checked) => onSelectAll(!!checked)}
                  />
                </div>
              </TableHead>
              <TableHead
                className={`${tenantTableHeadInteractiveClassName} min-w-[500px]`}
                onClick={() => requestSort("name")}
              >
                <div className={tenantTableHeadContentClassName}>
                  {t("ui.admin.tenants.table.name", "NAME")}
                  {getSortIcon("name")}
                </div>
              </TableHead>
              <TableHead
                className={`${tenantTableHeadInteractiveClassName} min-w-[220px] pl-5`}
                onClick={() => requestSort("id")}
              >
                <div className={tenantTableHeadContentClassName}>
                  {t("ui.admin.tenants.table.id", "ID")}
                  {getSortIcon("id")}
                </div>
              </TableHead>
              <TableHead
                className={`${tenantTableHeadInteractiveClassName} pl-5`}
                onClick={() => requestSort("type")}
              >
                <div className={tenantTableHeadContentClassName}>
                  {t("ui.admin.tenants.table.type", "TYPE")}
                  {getSortIcon("type")}
                </div>
              </TableHead>
              <TableHead
                className={`${tenantTableHeadInteractiveClassName} pl-5`}
                onClick={() => requestSort("slug")}
              >
                <div className={tenantTableHeadContentClassName}>
                  {t("ui.admin.tenants.table.slug", "SLUG")}
                  {getSortIcon("slug")}
                </div>
              </TableHead>
              <TableHead
                className={`${tenantTableHeadInteractiveClassName} pl-5`}
                onClick={() => requestSort("status")}
              >
                <div className={tenantTableHeadContentClassName}>
                  {t("ui.admin.tenants.table.status", "STATUS")}
                  {getSortIcon("status")}
                </div>
              </TableHead>
              <TableHead
                className={tenantTableHeadInteractiveClassName}
                onClick={() => requestSort("recursiveMemberCount")}
              >
                <div className={tenantTableHeadContentClassName}>
                  {t("ui.admin.tenants.table.members", "MEMBERS")}
                  {getSortIcon("recursiveMemberCount")}
                </div>
              </TableHead>
              <TableHead
                className={tenantTableHeadInteractiveClassName}
                onClick={() => requestSort("updatedAt")}
              >
                <div
                  className={`${tenantTableHeadContentClassName} justify-end`}
                >
                  {t("ui.admin.tenants.table.updated", "UPDATED")}
                  {getSortIcon("updatedAt")}
                </div>
              </TableHead>
            </TableRow>
          </TableHeader>
          <TableBody
            className="relative"
            style={
              shouldVirtualizeRows
                ? {
                    display: "grid",
                    height: `${rowVirtualizer.getTotalSize()}px`,
                    minWidth: tenantTableMinWidth,
                    position: "relative",
                  }
                : undefined
            }
          >
            {flattenedRows.length === 0 && !isLoading && (
              <TableRow
                style={{
                  display: "grid",
                  gridTemplateColumns: tenantTableGridTemplateColumns,
                  minWidth: tenantTableMinWidth,
                }}
              >
                <TableCell
                  colSpan={8}
                  className="py-8 text-center text-muted-foreground"
                  style={{ gridColumn: "1 / -1" }}
                >
                  {emptyMessage}
                </TableCell>
              </TableRow>
            )}

            {!shouldVirtualizeRows
              ? flattenedRows.map((row, index) => renderRow(row, index))
              : virtualRows.map((virtualRow) =>
                  renderRow(
                    flattenedRows[virtualRow.index],
                    virtualRow.index,
                    virtualRow,
                  ),
                )}

            {isFetchingNextPage && (
              <TableRow
                style={{
                  display: "grid",
                  gridTemplateColumns: tenantTableGridTemplateColumns,
                  minWidth: tenantTableMinWidth,
                }}
              >
                <TableCell colSpan={8} className="py-4 text-center">
                  <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
                    <RefreshCw size={16} className="animate-spin" />
                    {t("msg.common.loading_more", "Loading more...")}
                  </div>
                </TableCell>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
};

export default TenantListPage;