"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { createPortal } from "react-dom";
import { X } from "lucide-react";
import { Button } from "@open-mercato/ui/primitives/button";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import {
  ChangedFieldsTable,
  CollapsibleJsonSection,
  extractChangeRows,
  formatDate,
  formatResource
} from "../lib/display-helpers.js";
function ActionLogDetailsDialog({ item, onClose }) {
  const t = useT();
  const noneLabel = t("audit_logs.common.none");
  const [mounted, setMounted] = React.useState(false);
  React.useEffect(() => {
    setMounted(true);
    const prevOverflow = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const handleKey = (event) => {
      if (event.key === "Escape") onClose();
    };
    document.addEventListener("keydown", handleKey);
    return () => {
      document.body.style.overflow = prevOverflow;
      document.removeEventListener("keydown", handleKey);
    };
  }, [onClose]);
  const changeRows = React.useMemo(
    () => extractChangeRows(item.changes, item.snapshotBefore),
    [item.changes, item.snapshotBefore]
  );
  const hasContext = !!item.context && typeof item.context === "object" && Object.keys(item.context).length > 0;
  const snapshots = React.useMemo(() => {
    const entries = [];
    if (item.snapshotBefore != null) {
      entries.push({ label: t("audit_logs.actions.details.snapshot_before"), value: item.snapshotBefore });
    }
    if (item.snapshotAfter != null) {
      entries.push({ label: t("audit_logs.actions.details.snapshot_after"), value: item.snapshotAfter });
    }
    return entries;
  }, [item.snapshotAfter, item.snapshotBefore, t]);
  if (!mounted) return null;
  return createPortal(
    /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 z-modal flex w-full items-end justify-center bg-black/50 p-0 backdrop-blur-sm sm:items-center sm:p-6", children: [
      /* @__PURE__ */ jsx(
        "button",
        {
          type: "button",
          "aria-label": t("audit_logs.actions.details.close"),
          className: "absolute inset-0 -z-10 h-full w-full cursor-default",
          onClick: onClose
        }
      ),
      /* @__PURE__ */ jsxs(
        "div",
        {
          role: "dialog",
          "aria-modal": "true",
          "aria-labelledby": "action-log-details-heading",
          className: "relative z-20 flex max-h-[90vh] w-full max-w-3xl flex-col overflow-hidden rounded-t-2xl bg-card shadow-xl sm:rounded-xl",
          children: [
            /* @__PURE__ */ jsxs("header", { className: "flex items-start justify-between gap-4 border-b px-4 py-3 sm:px-6", children: [
              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
                /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wide text-muted-foreground", children: t("audit_logs.actions.details.title") }),
                /* @__PURE__ */ jsx("h2", { id: "action-log-details-heading", className: "truncate text-lg font-semibold", children: item.actionLabel || item.commandId }),
                /* @__PURE__ */ jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: formatDate(item.createdAt) })
              ] }),
              /* @__PURE__ */ jsx(
                Button,
                {
                  variant: "ghost",
                  size: "icon",
                  "aria-label": t("audit_logs.actions.details.close"),
                  onClick: onClose,
                  children: /* @__PURE__ */ jsx(X, { className: "size-5", "aria-hidden": "true" })
                }
              )
            ] }),
            /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-6 overflow-y-auto px-4 py-4 sm:px-6", children: [
              /* @__PURE__ */ jsx("section", { className: "space-y-3 text-sm", children: /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2", children: [
                /* @__PURE__ */ jsxs("div", { children: [
                  /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t("audit_logs.actions.columns.action") }),
                  /* @__PURE__ */ jsx("dd", { className: "text-sm", children: item.actionLabel || item.commandId })
                ] }),
                /* @__PURE__ */ jsxs("div", { children: [
                  /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t("audit_logs.actions.columns.resource") }),
                  /* @__PURE__ */ jsx("dd", { className: "text-sm break-words", children: formatResource(item, noneLabel) })
                ] }),
                /* @__PURE__ */ jsxs("div", { children: [
                  /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t("audit_logs.actions.columns.user") }),
                  /* @__PURE__ */ jsx("dd", { className: "text-sm", children: item.actorUserName || item.actorUserId || noneLabel })
                ] }),
                /* @__PURE__ */ jsxs("div", { children: [
                  /* @__PURE__ */ jsx("dt", { className: "text-xs uppercase tracking-wide text-muted-foreground", children: t("audit_logs.actions.columns.status") }),
                  /* @__PURE__ */ jsx("dd", { className: "text-sm capitalize", children: item.executionState })
                ] })
              ] }) }),
              /* @__PURE__ */ jsx(ChangedFieldsTable, { changeRows, noneLabel, t }),
              hasContext ? /* @__PURE__ */ jsx("section", { children: /* @__PURE__ */ jsx(CollapsibleJsonSection, { label: t("audit_logs.actions.details.context"), value: item.context }) }) : null,
              snapshots.length ? /* @__PURE__ */ jsx("section", { className: "space-y-4", children: snapshots.map((entry) => /* @__PURE__ */ jsx(CollapsibleJsonSection, { label: entry.label, value: entry.value }, entry.label)) }) : null
            ] })
          ]
        }
      )
    ] }),
    document.body
  );
}
export {
  ActionLogDetailsDialog
};
//# sourceMappingURL=ActionLogDetailsDialog.js.map
