"use client";

import React from "react";
import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts";

import type { ChartConfig } from "@/components/ui/chart";
import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import { cn } from "@/lib/utils";

const formatNumber = (value: number) => value.toLocaleString("fa-IR");

interface StatItem {
  title: string;
  description: string;
}

const statsData: StatItem[] = [
  {
    title: `${formatNumber(100)}٪`,
    description: "شفافیت قیف فروش",
  },
  {
    title: `${formatNumber(750)}+`,
    description: "شاخص KPI قابل رصد",
  },
  {
    title: `${formatNumber(85)} هزار+`,
    description: "جلسه آنالیتیکس ماهانه",
  },
];

interface Stats18Props {
  className?: string;
}

const Stats18 = ({ className }: Stats18Props) => {
  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("overflow-hidden py-32", className)}
    >
      <div className="container flex w-full flex-col items-center justify-center px-4">
        <p className="mb-4 rounded-full bg-muted px-2 py-1 text-xs">عملکرد</p>
        <h2 className="relative py-2 text-center font-sans text-xl font-semibold tracking-tighter lg:text-2xll">
          پوشش کانال‌های فروش در یک قاب
        </h2>
        <p className="mx-auto max-w-xl px-5 text-center text-sm text-muted-foreground lg:text-base">
          نقاط قوت و ضعف قیف را در هر ماه ببینید و اولویت‌های تیم فروش را
          تنظیم کنید.
        </p>

        <div className="my-10 h-[40vh] w-full max-w-xl">
          <ChartRadarDots />
        </div>
        <div className="flex w-full max-w-2xl items-center justify-between">
          {statsData.map((stat, index) => (
            <div
              key={index}
              className="flex w-25 flex-col items-center justify-center gap-2 text-center"
            >
              <h2 className="text-3xl font-semibold tracking-tighter md:text-2xll">
                {stat.title}
              </h2>
              <p className="text-sm text-muted-foreground">
                {stat.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const chartData = [
  { month: "ژان", desktop: 186 },
  { month: "فور", desktop: 305 },
  { month: "مار", desktop: 237 },
  { month: "آپر", desktop: 273 },
  { month: "مه", desktop: 209 },
  { month: "ژوئ", desktop: 214 },
];

const chartConfig = {
  desktop: {
    label: "عملکرد فروش",
    color: "var(--chart-1)",
  },
} satisfies ChartConfig;

const ChartRadarDots = () => {
  return (
    <ChartContainer
      config={chartConfig}
      className="mx-auto aspect-square max-h-[350px]"
    >
      <RadarChart data={chartData}>
        <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
        <PolarAngleAxis dataKey="month" />
        <PolarGrid />
        <Radar
          dataKey="desktop"
          fill="var(--color-desktop)"
          fillOpacity={0.6}
          dot={{
            r: 4,
            fillOpacity: 1,
          }}
        />
      </RadarChart>
    </ChartContainer>
  );
};

export { Stats18 };