baron-sso/devfront/src/features/clients/components/TenantAccessPicker.tsx

import { Building2 } from "lucide-react";
import { useEffect, useMemo, useState } from "react";
import { createPortal } from "react-dom";
import { Button } from "../../../components/ui/button";
import { t } from "../../../lib/i18n";
import {
  buildAuthenticatedOrgChartTenantPickerUrl,
  type OrgChartTenantSelection,
  parseOrgChartTenantSelection,
} from "../orgChartPicker";

type TenantAccessPickerProps = {
  disabled?: boolean;
  selectedCount: number;
  onSelectTenant: (selection: OrgChartTenantSelection) => void;
};

function resolveOrgFrontBaseUrl() {
  return (
    import.meta.env.VITE_ORGFRONT_PUBLIC_URL ||
    import.meta.env.ORGFRONT_URL ||
    "http://localhost:5175"
  );
}

export function TenantAccessPicker({
  disabled = false,
  selectedCount,
  onSelectTenant,
}: TenantAccessPickerProps) {
  const [pickerOpen, setPickerOpen] = useState(false);
  const pickerUrl = useMemo(
    () => buildAuthenticatedOrgChartTenantPickerUrl(resolveOrgFrontBaseUrl()),
    [],
  );

  useEffect(() => {
    if (!pickerOpen) return;

    const onMessage = (event: MessageEvent) => {
      const selection = parseOrgChartTenantSelection(event.data);
      if (!selection) return;
      onSelectTenant(selection);
      setPickerOpen(false);
    };

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

  const pickerDialog =
    pickerOpen && typeof document !== "undefined"
      ? createPortal(
          <div
            className="fixed inset-0 z-[1000] flex items-start justify-center overflow-y-auto bg-black/50 p-4 md:items-center"
            role="dialog"
            aria-modal="true"
            aria-label={t(
              "ui.dev.clients.general.tenant_access.picker_title",
              "테넌트 선택",
            )}
          >
            <div className="flex h-[92vh] w-[min(96vw,1200px)] flex-col overflow-hidden rounded-2xl border border-border bg-background p-4 shadow-2xl">
              <div className="flex items-start justify-between gap-3">
                <div className="space-y-1">
                  <h2 className="text-lg font-semibold">
                    {t(
                      "ui.dev.clients.general.tenant_access.picker_title",
                      "테넌트 선택",
                    )}
                  </h2>
                  <p className="text-sm text-muted-foreground">
                    {t(
                      "msg.dev.clients.general.tenant_access.picker_description",
                      "orgfront 조직도에서 허용할 테넌트를 선택하면 목록에 추가됩니다.",
                    )}
                  </p>
                </div>
                <Button
                  type="button"
                  variant="ghost"
                  size="sm"
                  className="shrink-0"
                  onClick={() => setPickerOpen(false)}
                >
                  {t("ui.common.close", "닫기")}
                </Button>
              </div>
              <div className="mt-4 min-h-0 flex-1 overflow-hidden rounded-md border">
                <iframe
                  title={t(
                    "ui.dev.clients.general.tenant_access.picker_title",
                    "테넌트 선택",
                  )}
                  src={pickerUrl}
                  className="h-full w-full"
                />
              </div>
              <div className="mt-4 flex shrink-0 justify-end">
                <Button
                  type="button"
                  variant="outline"
                  onClick={() => setPickerOpen(false)}
                >
                  {t("ui.common.close", "닫기")}
                </Button>
              </div>
            </div>
          </div>,
          document.body,
        )
      : null;

  return (
    <div className="space-y-3">
      <Button
        type="button"
        variant="outline"
        className="h-10 gap-2"
        disabled={disabled}
        onClick={() => setPickerOpen(true)}
      >
        <Building2 className="h-4 w-4" />
        {t(
          "ui.dev.clients.general.tenant_access.open_picker",
          "테넌트 선택기 열기",
        )}
      </Button>

      {pickerDialog}

      <div className="rounded-xl border border-dashed border-border bg-muted/20 px-4 py-3 text-sm text-muted-foreground">
        {selectedCount > 0
          ? t(
              "msg.dev.clients.general.tenant_access.picker_hint_with_count",
              "현재 {{count}}개가 선택되어 있습니다.",
              { count: selectedCount },
            )
          : t(
              "msg.dev.clients.general.tenant_access.picker_hint",
              "선택기를 열어 허용 테넌트를 추가하세요.",
            )}
      </div>
    </div>
  );
}