"use client";

import { BotIcon, PenToolIcon, PlayIcon, SearchIcon } from "lucide-react";
import type { JobKind, JobRecord } from "@/src/core";

/**
 * The sub-agents sidebar section (vision §2.5 live observability): what the
 * teacher's background fleet is doing RIGHT NOW in this session — one card
 * per running sub-agent with its live activity line (current tool + args)
 * and elapsed time, fed by the central jobs poll.
 *
 * Renders nothing when the fleet is idle (zero clutter); finished jobs
 * vanish from the list — their artifacts live in the transcript. Sits at
 * the top of the right sidebar, above the plan-tree panel.
 */

const KIND_META: Record<JobKind, { label: string; Icon: typeof SearchIcon }> = {
	research: { label: "Researcher", Icon: SearchIcon },
	demo: { label: "Demo builder", Icon: PlayIcon },
	visual: { label: "Figure maker", Icon: PenToolIcon },
};

export function SubAgentsPanel({ jobs }: { jobs: JobRecord[] }) {
	const running = jobs.filter((j) => j.status === "running");
	if (running.length === 0) return null;
	return (
		<aside
			data-testid="sub-agents-panel"
			className="flex w-64 shrink-0 flex-col border-b border-border/60 bg-card/30 px-3 py-2.5"
		>
			<div className="flex items-center gap-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
				<BotIcon className="size-3.5" />
				Sub-agents
			</div>
			<ul className="mt-2 flex flex-col gap-2">
				{running.map((job) => (
					<li
						key={job.id}
						className="rounded-lg border bg-card px-2.5 py-2 text-card-foreground"
						data-testid="sub-agent-card"
					>
						<div className="flex items-center gap-2 text-xs font-medium">
							{(() => {
								const { label, Icon } = KIND_META[job.kind] ?? KIND_META.research;
								return <Icon className="size-3.5 shrink-0 text-muted-foreground" />;
							})()}
							<span className="min-w-0 flex-1 truncate">{KIND_META[job.kind]?.label ?? job.kind}</span>
							<span
								className="inline-block size-1.5 animate-pulse rounded-full bg-primary"
								aria-hidden="true"
							/>
							<span className="shrink-0 tabular-nums text-muted-foreground" data-testid="sub-agent-elapsed">
								{elapsedOf(job)}
							</span>
						</div>
						{job.activity && (
							<div
								className="mt-1 truncate text-xs text-muted-foreground"
								data-testid="sub-agent-activity"
								title={job.activity}
							>
								{job.activity}
							</div>
						)}
					</li>
				))}
			</ul>
		</aside>
	);
}

function elapsedOf(job: JobRecord): string {
	if (!job.createdAt) return "";
	const seconds = Math.max(0, Math.round((Date.now() - Date.parse(job.createdAt)) / 1000));
	return seconds < 60 ? `${seconds}s` : `${Math.floor(seconds / 60)}m ${seconds % 60}s`;
}