import { Alert, AlertDescription } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import { SectionCard } from "../components/SectionCard";
import { useWidgetData } from "../hooks/useWidgets";
import type { WidgetInstance } from "../types";
import {
	LineChart,
	Line,
	XAxis,
	YAxis,
	CartesianGrid,
	Tooltip,
	ResponsiveContainer,
} from "recharts";

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

interface SeriesPoint {
	t: number;
	v: number | null;
}

interface ChartSeries {
	label: string;
	points: SeriesPoint[];
}

/** Merge multiple time-series into a single recharts-friendly array. */
function mergeSeries(series: ChartSeries[]): Record<string, unknown>[] {
	const map = new Map<number, Record<string, unknown>>();
	for (const s of series) {
		for (const p of s.points) {
			const existing = map.get(p.t) ?? { time: p.t };
			existing[s.label] = p.v;
			map.set(p.t, existing);
		}
	}
	return [...map.values()].sort(
		(a, b) => (a.time as number) - (b.time as number),
	);
}

function formatTime(ms: number): string {
	return new Date(ms).toLocaleTimeString([], {
		hour: "2-digit",
		minute: "2-digit",
	});
}

const CHART_COLORS = [
	"var(--color-chart-1)",
	"var(--color-chart-2)",
	"var(--color-chart-3)",
	"var(--color-chart-4)",
	"var(--color-chart-5)",
];

export function PrometheusChartWidget({
	widget,
	refreshIntervalMs,
	description,
}: Props) {
	const { data, isLoading } = useWidgetData(widget.id, refreshIntervalMs);
	const series = data?.data?.series as ChartSeries[] | undefined;

	return (
		<SectionCard title={widget.title} description={description}>
			{isLoading && !data ? (
				<Skeleton className="h-[300px] w-full" />
			) : data?.error ? (
				<Alert variant="destructive">
					<AlertDescription>{data.error}</AlertDescription>
				</Alert>
			) : series && series.length > 0 ? (
				<ResponsiveContainer width="100%" height={300}>
					<LineChart data={mergeSeries(series)}>
						<CartesianGrid strokeDasharray="3 3" className="stroke-muted" />
						<XAxis
							dataKey="time"
							tickFormatter={formatTime}
							tick={{ fontSize: 11 }}
							className="fill-muted-foreground"
						/>
						<YAxis tick={{ fontSize: 11 }} className="fill-muted-foreground" />
						<Tooltip
							labelFormatter={(label) => formatTime(Number(label))}
							contentStyle={{
								backgroundColor: "hsl(var(--popover))",
								border: "1px solid hsl(var(--border))",
								borderRadius: "0.5rem",
								color: "hsl(var(--popover-foreground))",
							}}
						/>
						{series.map((s, i) => (
							<Line
								key={s.label}
								type="monotone"
								dataKey={s.label}
								stroke={CHART_COLORS[i % CHART_COLORS.length]}
								dot={false}
								strokeWidth={2}
								connectNulls
							/>
						))}
					</LineChart>
				</ResponsiveContainer>
			) : (
				<Alert>
					<AlertDescription>
						No data. Check your PromQL query and window in the widget config.
					</AlertDescription>
				</Alert>
			)}
		</SectionCard>
	);
}