"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { useRouter, useSearchParams } from "next/navigation";
import { Globe } from "lucide-react";
import { Page, PageBody } from "@open-mercato/ui/backend/Page";
import { FormHeader } from "@open-mercato/ui/backend/forms";
import { EmptyState } from "@open-mercato/ui/backend/EmptyState";
import { LoadingMessage, ErrorMessage } from "@open-mercato/ui/backend/detail";
import { Button } from "@open-mercato/ui/primitives/button";
import { apiCall, withScopedApiRequestHeaders } from "@open-mercato/ui/backend/utils/apiCall";
import { buildOptimisticLockHeader } from "@open-mercato/ui/backend/utils/optimisticLock";
import { flash } from "@open-mercato/ui/backend/FlashMessages";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { useConfirmDialog } from "@open-mercato/ui/backend/confirm-dialog";
import { useGuardedMutation } from "@open-mercato/ui/backend/injection/useGuardedMutation";
import { useAppEvent } from "@open-mercato/ui/backend/injection/useAppEvent";
import { OrgSwitcher } from "./components/OrgSwitcher.js";
import { DomainPanel } from "./components/DomainPanel.js";
import { RegisterDialog } from "./components/RegisterDialog.js";
const STATE_LOADING = "loading";
const STATE_LOADED = "loaded";
const STATE_ERROR = "error";
function flattenOrgNodes(nodes, acc = [], depth = 0) {
  if (!nodes) return acc;
  for (const node of nodes) {
    if (node.selectable) {
      acc.push({ id: node.id, label: node.name, depth });
    }
    flattenOrgNodes(node.children, acc, depth + 1);
  }
  return acc;
}
function CustomerDomainSettingsPage() {
  const t = useT();
  const router = useRouter();
  const searchParams = useSearchParams();
  const [orgOptions, setOrgOptions] = React.useState([]);
  const [defaultOrgId, setDefaultOrgId] = React.useState(null);
  const [orgsLoaded, setOrgsLoaded] = React.useState(false);
  const urlOrgId = searchParams?.get("org") ?? null;
  const selectedOrgId = urlOrgId ?? defaultOrgId;
  const [mappings, setMappings] = React.useState([]);
  const [config, setConfig] = React.useState({ cnameTarget: null, aRecordTarget: null });
  const [loadState, setLoadState] = React.useState(STATE_LOADING);
  const [reloadToken, setReloadToken] = React.useState(0);
  const [registerOpen, setRegisterOpen] = React.useState(false);
  const [registerMode, setRegisterMode] = React.useState("register");
  const [replaceTargetId, setReplaceTargetId] = React.useState(null);
  const [isMutating, setIsMutating] = React.useState(false);
  const { confirm, ConfirmDialogElement } = useConfirmDialog();
  const { runMutation } = useGuardedMutation({
    contextId: "customer_accounts:domain-settings"
  });
  const runMutationWithContext = React.useCallback(
    async (operation, mutationPayload) => {
      return runMutation({
        operation,
        mutationPayload,
        context: { entityType: "customer_accounts:domain_mapping" }
      });
    },
    [runMutation]
  );
  const refresh = React.useCallback(() => {
    setReloadToken((token) => token + 1);
  }, []);
  React.useEffect(() => {
    let cancelled = false;
    async function loadOrgs() {
      try {
        const call = await apiCall("/api/directory/organization-switcher");
        if (cancelled) return;
        if (!call.ok || !call.result) {
          setOrgOptions([]);
          setDefaultOrgId(null);
          return;
        }
        const flat = flattenOrgNodes(call.result.items, [], 0);
        setOrgOptions(flat);
        const fallback = call.result.selectedId ?? (flat[0]?.id ?? null);
        setDefaultOrgId(fallback);
      } catch {
        if (!cancelled) {
          setOrgOptions([]);
          setDefaultOrgId(null);
        }
      } finally {
        if (!cancelled) setOrgsLoaded(true);
      }
    }
    loadOrgs();
    return () => {
      cancelled = true;
    };
  }, []);
  React.useEffect(() => {
    if (!orgsLoaded) return;
    if (!selectedOrgId) {
      setMappings([]);
      setConfig({ cnameTarget: null, aRecordTarget: null });
      setLoadState(STATE_LOADED);
      return;
    }
    let cancelled = false;
    async function load() {
      setLoadState(STATE_LOADING);
      try {
        const call = await apiCall(
          `/api/customer_accounts/admin/domain-mappings?organizationId=${encodeURIComponent(selectedOrgId)}`
        );
        if (cancelled) return;
        if (!call.ok || !call.result?.ok) {
          setLoadState(STATE_ERROR);
          return;
        }
        setMappings(Array.isArray(call.result.domainMappings) ? call.result.domainMappings : []);
        setConfig(call.result.config ?? { cnameTarget: null, aRecordTarget: null });
        setLoadState(STATE_LOADED);
      } catch {
        if (!cancelled) setLoadState(STATE_ERROR);
      }
    }
    load();
    return () => {
      cancelled = true;
    };
  }, [orgsLoaded, selectedOrgId, reloadToken]);
  useAppEvent("customer_accounts.domain_mapping.*", () => {
    refresh();
  }, [refresh]);
  const orderedMappings = React.useMemo(() => {
    if (mappings.length === 0) return [];
    const sorted = [...mappings].sort((a, b) => {
      const aActive = a.status === "active" ? 0 : 1;
      const bActive = b.status === "active" ? 0 : 1;
      if (aActive !== bActive) return aActive - bActive;
      return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime();
    });
    return sorted;
  }, [mappings]);
  const primaryActiveId = React.useMemo(() => {
    const active = orderedMappings.find((m) => m.status === "active");
    if (active) return active.id;
    return orderedMappings[0]?.id ?? null;
  }, [orderedMappings]);
  const handleOrgChange = React.useCallback(
    (next) => {
      const params = new URLSearchParams(searchParams?.toString() ?? "");
      if (next) params.set("org", next);
      else params.delete("org");
      const qs = params.toString();
      router.replace(qs ? `?${qs}` : "?", { scroll: false });
    },
    [router, searchParams]
  );
  const handleOpenRegister = React.useCallback(() => {
    setRegisterMode("register");
    setReplaceTargetId(null);
    setRegisterOpen(true);
  }, []);
  const handleOpenChange = React.useCallback((mappingId) => {
    setRegisterMode("change");
    setReplaceTargetId(mappingId);
    setRegisterOpen(true);
  }, []);
  const handleSubmitRegister = React.useCallback(
    async (hostname) => {
      if (!selectedOrgId) {
        throw new Error(t("customer_accounts.domainMapping.error.load", "Could not load custom-domain configuration"));
      }
      setIsMutating(true);
      try {
        await runMutationWithContext(async () => {
          const body = {
            hostname,
            organizationId: selectedOrgId
          };
          if (registerMode === "change" && replaceTargetId) {
            body.replacesDomainId = replaceTargetId;
          }
          const call = await apiCall(
            "/api/customer_accounts/admin/domain-mappings",
            {
              method: "POST",
              headers: { "content-type": "application/json" },
              body: JSON.stringify(body)
            }
          );
          if (!call.ok || !call.result?.ok) {
            const message = call.result?.error || t("customer_accounts.domainMapping.alreadyClaimed", "This domain is not available. Please choose a different hostname.");
            throw new Error(message);
          }
          flash(t("customer_accounts.domainMapping.registered", "Domain registered successfully"), "success");
          setRegisterOpen(false);
          refresh();
        });
      } finally {
        setIsMutating(false);
      }
    },
    [refresh, registerMode, replaceTargetId, runMutationWithContext, selectedOrgId, t]
  );
  const handleCheckNow = React.useCallback(
    async (mapping) => {
      setIsMutating(true);
      try {
        await runMutationWithContext(async () => {
          const call = await apiCall(
            `/api/customer_accounts/admin/domain-mappings/${encodeURIComponent(mapping.id)}/verify`,
            { method: "POST" }
          );
          if (!call.ok || !call.result?.ok) {
            const message = call.result?.error || t("customer_accounts.domainMapping.error.load", "Could not load custom-domain configuration");
            flash(message, "error");
            return;
          }
          refresh();
        });
      } finally {
        setIsMutating(false);
      }
    },
    [refresh, runMutationWithContext, t]
  );
  const handleRetryTls = React.useCallback(
    async (mapping) => {
      setIsMutating(true);
      try {
        await runMutationWithContext(async () => {
          const call = await apiCall(
            `/api/customer_accounts/admin/domain-mappings/${encodeURIComponent(mapping.id)}/health-check`,
            { method: "POST" }
          );
          if (!call.ok || !call.result?.ok) {
            const message = call.result?.error || t("customer_accounts.domainMapping.error.load", "Could not load custom-domain configuration");
            flash(message, "error");
            return;
          }
          refresh();
        });
      } finally {
        setIsMutating(false);
      }
    },
    [refresh, runMutationWithContext, t]
  );
  const handleRemove = React.useCallback(
    async (mapping) => {
      const replacement = orderedMappings.find(
        (m) => m.id !== mapping.id && m.status !== "active"
      );
      const text = replacement ? t("customer_accounts.domainMapping.removeConfirm.hasReplacement", "This will also cancel the pending replacement domain ({hostname}).", { hostname: replacement.hostname }) : t("customer_accounts.domainMapping.removeConfirm", "Are you sure? Customers using this domain will no longer be able to reach your portal.");
      const confirmed = await confirm({
        title: t("customer_accounts.domainMapping.removeConfirm.title", "Remove custom domain?"),
        text,
        variant: "destructive",
        confirmText: t("customer_accounts.domainMapping.removeDomain", "Remove Domain")
      });
      if (!confirmed) return;
      setIsMutating(true);
      try {
        await runMutationWithContext(async () => {
          const call = await withScopedApiRequestHeaders(
            buildOptimisticLockHeader(mapping.updatedAt),
            () => apiCall(
              `/api/customer_accounts/admin/domain-mappings?id=${encodeURIComponent(mapping.id)}`,
              { method: "DELETE" }
            )
          );
          if (!call.ok || !call.result?.ok) {
            const message = call.result?.error || t("customer_accounts.domainMapping.error.load", "Could not load custom-domain configuration");
            flash(message, "error");
            return;
          }
          flash(t("customer_accounts.domainMapping.removed", "Domain removed"), "success");
          refresh();
        });
      } finally {
        setIsMutating(false);
      }
    },
    [confirm, orderedMappings, refresh, runMutationWithContext, t]
  );
  const replaceTargetHostname = React.useMemo(() => {
    if (registerMode !== "change" || !replaceTargetId) return null;
    return orderedMappings.find((m) => m.id === replaceTargetId)?.hostname ?? null;
  }, [orderedMappings, registerMode, replaceTargetId]);
  return /* @__PURE__ */ jsxs(Page, { children: [
    /* @__PURE__ */ jsx("div", { className: "px-3 py-3 md:px-6 md:py-4", children: /* @__PURE__ */ jsx(
      FormHeader,
      {
        mode: "detail",
        title: t("customer_accounts.domainMapping.title", "Custom Domain"),
        subtitle: t("customer_accounts.domainMapping.description", "Map your own domain to the customer portal"),
        backHref: "/backend/customer_accounts/settings",
        backLabel: t("customer_accounts.settings.title", "Portal Settings")
      }
    ) }),
    /* @__PURE__ */ jsxs(PageBody, { className: "space-y-6", children: [
      orgOptions.length > 1 ? /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center justify-between gap-3 rounded-lg border bg-card px-4 py-3", children: /* @__PURE__ */ jsx(
        OrgSwitcher,
        {
          options: orgOptions,
          selectedId: selectedOrgId,
          onChange: handleOrgChange
        }
      ) }) : null,
      loadState === STATE_LOADING ? /* @__PURE__ */ jsx(LoadingMessage, { label: t("customer_accounts.domainMapping.loading", "Loading domain configuration\u2026") }) : null,
      loadState === STATE_ERROR ? /* @__PURE__ */ jsx(
        ErrorMessage,
        {
          label: t("customer_accounts.domainMapping.error.load", "Could not load custom-domain configuration"),
          action: /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: refresh, children: t("customer_accounts.domainMapping.verifyNow", "Check Now") })
        }
      ) : null,
      loadState === STATE_LOADED && orderedMappings.length === 0 && selectedOrgId ? /* @__PURE__ */ jsx(
        EmptyState,
        {
          icon: /* @__PURE__ */ jsx(Globe, { className: "h-8 w-8", "aria-hidden": true }),
          title: t("customer_accounts.domainMapping.empty.title", "No custom domain yet"),
          description: t("customer_accounts.domainMapping.empty.description", "Connect your own domain so customers can reach the portal at a branded URL."),
          action: {
            label: t("customer_accounts.domainMapping.empty.cta", "Register Domain"),
            onClick: handleOpenRegister,
            icon: /* @__PURE__ */ jsx(Globe, { className: "h-4 w-4", "aria-hidden": true })
          }
        }
      ) : null,
      loadState === STATE_LOADED && orderedMappings.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-4", children: orderedMappings.map((mapping) => {
        const isReplacement = mapping.id !== primaryActiveId && mapping.status !== "active";
        return /* @__PURE__ */ jsx(
          DomainPanel,
          {
            mapping,
            isReplacement,
            cnameTarget: config.cnameTarget,
            aRecordTarget: config.aRecordTarget,
            busy: isMutating,
            onCheckNow: () => handleCheckNow(mapping),
            onRetryTls: () => handleRetryTls(mapping),
            onChangeDomain: () => handleOpenChange(mapping.id),
            onRemove: () => handleRemove(mapping)
          },
          mapping.id
        );
      }) }) : null
    ] }),
    /* @__PURE__ */ jsx(
      RegisterDialog,
      {
        open: registerOpen,
        onOpenChange: setRegisterOpen,
        mode: registerMode,
        currentHostname: replaceTargetHostname,
        onSubmit: handleSubmitRegister
      }
    ),
    ConfirmDialogElement
  ] });
}
export {
  CustomerDomainSettingsPage as default
};
//# sourceMappingURL=page.js.map
