Translate admin panel to all 6 languages

src/app/admin/radio/monitoring/page.tsx

@@ -3,33 +3,22 @@ import { requireStaff } from '@/lib/admin/guard';
 import { siteSettings } from '@/lib/services/site-settings';
 import { StatusCard, DiagnosticRow } from '@/components/admin/dashboard';
 import { Radio } from 'lucide-react';
+import { getTranslations } from "next-intl/server";
 
 export const dynamic = 'force-dynamic';
 
 export const metadata = { title: 'Radio Monitoring' };
 
-// READ-ONLY live probe of the configured radio endpoints. We never write to the
-// DB here; we only read the relevant radio_* keys via siteSettings.get and do a
-// best-effort, fail-soft server-side fetch of each URL with a short timeout so a
-// slow/down stream provider can never hang the admin page.
-
 const FETCH_TIMEOUT_MS = 4000;
 
 type ProbeResult = {
-  /** true when the endpoint responded with a 2xx/3xx status within the timeout. */
   reachable: boolean;
   status: number | null;
-  /** Parsed JSON when the body was JSON, else null. */
   json: unknown;
-  /** Raw text body (trimmed) when not JSON, else null. */
   text: string | null;
   error: string | null;
 };
 
-/**
- * Fetch a URL server-side with a hard AbortController timeout. Always resolves
- * (never throws) so the page renders even when the provider is unreachable.
- */
 async function probe(url: string): Promise<ProbeResult> {
   const controller = new AbortController();
   const timer = setTimeout(() => controller.abort(), FETCH_TIMEOUT_MS);
@@ -80,11 +69,6 @@ function pickString(obj: Record<string, unknown>, key: string): string | null {
   return typeof v === 'string' && v.trim() !== '' ? v.trim() : null;
 }
 
-/**
- * Best-effort now-playing extraction. Supports the common AzureCast shape
- * (now_playing.song.title / .artist), a flat { title, artist }, a bare string,
- * or { now_playing: "..." }. Returns a single display string or null.
- */
 function parseNowPlaying(result: ProbeResult): string | null {
   if (result.json == null) {
     return result.text && result.text.length <= 200 ? result.text : null;
@@ -93,7 +77,6 @@ function parseNowPlaying(result: ProbeResult): string | null {
   if (typeof data === 'string') return data.trim() || null;
   if (!isRecord(data)) return null;
 
-  // AzureCast: { now_playing: { song: { title, artist, text } } }
   const np = data.now_playing;
   if (typeof np === 'string' && np.trim() !== '') return np.trim();
   if (isRecord(np)) {
@@ -109,7 +92,6 @@ function parseNowPlaying(result: ProbeResult): string | null {
     }
   }
 
-  // Flat shapes: { song: { title, artist } } or { title, artist } or { text }.
   const song = data.song;
   if (isRecord(song)) {
     const title = pickString(song, 'title');
@@ -143,10 +125,6 @@ function findNumberDeep(value: unknown, keys: string[], depth = 0): number | nul
   return null;
 }
 
-/**
- * Best-effort listener count. Looks for listeners(.current/.total), num_listeners,
- * unique_listeners, or a bare numeric body. Returns null when nothing parses.
- */
 function parseListeners(result: ProbeResult): number | null {
   if (result.json == null) {
     if (result.text && Number.isFinite(Number(result.text.trim()))) {
@@ -171,13 +149,15 @@ function shortUrl(url: string): string {
     const u = new URL(url);
     return u.host + (u.pathname === '/' ? '' : u.pathname);
   } catch {
-    return url.length > 60 ? `${url.slice(0, 57)}…` : url;
+    return url.length > 60 ? `${url.slice(0, 57)}\u2026` : url;
   }
 }
 
 export default async function AdminRadioMonitoringPage() {
   await requireStaff();
 
+  const t = await getTranslations("pages.admin.radio");
+
   let nowPlayingUrl: string | null = null;
   let listenersUrl: string | null = null;
   let streamUrl: string | null = null;
@@ -191,16 +171,12 @@ export default async function AdminRadioMonitoringPage() {
     streamUrl = null;
   }
 
-  // Probe each configured endpoint (fail-soft). The now-playing endpoint doubles
-  // as our "stream reachable?" signal since it reflects the live provider.
   const nowPlayingResult = nowPlayingUrl ? await probe(nowPlayingUrl) : null;
   const listenersResult = listenersUrl ? await probe(listenersUrl) : null;
 
   const nowPlaying = nowPlayingResult ? parseNowPlaying(nowPlayingResult) : null;
   const listeners = listenersResult ? parseListeners(listenersResult) : null;
 
-  // Stream is "online" when its primary status source (now-playing, else
-  // listeners) responded successfully.
   const streamProbe = nowPlayingResult ?? listenersResult;
   const streamOnline = streamProbe?.reachable ?? false;
   const streamConfigured = Boolean(nowPlayingUrl || listenersUrl);
@@ -210,19 +186,19 @@ export default async function AdminRadioMonitoringPage() {
     url: string | null;
     result: ProbeResult | null;
   }[] = [
-    { label: 'Now-playing API', url: nowPlayingUrl, result: nowPlayingResult },
-    { label: 'Listeners API', url: listenersUrl, result: listenersResult },
+    { label: t("monitoring.nowPlayingApi"), url: nowPlayingUrl, result: nowPlayingResult },
+    { label: t("monitoring.listenersApi"), url: listenersUrl, result: listenersResult },
   ];
 
   return (
     <main>
       <nav className="text-xs text-gray-500 dark:text-gray-400 mb-2">
-        <Link href="/admin/radio">Radio</Link> ·{' '}
-        <Link href="/admin/radio/settings">Settings</Link> ·{' '}
-        <Link href="/admin/radio/monitoring">Monitoring</Link> ·{' '}
-        <Link href="/admin/radio/banners">Banners</Link> ·{' '}
-        <Link href="/admin/radio/ranks">Ranks</Link> ·{' '}
-        <Link href="/admin/radio/history">History</Link>
+        <Link href="/admin/radio">{t("title")}</Link> ·{' '}
+        <Link href="/admin/radio/settings">{t("settings")}</Link> ·{' '}
+        <Link href="/admin/radio/monitoring">{t("monitoring.title")}</Link> ·{' '}
+        <Link href="/admin/radio/banners">{t("banners.title")}</Link> ·{' '}
+        <Link href="/admin/radio/ranks">{t("ranks")}</Link> ·{' '}
+        <Link href="/admin/radio/history">{t("history")}</Link>
       </nav>
 
       <section className="mt-6">
@@ -231,44 +207,42 @@ export default async function AdminRadioMonitoringPage() {
             <Radio size={20} className="text-[var(--color-primary)]" />
           </div>
           <div>
-            <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">Radio Monitoring</h1>
-            <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">Read-only live probe of the configured radio endpoints (<code>radio_now_playing_api_url</code>, <code>radio_listeners_api_url</code>). Each request fails soft with a {FETCH_TIMEOUT_MS / 1000}s timeout — no data is written. Configure URLs under <Link href="/admin/radio/settings">Settings</Link>.</p>
+            <h1 className="m-0 text-xl font-extrabold text-[var(--color-text)]">{t("monitoring.title")}</h1>
+            <p className="m-0 text-xs text-[var(--color-text-muted)] mt-0.5">{t("monitoring.subtitle", { timeout: FETCH_TIMEOUT_MS / 1000 })}</p>
           </div>
         </div>
 
         <div className="grid grid-cols-[repeat(auto-fit,minmax(180px,1fr))] gap-3.5 mb-6">
           <StatusCard
-            label="Stream"
+            label={t("monitoring.stream")}
             value={
-              !streamConfigured ? 'Not configured' : streamOnline ? 'Online' : 'Offline'
+              !streamConfigured ? t("monitoring.notConfigured") : streamOnline ? t("monitoring.online") : t("monitoring.offline")
             }
             state={!streamConfigured ? 'neutral' : streamOnline ? 'ok' : 'danger'}
             hint={streamUrl ? shortUrl(streamUrl) : undefined}
-            icon="📡"
+            icon="\u{1F4E1}"
           />
           <StatusCard
-            label="Now playing"
-            value={nowPlaying ?? '—'}
+            label={t("monitoring.nowPlaying")}
+            value={nowPlaying ?? '\u2014'}
             state={nowPlaying ? 'ok' : 'neutral'}
-            hint={!nowPlayingUrl ? 'no now-playing API set' : undefined}
-            icon="🎵"
+            hint={!nowPlayingUrl ? t("monitoring.noNowPlayingHint") : undefined}
+            icon="\u{1F3B5}"
           />
           <StatusCard
-            label="Listeners"
-            value={listeners ?? '—'}
+            label={t("monitoring.listeners")}
+            value={listeners ?? '\u2014'}
             state={listeners != null ? 'ok' : 'neutral'}
-            hint={!listenersUrl ? 'no listeners API set' : undefined}
-            icon="🎧"
+            hint={!listenersUrl ? t("monitoring.noListenersHint") : undefined}
+            icon="\u{1F3A7}"
           />
         </div>
       </section>
 
       <section className="mt-6">
-        <h2 className="admin-section-title">Endpoint diagnostics</h2>
+        <h2 className="admin-section-title">{t("monitoring.endpointDiagnostics")}</h2>
         <p className="text-xs text-gray-500 dark:text-gray-400">
-          <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-green-600/20 text-[var(--color-text)]">OK</span> reachable ·{' '}
-          <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-[var(--color-primary)]/18 text-[var(--color-text)]">WARN</span> not configured ·{' '}
-          <span className="inline-block text-[0.72rem] font-bold px-2 py-0.5 rounded-full bg-red-500/22 text-[var(--color-text)]">ERROR</span> fetch failed / timed out.
+          {t("monitoring.diagnosticsLegend")}
         </p>
         <div className="flex flex-col">
           {endpoints.map((ep) => {
@@ -276,15 +250,15 @@ export default async function AdminRadioMonitoringPage() {
             let detail: string;
             if (!ep.url) {
               state = 'warn';
-              detail = 'Not configured';
+              detail = t("monitoring.notConfigured");
             } else if (ep.result?.reachable) {
               state = 'ok';
               detail = `${shortUrl(ep.url)}${
-                ep.result.status != null ? ` · HTTP ${ep.result.status}` : ''
+                ep.result.status != null ? ` \u00B7 HTTP ${ep.result.status}` : ''
               }`;
             } else {
               state = 'danger';
-              detail = `${shortUrl(ep.url)} · ${ep.result?.error ?? 'unreachable'}`;
+              detail = `${shortUrl(ep.url)} \u00B7 ${ep.result?.error ?? t("monitoring.unreachable")}`;
             }
             return (
               <DiagnosticRow
@@ -296,8 +270,8 @@ export default async function AdminRadioMonitoringPage() {
             );
           })}
           <DiagnosticRow
-            label="Stream URL"
-            detail={streamUrl ? shortUrl(streamUrl) : 'Not configured'}
+            label={t("monitoring.streamUrl")}
+            detail={streamUrl ? shortUrl(streamUrl) : t("monitoring.notConfigured")}
             state={streamUrl ? 'ok' : 'warn'}
           />
         </div>