"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import Link from "next/link";
import { useParams, useRouter } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { apiFetch } from "@open-mercato/ui/backend/utils/api";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { Page, PageBody } from "@open-mercato/ui/backend/Page";
import { Button } from "@open-mercato/ui/primitives/button";
import { FormHeader } from "@open-mercato/ui/backend/forms";
import { Spinner } from "@open-mercato/ui/primitives/spinner";
import { JsonDisplay } from "@open-mercato/ui/backend/JsonDisplay";
import { RecordNotFoundState, ErrorMessage } from "@open-mercato/ui/backend/detail";
function WorkflowEventDetailPage() {
  const router = useRouter();
  const params = useParams();
  const t = useT();
  let eventId;
  if (params?.id) {
    eventId = Array.isArray(params.id) ? params.id[0] : params.id;
  } else if (params?.slug && Array.isArray(params.slug)) {
    eventId = params.slug[params.slug.length - 1];
  }
  const { data: event, isLoading, error } = useQuery({
    queryKey: ["workflows", "events", eventId],
    queryFn: async () => {
      const response = await apiFetch(`/api/workflows/events/${eventId}`);
      if (!response.ok) {
        const httpErr = new Error(
          response.status === 404 ? t("workflows.events.notFound", "Event not found.") : t("workflows.events.messages.loadFailed")
        );
        httpErr.status = response.status;
        throw httpErr;
      }
      const result = await response.json();
      return result;
    },
    enabled: !!eventId
  });
  if (isLoading) {
    return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "flex h-[50vh] flex-col items-center justify-center gap-2 text-muted-foreground", children: [
      /* @__PURE__ */ jsx(Spinner, { className: "h-6 w-6" }),
      /* @__PURE__ */ jsx("span", { children: t("workflows.common.loading") })
    ] }) }) });
  }
  const isNotFound = !isLoading && error?.status === 404;
  if (isNotFound) {
    return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(
      RecordNotFoundState,
      {
        label: t("workflows.events.notFound", "Event not found."),
        backHref: "/backend/events",
        backLabel: t("workflows.events.backToList", "Back to Events")
      }
    ) }) });
  }
  if (error || !event) {
    return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(
      ErrorMessage,
      {
        label: error?.message ?? t("workflows.events.messages.loadFailed"),
        action: /* @__PURE__ */ jsx(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsx(Link, { href: "/backend/events", children: t("workflows.events.backToList", "Back to Events") }) })
      }
    ) }) });
  }
  const getEventTypeBadgeClass = (eventType) => {
    if (eventType.includes("STARTED")) return "bg-blue-100 text-blue-800";
    if (eventType.includes("COMPLETED")) return "bg-green-100 text-green-800";
    if (eventType.includes("FAILED") || eventType.includes("REJECTED")) return "bg-red-100 text-red-800";
    if (eventType.includes("CANCELLED")) return "bg-muted text-foreground";
    if (eventType.includes("ENTERED") || eventType.includes("EXITED")) return "bg-purple-100 text-purple-800";
    return "bg-muted text-foreground";
  };
  const getStatusBadgeClass = (status) => {
    switch (status) {
      case "COMPLETED":
        return "bg-green-100 text-green-800";
      case "RUNNING":
        return "bg-blue-100 text-blue-800";
      case "FAILED":
        return "bg-red-100 text-red-800";
      case "CANCELLED":
        return "bg-muted text-foreground";
      default:
        return "bg-muted text-foreground";
    }
  };
  return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
    /* @__PURE__ */ jsx(
      FormHeader,
      {
        mode: "detail",
        backHref: "/backend/events",
        backLabel: t("workflows.events.backToList", "Back to events"),
        entityTypeLabel: t("workflows.events.detail.type", "Workflow event"),
        title: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
          /* @__PURE__ */ jsx("span", { children: event.eventType }),
          /* @__PURE__ */ jsxs("span", { className: "font-mono text-sm text-muted-foreground", children: [
            "#",
            event.id.slice(0, 8)
          ] })
        ] }),
        statusBadge: /* @__PURE__ */ jsx(
          "span",
          {
            className: `inline-flex items-center px-3 py-1 rounded text-sm font-medium ${getEventTypeBadgeClass(event.eventType)}`,
            children: event.eventType
          }
        )
      }
    ),
    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-6", children: [
      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-4", children: t("workflows.events.detail.summary") }),
      /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.events.fields.occurredAt") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground", children: new Date(event.occurredAt).toLocaleString() })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.events.fields.eventType") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1", children: /* @__PURE__ */ jsx(
            "span",
            {
              className: `inline-flex items-center px-2 py-1 rounded text-xs font-medium ${getEventTypeBadgeClass(
                event.eventType
              )}`,
              children: event.eventType
            }
          ) })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.events.fields.userId") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground font-mono", children: event.userId || t("common.none") })
        ] }),
        event.stepInstanceId && /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.events.detail.stepInstanceId") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground font-mono", children: event.stepInstanceId })
        ] })
      ] })
    ] }),
    event.workflowInstance && /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-6", children: [
      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-4", children: t("workflows.events.detail.workflowInstance") }),
      /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.instanceId") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1", children: /* @__PURE__ */ jsx(
            Link,
            {
              href: `/backend/instances/${event.workflowInstance.id}`,
              className: "text-sm text-primary hover:underline font-mono",
              children: event.workflowInstance.id
            }
          ) })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.status") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1", children: /* @__PURE__ */ jsx(
            "span",
            {
              className: `inline-flex items-center px-2 py-1 rounded text-xs font-medium ${getStatusBadgeClass(
                event.workflowInstance.status
              )}`,
              children: event.workflowInstance.status
            }
          ) })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.workflowId") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground font-mono", children: event.workflowInstance.workflowId })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.version") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground", children: event.workflowInstance.version })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.currentStep") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground font-mono", children: event.workflowInstance.currentStepId })
        ] }),
        event.workflowInstance.correlationKey && /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.correlationKey") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground font-mono", children: event.workflowInstance.correlationKey })
        ] }),
        event.workflowInstance.startedAt && /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.startedAt") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground", children: new Date(event.workflowInstance.startedAt).toLocaleString() })
        ] }),
        event.workflowInstance.completedAt && /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.instances.fields.completedAt") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground", children: new Date(event.workflowInstance.completedAt).toLocaleString() })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ jsx(
      JsonDisplay,
      {
        data: event.eventData,
        title: t("workflows.events.detail.eventData")
      }
    ),
    event.workflowInstance?.context && /* @__PURE__ */ jsx(
      JsonDisplay,
      {
        data: event.workflowInstance.context,
        title: t("workflows.events.detail.workflowContext")
      }
    ),
    /* @__PURE__ */ jsxs("div", { className: "rounded-lg border bg-card p-6", children: [
      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold mb-4", children: t("workflows.events.detail.technicalDetails") }),
      /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", children: [
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.events.detail.tenantId") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground font-mono", children: event.tenantId })
        ] }),
        /* @__PURE__ */ jsxs("div", { children: [
          /* @__PURE__ */ jsx("dt", { className: "text-sm font-medium text-muted-foreground", children: t("workflows.events.detail.organizationId") }),
          /* @__PURE__ */ jsx("dd", { className: "mt-1 text-sm text-foreground font-mono", children: event.organizationId })
        ] })
      ] })
    ] })
  ] }) }) });
}
export {
  WorkflowEventDetailPage as default
};
//# sourceMappingURL=page.js.map
