"use client";

import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";
import { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from "recharts";

export const description = "Ein Säulendiagramm zur Darstellung der Abbruchgründe und ihrer Häufigkeit";

interface AbortReasonCountChartProps {
	abortReasonCount: {
		abortReason: string;
		count: number;
	}[];
}

const chartConfig = {
	abortReason: {
		label: "Abbruchgrund",
	},
} satisfies ChartConfig;

export function AbortReasonCountChart({ abortReasonCount }: AbortReasonCountChartProps) {
	// Transform data to fit the chart structure
	const chartData = abortReasonCount.map((reason) => ({
		abortReason: reason.abortReason,
		count: reason.count,
	}));

	return (
		<Card>
			<CardHeader>
				<CardTitle>Abbruchgründe</CardTitle>
				<CardDescription>Häufigkeit der Abbruchgründe für Druckaufträge</CardDescription>
			</CardHeader>
			<CardContent>
				<ChartContainer config={chartConfig}>
					<BarChart
						accessibilityLayer
						data={chartData}
						margin={{
							top: 20,
						}}
					>
						<CartesianGrid vertical={false} strokeDasharray="3 3" />
						<XAxis
							dataKey="abortReason"
							tickLine={false}
							tickMargin={10}
							axisLine={false}
							tickFormatter={(value) => value}
						/>
						<YAxis tickFormatter={(value) => `${value}`} />
						<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
						<Bar dataKey="count" 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>
	);
}
