/**
 * RequestsTab — Jellyseerr request-management surface on the Jellyfin page.
 *
 * Jellyseerr was absorbed into Jellyfin config (jellyseerr_url +
 * jellyseerr_api_key) in Slice 1. This tab reads those config fields. When
 * configured, it shows the URL and a placeholder (no requests backend endpoint
 * exists yet — building one is out of scope for this slice). When not
 * configured, it shows an empty-state CTA directing the user to add the fields
 * to the Jellyfin config.
 */
import type { ServiceInstance } from "../../types";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { ExternalLink } from "lucide-react";

export function RequestsTab({ instance }: { instance: ServiceInstance }) {
	const jellyseerrUrl = String(
		(instance.config as Record<string, unknown>).jellyseerr_url ?? "",
	).trim();
	const jellyseerrApiKey = String(
		(instance.config as Record<string, unknown>).jellyseerr_api_key ?? "",
	).trim();

	if (!jellyseerrUrl || !jellyseerrApiKey) {
		return (
			<Alert>
				<AlertDescription>
					Jellyseerr is not configured for this Jellyfin instance. Add
					<code className="mx-1 rounded bg-muted px-1 py-0.5 text-xs">
						jellyseerr_url
					</code>
					and
					<code className="mx-1 rounded bg-muted px-1 py-0.5 text-xs">
						jellyseerr_api_key
					</code>
					to the Jellyfin config (Config tab) 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>
			<Alert>
				<AlertDescription>
					Jellyseerr is configured. The requests view will show pending and
					recently fulfilled media requests. (This surface is under
					development.)
				</AlertDescription>
			</Alert>
		</div>
	);
}