/** Accessible, poll-backed transcript for externally started Hermes workers. */

import { Button } from "@nous-research/ui/ui/components/button";
import {
  Activity,
  ChevronDown,
  ChevronUp,
  RefreshCw,
  TerminalSquare,
} from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";

import {
  api,
  type SessionInfo,
  type SessionMessage,
} from "@/lib/api";

const POLL_MS = 2_000;

interface SessionActivityPanelProps {
  sessionId: string;
  profile?: string;
}

function messageLabel(message: SessionMessage): string {
  if (message.role === "tool") {
    return message.tool_name ? `Tool result: ${message.tool_name}` : "Tool result";
  }
  if (message.tool_calls?.length) {
    const names = message.tool_calls
      .map((call) => call.function.name)
      .filter(Boolean)
      .join(", ");
    return names ? `Tool calls: ${names}` : "Tool calls";
  }
  return message.role === "assistant" ? "Hermes" : message.role;
}

function latestTimestamp(messages: SessionMessage[]): number | null {
  let latest: number | null = null;
  for (const message of messages) {
    if (typeof message.timestamp !== "number") continue;
    latest = latest === null ? message.timestamp : Math.max(latest, message.timestamp);
  }
  return latest;
}

function ActivityMessage({
  message,
  index,
}: {
  message: SessionMessage;
  index: number;
}) {
  const toolCalls = message.tool_calls ?? [];
  const content = message.content ?? "";
  const isToolResult = message.role === "tool";

  return (
    <article
      className="rounded border border-white/15 bg-white/5 px-3 py-2 text-xs text-white/85"
      data-message-index={index}
    >
      <div className="mb-1 flex flex-wrap items-center justify-between gap-2 text-[0.6875rem] font-semibold uppercase tracking-wider text-white/60">
        <span>{messageLabel(message)}</span>
        {typeof message.timestamp === "number" && (
          <time dateTime={new Date(message.timestamp * 1000).toISOString()}>
            {new Date(message.timestamp * 1000).toLocaleTimeString()}
          </time>
        )}
      </div>

      {toolCalls.map((call) => (
        <details key={call.id} className="my-1 rounded border border-white/10 px-2 py-1">
          <summary className="cursor-pointer select-none text-white/75">
            {call.function.name || "tool"} arguments
          </summary>
          <pre className="mt-2 max-h-72 overflow-auto whitespace-pre-wrap break-words text-[0.6875rem] text-white/70">
            {call.function.arguments}
          </pre>
        </details>
      ))}

      {content && isToolResult ? (
        <details className="mt-1" open={content.length < 1_500}>
          <summary className="cursor-pointer select-none text-white/75">
            {content.length.toLocaleString()} characters of output
          </summary>
          <pre className="mt-2 max-h-96 overflow-auto whitespace-pre-wrap break-words text-[0.6875rem] leading-relaxed text-white/75">
            {content}
          </pre>
        </details>
      ) : content ? (
        <pre className="whitespace-pre-wrap break-words font-sans leading-relaxed text-white/90">
          {content}
        </pre>
      ) : toolCalls.length === 0 ? (
        <div className="text-white/50">Waiting for the next recorded event…</div>
      ) : null}
    </article>
  );
}

/**
 * Show every persisted message and tool event without relying on xterm's
 * canvas. Resumed sessions default to this view so an unknown or delayed
 * backend source classification cannot hide activity; the normal terminal
 * remains one click away and continues running underneath it.
 */
export function SessionActivityPanel({
  sessionId,
  profile,
}: SessionActivityPanelProps) {
  const [detail, setDetail] = useState<SessionInfo | null>(null);
  const [messages, setMessages] = useState<SessionMessage[]>([]);
  const [expanded, setExpanded] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [pollTime, setPollTime] = useState(Date.now());
  const requestRunning = useRef(false);
  const scrollRef = useRef<HTMLDivElement | null>(null);
  const stickToBottom = useRef(true);

  const load = useCallback(async () => {
    if (requestRunning.current) return;
    requestRunning.current = true;
    try {
      const [nextDetail, response] = await Promise.all([
        api.getSessionDetail(sessionId, profile ?? ""),
        api.getSessionMessages(sessionId, profile ?? ""),
      ]);
      setDetail(nextDetail);
      setMessages(Array.isArray(response.messages) ? response.messages : []);
      setError(null);
      setPollTime(Date.now());
      if (stickToBottom.current) {
        requestAnimationFrame(() => {
          const node = scrollRef.current;
          if (node) node.scrollTop = node.scrollHeight;
        });
      }
    } catch (cause) {
      setError(cause instanceof Error ? cause.message : "activity feed unavailable");
    } finally {
      requestRunning.current = false;
    }
  }, [profile, sessionId]);

  useEffect(() => {
    void load();
    const timer = window.setInterval(() => void load(), POLL_MS);
    const onVisibility = () => {
      if (!document.hidden) void load();
    };
    document.addEventListener("visibilitychange", onVisibility);
    return () => {
      window.clearInterval(timer);
      document.removeEventListener("visibilitychange", onVisibility);
    };
  }, [load]);

  const latest = useMemo(() => latestTimestamp(messages), [messages]);
  const quietSeconds = latest === null ? null : Math.max(0, pollTime / 1000 - latest);
  const running = detail?.ended_at == null;
  const status = error
    ? "Activity feed reconnecting"
    : running && quietSeconds !== null && quietSeconds > 15
      ? "Working — waiting for the model or a tool result"
      : running
        ? "Working"
        : "Run finished";

  if (!expanded) {
    return (
      <Button
        onClick={() => setExpanded(true)}
        prefix={<Activity className="h-4 w-4" />}
        aria-expanded="false"
        className="absolute left-4 top-4 z-30 bg-black/90 text-white"
      >
        Show live activity
      </Button>
    );
  }

  return (
    <section
      className="absolute inset-0 z-30 flex min-h-0 flex-col bg-black text-white"
      aria-label={`Live activity for ${detail?.title || sessionId}`}
    >
      <div className="flex flex-wrap items-center justify-between gap-2 border-b border-white/15 px-3 py-2">
        <div className="min-w-0">
          <div className="flex items-center gap-2 text-sm font-semibold">
            <Activity className="h-4 w-4 text-warning" aria-hidden />
            <span className="truncate">Live worker activity</span>
          </div>
          <div
            className="mt-0.5 text-[0.6875rem] text-white/65"
            aria-live="polite"
            aria-atomic="true"
          >
            {status} · {messages.length} recorded events
          </div>
        </div>
        <div className="flex items-center gap-2">
          <Button
            ghost
            onClick={() => void load()}
            prefix={<RefreshCw className="h-3.5 w-3.5" />}
            aria-label="Refresh worker activity"
            className="text-white"
          >
            Refresh
          </Button>
          <Button
            ghost
            onClick={() => setExpanded(false)}
            prefix={<TerminalSquare className="h-3.5 w-3.5" />}
            aria-expanded="true"
            className="text-white"
          >
            Terminal view
          </Button>
        </div>
      </div>

      {error && (
        <div className="border-b border-warning/40 bg-warning/10 px-3 py-2 text-xs text-warning">
          {error}. Retrying automatically.
        </div>
      )}

      <div
        ref={scrollRef}
        className="min-h-0 flex-1 space-y-2 overflow-y-auto p-3"
        role="log"
        aria-live="polite"
        aria-relevant="additions text"
        aria-busy={running && messages.length === 0}
        aria-label="Chronological Hermes worker activity"
        tabIndex={0}
        onScroll={(event) => {
          const node = event.currentTarget;
          stickToBottom.current =
            node.scrollHeight - node.scrollTop - node.clientHeight < 80;
        }}
      >
        {messages.length === 0 ? (
          <div className="flex min-h-full flex-col items-center justify-center gap-3 text-center text-sm text-white/65">
            <Activity className="h-7 w-7 animate-pulse text-warning" aria-hidden />
            <div>
              <div className="font-medium text-white/85">Connecting to the worker transcript…</div>
              <div className="mt-1 text-xs">This view refreshes every two seconds.</div>
            </div>
          </div>
        ) : (
          messages.map((message, index) => (
            <ActivityMessage
              key={`${message.timestamp ?? "untimed"}-${index}`}
              message={message}
              index={index}
            />
          ))
        )}
      </div>

      <div className="flex items-center justify-between border-t border-white/15 px-3 py-1.5 text-[0.625rem] text-white/50">
        <span>Poll-backed transcript; terminal rendering is not required.</span>
        <span className="flex items-center gap-1">
          {expanded ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
          Updated {new Date(pollTime).toLocaleTimeString()}
        </span>
      </div>
    </section>
  );
}