"use client";
import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';
import { jsxs, jsx } from 'react/jsx-runtime';

function cn(...inputs) {
  return twMerge(clsx(inputs));
}
function Task({ label, steps, durationMs, defaultOpen = true, className }) {
  const summary = summarize(steps, durationMs);
  return /* @__PURE__ */ jsxs(
    CollapsiblePrimitive.Root,
    {
      defaultOpen,
      className: cn(
        "overflow-hidden rounded-md border border-border bg-card text-card-foreground",
        className
      ),
      children: [
        /* @__PURE__ */ jsxs(
          CollapsiblePrimitive.Trigger,
          {
            className: cn(
              "group flex w-full items-center gap-2 px-3 py-2 text-left",
              "transition-all duration-[var(--duration-normal,200ms)] ease-out",
              "hover:bg-muted/30",
              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
            ),
            children: [
              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
                label ? /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: label }) : null,
                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: summary })
              ] }),
              /* @__PURE__ */ jsx(Chevron, {})
            ]
          }
        ),
        /* @__PURE__ */ jsx(CollapsiblePrimitive.Content, { className: "overflow-hidden border-t border-foreground/[0.06]", children: /* @__PURE__ */ jsx("ol", { className: "my-0 ml-0 flex list-none flex-col pl-0", children: steps.map((step) => /* @__PURE__ */ jsxs(
          "li",
          {
            className: "flex items-start gap-3 px-3 py-2 text-sm before:content-none last:pb-3",
            children: [
              /* @__PURE__ */ jsx(StepIcon, { state: step.state }),
              /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [
                /* @__PURE__ */ jsx(
                  "span",
                  {
                    className: cn(
                      "leading-snug",
                      step.state === "result" && "text-muted-foreground line-through decoration-muted-foreground/50",
                      step.state === "running" && "text-foreground font-medium",
                      step.state === "error" && "text-destructive",
                      step.state === "pending" && "text-muted-foreground"
                    ),
                    children: step.label
                  }
                ),
                step.detail ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: step.detail }) : null
              ] })
            ]
          },
          step.id
        )) }) })
      ]
    }
  );
}
function summarize(steps, durationMs) {
  const total = steps.length;
  const done = steps.filter((s) => s.state === "result").length;
  const running = steps.some((s) => s.state === "running");
  const errored = steps.some((s) => s.state === "error");
  if (errored) return `${done} of ${total} steps \xB7 failed`;
  if (running) return `${done} of ${total} steps`;
  if (done === total && total > 0 && typeof durationMs === "number") {
    return `Done in ${formatDuration(durationMs)}`;
  }
  if (done === total && total > 0) return "Done";
  return `${done} of ${total} steps`;
}
function formatDuration(ms) {
  if (ms < 1e3) return `${ms}ms`;
  const seconds = ms / 1e3;
  const formatted = seconds >= 10 ? Math.round(seconds).toString() : seconds.toFixed(1);
  return `${formatted}s`;
}
function StepIcon({ state }) {
  const cls = "mt-0.5 shrink-0";
  if (state === "result") {
    return /* @__PURE__ */ jsxs(
      "svg",
      {
        "aria-label": "Done",
        role: "img",
        viewBox: "0 0 16 16",
        width: "14",
        height: "14",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round",
        className: cn(cls, "text-emerald-500"),
        children: [
          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6" }),
          /* @__PURE__ */ jsx("path", { d: "M5 8.25l2.25 2.25L11 6" })
        ]
      }
    );
  }
  if (state === "running") {
    return /* @__PURE__ */ jsx(
      "svg",
      {
        "aria-label": "Running",
        role: "img",
        viewBox: "0 0 16 16",
        width: "14",
        height: "14",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        className: cn(cls, "text-primary motion-safe:animate-spin"),
        children: /* @__PURE__ */ jsx("path", { d: "M8 1.5a6.5 6.5 0 1 1-6.5 6.5" })
      }
    );
  }
  if (state === "error") {
    return /* @__PURE__ */ jsxs(
      "svg",
      {
        "aria-label": "Error",
        role: "img",
        viewBox: "0 0 16 16",
        width: "14",
        height: "14",
        fill: "none",
        stroke: "currentColor",
        strokeWidth: "2",
        strokeLinecap: "round",
        strokeLinejoin: "round",
        className: cn(cls, "text-destructive"),
        children: [
          /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6" }),
          /* @__PURE__ */ jsx("path", { d: "M5 5l6 6M11 5l-6 6" })
        ]
      }
    );
  }
  return /* @__PURE__ */ jsx(
    "svg",
    {
      "aria-label": "Pending",
      role: "img",
      viewBox: "0 0 16 16",
      width: "14",
      height: "14",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "2",
      className: cn(cls, "text-muted-foreground"),
      children: /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6", strokeDasharray: "2 2" })
    }
  );
}
function Chevron() {
  return /* @__PURE__ */ jsx(
    "svg",
    {
      "aria-hidden": true,
      viewBox: "0 0 16 16",
      width: "12",
      height: "12",
      fill: "none",
      stroke: "currentColor",
      strokeWidth: "1.5",
      strokeLinecap: "round",
      strokeLinejoin: "round",
      className: "ml-auto shrink-0 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180",
      children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" })
    }
  );
}

export { Task };
//# sourceMappingURL=task.js.map
//# sourceMappingURL=task.js.map