"use client";

import {
  addDays,
  differenceInDays,
  format as formatDate,
  startOfDay,
  subDays,
  subMonths,
} from "date-fns";
import { faIR } from "date-fns/locale";
import { CalendarIcon, TrendingDown, TrendingUp } from "lucide-react";
import { useMemo, useState } from "react";
import type { DateRange } from "react-day-picker";
import {
  Area,
  AreaChart,
  Bar,
  BarChart,
  CartesianGrid,
  Pie,
  PieChart,
  XAxis,
  YAxis,
} from "recharts";

import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  type ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { cn } from "@/lib/utils";

interface ChartGroup12Props {
  className?: string;
}

const seededRandom = (seed: number) => {
  const x = Math.sin(seed) * 10000;
  return x - Math.floor(x);
};

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

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

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

const oneDecimalFormatter = new Intl.NumberFormat("fa-IR", {
  maximumFractionDigits: 1,
  minimumFractionDigits: 1,
});

const percentChangeFormatter = new Intl.NumberFormat("fa-IR", {
  maximumFractionDigits: 1,
  minimumFractionDigits: 1,
  signDisplay: "exceptZero",
});

const formatPercent = (value: number) =>
  `${oneDecimalFormatter.format(value)}٪`;

const generateDataForRange = (from: Date, to: Date) => {
  const data = [];
  const days = differenceInDays(to, from) + 1;

  for (let i = 0; i < days; i++) {
    const date = addDays(startOfDay(from), i);
    const seed = date.getTime() / 86400000;

    data.push({
      date: date,
      dateStr: formatDate(date, "d MMM", { locale: faIR }),
      revenue: Math.floor(seededRandom(seed) * 8000) + 3000,
      orders: Math.floor(seededRandom(seed + 1000) * 80) + 30,
      visitors: Math.floor(seededRandom(seed + 2000) * 2000) + 500,
    });
  }
  return data;
};

const categoryData = [
  { name: "الکترونیک", value: 4200, fill: "var(--chart-1)" },
  { name: "پوشاک", value: 3100, fill: "var(--chart-2)" },
  { name: "خانه", value: 2400, fill: "var(--chart-3)" },
  { name: "ورزش", value: 1800, fill: "var(--chart-4)" },
];

const categoryConfig = {
  الکترونیک: { label: "الکترونیک", color: "var(--chart-1)" },
  پوشاک: { label: "پوشاک", color: "var(--chart-2)" },
  خانه: { label: "خانه", color: "var(--chart-3)" },
  ورزش: { label: "ورزش", color: "var(--chart-4)" },
} satisfies ChartConfig;

const sourceData = [
  { name: "ارگانیک", value: 42 },
  { name: "پولی", value: 28 },
  { name: "شبکه‌های اجتماعی", value: 18 },
  { name: "ارجاع", value: 12 },
];

const presets = [
  { label: "۷ روز اخیر", days: 7 },
  { label: "۳۰ روز اخیر", days: 30 },
  { label: "۹۰ روز اخیر", days: 90 },
];

const revenueConfig = {
  revenue: { label: "درآمد", color: "var(--chart-1)" },
} satisfies ChartConfig;

const sourceConfig = {
  value: { label: "درصد", color: "var(--chart-2)" },
} satisfies ChartConfig;

const ChartGroup12 = ({ className }: ChartGroup12Props) => {
  const [dateRange, setDateRange] = useState<DateRange | undefined>({
    from: subDays(new Date(), 30),
    to: new Date(),
  });

  const filteredData = useMemo(() => {
    const from = dateRange?.from ?? subDays(new Date(), 30);
    const to = dateRange?.to ?? new Date();
    return generateDataForRange(from, to);
  }, [dateRange]);

  const totalRevenue = filteredData.reduce(
    (sum, item) => sum + item.revenue,
    0,
  );
  const totalOrders = filteredData.reduce((sum, item) => sum + item.orders, 0);
  const totalVisitors = filteredData.reduce(
    (sum, item) => sum + item.visitors,
    0,
  );
  const conversionRate =
    totalVisitors > 0 ? (totalOrders / totalVisitors) * 100 : 0;

  const handlePreset = (days: number) => {
    setDateRange({
      from: subDays(new Date(), days),
      to: new Date(),
    });
  };

  const stats = [
    {
      title: "مجموع درآمد",
      value: currencyFormatter.format(totalRevenue),
      change: 12.5,
    },
    {
      title: "مجموع سفارش‌ها",
      value: numberFormatter.format(totalOrders),
      change: 8.2,
    },
    {
      title: "بازدیدکنندگان",
      value: numberFormatter.format(totalVisitors),
      change: -2.4,
    },
    {
      title: "نرخ تبدیل",
      value: formatPercent(conversionRate),
      change: 5.1,
    },
  ];

  const avgOrderValue =
    totalOrders > 0 ? Math.round(totalRevenue / totalOrders) : 0;
  const ordersPerDay =
    filteredData.length > 0
      ? Math.round(totalOrders / filteredData.length)
      : 0;
  const revenuePerDay =
    filteredData.length > 0
      ? Math.round(totalRevenue / filteredData.length)
      : 0;
  const visitorsPerDay =
    filteredData.length > 0
      ? Math.round(totalVisitors / filteredData.length)
      : 0;

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-32 text-start", className)}
    >
      <div className="container space-y-4">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h2 className="text-xl font-bold">مرور داشبورد</h2>
            <p className="text-muted-foreground">
              پیگیری عملکرد کسب‌وکار شما
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            {presets.map((preset) => (
              <Button
                key={preset.days}
                variant="outline"
                size="sm"
                onClick={() => handlePreset(preset.days)}
                className={cn(
                  dateRange?.from &&
                    formatDate(dateRange.from, "yyyy-MM-dd") ===
                      formatDate(
                        subDays(new Date(), preset.days),
                        "yyyy-MM-dd",
                      ) &&
                    "bg-accent",
                )}
              >
                {preset.label}
              </Button>
            ))}
            <Popover>
              <PopoverTrigger asChild>
                <Button variant="outline" size="sm">
                  <CalendarIcon className="ms-2 size-4" aria-hidden="true" />
                  بازه دلخواه
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-0" align="start">
                <Calendar
                  mode="range"
                  numberOfMonths={2}
                  locale={faIR}
                  selected={dateRange}
                  onSelect={setDateRange}
                  defaultMonth={subMonths(new Date(), 1)}
                />
              </PopoverContent>
            </Popover>
          </div>
        </div>

        <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          {stats.map((stat, index) => (
            <Card key={index} className="text-start">
              <CardContent className="pt-6">
                <p className="text-sm text-muted-foreground">{stat.title}</p>
                <p className="text-xl font-bold tabular-nums">{stat.value}</p>
                <div className="mt-1 flex items-center gap-1 text-sm">
                  {stat.change >= 0 ? (
                    <TrendingUp className="size-4 text-green-500" />
                  ) : (
                    <TrendingDown className="size-4 text-red-500" />
                  )}
                  <span
                    className={cn(
                      stat.change >= 0 ? "text-green-500" : "text-red-500",
                      "tabular-nums",
                    )}
                  >
                    {percentChangeFormatter.format(stat.change)}٪
                  </span>
                </div>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="grid gap-4 lg:grid-cols-3">
          <Card className="text-start lg:col-span-2">
            <CardHeader>
              <CardTitle>روند درآمد</CardTitle>
              <CardDescription>درآمد روزانه در بازه انتخاب‌شده</CardDescription>
            </CardHeader>
            <CardContent>
              <ChartContainer config={revenueConfig} className="h-64 w-full">
                <AreaChart
                  data={filteredData}
                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
                >
                  <defs>
                    <linearGradient id="revGrad12" x1="0" y1="0" x2="0" y2="1">
                      <stop
                        offset="0%"
                        stopColor="var(--color-revenue)"
                        stopOpacity={0.3}
                      />
                      <stop
                        offset="100%"
                        stopColor="var(--color-revenue)"
                        stopOpacity={0}
                      />
                    </linearGradient>
                  </defs>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
                  <XAxis
                    dataKey="dateStr"
                    axisLine={false}
                    tickLine={false}
                    tickMargin={8}
                    fontSize={12}
                    interval="preserveStartEnd"
                  />
                  <YAxis
                    axisLine={false}
                    tickLine={false}
                    tickMargin={8}
                    fontSize={10}
                    width={52}
                    tickFormatter={(v) =>
                      compactCurrencyFormatter.format(Number(v))
                    }
                  />
                  <ChartTooltip
                    content={
                      <ChartTooltipContent
                        formatter={(value) =>
                          currencyFormatter.format(Number(value))
                        }
                      />
                    }
                    cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
                  />
                  <Area
                    type="monotone"
                    dataKey="revenue"
                    stroke="var(--color-revenue)"
                    strokeWidth={2}
                    fill="url(#revGrad12)"
                  />
                </AreaChart>
              </ChartContainer>
            </CardContent>
          </Card>

          <Card className="text-start">
            <CardHeader>
              <CardTitle>فروش به تفکیک دسته</CardTitle>
              <CardDescription>تفکیک درآمد بر اساس دسته</CardDescription>
            </CardHeader>
            <CardContent>
              <div className="flex flex-col items-center gap-4">
                <ChartContainer config={categoryConfig} className="size-36">
                  <PieChart>
                    <ChartTooltip
                      content={
                        <ChartTooltipContent
                          nameKey="name"
                          hideLabel
                          formatter={(value) =>
                            currencyFormatter.format(Number(value))
                          }
                        />
                      }
                      cursor={false}
                    />
                    <Pie
                      data={categoryData}
                      cx="50%"
                      cy="50%"
                      innerRadius={45}
                      outerRadius={65}
                      paddingAngle={2}
                      dataKey="value"
                      nameKey="name"
                      strokeWidth={0}
                    />
                  </PieChart>
                </ChartContainer>
                <div className="grid w-full grid-cols-2 gap-2 text-sm">
                  {categoryData.map((item, index) => (
                    <div key={index} className="flex items-center gap-2">
                      <div
                        className="size-2 shrink-0 rounded-full"
                        style={{ backgroundColor: item.fill }}
                      />
                      <span className="truncate text-muted-foreground">
                        {item.name}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="text-start lg:col-span-2">
            <CardHeader>
              <CardTitle>منابع ترافیک</CardTitle>
              <CardDescription>منشأ بازدیدکنندگان شما</CardDescription>
            </CardHeader>
            <CardContent>
              <ChartContainer config={sourceConfig} className="h-40 w-full">
                <BarChart
                  data={sourceData}
                  layout="vertical"
                  margin={{ top: 0, right: 10, left: 0, bottom: 0 }}
                >
                  <XAxis
                    type="number"
                    axisLine={false}
                    tickLine={false}
                    fontSize={12}
                    tickFormatter={(v) => formatPercent(Number(v))}
                  />
                  <YAxis
                    type="category"
                    dataKey="name"
                    axisLine={false}
                    tickLine={false}
                    fontSize={12}
                    width={100}
                  />
                  <ChartTooltip
                    content={
                      <ChartTooltipContent
                        formatter={(value) => formatPercent(Number(value))}
                      />
                    }
                    cursor={{ fillOpacity: 0.05 }}
                  />
                  <Bar
                    dataKey="value"
                    fill="var(--color-value)"
                    radius={[0, 4, 4, 0]}
                  />
                </BarChart>
              </ChartContainer>
            </CardContent>
          </Card>

          <Card className="text-start">
            <CardHeader>
              <CardTitle>آمار سریع</CardTitle>
              <CardDescription>خلاصه شاخص‌های کلیدی</CardDescription>
            </CardHeader>
            <CardContent className="space-y-4">
              <div className="flex justify-between gap-4">
                <span className="text-muted-foreground">میانگین ارزش سفارش</span>
                <span className="font-semibold tabular-nums">
                  {currencyFormatter.format(avgOrderValue)}
                </span>
              </div>
              <div className="flex justify-between gap-4">
                <span className="text-muted-foreground">سفارش در روز</span>
                <span className="font-semibold tabular-nums">
                  {numberFormatter.format(ordersPerDay)}
                </span>
              </div>
              <div className="flex justify-between gap-4">
                <span className="text-muted-foreground">درآمد در روز</span>
                <span className="font-semibold tabular-nums">
                  {currencyFormatter.format(revenuePerDay)}
                </span>
              </div>
              <div className="flex justify-between gap-4">
                <span className="text-muted-foreground">بازدید در روز</span>
                <span className="font-semibold tabular-nums">
                  {numberFormatter.format(visitorsPerDay)}
                </span>
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  );
};

export { ChartGroup12 };