"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { getIntegrationTitle } from "@open-mercato/shared/modules/integrations/types";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { cn } from "@open-mercato/shared/lib/utils";
const SYNC_STATUS_STYLES = {
  synced: { dot: "bg-status-success-icon", label: "integrations.syncStatus.synced" },
  pending: { dot: "bg-status-warning-icon", label: "integrations.syncStatus.pending" },
  error: { dot: "bg-status-error-icon", label: "integrations.syncStatus.error" },
  not_synced: { dot: "bg-status-neutral-icon", label: "integrations.syncStatus.notSynced" }
};
function SyncStatusBadge({ status, lastSynced }) {
  const t = useT();
  const config = SYNC_STATUS_STYLES[status];
  const label = t(config.label, status);
  return /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [
    /* @__PURE__ */ jsx("span", { className: cn("inline-block size-1.5 rounded-full", config.dot), "aria-hidden": "true" }),
    /* @__PURE__ */ jsx("span", { children: label }),
    lastSynced && /* @__PURE__ */ jsx("span", { title: lastSynced, children: new Date(lastSynced).toLocaleDateString() })
  ] });
}
function ExternalLinkIcon() {
  return /* @__PURE__ */ jsxs("svg", { className: "size-3.5", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
    /* @__PURE__ */ jsx("path", { d: "M6.5 3.5H3a1 1 0 0 0-1 1V13a1 1 0 0 0 1 1h8.5a1 1 0 0 0 1-1V9.5" }),
    /* @__PURE__ */ jsx("path", { d: "M9.5 2h4.5v4.5M14 2 7.5 8.5" })
  ] });
}
function ExternalIdsWidget({ data }) {
  const t = useT();
  const integrations = data?._integrations;
  if (!integrations || Object.keys(integrations).length === 0) return null;
  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-4", children: [
    /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-medium", children: t("integrations.externalIds.title", "External IDs") }),
    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: Object.entries(integrations).map(([integrationId, mapping]) => /* @__PURE__ */ jsxs(
      "div",
      {
        className: "flex items-center justify-between gap-2 rounded-md bg-muted/50 px-3 py-2",
        children: [
          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 min-w-0", children: [
            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: getIntegrationTitle(integrationId) }),
            /* @__PURE__ */ jsx("code", { className: "rounded bg-muted px-1.5 py-0.5 text-xs font-mono text-muted-foreground", children: mapping.externalId }),
            mapping.externalUrl && /* @__PURE__ */ jsx(
              "a",
              {
                href: mapping.externalUrl,
                target: "_blank",
                rel: "noopener noreferrer",
                className: "text-muted-foreground hover:text-foreground transition-colors",
                "aria-label": t("integrations.externalIds.openExternal", "Open in external system"),
                children: /* @__PURE__ */ jsx(ExternalLinkIcon, {})
              }
            )
          ] }),
          /* @__PURE__ */ jsx(SyncStatusBadge, { status: mapping.syncStatus, lastSynced: mapping.lastSyncedAt })
        ]
      },
      integrationId
    )) })
  ] });
}
ExternalIdsWidget.metadata = {
  id: "integrations.injection.external-ids",
  title: "External IDs",
  features: ["integrations.view"]
};
export {
  ExternalIdsWidget as default
};
//# sourceMappingURL=widget.client.js.map
