/**
 * Prometheus Metrics tab (spec R2.4, R8.2).
 *
 * Instance-scoped tab showing Prometheus service health.
 * usePrometheusStatus is scoped by instance.id; usePrometheusTargets
 * stays global (returns Node Exporter scrape targets for external Prom).
 */
import { Radio } from "lucide-react";
import {
	usePrometheusStatus,
	usePrometheusTargets,
} from "../../hooks/useObservability";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import type { PrometheusTarget, ServiceInstance } from "../../types";

function TargetsTable({ targets }: { targets: PrometheusTarget[] }) {
	return (
		<div className="space-y-3">
			{targets.map((target, idx) => (
				<div key={idx} className="rounded-lg border p-3">
					<div className="font-mono text-sm">{target.targets.join(", ")}</div>
					{target.labels && Object.keys(target.labels).length > 0 && (
						<div className="mt-2 flex flex-wrap gap-1">
							{Object.entries(target.labels).map(([key, value]) => (
								<Badge key={key} variant="outline" className="text-[10px]">
									{key}: {value}
								</Badge>
							))}
						</div>
					)}
				</div>
			))}
		</div>
	);
}

export function MetricsTab({ instance }: { instance: ServiceInstance }) {
	const {
		data: status,
		isLoading: statusLoading,
		error: statusError,
	} = usePrometheusStatus(instance.id);
	const {
		data: targets,
		isLoading: targetsLoading,
		error: targetsError,
	} = usePrometheusTargets();

	const statusDetail = status?.up
		? status.version
			? `version ${status.version}`
			: "reachable"
		: statusLoading
			? "checking…"
			: "unreachable";

	return (
		<div className="space-y-4">
			<div className="flex items-center gap-2 text-sm text-muted-foreground">
				<Radio className="h-4 w-4" />
				Prometheus {statusDetail}
			</div>

			{statusError && (
				<Alert variant="destructive">
					<AlertTitle>Failed to reach Prometheus</AlertTitle>
					<AlertDescription>{statusError.message}</AlertDescription>
				</Alert>
			)}

			<Card>
				<CardHeader>
					<CardTitle className="flex items-center gap-2">
						<Radio className="h-4 w-4" />
						Node Exporter Targets ({targets?.length ?? 0})
					</CardTitle>
				</CardHeader>
				<CardContent>
					{targetsLoading ? (
						<div className="space-y-2">
							<Skeleton className="h-16 w-full" />
							<Skeleton className="h-16 w-full" />
						</div>
					) : !targets || targets.length === 0 ? (
						<div className="flex h-full min-h-[160px] flex-col items-center justify-center gap-2 rounded-md border p-6 text-center">
							<Radio className="h-8 w-8 text-muted-foreground" />
							<div className="font-medium">No Node Exporter targets</div>
							<div className="max-w-md text-sm text-muted-foreground">
								Enable Node Exporter on an SSH machine in Settings to populate
								Prometheus scrape targets.
							</div>
						</div>
					) : (
						<TargetsTable targets={targets} />
					)}
				</CardContent>
			</Card>

			{targetsError && (
				<Alert variant="destructive">
					<AlertTitle>Failed to load targets</AlertTitle>
					<AlertDescription>{targetsError.message}</AlertDescription>
				</Alert>
			)}
		</div>
	);
}