"use client";
import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
import type { PrinterErrorRate } from "@/utils/analytics/error-rate";

export const description = "Ein Säulendiagramm zur Darstellung der Fehlerrate";

interface PrinterErrorRateChartProps {
	printerErrorRate: PrinterErrorRate[];
}

const chartConfig = {
	errorRate: {
		label: "Fehlerrate",
	},
} satisfies ChartConfig;

export function PrinterErrorRateChart({ printerErrorRate }: PrinterErrorRateChartProps) {
	// Transform data to fit the chart structure
	const chartData = printerErrorRate.map((printer) => ({
		printer: printer.name,
		errorRate: printer.errorRate,
	}));

	return (
		<Card>
			<CardHeader>
				<CardTitle>Fehlerrate</CardTitle>
				<CardDescription>Fehlerrate der Drucker in Prozent</CardDescription>
			</CardHeader>
			<CardContent>
				<ChartContainer config={chartConfig}>
					<BarChart
						accessibilityLayer
						data={chartData}
						margin={{
							top: 20,
						}}
					>
						<CartesianGrid vertical={false} strokeDasharray="3 3" />
						<XAxis
							dataKey="printer"
							tickLine={false}
							tickMargin={10}
							axisLine={false}
							tickFormatter={(value) => value}
						/>
						<YAxis tickFormatter={(value) => `${value}%`} />
						<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
						<Bar dataKey="errorRate" fill="hsl(var(--chart-1))" radius={8}>
							<LabelList
								position="top"
								offset={12}
								className="fill-foreground"
								fontSize={12}
								formatter={(value: number) => `${value}%`}
							/>
						</Bar>
					</BarChart>
				</ChartContainer>
			</CardContent>
		</Card>
	);
}
