/**
 * 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 for the count grid and
 * /api/jellyseerr/requests for a sortable/filterable requests table. 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 { Skeleton } from "@/components/ui/skeleton";
import { MetricCard } from "../../components/MetricCard";
import { JellyseerRequestsTable } from "../../components/JellyseerRequestsTable";
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>

					<div className="flex flex-col gap-2">
						<span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
							Requests
						</span>
						<JellyseerRequestsTable serviceId={instance.id} />
					</div>

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