'use client';

import { useEffect, useState } from 'react';
import Link from 'next/link';
import { useTranslations } from 'next-intl';
import { type ApiVersionInfo, appVersion, loadApiVersion } from '@/lib/app-version';

/**
 * Versionszeile unten in der Seitenleiste: `<Version> · <Kanal>`, z. B.
 * `v1.0.0 · Beta` oder lokal `dev · Entwicklung` (quick-260914-ku1).
 * Der Tooltip nennt den Web-Commit und, sobald geladen, die API-Version
 * samt Kanal. "Commit" und "API" sind in beiden Sprachen gleich.
 * Seit quick-260916-dcz ist die Zeile ein Link zur Seite "Was ist neu"
 * (/changelog); der Tooltip bleibt, der Linkname steht im aria-label.
 */
export function AppVersionBadge() {
  const t = useTranslations('sidebar');
  const [api, setApi] = useState<ApiVersionInfo | null>(null);

  useEffect(() => {
    let active = true;
    loadApiVersion().then((info) => {
      if (active) setApi(info);
    });
    return () => {
      active = false;
    };
  }, []);

  const parts: string[] = [];
  if (appVersion.commit) parts.push(`Commit ${appVersion.commit}`);
  if (api) parts.push(`API ${api.version} (${api.channel})`);
  const title = parts.length > 0 ? parts.join(' · ') : undefined;

  return (
    <Link
      href="/changelog"
      data-testid="app-version"
      aria-label={t('whatsNew')}
      title={title}
      className="block truncate text-xs text-muted-foreground transition-colors hover:text-foreground hover:underline"
    >
      {appVersion.version} · {t(`channel.${appVersion.channel}`)}
    </Link>
  );
}