import { Alert, AlertDescription } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { SectionCard } from "../components/SectionCard";
import { useWidgetData } from "../hooks/useWidgets";
import type {
	AlertmanagerAlert,
	AlertmanagerAlertSummary,
	WidgetInstance,
} from "../types";

interface Props {
	widget: WidgetInstance;
	refreshIntervalMs: number;
	description?: string;
}

function severityVariant(
	severity: string,
): "default" | "secondary" | "destructive" | "outline" {
	switch (severity.toLowerCase()) {
		case "critical":
			return "destructive";
		case "warning":
			return "default";
		case "info":
			return "secondary";
		default:
			return "outline";
	}
}

export function AlertmanagerAlertsWidget({
	widget,
	refreshIntervalMs,
	description,
}: Props) {
	const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
	const summary = data?.data as AlertmanagerAlertSummary | undefined;
	const alerts: AlertmanagerAlert[] = summary?.alerts ?? [];

	return (
		<SectionCard title={widget.title} description={description}>
			{isLoading && !data ? (
				<div className="space-y-2">
					<Skeleton className="h-8 w-full" />
					<Skeleton className="h-8 w-full" />
				</div>
			) : data?.error ? (
				<Alert variant="destructive">
					<AlertDescription>{data.error}</AlertDescription>
				</Alert>
			) : summary ? (
				<div className="space-y-3">
					<div className="flex items-center gap-3">
						<div>
							<div className="text-2xl font-semibold">{summary.total}</div>
							<div className="text-xs text-muted-foreground">
								Firing alert{summary.total === 1 ? "" : "s"}
							</div>
						</div>
						<div className="flex flex-wrap gap-1">
							{Object.entries(summary.by_severity).map(([sev, count]) => (
								<Badge key={sev} variant={severityVariant(sev)}>
									{sev}: {count}
								</Badge>
							))}
						</div>
					</div>
					{alerts.length > 0 ? (
						<ul className="space-y-1.5">
							{alerts.slice(0, 5).map((a, idx) => (
								<li
									key={`${a.name}-${idx}`}
									className="flex items-center justify-between gap-2 rounded-md border px-2 py-1 text-sm"
								>
									<span className="truncate">{a.name}</span>
									<Badge variant={severityVariant(a.severity)}>
										{a.severity}
									</Badge>
								</li>
							))}
						</ul>
					) : (
						<div className="text-xs text-muted-foreground">
							Everything looks quiet.
						</div>
					)}
				</div>
			) : null}
		</SectionCard>
	);
}
