"use client";

import React from "react";
import { CartesianGrid, Line, LineChart, XAxis } 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: "قالب گزارش آماده",
  },
  {
    title: `${formatNumber(85)} هزار+`,
    description: "تیم فروش فعال",
  },
];

interface Stats16Props {
  className?: string;
}

const Stats16 = ({ className }: Stats16Props) => {
  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-20 h-[30vh] w-full max-w-xl">
          <ChartLineDots />
        </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, mobile: 80 },
  { month: "فور", desktop: 305, mobile: 200 },
  { month: "مار", desktop: 237, mobile: 120 },
  { month: "آپر", desktop: 73, mobile: 190 },
  { month: "مه", desktop: 209, mobile: 130 },
  { month: "ژوئ", desktop: 214, mobile: 140 },
];

const chartConfig = {
  desktop: {
    label: "تبدیل وب",
    color: "var(--chart-1)",
  },
  mobile: {
    label: "تبدیل موبایل",
    color: "var(--chart-2)",
  },
} satisfies ChartConfig;

const ChartLineDots = () => {
  return (
    <ChartContainer config={chartConfig} className="h-full w-full">
      <LineChart
        accessibilityLayer
        data={chartData}
        margin={{
          left: 12,
          right: 12,
        }}
      >
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="month"
          tickLine={false}
          axisLine={false}
          tickMargin={8}
        />
        <ChartTooltip
          cursor={false}
          content={<ChartTooltipContent hideLabel />}
        />
        <Line
          dataKey="desktop"
          type="natural"
          stroke="var(--color-desktop)"
          strokeWidth={2}
          dot={{
            fill: "var(--color-desktop)",
          }}
          activeDot={{
            r: 6,
          }}
        />
      </LineChart>
    </ChartContainer>
  );
};

export { Stats16 };