"use client";

import Link from "next/link";
import { useRouter } from "next/navigation";
import { useEffect, useState, type FormEvent } from "react";
import {
  deleteManagedMemberAction,
  updateManagedMemberAction,
} from "@/app/actions/session";
import { BottomToast, type BottomToastNotice } from "@/components/bottom-toast";
import { CloseIconButton } from "@/components/close-icon-button";
import { StaticUiLocalizer } from "@/components/static-ui-localizer";
import { useI18n } from "@/components/i18n-provider";
import { SubmitButton } from "@/components/submit-button";
import type { MailPlanSummary } from "@/lib/mail-billing";
import type { ManagedMailboxMember } from "@/lib/mail-automation";
import type {
  MailAppOverview,
  MailMessageDetail,
  MailMessageSummary,
} from "@/lib/official-mail";

export type MemberMailboxViewState = {
  data: MailAppOverview | null;
  folder: string;
  member: ManagedMailboxMember;
  messageId: number | null;
  page: number;
};

function LockIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      <rect x="5.5" y="10.2" width="13" height="9.3" rx="2.2" />
      <path d="M8.5 10.2V8.3a3.5 3.5 0 1 1 7 0v1.9" />
    </svg>
  );
}

function PlusIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      <path d="M12 5v14" />
      <path d="M5 12h14" />
    </svg>
  );
}

function ArrowLeftIcon({ className }: { className?: string }) {
  return (
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.8"
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      <path d="M15 5 8 12l7 7" />
    </svg>
  );
}

function formatDateLabel(value: string) {
  const date = new Date(value);
  return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, "0")}.${String(
    date.getDate(),
  ).padStart(2, "0")}`;
}

function formatMemberMailboxDate(value: string) {
  const date = new Date(value);
  const now = new Date();
  const sameDay =
    date.getFullYear() === now.getFullYear() &&
    date.getMonth() === now.getMonth() &&
    date.getDate() === now.getDate();

  if (sameDay) {
    return `${String(date.getHours()).padStart(2, "0")}:${String(date.getMinutes()).padStart(2, "0")}`;
  }

  return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, "0")}.${String(
    date.getDate(),
  ).padStart(2, "0")}`;
}

function memberFolderLabel(systemName: string) {
  if (systemName === "inbox") return "받은메일";
  if (systemName === "sent") return "보낸메일";
  if (systemName === "drafts") return "임시보관함";
  if (systemName === "spam") return "스팸함";
  if (systemName === "trash") return "휴지통";
  return "메일함";
}

function memberMailboxHref(
  memberId: number,
  options?: {
    folder?: string;
    messageId?: number | null;
    page?: number;
  },
) {
  const params = new URLSearchParams({
    memberMailbox: String(memberId),
    panel: "setup",
    section: "members",
  });

  if (options?.folder) {
    params.set("memberFolder", options.folder);
  }

  if (options?.page && options.page > 1) {
    params.set("memberPage", String(options.page));
  }

  if (options?.messageId) {
    params.set("memberMessage", String(options.messageId));
  }

  return `/mail?${params.toString()}`;
}

function senderLabel(message: MailMessageSummary) {
  return message.direction === "outbound"
    ? message.toAddresses || "(받는 사람 없음)"
    : message.fromName || message.fromAddress;
}

function memberFieldClass(options?: { readOnly?: boolean }) {
  if (options?.readOnly) {
    return "h-11 w-full rounded-[10px] border border-[#e4ebf6] bg-[#f8faff] px-3.5 text-[14px] text-[#70819d] outline-none";
  }

  return "h-11 w-full rounded-[10px] border border-[#dbe5f7] bg-white px-3.5 text-[14px] text-[#1a2943] outline-none transition-colors placeholder:text-[#97a7c2] focus:border-[#bcd1ff]";
}

function resolveCreateMemberDisabledReason(input: {
  canManageBilling: boolean;
  growthPlanActive: boolean;
}) {
  if (!input.canManageBilling) {
    return "대표 관리자 계정에서만 멤버를 추가할 수 있습니다.";
  }

  if (!input.growthPlanActive) {
    return "무료 플랜에서는 멤버 추가가 잠겨 있습니다. 성장 플랜 구독 후 열립니다.";
  }

  return "";
}

function MemberMailboxPreview({
  viewState,
}: {
  viewState: MemberMailboxViewState;
}) {
  const { data, member } = viewState;
  const selectedMessage = data?.selectedMessage ?? null;
  const messages = data?.messages ?? [];
  const folders = data?.folders ?? [];
  const currentFolder = data?.currentFolder ?? viewState.folder;
  const totalMessages = data?.totalMessages ?? messages.length;
  const currentPage = data?.currentPage ?? viewState.page;
  const totalPages = data?.totalPages ?? 1;

  const selectedOrFirstMessage: MailMessageDetail | null = selectedMessage;

  return (
    <>
      <div className="border-b border-[#edf1f6] px-3 py-3 sm:px-4 lg:px-5">
        <Link
          href="/mail?panel=setup&section=members"
          className="inline-flex h-9 items-center gap-1.5 rounded-[10px] px-1 text-[13px] font-semibold text-[#526784] transition-colors hover:text-[#2f6df6]"
        >
          <ArrowLeftIcon className="h-[16px] w-[16px]" />
          <span>돌아가기</span>
        </Link>
      </div>

      <div className="om-setup-header lg:flex-row lg:items-start lg:justify-between lg:gap-5">
        <div className="om-setup-header-copy">
          <h1 className="om-page-title text-[#16233c]">멤버 메일함</h1>
          <p className="om-setup-header-description">
            {member.displayName} · {member.email}
          </p>
        </div>
      </div>

      <div className="om-setup-content pb-10">
        <section className="om-setup-panel overflow-hidden">
          <div className="border-b border-[#edf1f6] px-3 py-3 sm:px-4 lg:px-5">
            <div className="flex flex-wrap items-center gap-2">
              {folders.map((folder) => {
                const active = folder.systemName === currentFolder;
                return (
                  <Link
                    key={folder.id}
                    href={memberMailboxHref(member.id, {
                      folder: folder.systemName,
                    })}
                    className={`inline-flex h-9 items-center gap-1.5 rounded-[10px] px-3 text-[13px] font-semibold transition-colors ${
                      active
                        ? "bg-[#edf4ff] text-[#2f6df6]"
                        : "text-[#667792] hover:bg-[#f7faff] hover:text-[#2f6df6]"
                    }`}
                  >
                    <span>{memberFolderLabel(folder.systemName)}</span>
                    <span className={active ? "text-[#2f6df6]" : "text-[#9aa7bb]"}>
                      {folder.unreadCount || folder.count}
                    </span>
                  </Link>
                );
              })}
            </div>
          </div>

          {!data ? (
            <div className="px-3 py-10 text-center text-[14px] leading-7 text-[#7b8ca8] sm:px-4 lg:px-5">
              이 멤버 메일함 데이터를 불러오지 못했습니다.
            </div>
          ) : (
            <div className="grid min-h-[520px] lg:grid-cols-[minmax(320px,0.9fr)_minmax(0,1.35fr)]">
              <div className="border-b border-[#edf1f6] lg:border-b-0 lg:border-r">
                <div className="flex items-center justify-between border-b border-[#edf1f6] px-3 py-3 sm:px-4 lg:px-5">
                  <div className="flex items-center gap-2 text-[14px]">
                    <span className="font-semibold text-[#16233c]">
                      {memberFolderLabel(currentFolder)}
                    </span>
                    <span className="font-semibold text-[#2f6df6]">{totalMessages}</span>
                  </div>
                  <span className="text-[12px] text-[#7b8ca8]">
                    {currentPage} / {totalPages}
                  </span>
                </div>

                <div className="divide-y divide-[#edf1f6]">
                  {messages.length === 0 ? (
                    <div className="px-4 py-10 text-center text-[13px] leading-6 text-[#7b8ca8]">
                      표시할 메일이 없습니다.
                    </div>
                  ) : (
                    messages.map((message) => {
                      const active = selectedMessage?.id === message.id;
                      return (
                        <Link
                          key={message.id}
                          href={memberMailboxHref(member.id, {
                            folder: currentFolder,
                            messageId: message.id,
                            page: currentPage,
                          })}
                          className={`block px-3 py-3 transition-colors sm:px-4 lg:px-5 ${
                            active ? "bg-[#f4f8ff]" : "hover:bg-[#fafcff]"
                          }`}
                        >
                          <div className="flex items-start justify-between gap-3">
                            <p
                              className={`min-w-0 truncate text-[14px] ${
                                message.isRead ? "font-medium text-[#33445f]" : "font-semibold text-[#17233c]"
                              }`}
                            >
                              {senderLabel(message)}
                            </p>
                            <span className="shrink-0 text-[12px] text-[#8b98aa]">
                              {formatMemberMailboxDate(message.receivedAt)}
                            </span>
                          </div>
                          <p
                            className={`mt-1 truncate text-[13px] ${
                              message.isRead ? "text-[#4f5f78]" : "font-semibold text-[#1f2c45]"
                            }`}
                          >
                            {message.subject || "(제목 없음)"}
                          </p>
                          <p className="mt-1 line-clamp-2 text-[12px] leading-5 text-[#7b8ca8]">
                            {message.snippet || "미리보기 내용이 없습니다."}
                          </p>
                        </Link>
                      );
                    })
                  )}
                </div>

                {totalPages > 1 ? (
                  <div className="flex items-center justify-between border-t border-[#edf1f6] px-3 py-3 sm:px-4 lg:px-5">
                    <Link
                      href={memberMailboxHref(member.id, {
                        folder: currentFolder,
                        page: Math.max(1, currentPage - 1),
                      })}
                      aria-disabled={currentPage <= 1}
                      className={`text-[13px] font-semibold ${
                        currentPage <= 1
                          ? "pointer-events-none text-[#b5bfce]"
                          : "text-[#526784] hover:text-[#2f6df6]"
                      }`}
                    >
                      이전
                    </Link>
                    <Link
                      href={memberMailboxHref(member.id, {
                        folder: currentFolder,
                        page: Math.min(totalPages, currentPage + 1),
                      })}
                      aria-disabled={currentPage >= totalPages}
                      className={`text-[13px] font-semibold ${
                        currentPage >= totalPages
                          ? "pointer-events-none text-[#b5bfce]"
                          : "text-[#526784] hover:text-[#2f6df6]"
                      }`}
                    >
                      다음
                    </Link>
                  </div>
                ) : null}
              </div>

              <div className="min-w-0 bg-white">
                {selectedOrFirstMessage ? (
                  <article className="px-4 py-5 sm:px-5 lg:px-6">
                    <div className="border-b border-[#edf1f6] pb-4">
                      <p className="text-[13px] font-semibold text-[#2f6df6]">
                        {selectedOrFirstMessage.direction === "outbound" ? "보낸 메일" : "받은 메일"}
                      </p>
                      <h2 className="mt-2 break-words text-[22px] font-semibold leading-8 tracking-[-0.05em] text-[#16233c]">
                        {selectedOrFirstMessage.subject || "(제목 없음)"}
                      </h2>
                      <div className="mt-4 grid gap-2 text-[13px] leading-5 text-[#667792]">
                        <p>
                          보낸 사람{" "}
                          <span className="font-medium text-[#22324d]">
                            {selectedOrFirstMessage.fromName
                              ? `${selectedOrFirstMessage.fromName} <${selectedOrFirstMessage.fromAddress}>`
                              : selectedOrFirstMessage.fromAddress}
                          </span>
                        </p>
                        <p>
                          받는 사람{" "}
                          <span className="font-medium text-[#22324d]">
                            {selectedOrFirstMessage.toAddresses || "-"}
                          </span>
                        </p>
                        <p>{formatMemberMailboxDate(selectedOrFirstMessage.receivedAt)}</p>
                      </div>
                    </div>

                    {selectedOrFirstMessage.bodyHtmlDisplay ? (
                      <div
                        className="mail-content mt-5 max-w-none text-[14px] leading-7 text-[#22324d]"
                        dangerouslySetInnerHTML={{
                          __html: selectedOrFirstMessage.bodyHtmlDisplay,
                        }}
                      />
                    ) : (
                      <pre className="mt-5 whitespace-pre-wrap break-words text-[14px] leading-7 text-[#22324d]">
                        {selectedOrFirstMessage.bodyText || selectedOrFirstMessage.snippet || "본문이 없습니다."}
                      </pre>
                    )}
                  </article>
                ) : (
                  <div className="flex min-h-[360px] items-center justify-center px-4 text-center text-[14px] leading-7 text-[#7b8ca8]">
                    왼쪽 목록에서 메일을 선택하면 본문을 확인할 수 있습니다.
                  </div>
                )}
              </div>
            </div>
          )}
        </section>
      </div>
    </>
  );
}

type CreateMemberResponse = {
  message?: string;
  ok?: boolean;
};

export function MailMembersPanel({
  canManageBilling,
  domain,
  memberMailboxView,
  members,
  planSummary,
  representativeDisplayName,
  representativeMailbox,
  embedded = false,
}: {
  canManageBilling: boolean;
  domain: string;
  memberMailboxView?: MemberMailboxViewState | null;
  members: ManagedMailboxMember[];
  planSummary: MailPlanSummary;
  representativeDisplayName: string;
  representativeMailbox: string;
  embedded?: boolean;
}) {
  const { tr } = useI18n();
  const router = useRouter();
  const [editingMemberId, setEditingMemberId] = useState<number | null>(null);
  const [createModalOpen, setCreateModalOpen] = useState(false);
  const [createSubmitting, setCreateSubmitting] = useState(false);
  const [toastNotice, setToastNotice] = useState<BottomToastNotice | null>(null);
  const totalMailboxCount = members.length + 1;
  const growthPlanActive = planSummary.tier === "growth";
  const isComplimentaryGrowthPlan = planSummary.isComplimentary;
  const memberPriceTaxLabel = planSummary.taxLabel;
  const memberChargeLabel = planSummary.unitPriceLabel;
  const createLockedReason = resolveCreateMemberDisabledReason({
    canManageBilling,
    growthPlanActive,
  });
  const createLocked = Boolean(createLockedReason);
  const memberMailboxContent =
    memberMailboxView && canManageBilling ? (
      <MemberMailboxPreview viewState={memberMailboxView} />
    ) : null;

  useEffect(() => {
    if (!createModalOpen) {
      return undefined;
    }

    const previousOverflow = document.body.style.overflow;
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape" && !createSubmitting) {
        setCreateModalOpen(false);
      }
    };

    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", handleKeyDown);

    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener("keydown", handleKeyDown);
    };
  }, [createModalOpen, createSubmitting]);

  useEffect(() => {
    if (!toastNotice) {
      return undefined;
    }

    const timer = window.setTimeout(() => {
      setToastNotice(null);
    }, 4200);

    return () => window.clearTimeout(timer);
  }, [toastNotice]);

  async function handleCreateMemberSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();

    if (createSubmitting) {
      return;
    }

    if (createLocked) {
      setToastNotice({
        tone: "error",
        message: createLockedReason,
      });
      return;
    }

    const form = event.currentTarget;
    const formData = new FormData(form);
    const displayName = String(formData.get("displayName") ?? "");
    const localPart = String(formData.get("localPart") ?? "");
    const password = String(formData.get("password") ?? "");
    const passwordConfirm = String(formData.get("passwordConfirm") ?? "");

    if (password.trim() !== passwordConfirm.trim()) {
      setToastNotice({
        tone: "error",
        message: "멤버 메일 비밀번호와 확인 값이 서로 다릅니다.",
      });
      return;
    }

    setCreateSubmitting(true);

    try {
      const response = await fetch("/api/mailbox/members", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          displayName,
          localPart,
          password,
          passwordConfirm,
        }),
      });
      const payload = (await response.json().catch(() => null)) as CreateMemberResponse | null;

      if (!response.ok || !payload?.ok) {
        setToastNotice({
          tone: "error",
          message: payload?.message || "멤버 메일함 추가 중 오류가 발생했습니다.",
        });
        return;
      }

      form.reset();
      setCreateModalOpen(false);
      setToastNotice({
        tone: "success",
        message: payload.message || "멤버 메일함을 추가했습니다.",
      });
      router.refresh();
    } catch {
      setToastNotice({
        tone: "error",
        message: "멤버 메일함 추가 중 오류가 발생했습니다.",
      });
    } finally {
      setCreateSubmitting(false);
    }
  }

  const pageContent = (
    <StaticUiLocalizer>
      <>
      {memberMailboxContent ?? (
        <>
      <div className="om-setup-header lg:flex-row lg:items-start lg:justify-between lg:gap-5">
            <div className="om-setup-header-copy">
              <h1 className="om-page-title text-[#16233c]">멤버 관리</h1>
              <p className="om-setup-header-description">
                팀 메일함을 추가하고, 이름과 비밀번호를 한 곳에서 관리합니다.
              </p>
              <p className="mt-2 text-[13px] font-semibold leading-5 text-[#b45b11]">
                {isComplimentaryGrowthPlan
                  ? "안내: 운영 계정 혜택이 적용되어 멤버를 추가하거나 삭제해도 결제가 발생하지 않습니다."
                  : "안내: 멤버를 추가했다가 바로 삭제해도, 이미 추가된 결제 금액은 환불되지 않습니다."}
              </p>
            </div>

            <div className="ml-auto flex shrink-0 flex-col items-end gap-2 text-right">
              <button
                type="button"
                disabled={createLocked}
                onClick={() => {
                  setEditingMemberId(null);
                  setCreateModalOpen(true);
                }}
                className={`inline-flex h-10 items-center gap-2 rounded-[10px] px-4 text-[13px] font-semibold transition-all duration-200 ${
                  createLocked
                    ? "cursor-not-allowed border border-[#d8e1f0] bg-[#f4f7fb] text-[#8a97ad]"
                    : "om-btn-primary shadow-none hover:shadow-none"
                }`}
              >
                {createLocked ? (
                  <LockIcon className="h-[16px] w-[16px] shrink-0" />
                ) : (
                  <PlusIcon className="h-[16px] w-[16px] shrink-0" />
                )}
                <span>멤버 추가</span>
              </button>
              {createLockedReason ? (
                <p className="text-[12px] leading-5 text-[#7b8ca8]">{createLockedReason}</p>
              ) : (
                <p className="text-[12px] leading-5 text-[#7b8ca8]">
                  {isComplimentaryGrowthPlan
                    ? "운영 계정 혜택으로 멤버를 무과금으로 추가합니다."
                    : `추가 즉시 1명당 ${memberChargeLabel}(${memberPriceTaxLabel}) 결제`}
                </p>
              )}
            </div>
      </div>

      <div className="om-setup-content">
        <section className="om-setup-panel overflow-hidden">
              <div className="flex flex-wrap items-center justify-between gap-3 border-b border-[#edf1f6] px-3 py-3 sm:px-4 lg:px-5">
                <div>
                  <p className="text-[15px] font-semibold tracking-[-0.03em] text-[#16233c] sm:text-[16px]">
                    등록된 메일함
                  </p>
                  <p className="mt-1 text-[13px] leading-5 text-[#7b8ca8]">
                    대표 메일을 포함한 현재 운영 중인 메일 목록입니다.
                  </p>
                </div>
                <span className="text-[13px] font-semibold text-[#2f6df6]">{tr("총")} {totalMailboxCount}</span>
              </div>

              <div className="hidden border-b border-[#edf1f6] bg-[#fbfcff] px-3 py-3 sm:px-4 lg:grid lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1.7fr)_96px_172px_190px] lg:items-center lg:gap-4 lg:px-5">
                <span className="text-[12px] font-semibold tracking-[0.01em] text-[#6f819f]">
                  메일함
                </span>
                <span className="text-[12px] font-semibold tracking-[0.01em] text-[#6f819f]">
                  주소
                </span>
                <span className="text-[12px] font-semibold tracking-[0.01em] text-[#6f819f]">
                  구분
                </span>
                <span className="text-[12px] font-semibold tracking-[0.01em] text-[#6f819f]">
                  최근 변경
                </span>
                <span className="text-right text-[12px] font-semibold tracking-[0.01em] text-[#6f819f]">
                  관리
                </span>
              </div>

              <div className="divide-y divide-[#edf1f6]">
                <div className="px-3 py-3 transition-colors hover:bg-[#fafcff] sm:px-4 lg:px-5">
                    <div className="grid gap-3 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1.7fr)_96px_172px_190px] lg:items-center lg:gap-4">
                    <div className="min-w-0">
                      <p data-i18n-skip className="truncate text-[15px] font-semibold text-[#16233c]">
                        {representativeDisplayName}
                      </p>
                      <p className="mt-1 text-[12px] leading-5 text-[#70819d] lg:hidden">
                        대표자 기본 메일함
                      </p>
                    </div>
                    <div className="min-w-0">
                      <p data-i18n-skip className="truncate text-[14px] font-medium text-[#344767]">
                        {representativeMailbox}
                      </p>
                      <p className="mt-1 text-[12px] leading-5 text-[#70819d]">
                        대표자 기본 메일함
                      </p>
                    </div>
                    <div className="lg:flex lg:justify-start">
                      <span className="om-badge om-badge-md om-badge-info">대표</span>
                    </div>
                    <p className="text-[13px] text-[#70819d]">
                      기본 계정
                    </p>
                    <div className="hidden lg:block" />
                  </div>
                </div>

                {members.length === 0 ? (
                  <div className="px-3 py-8 text-center text-[14px] leading-7 text-[#7b8ca8] sm:px-4 lg:px-5">
                    아직 추가된 멤버 메일함이 없습니다.
                    <br />
                    우측 상단의 멤버 추가 버튼으로 팀 메일함을 열 수 있습니다.
                  </div>
                ) : (
                  members.map((member) => {
                    const editing = editingMemberId === member.id;

                    return (
                      <div key={member.id} className="px-3 py-3 transition-colors hover:bg-[#fafcff] sm:px-4 lg:px-5">
                        <div className="grid gap-3 lg:grid-cols-[minmax(0,1.2fr)_minmax(0,1.7fr)_96px_172px_190px] lg:items-center lg:gap-4">
                          <div className="min-w-0">
                            <p data-i18n-skip className="truncate text-[15px] font-semibold text-[#16233c]">
                              {member.displayName}
                            </p>
                            <p className="mt-1 text-[12px] leading-5 text-[#70819d] lg:hidden">
                              {tr("생성일")} {formatDateLabel(member.createdAt)}
                            </p>
                          </div>
                          <div className="min-w-0">
                            <p data-i18n-skip className="truncate text-[14px] font-medium text-[#344767]">
                              {member.email}
                            </p>
                            <p className="mt-1 text-[12px] leading-5 text-[#70819d]">
                              {tr("생성일")} {formatDateLabel(member.createdAt)}
                            </p>
                          </div>
                          <div className="lg:flex lg:justify-start">
                            <span className="om-badge om-badge-md om-badge-muted">멤버</span>
                          </div>
                          <p className="text-[13px] text-[#70819d]">
                            {formatDateLabel(member.updatedAt)}
                          </p>
                          <div className="flex shrink-0 items-center gap-2 lg:justify-end">
                            {canManageBilling ? (
                              <Link
                                href={memberMailboxHref(member.id)}
                                className="om-btn-secondary h-9 rounded-[12px] px-3.5 text-[13px] text-[#344767]"
                              >
                                메일함
                              </Link>
                            ) : null}
                            {editing ? (
                              <CloseIconButton
                                ariaLabel="멤버 편집 닫기"
                                onClick={() => setEditingMemberId(null)}
                              />
                            ) : (
                              <button
                                type="button"
                                disabled={!canManageBilling}
                                onClick={() => setEditingMemberId(member.id)}
                                className="om-btn-secondary h-9 rounded-[12px] px-3.5 text-[13px] text-[#344767] disabled:cursor-not-allowed disabled:opacity-60"
                              >
                                편집
                              </button>
                            )}

                            <form action={deleteManagedMemberAction}>
                              <input type="hidden" name="memberId" value={member.id} />
                              <button
                                type="submit"
                                disabled={!canManageBilling}
                                className="om-btn-danger h-9 rounded-[12px] px-3.5 text-[13px] disabled:cursor-not-allowed disabled:opacity-60"
                              >
                                삭제
                              </button>
                            </form>
                          </div>
                        </div>

                        {editing ? (
                          <form action={updateManagedMemberAction} className="mt-5 border-t border-[#edf2fb] pt-5">
                            <input type="hidden" name="memberId" value={member.id} />

                            <div className="grid gap-4 xl:grid-cols-2">
                              <label className="block">
                                <span className="mb-2 block text-[13px] font-semibold text-[#4f6284]">
                                  표시 이름
                                </span>
                                <input
                                  required
                                  name="displayName"
                                  defaultValue={member.displayName}
                                  maxLength={191}
                                  className={memberFieldClass()}
                                />
                              </label>

                              <label className="block">
                                <span className="mb-2 block text-[13px] font-semibold text-[#4f6284]">
                                  메일 주소
                                </span>
                                <input
                                  readOnly
                                  value={member.email}
                                  className={memberFieldClass({ readOnly: true })}
                                />
                              </label>
                            </div>

                            <div className="mt-4 grid gap-4 xl:grid-cols-2">
                              <label className="block">
                                <span className="mb-2 block text-[13px] font-semibold text-[#4f6284]">
                                  새 비밀번호
                                </span>
                                <input
                                  name="password"
                                  type="password"
                                  autoComplete="new-password"
                                  placeholder="비워두면 기존 비밀번호를 유지합니다."
                                  className={memberFieldClass()}
                                />
                              </label>

                              <label className="block">
                                <span className="mb-2 block text-[13px] font-semibold text-[#4f6284]">
                                  비밀번호 확인
                                </span>
                                <input
                                  name="passwordConfirm"
                                  type="password"
                                  autoComplete="new-password"
                                  placeholder="같은 비밀번호를 다시 입력해 주세요."
                                  className={memberFieldClass()}
                                />
                              </label>
                            </div>

                            <div className="mt-5 flex justify-end">
                              <SubmitButton
                                label="멤버 저장"
                                pendingLabel="저장 중..."
                                disabled={!canManageBilling}
                                className="om-btn-primary h-10 rounded-[10px] px-4 text-[13px] shadow-none hover:shadow-none"
                              />
                            </div>
                          </form>
                        ) : null}
                      </div>
                    );
                  })
                )}
              </div>
            </section>

            <section className="om-setup-panel px-3 py-4 sm:px-4 lg:px-5">
              <p className="text-[15px] font-semibold tracking-[-0.03em] text-[#16233c] sm:text-[16px]">안내</p>
              <ul className="mt-3 grid gap-2 text-[13px] leading-5 text-[#6a7b98]">
                <li>대표 메일함은 기본 계정으로 유지되며 목록 최상단에 항상 표시됩니다.</li>
                <li>
                  {isComplimentaryGrowthPlan
                    ? "운영 계정 혜택으로 멤버 추가 비용과 자동결제가 발생하지 않습니다."
                    : `멤버 추가 시 1명당 ${memberChargeLabel}(${memberPriceTaxLabel})이 결제에 반영됩니다.`}
                </li>
                <li>멤버 메일함 삭제를 실행하면 연결된 실제 메일함도 함께 정리됩니다.</li>
              </ul>
            </section>
      </div>
        </>
      )}

      {createModalOpen ? (
        <div
          className="fixed inset-0 z-[170] flex items-center justify-center bg-[rgba(12,18,31,0.42)] px-4 py-8 backdrop-blur-[3px]"
          onClick={() => {
            if (!createSubmitting) {
              setCreateModalOpen(false);
            }
          }}
        >
          <div
            role="dialog"
            aria-modal="true"
            aria-labelledby="member-create-dialog-title"
            className="w-full max-w-[560px] overflow-hidden rounded-[22px] border border-[#e2eaf7] bg-white shadow-[0_28px_70px_rgba(18,32,65,0.18)]"
            onClick={(event) => event.stopPropagation()}
          >
            <div className="border-b border-[#edf2fb] px-6 py-5">
              <div className="flex items-start justify-between gap-4">
                <div className="min-w-0">
                  <p
                    id="member-create-dialog-title"
                    className="text-[20px] font-semibold tracking-[-0.04em] text-[#16233c]"
                  >
                    멤버 메일함 추가
                  </p>
                  <p className="mt-2 text-[14px] leading-6 text-[#6a7b98]">
                    결제 승인 후 새 멤버 메일함이 바로 생성됩니다.
                  </p>
                </div>
                <CloseIconButton
                  ariaLabel="멤버 추가 닫기"
                  onClick={() => {
                    if (!createSubmitting) {
                      setCreateModalOpen(false);
                    }
                  }}
                />
              </div>
            </div>

            <form onSubmit={handleCreateMemberSubmit} className="px-6 py-6">
              <div className="space-y-4">
                <label className="block">
                  <span className="mb-2 block text-[13px] font-semibold text-[#4f6284]">
                    표시 이름
                  </span>
                  <input
                    required
                    name="displayName"
                    maxLength={191}
                    placeholder="표시 이름을 입력해 주세요."
                    className={memberFieldClass()}
                  />
                </label>

                <label className="block">
                  <span className="mb-2 block text-[13px] font-semibold text-[#4f6284]">
                    메일 아이디
                  </span>
                  <div className="flex items-center overflow-hidden rounded-[10px] border border-[#dbe5f7] bg-white transition-colors focus-within:border-[#bcd1ff]">
                    <input
                      required
                      name="localPart"
                      maxLength={64}
                      placeholder="메일 아이디를 입력해 주세요."
                      pattern="^[a-z0-9](?:[a-z0-9._-]*[a-z0-9])?$"
                      className="h-11 min-w-0 flex-1 bg-transparent px-3.5 text-[14px] text-[#1a2943] outline-none placeholder:text-[#97a7c2]"
                    />
                    <span className="pr-3.5 text-[13px] font-medium text-[#6b7d99]">@{domain}</span>
                  </div>
                </label>

                <div className="grid gap-4 xl:grid-cols-2">
                  <label className="block">
                    <span className="mb-2 block text-[13px] font-semibold text-[#4f6284]">
                      초기 비밀번호
                    </span>
                    <input
                      required
                      name="password"
                      type="password"
                      autoComplete="new-password"
                      placeholder="멤버 메일함 비밀번호"
                      className={memberFieldClass()}
                    />
                  </label>

                  <label className="block">
                    <span className="mb-2 block text-[13px] font-semibold text-[#4f6284]">
                      비밀번호 확인
                    </span>
                    <input
                      required
                      name="passwordConfirm"
                      type="password"
                      autoComplete="new-password"
                      placeholder="같은 비밀번호를 다시 입력해 주세요."
                      className={memberFieldClass()}
                    />
                  </label>
                </div>
              </div>

              <div className="mt-6 border-t border-[#edf2fb] pt-4">
                <div className="flex items-center justify-between gap-4">
                  <div>
                    <p className="text-[13px] font-semibold text-[#243555]">
                      {isComplimentaryGrowthPlan ? "운영 계정 무과금 혜택" : "추가 멤버 1명 즉시 결제"}
                    </p>
                    <p className="mt-1 text-[12px] leading-5 text-[#70819d]">
                      {isComplimentaryGrowthPlan
                        ? "결제수단 등록 없이 새 멤버 메일함을 바로 추가합니다."
                        : "결제가 승인된 뒤에만 새 멤버 메일함이 열립니다."}
                    </p>
                  </div>
                  <p className="text-[18px] font-semibold tracking-[-0.04em] text-[#2f6df6]">
                    {isComplimentaryGrowthPlan
                      ? "0원"
                      : `${memberChargeLabel}(${memberPriceTaxLabel})`}
                  </p>
                </div>
              </div>

              <div className="mt-6 flex items-center justify-end gap-2 border-t border-[#edf2fb] pt-5">
                <button
                  type="button"
                  disabled={createSubmitting}
                  onClick={() => setCreateModalOpen(false)}
                  className="om-btn-secondary h-11 rounded-[14px] px-4 text-[13px] text-[#344767] disabled:cursor-not-allowed disabled:opacity-60"
                >
                  취소
                </button>
                <button
                  type="submit"
                  disabled={createSubmitting}
                  className="om-btn-primary h-11 rounded-[14px] px-4 text-[13px] disabled:cursor-not-allowed disabled:opacity-60"
                >
                  {createSubmitting
                    ? isComplimentaryGrowthPlan
                      ? "멤버 추가 중..."
                      : `${memberChargeLabel}(${memberPriceTaxLabel}) 결제 반영 중...`
                    : isComplimentaryGrowthPlan
                      ? "무과금으로 멤버 추가"
                      : `${memberChargeLabel}(${memberPriceTaxLabel}) 결제 반영 후 추가`}
                </button>
              </div>
            </form>
          </div>
        </div>
      ) : null}

      {toastNotice ? (
        <BottomToast
          className={createModalOpen ? "z-[190]" : "z-[90]"}
          notice={toastNotice}
          onClose={() => setToastNotice(null)}
        />
      ) : null}
      </>
    </StaticUiLocalizer>
  );

  if (embedded) {
    return pageContent;
  }

  return (
    <div className="om-setup-page h-full overflow-y-auto">
      <div className="om-setup-shell">{pageContent}</div>
    </div>
  );
}