import { Button, Tag } from "../../../components/primitives";
import type { ChannelStatus, ChannelStatusKind } from "./channelStatus";

const dot: Record<ChannelStatusKind, string> = {
  connected: "bg-[var(--mu-ok)]",
  connecting: "bg-[var(--mu-warn)] mu-blink",
  ready: "bg-[var(--mu-text-lo)]",
  disconnected: "bg-[var(--mu-err)]",
  unconfigured: "bg-[var(--mu-text-lo)]",
  unknown: "bg-[var(--mu-text-lo)]",
  pending: "bg-[var(--mu-text-lo)] mu-blink",
};

/** The one honest place an adapter's connection state is rendered, so list page,
 *  detail page and overview can never drift apart: 已连接 / 连接中 / 等待接入 /
 *  未连接 / 状态未知.  `showHint` off renders the compact form for dense surfaces
 *  (table row, card) — there the hint (e.g. the retry reason behind「连接中」) rides
 *  along as a hover title instead of taking a line of its own. */
export function ChannelStatusTag({
  status,
  showHint = true,
  className = "",
}: {
  status: ChannelStatus;
  showHint?: boolean;
  className?: string;
}): React.ReactNode {
  return (
    <span className={`inline-flex flex-wrap items-center gap-2 ${className}`}>
      <Tag tone={status.tone} title={status.hint ?? undefined}>
        <span className={`inline-block h-1.5 w-1.5 rounded-full ${dot[status.kind]}`} />
        {status.label}
      </Tag>
      {status.stale ? <Tag tone="warn">数据可能过期</Tag> : null}
      {showHint && status.hint ? <span className="text-xs text-[var(--mu-text-lo)]">{status.hint}</span> : null}
    </span>
  );
}

/** Read-failure banner with a retry. `stale` means an older copy is still on screen,
 *  so it warns about it instead of hiding the data behind an error. Failure is
 *  named as "与后端失联" so a stopped gateway is never read as a broken adapter. */
export function ChannelLoadError({
  error,
  reload,
  stale = false,
  what = "渠道数据",
}: {
  error: string | null;
  reload: () => void;
  stale?: boolean;
  what?: string;
}): React.ReactNode {
  if (!error) return null;
  return (
    <div className="flex flex-wrap items-center gap-2 rounded-[var(--mu-radius)] border border-[var(--mu-glass-border)] bg-[var(--mu-surface-3)]/60 px-3 py-2 text-xs text-[var(--mu-text-mid)]">
      <Tag tone={stale ? "warn" : "err"}>{stale ? "数据可能过期" : "读取失败"}</Tag>
      <span className="min-w-0 flex-1">
        {stale
          ? `${what}本次刷新失败（与后端失联）：${error}`
          : `${what}读取失败（与后端失联）：${error}`}
      </span>
      <Button size="sm" variant="ghost" onClick={reload}>
        重试
      </Button>
    </div>
  );
}