import { useAppVersion } from './useAppVersion'

/**
 * Subtle version indicator в header. Показывает client version + short commit.
 *
 * <p>Hover/title attribute exposes полную идентификацию (server tag, build time).
 * Используется как secondary affordance для эксплуатационной диагностики
 * (юзер скриншотит badge в bug report → ops знает точную сборку).
 *
 * <p>Если update available — badge подсвечивается dot indicator. Banner делает
 * primary CTA, badge — passive signal.
 */
export function VersionBadge() {
  const {
    clientVersion,
    clientTag,
    clientCI,
    clientCommit,
    clientBuiltAt,
    serverVersion,
    serverCommit,
    serverTag,
    updateAvailable,
  } = useAppVersion()

  // Channel-based label per "Vote A" — НЕ показываем package.json fallback
  // как версию когда tag'а нет. Stale package.json (e.g. 1.2.0 когда уже
  // выпущен v1.2.2) создавал ложное впечатление rollback'а.
  //
  // Channels:
  //   serverTag real    — что прод/staging RUNS (most authoritative)
  //   clientTag         — что build'ил CI tag pipeline
  //   CI без tag        — 'dev'   (staging / branch CI build)
  //   no CI no tag      — 'local' (pnpm dev на машине разработчика)
  //
  // package.json.version используется ТОЛЬКО в tooltip как build-time floor
  // — пользователь не видит его если не наведёт.
  const displayVersion =
    serverTag && serverTag !== 'none'
      ? serverTag
      : clientTag
        ? `v${clientTag}`
        : clientCI
          ? 'dev'
          : 'local'

  const tooltip = [
    `client: ${
      clientTag ? `v${clientTag}` : clientCI ? `dev (floor v${clientVersion})` : `local (floor v${clientVersion})`
    } (${clientCommit})`,
    `server: ${serverTag || serverVersion} (${serverCommit ?? '...'})`,
    `built: ${clientBuiltAt}`,
  ].join('\n')

  return (
    <span
      className="inline-flex items-center gap-1.5 text-mono text-mute select-none"
      title={tooltip}
    >
      {updateAvailable && (
        <span
          aria-label="Доступна новая версия"
          className="inline-block w-1.5 h-1.5 rounded-full bg-accent animate-pulse"
        />
      )}
      <span>{displayVersion}</span>
      <span className="text-mute/70">·</span>
      <span>{(serverCommit || clientCommit).substring(0, 8)}</span>
    </span>
  )
}