"use client";

import { useId, useState } from "react";

import type { UiStep } from "@/lib/gateway/transcript";

/** The collapsible "N steps" tool/reasoning trace on agent messages (§5b). */
export function StepTrace({ steps }: { steps: UiStep[] }) {
  const [expanded, setExpanded] = useState(false);
  const regionId = useId();
  if (steps.length === 0) {
    return null;
  }
  return (
    <div className="pt-1">
      <button
        type="button"
        aria-expanded={expanded}
        aria-controls={regionId}
        onClick={() => setExpanded((v) => !v)}
        className="rounded-(--radius) px-1.5 py-0.5 text-xs text-muted-foreground hover:bg-surface-warm hover:text-foreground"
      >
        {expanded ? "▾" : "▸"} {steps.length}{" "}
        {steps.length === 1 ? "step" : "steps"}
      </button>
      {expanded && (
        <ul id={regionId} className="flex flex-col gap-1 pl-3 pt-1">
          {steps.map((step) => (
            <li
              key={step.seq}
              className="rounded-(--radius) border border-border bg-subtle px-2 py-1.5 font-mono text-xs motion-safe:animate-[toolSlideIn_var(--duration-fast)_var(--ease-app)]"
            >
              <span
                className={
                  step.status === "error"
                    ? "text-accent"
                    : step.status === "running"
                      ? "text-muted-foreground motion-safe:animate-[pulse_1.5s_ease-in-out_infinite]"
                      : "text-foreground"
                }
              >
                {step.status === "ok" ? "✓" : step.status === "error" ? "✗" : "…"}{" "}
                {step.tool}
              </span>
              {step.output != null && (
                <span className="block truncate pt-0.5 text-muted-foreground">
                  {JSON.stringify(step.output)}
                </span>
              )}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}