"use client";

/**
 * Truth strip (server-26#232) — replaces the heartbeat-driven '● Live' pill.
 *
 * Healthy: compact per-stage chips (Radio · Transcripts · AI · Feeds), each
 * with its last-output age. Any core stage dry past the threshold, or any
 * /health/ai tier degraded: a full-width amber bar that says what broke and
 * since when — "DEGRADED — radio heard, not transcribed since 12:15".
 * Theme tokens only (sev-moderate is the amber), so both themes follow.
 */
import type { PipelineHealth, PipelineStage } from "@/lib/usePipelineHealth";

function dotClass(s: PipelineStage["state"]): string {
  if (s === "degraded") return "bg-sev-moderate";
  if (s === "unknown") return "bg-ink-muted";
  return "bg-ink-2";
}

export function TruthChips({ health }: { health: PipelineHealth }) {
  return (
    <div className="flex items-center gap-1.5 flex-wrap" role="status" aria-label="Pipeline health">
      {health.stages.map((s) => (
        <span key={s.key} title={s.detail}
          className={`inline-flex items-center gap-1 px-1.5 py-0.5 rounded border text-[11px] whitespace-nowrap ${
            s.state === "degraded" ? "border-sev-moderate text-ink bg-sev-moderate/10" : "border-line text-ink-2"}`}>
          <span className={`w-1.5 h-1.5 rounded-full ${dotClass(s.state)}`} aria-hidden="true" />
          {s.label}
          <span className="sr-only">: {s.state === "ok" ? "healthy" : s.state}, {s.detail}</span>
        </span>
      ))}
    </div>
  );
}

export function TruthBar({ health }: { health: PipelineHealth }) {
  if (!health.degraded || !health.message) return null;
  return (
    <div role="alert"
      className="shrink-0 w-full px-3 py-1.5 border-b border-sev-moderate bg-sev-moderate/15 text-xs text-ink flex flex-wrap items-baseline gap-x-2">
      <b className="font-bold tracking-wide">DEGRADED</b>
      <span>— {health.message}</span>
      <span className="ml-auto text-ink-muted whitespace-nowrap">
        stale after {health.staleMin} min · map shows last-known state
      </span>
    </div>
  );
}

/** Chips for the wall bar, plus the bar itself directly below it when degraded. */
export function TruthStrip({ health, placement }: { health: PipelineHealth; placement: "chips" | "bar" }) {
  return placement === "chips" ? <TruthChips health={health} /> : <TruthBar health={health} />;
}