import { Building2, X } from "lucide-react";
import type { ReactNode } from "react";
import { useEffect, useState } from "react";
import { Button } from "../../../components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "../../../components/ui/dialog";
import { Label } from "../../../components/ui/label";
import type { TenantSummary } from "../../../lib/adminApi";
import { t } from "../../../lib/i18n";
import {
  buildAuthenticatedOrgChartTenantPickerUrl,
  parseOrgChartTenantSelection,
} from "../../users/orgChartPicker";
import { filterParentTenants } from "./ParentTenantSelector.helpers";

type ParentTenantSelectorProps = {
  id: string;
  label: string;
  value: string;
  onChange: (value: string) => void;
  tenants: TenantSummary[];
  noneLabel: string;
  helpText?: string;
  excludeTenantId?: string;
  labelAction?: ReactNode;
  contextLabel?: string;
  orgChartPickerLabel?: string;
  orgChartTenantId?: string;
  localPickerLabel?: string;
  localTenantFilter?: (tenant: TenantSummary) => boolean;
  compact?: boolean;
  controlTestId?: string;
  disabled?: boolean;
};

export function ParentTenantSelector({
  id,
  label,
  value,
  onChange,
  tenants,
  noneLabel,
  helpText,
  excludeTenantId,
  labelAction,
  contextLabel,
  orgChartPickerLabel,
  orgChartTenantId,
  localPickerLabel,
  localTenantFilter,
  compact = false,
  controlTestId,
  disabled = false,
}: ParentTenantSelectorProps) {
  const [pickerOpen, setPickerOpen] = useState(false);
  const [localPickerOpen, setLocalPickerOpen] = useState(false);
  const [localSearch, setLocalSearch] = useState("");
  const selectedTenant = tenants.find((tenant) => tenant.id === value);
  const localCandidates = filterParentTenants(
    localTenantFilter ? tenants.filter(localTenantFilter) : tenants,
    localSearch,
    false,
    excludeTenantId,
  );
  const pickerUrl = buildAuthenticatedOrgChartTenantPickerUrl(
    import.meta.env.ORGFRONT_URL,
    {
      tenantId: orgChartTenantId,
    },
  );

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

    const onMessage = (event: MessageEvent) => {
      const selection = parseOrgChartTenantSelection(event.data);
      if (!selection) return;
      if (excludeTenantId && selection.id === excludeTenantId) return;

      onChange(selection.id);
      setPickerOpen(false);
    };

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

  return (
    <div className={compact ? "space-y-1" : "space-y-2"}>
      <div
        className={
          compact
            ? "flex min-h-5 flex-wrap items-center justify-between gap-2"
            : "flex min-h-8 flex-wrap items-center justify-between gap-2"
        }
      >
        <Label className="text-sm font-semibold">{label}</Label>
        {labelAction}
      </div>
      <input id={id} name={id} type="hidden" value={value} readOnly />
      <div
        data-testid={controlTestId}
        className={
          compact
            ? "flex h-10 min-w-0 items-center gap-2 rounded-lg border border-input bg-background px-2"
            : "flex min-h-10 flex-wrap items-center gap-2 rounded-md border border-input bg-background px-3 py-2"
        }
      >
        <Dialog open={pickerOpen} onOpenChange={setPickerOpen}>
          <DialogTrigger asChild>
            <Button
              type="button"
              variant="outline"
              size="sm"
              className={compact ? "h-8 shrink-0 px-2" : undefined}
              disabled={disabled}
            >
              <Building2 className="h-4 w-4" />
              {orgChartPickerLabel ??
                (compact ? undefined : selectedTenant?.name) ??
                t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
            </Button>
          </DialogTrigger>
          <DialogContent className="max-w-[460px] p-4">
            <DialogHeader>
              <DialogTitle>
                {t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
              </DialogTitle>
              <DialogDescription>
                {t(
                  "msg.admin.tenants.parent.picker_description",
                  "org-chart에서 테넌트를 선택하면 상위 테넌트에 반영됩니다.",
                )}
              </DialogDescription>
            </DialogHeader>
            <iframe
              title={t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
              src={pickerUrl}
              className="h-[600px] w-full rounded-md border"
              data-testid="parent-tenant-picker-frame"
            />
          </DialogContent>
        </Dialog>
        {localPickerLabel && (
          <Dialog open={localPickerOpen} onOpenChange={setLocalPickerOpen}>
            <DialogTrigger asChild>
              <Button
                type="button"
                variant="outline"
                size="sm"
                disabled={disabled}
              >
                <Building2 className="h-4 w-4" />
                {localPickerLabel}
              </Button>
            </DialogTrigger>
            <DialogContent className="max-w-[460px] p-4">
              <DialogHeader>
                <DialogTitle>
                  {localPickerLabel ??
                    t("ui.admin.tenants.parent.pick_tenant", "테넌트 선택")}
                </DialogTitle>
                <DialogDescription>
                  {t(
                    "msg.admin.tenants.parent.local_picker_description",
                    "테넌트 목록에서 상위 테넌트로 사용할 항목을 선택합니다.",
                  )}
                </DialogDescription>
              </DialogHeader>
              <div className="space-y-3">
                <input
                  id="parent-tenant-local-search"
                  name="parent-tenant-local-search"
                  className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
                  value={localSearch}
                  onChange={(event) => setLocalSearch(event.target.value)}
                  placeholder={t(
                    "ui.admin.tenants.parent.local_search_placeholder",
                    "테넌트 이름 또는 슬러그 검색",
                  )}
                />
                <div className="max-h-[360px] space-y-2 overflow-y-auto">
                  {localCandidates.map((tenant) => (
                    <Button
                      key={tenant.id}
                      type="button"
                      variant="outline"
                      className="h-auto w-full justify-start px-3 py-2 text-left"
                      onClick={() => {
                        onChange(tenant.id);
                        setLocalPickerOpen(false);
                        setLocalSearch("");
                      }}
                    >
                      <span>
                        <span className="block text-sm font-medium">
                          {tenant.name}
                        </span>
                        <span className="block text-xs text-muted-foreground">
                          {tenant.slug} · {tenant.type}
                        </span>
                      </span>
                    </Button>
                  ))}
                  {localCandidates.length === 0 && (
                    <p className="rounded-md border border-dashed px-3 py-4 text-sm text-muted-foreground">
                      {t(
                        "msg.admin.tenants.parent.local_picker_empty",
                        "선택할 수 있는 테넌트가 없습니다.",
                      )}
                    </p>
                  )}
                </div>
              </div>
            </DialogContent>
          </Dialog>
        )}
        {selectedTenant ? (
          <>
            <span
              className={
                compact
                  ? "min-w-0 flex-1 truncate text-xs text-muted-foreground"
                  : "text-xs text-muted-foreground"
              }
              title={`${selectedTenant.name} · ${selectedTenant.slug} · ${selectedTenant.type}`}
            >
              {compact
                ? `${selectedTenant.name} · ${selectedTenant.slug}`
                : `${selectedTenant.slug} · ${selectedTenant.type}`}
            </span>
            <Button
              type="button"
              variant="ghost"
              size="icon"
              className={compact ? "h-7 w-7 shrink-0" : "h-8 w-8"}
              onClick={() => onChange("")}
              aria-label={noneLabel}
              disabled={disabled}
            >
              <X className="h-4 w-4" />
            </Button>
          </>
        ) : (
          <span
            className={
              compact
                ? "min-w-0 flex-1 truncate text-xs text-muted-foreground"
                : "text-xs text-muted-foreground"
            }
          >
            {noneLabel}
          </span>
        )}
        {contextLabel && (
          <span className="rounded-md border px-2 py-1 text-xs font-medium text-muted-foreground">
            {contextLabel}
          </span>
        )}
      </div>
      {helpText && (
        <p className="mt-1 text-xs text-muted-foreground">{helpText}</p>
      )}
    </div>
  );
}