"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from "@open-mercato/ui/primitives/dialog";
import { Button } from "@open-mercato/ui/primitives/button";
import { Input } from "@open-mercato/ui/primitives/input";
import { Label } from "@open-mercato/ui/primitives/label";
import { KbdShortcut } from "@open-mercato/ui/primitives/kbd";
import { Spinner } from "@open-mercato/ui/primitives/spinner";
import { useT } from "@open-mercato/shared/lib/i18n/context";
const HOSTNAME_BASIC = /^[a-z0-9.-]+$/i;
function RegisterDialog({
  open,
  onOpenChange,
  mode,
  currentHostname,
  onSubmit,
  initialError
}) {
  const t = useT();
  const [hostname, setHostname] = React.useState("");
  const [error, setError] = React.useState(initialError ?? null);
  const [submitting, setSubmitting] = React.useState(false);
  const inputRef = React.useRef(null);
  React.useEffect(() => {
    if (!open) {
      setHostname("");
      setError(null);
      setSubmitting(false);
      return;
    }
    setError(initialError ?? null);
    window.setTimeout(() => inputRef.current?.focus(), 0);
  }, [open, initialError]);
  const validate = React.useCallback(
    (value) => {
      const trimmed = value.trim();
      if (!trimmed) return t("customer_accounts.domainMapping.errors.required", "Domain is required");
      if (trimmed.length > 253) return t("customer_accounts.domainMapping.hostname.validation.invalid", "Enter a valid domain name (no protocol, path, or port)");
      if (trimmed.includes("://") || trimmed.includes("/") || trimmed.includes(":")) {
        return t("customer_accounts.domainMapping.hostname.validation.invalid", "Enter a valid domain name (no protocol, path, or port)");
      }
      if (!HOSTNAME_BASIC.test(trimmed) && !/^xn--/i.test(trimmed)) {
        return t("customer_accounts.domainMapping.hostname.validation.invalid", "Enter a valid domain name (no protocol, path, or port)");
      }
      return null;
    },
    [t]
  );
  const handleSubmit = React.useCallback(
    async (event) => {
      event.preventDefault();
      const validation = validate(hostname);
      if (validation) {
        setError(validation);
        return;
      }
      setSubmitting(true);
      setError(null);
      try {
        await onSubmit(hostname.trim());
      } catch (err) {
        const message = err instanceof Error ? err.message : "Submission failed";
        setError(message);
      } finally {
        setSubmitting(false);
      }
    },
    [hostname, onSubmit, validate]
  );
  const handleKeyDown = React.useCallback(
    (event) => {
      if ((event.metaKey || event.ctrlKey) && event.key === "Enter") {
        event.preventDefault();
        handleSubmit(event);
      }
    },
    [handleSubmit]
  );
  const title = mode === "change" ? t("customer_accounts.domainMapping.dialog.change.title", "Change custom domain") : t("customer_accounts.domainMapping.dialog.register.title", "Register custom domain");
  const description = mode === "change" && currentHostname ? t(
    "customer_accounts.domainMapping.changeDomain.description",
    "Your current domain ({hostname}) will stay active until the new domain is fully set up. No downtime for your customers.",
    { hostname: currentHostname }
  ) : t("customer_accounts.domainMapping.description", "Map your own domain to the customer portal");
  const submitLabel = mode === "change" ? t("customer_accounts.domainMapping.dialog.change.submit", "Start replacement") : t("customer_accounts.domainMapping.dialog.register.submit", "Register");
  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { children: [
    /* @__PURE__ */ jsxs(DialogHeader, { children: [
      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
      /* @__PURE__ */ jsx(DialogDescription, { children: description })
    ] }),
    /* @__PURE__ */ jsxs("form", { className: "space-y-4", onSubmit: handleSubmit, onKeyDown: handleKeyDown, children: [
      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
        /* @__PURE__ */ jsx(Label, { htmlFor: "custom-domain-hostname", children: t("customer_accounts.domainMapping.hostname.label", "Domain") }),
        /* @__PURE__ */ jsx(
          Input,
          {
            id: "custom-domain-hostname",
            ref: inputRef,
            value: hostname,
            autoComplete: "off",
            spellCheck: false,
            placeholder: t("customer_accounts.domainMapping.hostname.placeholder", "e.g., shop.yourdomain.com"),
            onChange: (event) => {
              setHostname(event.target.value);
              if (error) setError(null);
            },
            "aria-invalid": error ? true : void 0,
            disabled: submitting
          }
        ),
        error ? /* @__PURE__ */ jsx("p", { className: "text-sm text-status-error-text", role: "alert", children: error }) : null
      ] }),
      /* @__PURE__ */ jsxs(DialogFooter, { className: "items-center", children: [
        /* @__PURE__ */ jsx("span", { className: "hidden text-xs text-muted-foreground sm:inline-flex sm:items-center sm:gap-1", children: /* @__PURE__ */ jsx(KbdShortcut, { keys: ["\u2318", "Enter"] }) }),
        /* @__PURE__ */ jsx(
          Button,
          {
            type: "button",
            variant: "ghost",
            size: "default",
            onClick: () => onOpenChange(false),
            disabled: submitting,
            children: t("customer_accounts.domainMapping.dialog.cancel", "Cancel")
          }
        ),
        /* @__PURE__ */ jsxs(Button, { type: "submit", size: "default", disabled: submitting, children: [
          submitting ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }) : null,
          submitLabel
        ] })
      ] })
    ] })
  ] }) });
}
var RegisterDialog_default = RegisterDialog;
export {
  RegisterDialog,
  RegisterDialog_default as default
};
//# sourceMappingURL=RegisterDialog.js.map
