"use client";

import {
    Label,
    PolarGrid,
    PolarRadiusAxis,
    RadialBar,
    RadialBarChart,
} from "recharts";
import { S } from "../typography";
import { ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent } from "./CustomCharts";

interface RadialChartProps {
    content: {
        title?: string;
        description?: string;
        data: { [key: string]: string | number }[];
        config: ChartConfig;
        dataKey: string;
    };
    className?: string;
    scale?:number
}

export default function RadialChartCard({ content, className,scale = 1 }: RadialChartProps) {
    const { data, config, dataKey, title, description } = content;
    const primaryValue = Number(data[0][dataKey]) || 0;
    const endAngle = (primaryValue / 100) * 360 + 90;
    const innerRadius = 42 * scale;
    const outerRadius = 52 * scale;
    const polarRadius = [44 * scale, 40 * scale];
    return (
        <div className={`flex flex-col gap-2 ${className}`}>
            {title && <S className="font-bold text-lg">{title}</S>}
            {description && <S className="text-muted-foreground text-sm">{description}</S>}
            <ChartContainer
                config={config}
                className="mx-auto aspect-square max-w-[120px] h-[150px]"
            >
                <RadialBarChart
                    data={data}
                    startAngle={90}
                    endAngle={endAngle}
                    innerRadius={innerRadius}
                    outerRadius={outerRadius}
                >
                    <ChartTooltip
                        cursor={false}
                        content={<ChartTooltipContent hideLabel nameKey="value"  className="border-none" />}
                    />
                    <PolarGrid
                        gridType="circle"
                        radialLines={false}
                        stroke="none"
                        className="first:fill-gray-300 last:fill-background"
                        polarRadius={polarRadius}
                    />
                    <RadialBar dataKey={dataKey} background cornerRadius={10} />
                    <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
                        <Label
                            content={({ viewBox }) => {
                                if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                                    return (
                                        <text
                                            x={viewBox.cx}
                                            y={viewBox.cy}
                                            textAnchor="middle"
                                            dominantBaseline="middle"
                                        >
                                            <tspan
                                                x={viewBox.cx}
                                                y={viewBox.cy}
                                                className={`fill-foreground text-lg font-bold`}
                                            >
                                                {data[0].displayValue || `${data[0][dataKey]?.toLocaleString()}%`}
                                            </tspan>
                                            <tspan
                                                x={viewBox.cx}
                                                y={(viewBox.cy || 0) + 60}
                                                className="fill-muted-foreground  text-base"
                                            >
                                                {config[dataKey]?.label}
                                            </tspan>
                                        </text>
                                    );
                                }

                            }}
                        />
                    </PolarRadiusAxis>
                </RadialBarChart>
            </ChartContainer>
        </div>
    );
}