"use client";

import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts";

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
import { cn } from "@/lib/utils";

interface ChartCard17Props {
  title?: string;
  description?: string;
  value?: number;
  max?: number;
  unit?: string;
  className?: string;
}

const numberFormatter = new Intl.NumberFormat("fa-IR", {
  maximumFractionDigits: 0,
});

const chartConfig = {
  value: {
    label: "امتیاز",
    color: "var(--chart-1)",
  },
} satisfies ChartConfig;

const ChartCard17 = ({
  title = "امتیاز عملکرد",
  description = "عملکرد فعلی سامانه",
  value = 73,
  max = 100,
  unit = "",
  className,
}: ChartCard17Props) => {
  const percentage = Math.round((value / max) * 100);
  const chartData = [{ value: percentage, fill: "var(--chart-1)" }];

  const startAngle = 180;
  const endAngle = 180 - (180 * percentage) / 100;

  return (
    <Card
      dir="rtl"
      lang="fa"
      className={cn("w-full max-w-2xl text-start", className)}
    >
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        <CardDescription>{description}</CardDescription>
      </CardHeader>
      <CardContent className="flex flex-col items-center">
        <ChartContainer
          config={chartConfig}
          className="mx-auto aspect-2/1 h-40 w-80"
        >
          <RadialBarChart
            data={chartData}
            startAngle={startAngle}
            endAngle={endAngle}
            innerRadius={100}
            outerRadius={140}
            cx="50%"
            cy="100%"
          >
            <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 || 0) - 16}
                          className="fill-foreground text-3xl font-bold tabular-nums"
                        >
                          {numberFormatter.format(value)}
                          {unit}
                        </tspan>
                        <tspan
                          x={viewBox.cx}
                          y={(viewBox.cy || 0) + 8}
                          className="fill-muted-foreground text-sm"
                        >
                          از {numberFormatter.format(max)}
                        </tspan>
                      </text>
                    );
                  }
                }}
              />
            </PolarRadiusAxis>
            <RadialBar
              dataKey="value"
              background={{ fill: "var(--muted)" }}
              cornerRadius={10}
            />
          </RadialBarChart>
        </ChartContainer>
        <div className="-mt-2 flex w-72 justify-between text-sm text-muted-foreground tabular-nums">
          <span>{numberFormatter.format(0)}</span>
          <span>{numberFormatter.format(max)}</span>
        </div>
      </CardContent>
    </Card>
  );
};

export { ChartCard17 };