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,
    clientCommit,
    clientBuiltAt,
    serverVersion,
    serverCommit,
    serverTag,
    updateAvailable,
  } = useAppVersion()

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

  return (
    <span
      className="inline-flex items-center gap-1.5 text-xs text-mute font-mono select-none"
      title={tooltip}
    >
      {updateAvailable && (
        <span
          aria-label="Доступна новая версия"
          className="inline-block w-1.5 h-1.5 rounded-full bg-accent animate-pulse"
        />
      )}
      {/* Prefer server tag (v1.2.0 etc.) над package.json clientVersion (0.1.0).
          serverTag только при tag build'е — на branch builds показываем clientVersion. */}
      <span>{serverTag && serverTag !== 'none' ? serverTag : `v${clientVersion}`}</span>
      <span className="text-mute/70">·</span>
      <span>{(serverCommit || clientCommit).substring(0, 7)}</span>
    </span>
  )
}