"use client";
"use client";
import {
  Button,
  Dialog,
  DialogContent,
  DialogDescription,
  DialogTitle,
  VisuallyHidden,
  buildThemeVars,
  cn,
  hasNoWebcam,
  useBranding,
  useDeviceHandoff,
  useKYCConfig
} from "./chunk-S5SA5XIW.mjs";
import {
  __spreadValues
} from "./chunk-ZPF7GLTY.mjs";

// src/components/DeviceHandoffGate.tsx
import { useEffect, useReducer, useRef, useState } from "react";
import { QRCodeSVG } from "qrcode.react";
import {
  Check,
  Copy,
  Loader2,
  Monitor,
  Moon,
  RefreshCcw,
  Smartphone,
  Sun,
  X
} from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
function ThemeToggle() {
  const [, rerender] = useReducer((x) => x + 1, 0);
  const dark = typeof document !== "undefined" && document.documentElement.classList.contains("dark");
  const toggle = () => {
    const next = !document.documentElement.classList.contains("dark");
    document.documentElement.classList.toggle("dark", next);
    try {
      localStorage.setItem("theme", next ? "dark" : "light");
    } catch (e) {
    }
    rerender();
  };
  return /* @__PURE__ */ jsx(
    "button",
    {
      type: "button",
      onClick: toggle,
      className: "flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",
      "aria-label": dark ? "Switch to light mode" : "Switch to dark mode",
      children: dark ? /* @__PURE__ */ jsx(Sun, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Moon, { className: "h-4 w-4" })
    }
  );
}
function HeaderBrand() {
  const { logo, companyName } = useBranding();
  const [failed, setFailed] = useState(false);
  const showLogo = Boolean(logo) && !failed;
  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
    showLogo && /* @__PURE__ */ jsx("div", { className: "flex h-7 w-7 shrink-0 items-center justify-center overflow-hidden rounded-full bg-white shadow-sm ring-1 ring-black/5", children: /* @__PURE__ */ jsx("img", { src: logo, alt: companyName ? `${companyName} logo` : "Company logo", className: "h-full w-full object-cover", onError: () => setFailed(true) }) }),
    showLogo && companyName && /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-semibold text-foreground", children: companyName })
  ] });
}
function DeviceHandoffGate({
  snapshot,
  onContinueHere,
  onClose,
  showThemeToggle,
  disableClose
}) {
  var _a;
  const config = useKYCConfig();
  const handoff = useDeviceHandoff(config.api, snapshot, true);
  const [copied, setCopied] = useState(false);
  const [noCamera, setNoCamera] = useState(false);
  const submittedRef = useRef(false);
  const themeVars = buildThemeVars(config.appearance);
  useEffect(() => {
    var _a2;
    const theme = (_a2 = config.appearance) == null ? void 0 : _a2.theme;
    if (theme) document.documentElement.classList.toggle("dark", theme === "dark");
  }, [(_a = config.appearance) == null ? void 0 : _a.theme]);
  useEffect(() => {
    let active = true;
    hasNoWebcam().then((v) => {
      if (active) setNoCamera(v);
    });
    return () => {
      active = false;
    };
  }, []);
  useEffect(() => {
    if (handoff.phase === "error") onContinueHere();
  }, [handoff.phase, onContinueHere]);
  useEffect(() => {
    var _a2, _b;
    if (handoff.phase === "submitted" && handoff.verificationId && !submittedRef.current) {
      submittedRef.current = true;
      (_b = config.onSubmit) == null ? void 0 : _b.call(config, {
        verificationId: handoff.verificationId,
        status: "pending",
        metadata: __spreadValues({}, (_a2 = config.metadata) != null ? _a2 : {}),
        submittedAt: (/* @__PURE__ */ new Date()).toISOString()
      });
    }
  }, [handoff.phase, handoff.verificationId, config]);
  const copyLink = () => {
    var _a2;
    if (!handoff.url) return;
    (_a2 = navigator.clipboard) == null ? void 0 : _a2.writeText(handoff.url).then(
      () => {
        setCopied(true);
        setTimeout(() => setCopied(false), 2e3);
      },
      () => {
      }
    );
  };
  const isTerminal = handoff.phase === "submitted";
  const dismissBlocked = disableClose === true && !isTerminal;
  return /* @__PURE__ */ jsx(Dialog, { open: true, onOpenChange: (o) => {
    if (!o && !dismissBlocked) onClose();
  }, children: /* @__PURE__ */ jsxs(
    DialogContent,
    {
      className: "kyc-root",
      style: themeVars,
      onPointerDownOutside: (e) => {
        if (dismissBlocked) e.preventDefault();
      },
      onEscapeKeyDown: (e) => {
        if (dismissBlocked) e.preventDefault();
      },
      children: [
        /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
          /* @__PURE__ */ jsx(DialogTitle, { children: "Continue your verification" }),
          /* @__PURE__ */ jsx(DialogDescription, { children: "Continue on your phone or this device" })
        ] }),
        /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col overflow-hidden rounded-[inherit]", children: [
          /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-12 items-center justify-between gap-2 px-3 pt-[calc(env(safe-area-inset-top)+1.25rem)]", children: [
            /* @__PURE__ */ jsx(HeaderBrand, {}),
            /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
              showThemeToggle !== false && /* @__PURE__ */ jsx(ThemeToggle, {}),
              !dismissBlocked && /* @__PURE__ */ jsx(
                "button",
                {
                  type: "button",
                  onClick: onClose,
                  className: "flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground hover:bg-muted hover:text-foreground transition-colors",
                  "aria-label": "Close",
                  children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
                }
              )
            ] })
          ] }),
          /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto p-6 animate-slide-up", children: /* @__PURE__ */ jsx(
            GateBody,
            {
              phase: handoff.phase,
              url: handoff.url,
              code: handoff.code,
              noCamera,
              copied,
              onCopyLink: copyLink,
              onContinueHere,
              onRegenerate: handoff.regenerate,
              onDone: onClose
            }
          ) })
        ] })
      ]
    }
  ) });
}
function GateBody({
  phase,
  url,
  code,
  noCamera,
  copied,
  onCopyLink,
  onContinueHere,
  onRegenerate,
  onDone
}) {
  if (phase === "submitted") {
    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-6 py-8 animate-fade-in", children: [
      /* @__PURE__ */ jsx("div", { className: "flex h-20 w-20 items-center justify-center rounded-full bg-[var(--kyc-success)]/10", children: /* @__PURE__ */ jsx("svg", { className: "h-10 w-10 text-[var(--kyc-success)]", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M4 12l5 5L20 6", strokeDasharray: "100", strokeDashoffset: "100", className: "animate-checkmark" }) }) }),
      /* @__PURE__ */ jsxs("div", { className: "text-center space-y-1", children: [
        /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold font-heading", children: "Completed on your phone" }),
        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Your verification has been submitted for review. You can close this window." })
      ] }),
      /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: onDone, children: "Done" })
    ] });
  }
  if (phase === "expired") {
    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-6 py-8 animate-fade-in", children: [
      /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsx(RefreshCcw, { className: "h-7 w-7 text-muted-foreground" }) }),
      /* @__PURE__ */ jsxs("div", { className: "text-center space-y-1", children: [
        /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold font-heading", children: "Link expired" }),
        /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "This verification link timed out. Generate a new one, or continue on this device." })
      ] }),
      /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col gap-2", children: [
        /* @__PURE__ */ jsx(Button, { className: "w-full", onClick: onRegenerate, children: "Generate a new link" }),
        /* @__PURE__ */ jsx(Button, { variant: "ghost", className: "w-full", onClick: onContinueHere, children: "Continue on this device" })
      ] })
    ] });
  }
  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-6 py-2 animate-fade-in", children: [
    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-2 text-center", children: [
      /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-full bg-primary/10", children: /* @__PURE__ */ jsx(Smartphone, { className: "h-6 w-6 text-primary" }) }),
      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold font-heading", children: "Continue on your phone" }),
      /* @__PURE__ */ jsx("p", { className: "max-w-sm text-sm text-muted-foreground", children: noCamera ? "This device has no camera. Scan the QR code with your phone to finish your verification there." : "Scan the QR code with your phone to continue your verification there \u2014 handy for capturing your ID and selfie." })
    ] }),
    /* @__PURE__ */ jsx("div", { className: "flex h-[232px] w-[232px] items-center justify-center rounded-2xl border border-border bg-white p-4", children: url ? /* @__PURE__ */ jsx(QRCodeSVG, { value: url, size: 200, level: "M", marginSize: 0 }) : /* @__PURE__ */ jsx(Loader2, { className: "h-8 w-8 animate-spin text-muted-foreground" }) }),
    code && /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center gap-2", children: [
      /* @__PURE__ */ jsx("span", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: "Or enter this code" }),
      /* @__PURE__ */ jsx("span", { className: "font-heading text-lg font-semibold tracking-[0.2em] text-foreground", children: code }),
      /* @__PURE__ */ jsxs(Button, { variant: "outline", className: "mt-1 gap-2", onClick: onCopyLink, children: [
        copied ? /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Copy, { className: "h-4 w-4" }),
        copied ? "Link copied" : "Copy link"
      ] })
    ] }),
    phase === "opened" && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-2 text-sm text-primary", children: [
      /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }),
      "Continuing on your phone\u2026"
    ] }),
    /* @__PURE__ */ jsx("div", { className: "w-full border-t border-border pt-4", children: /* @__PURE__ */ jsxs(
      Button,
      {
        variant: "ghost",
        className: cn("w-full gap-2", phase === "opened" && "pointer-events-none opacity-50"),
        onClick: onContinueHere,
        disabled: phase === "opened",
        children: [
          /* @__PURE__ */ jsx(Monitor, { className: "h-4 w-4" }),
          "Continue on this device"
        ]
      }
    ) })
  ] });
}
export {
  DeviceHandoffGate as default
};
//# sourceMappingURL=DeviceHandoffGate-53T3CTTE.mjs.map