"use client";

import { cn } from "@/lib/utils";
import { useOfflineStatus } from "@/hooks/use-offline-status";

/**
 * The top-bar connection status chip (TASK-0095 R2 — the TASK-0092/0093 chip,
 * finalized): online = a green dot "Live", reconnecting = amber "Reconnecting…",
 * offline = the gray "Offline". The a11y label carries the full state
 * (`aria-label="Connection: offline, 12 changes pending"`).
 */
export function StatusChip() {
  const status = useOfflineStatus();

  const dot =
    status.chip === "online"
      ? "bg-emerald-500"
      : status.chip === "reconnecting"
        ? "bg-amber-500"
        : "bg-zinc-400";
  const label =
    status.chip === "online" ? "Live" : status.chip === "reconnecting" ? "Reconnecting…" : "Offline";

  return (
    <span
      data-testid="connection-chip"
      aria-label={status.ariaLabel}
      className="flex h-7 shrink-0 items-center gap-1.5 rounded-md px-2 text-xs text-foreground/70"
      role="status"
    >
      <span
        className={cn(
          "size-2 rounded-full",
          dot,
          // The blip flash: a < 5 s reconnecting pulse (the banner is hidden
          // for the blip — only the chip flashes, per the spec).
          status.reconnectFlash && "animate-pulse"
        )}
        aria-hidden
      />
      <span className="hidden sm:inline">{label}</span>
    </span>
  );
}