"use client";

import { formatBytes } from "yt-dlp-transcript-common/lib/format";
import { usePulse } from "./pulse";

// The sidebar's live pills — the active-job count and reclaimable disk.
//
// These used to be plain server-rendered numbers, which meant the ONLY way to
// update them was to re-render the entire page tree. That is what made the
// global auto-refresh re-render everything every five seconds: the badges were
// hostage to it. Now they update from the shared /api/pulse poller, which is
// what lets the tree refresh be skipped entirely on routes that don't need it.
//
// Each is seeded from the server render so the first paint is correct and there
// is no flash of zero before the first poll lands.

export function JobsBadge({ seed }: { seed: number }) {
  const pulse = usePulse();
  // Null until the first poll after mount — until then the server seed IS the
  // truth, and rendering anything else would be a hydration mismatch.
  const count = pulse ? pulse.activeJobs : seed;
  if (count <= 0) return null;
  return (
    <span
      data-testid="badge-active"
      aria-label={`${count} active job${count === 1 ? "" : "s"}`}
      className="ml-auto text-xs rounded-full border border-brand/30 bg-brand-soft text-brand-strong px-2 py-0.5 leading-none"
    >
      {count}
    </span>
  );
}

export function CleanableBadgeLive({ seed }: { seed: number }) {
  const pulse = usePulse();
  const bytes = pulse ? pulse.cleanableBytes : seed;
  if (bytes <= 0) return null;
  return (
    <span
      data-testid="cleanable-badge"
      aria-label={`${formatBytes(bytes)} reclaimable`}
      className="ml-auto text-xs rounded-full border border-warning/30 bg-warning-soft text-warning px-2 py-0.5 leading-none tabular-nums"
    >
      {formatBytes(bytes)}
    </span>
  );
}