import Link from "next/link";
import type { ActivityItem } from "@/lib/activity";
import { fmtAgo } from "@/lib/format";
import NowLive from "./NowLive";
import Panel from "./Panel";

// What is running, and what ran. Two registries (chain jobs, mix renders), one
// list -- merged in lib/activity.ts, never here.
export default function NowPanel({
  running,
  recent,
}: {
  running: ActivityItem | null;
  recent: ActivityItem[];
}) {
  const done = recent.filter((a) => a.state !== "running");
  return (
    <Panel title="now" testid="now">
      <NowLive initial={running} />
      {done.length > 0 && (
        <ul className="mt-2 space-y-0.5 border-t border-[var(--color-line)] pt-2" data-activity="">
          {done.map((a) => (
            <li
              key={a.id}
              data-activity-id={a.id}
              data-activity-state={a.state}
              className="flex flex-wrap items-baseline gap-2 text-[11px]"
            >
              <span
                className={
                  a.state === "failed" ? "text-[var(--color-bad)]" : "text-[var(--color-dim)]"
                }
              >
                {a.state}
              </span>
              <Link href={a.href} className="font-mono text-[var(--color-text)] hover:text-[var(--color-sel)]">
                {a.label}
              </Link>
              <span className="num ml-auto text-[var(--color-dim)]">{fmtAgo(a.endedAt ?? a.startedAt)}</span>
            </li>
          ))}
        </ul>
      )}
    </Panel>
  );
}