"use client";

import {
  CartesianGrid,
  Scatter,
  ScatterChart,
  XAxis,
  YAxis,
  ZAxis,
} from "recharts";

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

interface ChartCard23Props {
  title?: string;
  description?: string;
  className?: string;
}

const currencyFormatter = new Intl.NumberFormat("fa-IR", {
  style: "currency",
  currency: "IRR",
  minimumFractionDigits: 0,
  maximumFractionDigits: 0,
});

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

const chartData = [
  { x: 100, y: 200, name: "محصول ۱" },
  { x: 120, y: 100, name: "محصول ۲" },
  { x: 170, y: 300, name: "محصول ۳" },
  { x: 140, y: 250, name: "محصول ۴" },
  { x: 150, y: 400, name: "محصول ۵" },
  { x: 110, y: 280, name: "محصول ۶" },
  { x: 200, y: 320, name: "محصول ۷" },
  { x: 180, y: 150, name: "محصول ۸" },
  { x: 160, y: 350, name: "محصول ۹" },
  { x: 190, y: 220, name: "محصول ۱۰" },
  { x: 130, y: 180, name: "محصول ۱۱" },
  { x: 220, y: 280, name: "محصول ۱۲" },
];

const chartConfig = {
  x: {
    label: "قیمت",
    color: "var(--chart-1)",
  },
  y: {
    label: "تعداد فروش",
    color: "var(--chart-1)",
  },
} satisfies ChartConfig;

const ChartCard23 = ({
  title = "قیمت در برابر فروش",
  description = "همبستگی بین قیمت و تعداد فروش",
  className,
}: ChartCard23Props) => {
  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>
        <ChartContainer config={chartConfig} className="h-64 w-full">
          <ScatterChart margin={{ top: 10, right: 10, left: 0, bottom: 0 }}>
            <CartesianGrid strokeDasharray="3 3" />
            <XAxis
              type="number"
              dataKey="x"
              axisLine={false}
              tickLine={false}
              tickMargin={8}
              fontSize={10}
              width={52}
              tickFormatter={(value) =>
                currencyFormatter.format(Number(value))
              }
            />
            <YAxis
              type="number"
              dataKey="y"
              axisLine={false}
              tickLine={false}
              tickMargin={8}
              fontSize={10}
              width={40}
              tickFormatter={(value) => numberFormatter.format(Number(value))}
            />
            <ZAxis range={[60, 60]} />
            <ChartTooltip
              cursor={{ strokeDasharray: "3 3" }}
              content={
                <ChartTooltipContent
                  labelFormatter={(_, payload) => {
                    const item = payload?.[0]?.payload as
                      | { name?: string }
                      | undefined;
                    return item?.name ?? "";
                  }}
                  formatter={(value, name) => {
                    if (name === "x") {
                      return `قیمت: ${currencyFormatter.format(Number(value))}`;
                    }
                    if (name === "y") {
                      return `تعداد: ${numberFormatter.format(Number(value))}`;
                    }
                    return `${name}: ${value}`;
                  }}
                />
              }
            />
            <Scatter data={chartData} fill="var(--chart-1)" fillOpacity={0.7} />
          </ScatterChart>
        </ChartContainer>
      </CardContent>
    </Card>
  );
};

export { ChartCard23 };