"use client";

import {
  addDays,
  differenceInDays,
  format as formatDate,
  startOfDay,
  subDays,
} from "date-fns";
import { faIR } from "date-fns/locale";
import {
  ArrowDownRight,
  ArrowUpRight,
  CalendarIcon,
  DollarSign,
  Eye,
  ShoppingCart,
  Users,
} from "lucide-react";
import { useMemo, useState } from "react";
import type { DateRange } from "react-day-picker";
import {
  Area,
  AreaChart,
  CartesianGrid,
  Line,
  LineChart,
  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 { ScrollArea } from "@/components/ui/scroll-area";
import { cn } from "@/lib/utils";

interface ChartGroup13Props {
  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 percentChangeFormatter = new Intl.NumberFormat("fa-IR", {
  maximumFractionDigits: 1,
  minimumFractionDigits: 1,
  signDisplay: "exceptZero",
});

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) * 12000) + 5000,
      users: Math.floor(seededRandom(seed + 1000) * 500) + 200,
      orders: Math.floor(seededRandom(seed + 2000) * 100) + 40,
      pageviews: Math.floor(seededRandom(seed + 3000) * 5000) + 2000,
    });
  }
  return data;
};

const presets = [
  { label: "امروز", getValue: () => ({ from: new Date(), to: new Date() }) },
  {
    label: "دیروز",
    getValue: () => ({
      from: subDays(new Date(), 1),
      to: subDays(new Date(), 1),
    }),
  },
  {
    label: "۷ روز اخیر",
    getValue: () => ({ from: subDays(new Date(), 6), to: new Date() }),
  },
  {
    label: "۱۴ روز اخیر",
    getValue: () => ({ from: subDays(new Date(), 13), to: new Date() }),
  },
  {
    label: "۳۰ روز اخیر",
    getValue: () => ({ from: subDays(new Date(), 29), to: new Date() }),
  },
  {
    label: "۹۰ روز اخیر",
    getValue: () => ({ from: subDays(new Date(), 89), to: new Date() }),
  },
];

const revenueConfig = {
  revenue: { label: "درآمد", color: "var(--chart-1)" },
} satisfies ChartConfig;
const usersConfig = {
  users: { label: "کاربران", color: "var(--chart-2)" },
} satisfies ChartConfig;
const ordersConfig = {
  orders: { label: "سفارش‌ها", color: "var(--chart-3)" },
} satisfies ChartConfig;
const pageviewsConfig = {
  pageviews: { label: "بازدید صفحه", color: "var(--chart-4)" },
} satisfies ChartConfig;

const ChartGroup13 = ({ className }: ChartGroup13Props) => {
  const [dateRange, setDateRange] = useState<DateRange | undefined>({
    from: subDays(new Date(), 29),
    to: new Date(),
  });
  const [presetLabel, setPresetLabel] = useState("۳۰ روز اخیر");

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

  const stats = useMemo(() => {
    const totalRevenue = filteredData.reduce(
      (sum, item) => sum + item.revenue,
      0,
    );
    const totalUsers = filteredData.reduce((sum, item) => sum + item.users, 0);
    const totalOrders = filteredData.reduce(
      (sum, item) => sum + item.orders,
      0,
    );
    const totalPageviews = filteredData.reduce(
      (sum, item) => sum + item.pageviews,
      0,
    );
    return { totalRevenue, totalUsers, totalOrders, totalPageviews };
  }, [filteredData]);

  const handlePreset = (preset: (typeof presets)[0]) => {
    setDateRange(preset.getValue());
    setPresetLabel(preset.label);
  };

  const handleCustomSelect = (range: DateRange | undefined) => {
    setDateRange(range);
    setPresetLabel("بازه دلخواه");
  };

  const dateRangeSubtitle =
    dateRange?.from && dateRange?.to
      ? `${formatDate(dateRange.from, "d MMM y", { locale: faIR })} – ${formatDate(dateRange.to, "d MMM y", { locale: faIR })}`
      : "انتخاب بازه تاریخ";

  const statCards = [
    {
      title: "درآمد",
      value: currencyFormatter.format(stats.totalRevenue),
      change: 12.5,
      icon: DollarSign,
      config: revenueConfig,
      dataKey: "revenue" as const,
      color: "var(--chart-1)",
    },
    {
      title: "کاربران",
      value: numberFormatter.format(stats.totalUsers),
      change: 8.2,
      icon: Users,
      config: usersConfig,
      dataKey: "users" as const,
      color: "var(--chart-2)",
    },
    {
      title: "سفارش‌ها",
      value: numberFormatter.format(stats.totalOrders),
      change: -3.1,
      icon: ShoppingCart,
      config: ordersConfig,
      dataKey: "orders" as const,
      color: "var(--chart-3)",
    },
    {
      title: "بازدید صفحه",
      value: numberFormatter.format(stats.totalPageviews),
      change: 15.8,
      icon: Eye,
      config: pageviewsConfig,
      dataKey: "pageviews" as const,
      color: "var(--chart-4)",
    },
  ];

  return (
    <section
      dir="rtl"
      lang="fa"
      className={cn("py-32 text-start", className)}
    >
      <div className="container space-y-6">
        <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
          <div>
            <h2 className="text-xl font-bold tracking-tight">تحلیل‌ها</h2>
            <p className="text-muted-foreground">{dateRangeSubtitle}</p>
          </div>
          <Popover>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                className="min-w-[280px] justify-start text-start font-normal"
              >
                <CalendarIcon className="ms-2 size-4" aria-hidden="true" />
                {presetLabel}
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-auto p-0" align="start">
              <div className="flex">
                <div className="border-e p-2">
                  <ScrollArea className="h-72">
                    <div className="space-y-1">
                      {presets.map((preset) => (
                        <Button
                          key={preset.label}
                          variant={
                            presetLabel === preset.label ? "secondary" : "ghost"
                          }
                          size="sm"
                          className="w-full justify-start text-start"
                          onClick={() => handlePreset(preset)}
                        >
                          {preset.label}
                        </Button>
                      ))}
                    </div>
                  </ScrollArea>
                </div>
                <Calendar
                  mode="range"
                  numberOfMonths={2}
                  locale={faIR}
                  selected={dateRange}
                  onSelect={handleCustomSelect}
                  defaultMonth={subDays(new Date(), 30)}
                />
              </div>
            </PopoverContent>
          </Popover>
        </div>

        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          {statCards.map((stat, index) => (
            <Card key={index} className="text-start">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium">
                  {stat.title}
                </CardTitle>
                <stat.icon className="size-4 text-muted-foreground" />
              </CardHeader>
              <CardContent>
                <div className="text-xl font-bold tabular-nums">
                  {stat.value}
                </div>
                <div className="flex flex-wrap items-center gap-1 text-xs">
                  {stat.change >= 0 ? (
                    <ArrowUpRight className="size-3 text-green-500" />
                  ) : (
                    <ArrowDownRight className="size-3 text-red-500" />
                  )}
                  <span
                    className={cn(
                      stat.change >= 0 ? "text-green-500" : "text-red-500",
                      "tabular-nums",
                    )}
                  >
                    {percentChangeFormatter.format(stat.change)}٪
                  </span>
                  <span className="text-muted-foreground">
                    نسبت به دوره قبل
                  </span>
                </div>
                <ChartContainer
                  config={stat.config}
                  className="mt-3 h-12 w-full"
                >
                  <AreaChart
                    data={filteredData.slice(-14)}
                    margin={{ top: 0, right: 0, left: 0, bottom: 0 }}
                  >
                    <defs>
                      <linearGradient
                        id={`grad-${stat.dataKey}`}
                        x1="0"
                        y1="0"
                        x2="0"
                        y2="1"
                      >
                        <stop
                          offset="0%"
                          stopColor={stat.color}
                          stopOpacity={0.3}
                        />
                        <stop
                          offset="100%"
                          stopColor={stat.color}
                          stopOpacity={0}
                        />
                      </linearGradient>
                    </defs>
                    <Area
                      type="monotone"
                      dataKey={stat.dataKey}
                      stroke={stat.color}
                      strokeWidth={1.5}
                      fill={`url(#grad-${stat.dataKey})`}
                    />
                  </AreaChart>
                </ChartContainer>
              </CardContent>
            </Card>
          ))}
        </div>

        <div className="grid gap-4 lg:grid-cols-7">
          <Card className="text-start lg:col-span-4">
            <CardHeader>
              <CardTitle>درآمد در طول زمان</CardTitle>
              <CardDescription>درآمد روزانه در بازه انتخاب‌شده</CardDescription>
            </CardHeader>
            <CardContent>
              <ChartContainer config={revenueConfig} className="h-80 w-full">
                <AreaChart
                  data={filteredData}
                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
                >
                  <defs>
                    <linearGradient
                      id="revGradMain"
                      x1="0"
                      y1="0"
                      x2="0"
                      y2="1"
                    >
                      <stop
                        offset="0%"
                        stopColor="var(--color-revenue)"
                        stopOpacity={0.4}
                      />
                      <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(#revGradMain)"
                  />
                </AreaChart>
              </ChartContainer>
            </CardContent>
          </Card>

          <Card className="text-start lg:col-span-3">
            <CardHeader>
              <CardTitle>کاربران و سفارش‌ها</CardTitle>
              <CardDescription>
                همبستگی بین کاربران و سفارش‌ها
              </CardDescription>
            </CardHeader>
            <CardContent>
              <ChartContainer
                config={{ ...usersConfig, ...ordersConfig }}
                className="h-80 w-full"
              >
                <LineChart
                  data={filteredData}
                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
                >
                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
                  <XAxis
                    dataKey="dateStr"
                    axisLine={false}
                    tickLine={false}
                    tickMargin={8}
                    fontSize={12}
                    interval="preserveStartEnd"
                  />
                  <YAxis
                    yAxisId="left"
                    axisLine={false}
                    tickLine={false}
                    tickMargin={8}
                    fontSize={10}
                    width={40}
                    tickFormatter={(v) => numberFormatter.format(Number(v))}
                  />
                  <YAxis
                    yAxisId="right"
                    orientation="right"
                    axisLine={false}
                    tickLine={false}
                    tickMargin={8}
                    fontSize={10}
                    width={40}
                    tickFormatter={(v) => numberFormatter.format(Number(v))}
                  />
                  <ChartTooltip
                    content={
                      <ChartTooltipContent
                        formatter={(value) =>
                          numberFormatter.format(Number(value))
                        }
                      />
                    }
                    cursor={{ stroke: "var(--border)", strokeDasharray: "4 4" }}
                  />
                  <Line
                    yAxisId="left"
                    type="monotone"
                    dataKey="users"
                    stroke="var(--color-users)"
                    strokeWidth={2}
                    dot={false}
                  />
                  <Line
                    yAxisId="right"
                    type="monotone"
                    dataKey="orders"
                    stroke="var(--color-orders)"
                    strokeWidth={2}
                    dot={false}
                  />
                </LineChart>
              </ChartContainer>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  );
};

export { ChartGroup13 };