import { renderActivity } from "./activity-rail";
import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import { Suspense, useEffect, useState } from "react";
import { CompactActivityContext } from "./shared";
import { defaultToolRegistry } from "./tool-renderers";
import type { ToolRegistry } from "./registry";
import { toolDisplayName } from "./tool-display-name";
import { ToolKindIcon } from "./tool-icon";
import { genericToolIconKind } from "./tool-presentation";
import { toolStepPhase } from "./tool-steps";
import type { ActivityItem } from "./types";
import { rollingActivityItem } from "./work-presentation";
import { useOpenGeniText } from "../messages/runtime";

/** One stable viewport; updates replace its content without moving the conversation. */
export function RollingActivity({
  items,
  toolRegistry = defaultToolRegistry,
  previousItem,
  showCount = true,
}: {
  items: ActivityItem[];
  /** The standalone item visible immediately before this reel mounted. */
  previousItem?: ActivityItem | undefined;
  toolRegistry?: ToolRegistry;
  /** Show "+N earlier"; off when an enclosing status line already counts steps. */
  showCount?: boolean;
}) {
  const t = useOpenGeniText();
  const reduced = useReducedMotion();
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);
  // Progress notes have their own line in the status row; the reel shows steps, advancing
  // with the event order so finishing a parallel tool never replays an older one.
  const selected = rollingActivityItem(items, previousItem, mounted);
  if (!selected) return null;
  const { item, earlierCount } = selected;
  const fallback = (
    <span className="og-rolling-label">
      <ToolKindIcon
        kind={item.kind === "tool-call" ? genericToolIconKind(item.name) : "wrench"}
        className="size-3.5"
      />
      <span>
        {item.kind === "tool-call"
          ? toolDisplayName(t, item.name, item.display, toolStepPhase(item.status))
          : t("timeline.rollingActivity.working")}
      </span>
    </span>
  );
  return (
    <span className="og-rolling-status" data-running={selected.running ? "true" : undefined}>
      <span className="sr-only">
        {item.kind === "tool-call"
          ? toolDisplayName(t, item.name, item.display, toolStepPhase(item.status))
          : item.kind === "reasoning"
            ? t("timeline.rollingActivity.thinking")
            : t("timeline.rollingActivity.working")}
      </span>
      <span className="og-rolling-window" aria-hidden="true">
        <AnimatePresence initial={false} mode="sync">
          <motion.span
            key={item.id}
            className="og-rolling-face"
            initial={{
              opacity: 0,
              y: reduced ? 0 : 24,
            }}
            animate={{ opacity: 1, y: 0 }}
            exit={{
              opacity: 0,
              y: reduced ? 0 : -24,
            }}
            transition={{ duration: reduced ? 0 : 0.4, ease: [0.22, 1, 0.36, 1] }}
          >
            <CompactActivityContext.Provider value={true}>
              <Suspense fallback={fallback}>
                {renderActivity(t, item, toolRegistry, undefined, undefined, undefined, undefined)}
              </Suspense>
            </CompactActivityContext.Provider>
          </motion.span>
        </AnimatePresence>
      </span>
      {showCount && earlierCount > 0 ? (
        <span className="og-rolling-count">{`+${earlierCount} earlier`}</span>
      ) : null}
    </span>
  );
}