manage/frontend/src/pages/service-tabs/RequestsTab.tsx

/**
 * RequestsTab — Jellyseerr request stats surface on the Jellyfin page.
 *
 * Reads the Jellyfin service's jellyseerr_url (config) + jellyseerr_api_key
 * (secret). When configured, polls /api/jellyseerr/stats and renders the
 * request-count grid + a recent-requests list. Individual stats can be pinned
 * to dashboards via the "Request stat" widget.
 */
import type { ServiceInstance } from "../../types";
import { useJellyseerrStats } from "../../hooks/useJellyseer";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { MetricCard } from "../../components/MetricCard";
import { ExternalLink } from "lucide-react";

export function RequestsTab({ instance }: { instance: ServiceInstance }) {
	const jellyseerrUrl = String(
		(instance.config as Record<string, unknown>).jellyseerr_url ?? "",
	).trim();
	const jellyseerrApiKeySet = Boolean(
		(instance.secrets_set as Record<string, boolean> | undefined)
			?.jellyseerr_api_key,
	);
	const { data, isLoading, error } = useJellyseerrStats(instance.id);

	if (!jellyseerrUrl || !jellyseerrApiKeySet) {
		return (
			<Alert>
				<AlertDescription>
					Jellyseerr is not configured for this Jellyfin instance. Add a
					<code className="mx-1 rounded bg-muted px-1 py-0.5 text-xs">
						jellyseerr_url
					</code>
					config field and a
					<code className="mx-1 rounded bg-muted px-1 py-0.5 text-xs">
						jellyseerr_api_key
					</code>
					secret to the Jellyfin service to enable request management.
				</AlertDescription>
			</Alert>
		);
	}

	return (
		<div className="flex flex-col gap-4">
			<div className="flex items-center gap-2">
				<h3 className="text-sm font-semibold">Jellyseerr</h3>
				<a
					href={jellyseerrUrl}
					target="_blank"
					rel="noopener noreferrer"
					className="inline-flex items-center gap-1 text-sm text-primary hover:underline"
				>
					{jellyseerrUrl}
					<ExternalLink className="size-3.5" />
				</a>
			</div>

			{error ? (
				<Alert variant="destructive">
					<AlertDescription>{error.message}</AlertDescription>
				</Alert>
			) : isLoading ? (
				<Skeleton className="h-32 w-full" />
			) : data?.detail && !(data.stats && data.stats.length > 0) ? (
				<Alert>
					<AlertDescription>{data.detail}</AlertDescription>
				</Alert>
			) : (
				<>
					<div className="grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6">
						{(data?.stats ?? []).map((s) => (
							<MetricCard key={s.key} label={s.label} value={String(s.value)} />
						))}
					</div>

					{data?.recent && data.recent.length > 0 ? (
						<div className="flex flex-col gap-1">
							<span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
								Recent requests
							</span>
							{data.recent.slice(0, 12).map((r, i) => (
								<div
									key={String(r.id ?? i)}
									className="flex items-center justify-between gap-2 rounded border p-2 text-sm"
								>
									<div className="flex min-w-0 flex-col">
										<span className="truncate font-medium">{r.name ?? "—"}</span>
										<span className="text-xs text-muted-foreground">
											{r.type ? String(r.type) : ""}
										</span>
									</div>
									<div className="flex shrink-0 items-center gap-1">
										{r.media_status ? (
											<Badge variant="outline">{r.media_status}</Badge>
										) : null}
										{r.status ? <Badge variant="secondary">{r.status}</Badge> : null}
									</div>
								</div>
							))}
						</div>
					) : null}

					<p className="text-xs text-muted-foreground">
						Pin individual stats to a dashboard with the &ldquo;Request stat&rdquo;
						widget.
					</p>
				</>
			)}
		</div>
	);
}