import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import type { AxiosError } from "axios";
import {
  ArrowLeft,
  Building2,
  ClipboardCopy,
  Loader2,
  Plus,
  Save,
  Trash2,
} from "lucide-react";
import * as React from "react";
import { useForm } from "react-hook-form";
import { Link, useNavigate, useSearchParams } from "react-router-dom";
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,
  DialogHeader,
  DialogTitle,
} from "../../components/ui/dialog";
import { Input } from "../../components/ui/input";
import { Label } from "../../components/ui/label";
import { Switch } from "../../components/ui/switch";
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "../../components/ui/tabs";
import {
  type TenantSummary,
  type UserAppointment,
  type UserCreateRequest,
  type UserCreateResponse,
  createUser,
  fetchAllTenants,
  fetchMe,
  fetchTenant,
} from "../../lib/adminApi";
import { t } from "../../lib/i18n";
import { isSuperAdminRole } from "../../lib/roles";
import {
  type OrgChartTenantSelection,
  buildAuthenticatedOrgChartTenantPickerUrl,
  filterNonHanmacFamilyTenants,
  parseOrgChartTenantSelection,
} from "./orgChartPicker";
import type { UserSchemaField } from "./userSchemaFields";
import { resolvePersonalTenant } from "./utils/personalTenant";

type UserFormValues = UserCreateRequest & { metadata: Record<string, unknown> };
type UserCategory = "hanmac" | "external" | "personal";

type PickerTarget = { kind: "appointment"; index: number };

type AppointmentDraft = UserAppointment & {
  draftId: string;
};

function createDraftId() {
  return globalThis.crypto?.randomUUID?.() ?? `appointment-${Date.now()}`;
}

async function resolveTenantSelection(
  selection: OrgChartTenantSelection,
  tenants: TenantSummary[],
) {
  const cached = tenants.find((tenant) => tenant.id === selection.id);
  if (cached) {
    return {
      id: cached.id,
      name: cached.name,
      slug: cached.slug,
    };
  }

  const tenant = await fetchTenant(selection.id);
  return {
    id: tenant.id,
    name: tenant.name,
    slug: tenant.slug,
  };
}

function createEmptyAppointment(): AppointmentDraft {
  return {
    draftId: createDraftId(),
    tenantId: "",
    tenantName: "",
    tenantSlug: "",
    isOwner: false,
    grade: "",
    jobTitle: "",
    position: "",
  };
}

function UserCreatePage() {
  const navigate = useNavigate();
  const [searchParams] = useSearchParams();
  const queryClient = useQueryClient();
  const [error, setError] = React.useState<string | null>(null);
  const [generatedPassword, setGeneratedPassword] = React.useState<
    string | null
  >(null);
  const [createdEmail, setCreatedEmail] = React.useState<string | null>(null);
  const [autoPassword, setAutoPassword] = React.useState(true);
  const [userCategory, setUserCategory] =
    React.useState<UserCategory>("hanmac");
  const [additionalAppointments, setAdditionalAppointments] = React.useState<
    AppointmentDraft[]
  >([]);
  const [pickerTarget, setPickerTarget] = React.useState<PickerTarget | null>(
    null,
  );
  const [isResolvingTenant, setIsResolvingTenant] = React.useState(false);

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

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

  const {
    register,
    handleSubmit,
    watch,
    setValue,
    formState: { errors },
  } = useForm<UserFormValues>({
    defaultValues: {
      email: "",
      password: "",
      name: "",
      phone: "",
      tenantSlug: searchParams.get("tenantSlug") || "",
      department: "",
      grade: "",
      position: "",
      jobTitle: "",
      role: "user",
      metadata: {},
    },
  });

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

  const hanmacFamilyTenantId = React.useMemo(() => {
    const envTenantId = import.meta.env.VITE_HANMAC_FAMILY_TENANT_ID;
    if (typeof envTenantId === "string" && envTenantId.trim()) {
      return envTenantId.trim();
    }
    return tenants.find((tenant) => tenant.slug === "hanmac-family")?.id ?? "";
  }, [tenants]);
  const nonHanmacFamilyTenants = React.useMemo(
    () => filterNonHanmacFamilyTenants(tenants, hanmacFamilyTenantId),
    [tenants, hanmacFamilyTenantId],
  );

  const selectedTenantSlug = watch("tenantSlug");
  const personalTenant = React.useMemo(
    () => resolvePersonalTenant(tenants),
    [tenants],
  );
  const selectedTenant =
    userCategory !== "external"
      ? undefined
      : nonHanmacFamilyTenants.find((t) => t.slug === selectedTenantSlug);

  const selectedTenantId = selectedTenant?.id ?? "";

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

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

  const registerMetadata = (field: UserSchemaField) =>
    register(`metadata.${field.key}` as `metadata.${string}`, {
      required: field.required
        ? t(
            "msg.admin.users.create.form.field_required",
            "{{label}}은(는) 필수입니다.",
            {
              label: field.label || field.key,
            },
          )
        : false,
      pattern: field.validation
        ? {
            value: new RegExp(field.validation),
            message: t(
              "msg.admin.users.create.form.field_invalid",
              "{{label}} 형식이 올바르지 않습니다.",
              { label: field.label || field.key },
            ),
          }
        : undefined,
    });

  const pickerUrl = buildAuthenticatedOrgChartTenantPickerUrl(
    import.meta.env.ORGFRONT_URL,
    {
      tenantId: userCategory === "hanmac" ? hanmacFamilyTenantId : undefined,
    },
  );

  const applyTenantSelection = React.useCallback(
    async (selection: OrgChartTenantSelection, target: PickerTarget) => {
      setIsResolvingTenant(true);
      try {
        const tenant = await resolveTenantSelection(selection, tenants);
        setAdditionalAppointments((current) =>
          current.map((appointment, index) =>
            index === target.index
              ? {
                  ...appointment,
                  tenantId: tenant.id,
                  tenantName: tenant.name,
                  tenantSlug: tenant.slug,
                }
              : appointment,
          ),
        );
        setPickerTarget(null);
      } catch (_) {
        setError(
          t(
            "msg.admin.users.create.tenant_resolve_failed",
            "선택한 테넌트 정보를 불러오지 못했습니다.",
          ),
        );
      } finally {
        setIsResolvingTenant(false);
      }
    },
    [tenants],
  );

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

    const onMessage = (event: MessageEvent) => {
      const selection = parseOrgChartTenantSelection(event.data);
      if (!selection) return;
      void applyTenantSelection(selection, pickerTarget);
    };

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

  const addAppointment = () => {
    setAdditionalAppointments((current) => [
      ...current,
      createEmptyAppointment(),
    ]);
  };

  const updateAppointment = (
    index: number,
    patch: Partial<UserAppointment>,
  ) => {
    setAdditionalAppointments((current) =>
      current.map((appointment, currentIndex) => {
        if (currentIndex === index) {
          return { ...appointment, ...patch };
        }
        if (patch.isOwner === true) {
          return { ...appointment, isOwner: false };
        }
        return appointment;
      }),
    );
  };

  const removeAppointment = (index: number) => {
    setAdditionalAppointments((current) =>
      current.filter((_, currentIndex) => currentIndex !== index),
    );
  };

  const handleUserCategoryChange = (value: string) => {
    const nextCategory = value as UserCategory;
    setUserCategory(nextCategory);
    if (nextCategory !== "hanmac") {
      setAdditionalAppointments([]);
    }
  };

  const ensurePersonalTenant = async () => {
    return personalTenant;
  };

  const mutation = useMutation({
    mutationFn: createUser,
    onSuccess: (data: UserCreateResponse) => {
      queryClient.invalidateQueries({ queryKey: ["users"] });
      if (data.initialPassword) {
        setGeneratedPassword(data.initialPassword);
        setCreatedEmail(data.email);
        return;
      }
      navigate("/users");
    },
    onError: (err: AxiosError<{ error?: string }>) => {
      setError(
        err.response?.data?.error ||
          t("msg.admin.users.create.error", "사용자 생성에 실패했습니다."),
      );
    },
  });

  const onSubmit = async (data: UserFormValues) => {
    setError(null);
    setGeneratedPassword(null);
    setCreatedEmail(null);

    const {
      hanmacFamily: _hanmacFamily,
      userType: _userType,
      ...formMetadata
    } = data.metadata ?? {};
    const metadata: Record<string, unknown> = {
      ...formMetadata,
    };

    const payload: UserCreateRequest = {
      email: data.email,
      password: data.password,
      name: data.name,
      phone: data.phone,
      role: data.role,
      metadata,
    };

    if (userCategory === "external") {
      if (!data.tenantSlug) {
        setError(
          t(
            "msg.admin.users.create.external_tenant_required",
            "외부 사용자는 대표소속을 선택해 주세요.",
          ),
        );
        return;
      }
      payload.tenantSlug = data.tenantSlug;
      payload.department = data.department;
      payload.grade = data.grade;
      payload.position = data.position;
      payload.jobTitle = data.jobTitle;
    }

    if (userCategory === "personal") {
      try {
        const tenant = await ensurePersonalTenant();
        payload.tenantSlug = tenant.slug;
        payload.metadata = {
          ...metadata,
          personalTenantId: tenant.id,
        };
      } catch (_) {
        setError(
          t(
            "msg.admin.users.create.personal_tenant_failed",
            "Personal 테넌트를 준비하지 못했습니다.",
          ),
        );
        return;
      }
    }

    if (userCategory === "hanmac") {
      const appointments = additionalAppointments
        .filter((appointment) => appointment.tenantId)
        .map((appointment) => ({
          tenantId: appointment.tenantId,
          tenantSlug: appointment.tenantSlug,
          tenantName: appointment.tenantName,
          isPrimary: appointment.isOwner,
          isOwner: appointment.isOwner,
          grade: appointment.grade,
          jobTitle: appointment.jobTitle,
          position: appointment.position,
        }));

      if (appointments.length === 0) {
        setError(
          t(
            "msg.admin.users.create.appointment_required",
            "한맥 가족 구성원은 소속 테넌트를 하나 이상 선택해 주세요.",
          ),
        );
        return;
      }

      const primary = appointments.find((a) => a.isOwner);
      if (primary) {
        metadata.primaryTenantId = primary.tenantId;
        metadata.primaryTenantSlug = primary.tenantSlug;
        metadata.primaryTenantName = primary.tenantName;
        metadata.primaryTenantIsOwner = true;
      }

      payload.additionalAppointments = appointments;
      payload.metadata = {
        ...metadata,
        additionalAppointments: appointments,
      };
    }

    if (autoPassword) {
      payload.password = "";
    } else if (!data.password) {
      setError(
        t(
          "msg.admin.users.create.password_required",
          "비밀번호를 입력하거나 자동 생성을 사용해 주세요.",
        ),
      );
      return;
    }

    mutation.mutate(payload);
  };

  const onCopyPassword = async () => {
    if (!generatedPassword) return;
    try {
      await navigator.clipboard.writeText(generatedPassword);
    } catch (_) {
      // ignore
    }
  };

  return (
    <div className="max-w-3xl space-y-8">
      <header className="flex flex-wrap items-center justify-between gap-4">
        <div className="space-y-2">
          <h2 className="text-3xl font-semibold">
            {t("ui.admin.users.create.title", "사용자 추가")}
          </h2>
        </div>
        <Button variant="ghost" asChild>
          <Link to="/users">
            <ArrowLeft size={16} className="mr-2" />
            {t("ui.admin.users.create.back", "목록으로 돌아가기")}
          </Link>
        </Button>
      </header>

      {generatedPassword && (
        <Card>
          <CardHeader>
            <CardTitle>
              {t(
                "ui.admin.users.create.password_generated.title",
                "초기 비밀번호 생성 완료",
              )}
            </CardTitle>
            <CardDescription>
              {createdEmail
                ? t(
                    "msg.admin.users.create.password_generated.with_email",
                    "{{email}} 계정의 초기 비밀번호입니다.",
                    { email: createdEmail },
                  )
                : t(
                    "msg.admin.users.create.password_generated.default",
                    "초기 비밀번호가 생성되었습니다.",
                  )}
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-wrap items-center gap-3 rounded-md border border-dashed px-4 py-3">
              <span className="font-mono text-sm">{generatedPassword}</span>
              <Button size="sm" variant="outline" onClick={onCopyPassword}>
                <ClipboardCopy className="mr-2 h-4 w-4" />
                {t("ui.common.copy", "복사")}
              </Button>
            </div>
            <div className="flex justify-end">
              <Button onClick={() => navigate("/users")}>
                {t("ui.admin.users.create.go_list", "목록으로 이동")}
              </Button>
            </div>
          </CardContent>
        </Card>
      )}

      <Card>
        <CardHeader>
          <CardTitle>
            {t("ui.admin.users.create.account.title", "계정 정보")}
          </CardTitle>
          <CardDescription>
            {t(
              "msg.admin.users.create.account.subtitle",
              "새로운 사용자를 시스템에 등록합니다.",
            )}
          </CardDescription>
        </CardHeader>
        <CardContent>
          <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
            {error && (
              <div className="rounded-md bg-destructive/15 p-3 text-sm text-destructive">
                {error}
              </div>
            )}

            <div className="space-y-2">
              <Label htmlFor="email">
                {t("ui.admin.users.create.form.email", "이메일")}
              </Label>
              <Input
                id="email"
                placeholder={t(
                  "ui.admin.users.create.form.email_placeholder",
                  "user@example.com",
                )}
                {...register("email", {
                  required: t(
                    "msg.admin.users.create.form.email_required",
                    "이메일은 필수입니다.",
                  ),
                })}
              />
              {errors.email && (
                <p className="text-xs text-destructive">
                  {errors.email.message}
                </p>
              )}
            </div>

            <div className="space-y-2">
              <div className="flex items-center justify-between">
                <Label htmlFor="password">
                  {t("ui.admin.users.create.form.password", "비밀번호")}
                </Label>
                <label className="flex items-center gap-2 text-xs text-muted-foreground">
                  <input
                    type="checkbox"
                    checked={autoPassword}
                    onChange={(event) => setAutoPassword(event.target.checked)}
                  />
                  {t("ui.admin.users.create.form.auto_password", "자동 생성")}
                </label>
              </div>
              <Input
                id="password"
                type="password"
                placeholder={t(
                  "ui.admin.users.create.form.password_placeholder",
                  "********",
                )}
                disabled={autoPassword}
                {...register("password")}
              />
              <p className="text-xs text-muted-foreground">
                {autoPassword
                  ? t(
                      "msg.admin.users.create.form.password_auto_help",
                      "비워두면 시스템이 초기 비밀번호를 자동 생성합니다.",
                    )
                  : t(
                      "msg.admin.users.create.form.password_manual_help",
                      "초기 비밀번호를 직접 설정합니다.",
                    )}
              </p>
            </div>

            <div className="grid gap-4 md:grid-cols-2">
              <div className="space-y-2">
                <Label htmlFor="name">
                  {t("ui.admin.users.create.form.name", "이름")}
                </Label>
                <Input
                  id="name"
                  placeholder={t(
                    "ui.admin.users.create.form.name_placeholder",
                    "홍길동",
                  )}
                  {...register("name", {
                    required: t(
                      "msg.admin.users.create.form.name_required",
                      "이름은 필수입니다.",
                    ),
                  })}
                />
                {errors.name && (
                  <p className="text-xs text-destructive">
                    {errors.name.message}
                  </p>
                )}
              </div>

              <div className="space-y-2">
                <Label htmlFor="phone">
                  {t("ui.admin.users.create.form.phone", "전화번호")}
                </Label>
                <Input
                  id="phone"
                  placeholder={t(
                    "ui.admin.users.create.form.phone_placeholder",
                    "010-1234-5678",
                  )}
                  {...register("phone")}
                />
              </div>
            </div>

            <div className="space-y-2">
              <Label htmlFor="role">
                {t("ui.admin.users.create.form.role", "역할")}
              </Label>
              <select
                id="role"
                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 disabled:cursor-not-allowed disabled:opacity-50"
                {...register("role")}
                disabled={!isSuperAdminRole(profile?.role)}
              >
                <option value="super_admin">
                  {t("ui.admin.role.super_admin", "시스템 관리자")}
                </option>
                <option value="user">
                  {t("ui.admin.role.user", "일반 사용자")}
                </option>
              </select>
              <p className="text-xs text-muted-foreground">
                {t(
                  "msg.admin.users.create.form.role_help",
                  "시스템 접근 권한을 결정합니다.",
                )}
              </p>
            </div>

            <Tabs value={userCategory} onValueChange={handleUserCategoryChange}>
              <TabsList className="flex h-auto w-full justify-start rounded-none border-b bg-transparent p-0 text-foreground">
                <TabsTrigger
                  value="hanmac"
                  className="-mb-px rounded-b-none rounded-t-md border border-transparent border-b-border bg-muted/40 px-4 py-2 text-muted-foreground shadow-none data-[state=active]:border-border data-[state=active]:border-b-background data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-none"
                >
                  한맥가족 구성원
                </TabsTrigger>
                <TabsTrigger
                  value="external"
                  className="-mb-px rounded-b-none rounded-t-md border border-transparent border-b-border bg-muted/40 px-4 py-2 text-muted-foreground shadow-none data-[state=active]:border-border data-[state=active]:border-b-background data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-none"
                >
                  외부 기업 회원
                </TabsTrigger>
                <TabsTrigger
                  value="personal"
                  className="-mb-px rounded-b-none rounded-t-md border border-transparent border-b-border bg-muted/40 px-4 py-2 text-muted-foreground shadow-none data-[state=active]:border-border data-[state=active]:border-b-background data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-none"
                >
                  개인 회원
                </TabsTrigger>
              </TabsList>

              <TabsContent value="external" className="mt-4 space-y-4">
                <div className="grid gap-4 md:grid-cols-2">
                  <div className="space-y-2">
                    <Label htmlFor="tenantSlug">대표소속</Label>
                    <select
                      id="tenantSlug"
                      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 disabled:cursor-not-allowed disabled:opacity-50"
                      {...register("tenantSlug")}
                      disabled={profile?.role === "tenant_admin"}
                    >
                      {nonHanmacFamilyTenants.map((tenant) => (
                        <option key={tenant.id} value={tenant.slug}>
                          {tenant.name} ({tenant.slug})
                        </option>
                      ))}
                    </select>
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="department">부서</Label>
                    <Input id="department" {...register("department")} />
                  </div>
                </div>

                <div className="grid gap-4 md:grid-cols-3">
                  <div className="space-y-2">
                    <Label htmlFor="grade">직급</Label>
                    <Input
                      id="grade"
                      placeholder="수석/책임/선임"
                      {...register("grade")}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="position">직책</Label>
                    <Input
                      id="position"
                      placeholder="팀장/센터장"
                      {...register("position")}
                    />
                  </div>
                  <div className="space-y-2">
                    <Label htmlFor="jobTitle">직무</Label>
                    <Input
                      id="jobTitle"
                      placeholder="프론트엔드 개발"
                      {...register("jobTitle")}
                    />
                  </div>
                </div>
              </TabsContent>

              <TabsContent value="hanmac" className="mt-4 space-y-4">
                <div className="space-y-3">
                  <div className="flex items-center justify-between gap-3">
                    <div>
                      <p className="text-sm font-medium">
                        소속별 직급/직책/직무
                      </p>
                      <p className="text-xs text-muted-foreground">
                        테넌트별 조직장 여부, 직급, 직책, 직무를 입력합니다.
                      </p>
                    </div>
                    <Button
                      type="button"
                      variant="outline"
                      size="sm"
                      onClick={addAppointment}
                    >
                      <Plus className="mr-2 h-4 w-4" />
                      {t("ui.common.add", "추가")}
                    </Button>
                  </div>

                  {additionalAppointments.map((appointment, index) => (
                    <div
                      key={appointment.draftId}
                      data-testid={`appointment-row-${index}`}
                      className="grid gap-3 rounded-md border p-3 lg:grid-cols-[minmax(280px,1.2fr)_minmax(280px,1fr)_auto] lg:items-end"
                    >
                      <div
                        className="space-y-2"
                        data-testid={`appointment-tenant-owner-line-${index}`}
                      >
                        <Label>소속 테넌트</Label>
                        <div className="flex flex-wrap items-center gap-3">
                          <Button
                            type="button"
                            variant="outline"
                            onClick={() =>
                              setPickerTarget({
                                kind: "appointment",
                                index,
                              })
                            }
                            disabled={isResolvingTenant}
                          >
                            <Building2 className="mr-2 h-4 w-4" />
                            {appointment.tenantName || "테넌트 선택"}
                          </Button>
                          {appointment.tenantSlug && (
                            <span className="text-xs text-muted-foreground">
                              {appointment.tenantSlug}
                            </span>
                          )}
                          <label className="flex items-center gap-3 text-sm">
                            <Switch
                              checked={appointment.isOwner}
                              onCheckedChange={(checked) =>
                                updateAppointment(index, {
                                  isOwner: checked === true,
                                })
                              }
                              aria-label={t(
                                "ui.admin.users.detail.form.appointment_owner",
                                "대표 조직",
                              )}
                            />
                            {t(
                              "ui.admin.users.detail.form.appointment_owner",
                              "대표 조직",
                            )}
                          </label>
                        </div>
                      </div>

                      <div
                        className="grid gap-3 sm:grid-cols-3"
                        data-testid={`appointment-position-line-${index}`}
                      >
                        <div className="space-y-2">
                          <Label htmlFor={`appointment-grade-${index}`}>
                            직급
                          </Label>
                          <Input
                            id={`appointment-grade-${index}`}
                            value={appointment.grade ?? ""}
                            onChange={(event) =>
                              updateAppointment(index, {
                                grade: event.target.value,
                              })
                            }
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor={`appointment-job-title-${index}`}>
                            직무
                          </Label>
                          <Input
                            id={`appointment-job-title-${index}`}
                            value={appointment.jobTitle ?? ""}
                            onChange={(event) =>
                              updateAppointment(index, {
                                jobTitle: event.target.value,
                              })
                            }
                          />
                        </div>
                        <div className="space-y-2">
                          <Label htmlFor={`appointment-position-${index}`}>
                            직책
                          </Label>
                          <Input
                            id={`appointment-position-${index}`}
                            value={appointment.position ?? ""}
                            onChange={(event) =>
                              updateAppointment(index, {
                                position: event.target.value,
                              })
                            }
                          />
                        </div>
                      </div>
                      <Button
                        type="button"
                        variant="ghost"
                        size="sm"
                        onClick={() => removeAppointment(index)}
                      >
                        <Trash2 className="h-4 w-4" />
                        <span className="sr-only">
                          {t("ui.common.delete", "삭제")}
                        </span>
                      </Button>
                    </div>
                  ))}
                </div>
              </TabsContent>

              <TabsContent value="personal" className="mt-4">
                <div
                  className="rounded-md border bg-muted/30 p-4 text-sm"
                  data-testid="personal-tenant-summary"
                >
                  {personalTenant
                    ? `Personal (${personalTenant.slug})`
                    : "Personal 테넌트로 생성됩니다."}
                </div>
              </TabsContent>
            </Tabs>

            {userSchema.length > 0 && (
              <div className="border-t pt-4">
                <h3 className="mb-4 text-sm font-medium text-muted-foreground">
                  {t(
                    "ui.admin.users.create.custom_fields.title",
                    "테넌트 확장 정보 (Custom Fields)",
                  )}
                </h3>

                <div className="grid gap-4 md:grid-cols-2">
                  {userSchema.map((field) => (
                    <div key={field.key} className="space-y-2">
                      <Label htmlFor={`metadata.${field.key}`}>
                        {field.label}
                        {field.required && (
                          <span className="ml-1 text-destructive">*</span>
                        )}
                        {field.adminOnly && (
                          <span className="ml-2 text-[10px] bg-blue-500/10 text-blue-500 px-1.5 py-0.5 rounded uppercase font-bold tracking-tighter">
                            Admin Only
                          </span>
                        )}
                        {field.isLoginId && (
                          <span className="ml-2 text-[10px] bg-green-500/10 text-green-600 px-1.5 py-0.5 rounded uppercase font-bold">
                            {t(
                              "ui.admin.users.create.form.is_login_id",
                              "로그인 ID",
                            )}
                          </span>
                        )}
                      </Label>

                      <Input
                        id={`metadata.${field.key}`}
                        type={
                          field.type === "number"
                            ? "number"
                            : field.type === "date"
                              ? "date"
                              : field.type === "boolean"
                                ? "checkbox"
                                : "text"
                        }
                        className={
                          field.type === "boolean" ? "w-auto h-auto" : ""
                        }
                        {...registerMetadata(field)}
                      />
                      {errors.metadata?.[field.key] && (
                        <p className="text-xs text-destructive">
                          {
                            (
                              errors.metadata[field.key] as {
                                message?: string;
                              }
                            )?.message
                          }
                        </p>
                      )}
                    </div>
                  ))}
                </div>
              </div>
            )}

            <div className="flex justify-end gap-4">
              <Button
                type="button"
                variant="outline"
                onClick={() => navigate("/users")}
              >
                {t("ui.common.cancel", "취소")}
              </Button>
              <Button type="submit" disabled={mutation.isPending}>
                {mutation.isPending && (
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                )}
                <Save className="mr-2 h-4 w-4" />
                {t("ui.admin.users.create.submit", "사용자 생성")}
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
      <Dialog
        open={pickerTarget !== null}
        onOpenChange={(open) => {
          if (!open) setPickerTarget(null);
        }}
      >
        <DialogContent className="max-w-[460px] p-4">
          <DialogHeader>
            <DialogTitle>
              {t("ui.admin.users.create.form.pick_tenant", "테넌트 선택")}
            </DialogTitle>
            <DialogDescription>
              {t(
                "msg.admin.users.create.form.picker_description",
                "org-chart에서 테넌트를 선택하면 사용자 소속에 반영됩니다.",
              )}
            </DialogDescription>
          </DialogHeader>
          <iframe
            title={t("ui.admin.users.create.form.pick_tenant", "테넌트 선택")}
            src={pickerUrl}
            className="h-[600px] w-full rounded-md border"
          />
        </DialogContent>
      </Dialog>
    </div>
  );
}

export default UserCreatePage;