"use client";

import {
  addDays,
  differenceInDays,
  endOfMonth,
  endOfWeek,
  format as formatDate,
  startOfDay,
  startOfMonth,
  startOfWeek,
  subDays,
  subMonths,
} from "date-fns";
import { faIR } from "date-fns/locale";
import {
  Activity,
  CalendarIcon,
  ChevronLeft,
  Globe,
  TrendingDown,
  TrendingUp,
  Users,
  Zap,
} from "lucide-react";
import { useMemo, useState } from "react";
import type { DateRange } from "react-day-picker";
import {
  Area,
  AreaChart,
  CartesianGrid,
  Pie,
  PieChart,
  XAxis,
  YAxis,
} from "recharts";

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Card, CardContent, 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 {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { cn } from "@/lib/utils";

interface ChartGroup14Props {
  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) * 15000) + 8000,
      sessions: Math.floor(seededRandom(seed + 1000) * 3000) + 1500,
      conversions: Math.floor(seededRandom(seed + 2000) * 150) + 50,
      bounceRate: Math.floor(seededRandom(seed + 3000) * 30) + 20,
    });
  }
  return data;
};

const channelData = [
  { name: "جستجوی ارگانیک", value: 38, fill: "var(--chart-1)" },
  { name: "مستقیم", value: 26, fill: "var(--chart-2)" },
  { name: "ارجاع", value: 18, fill: "var(--chart-3)" },
  { name: "شبکه‌های اجتماعی", value: 12, fill: "var(--chart-4)" },
  { name: "ایمیل", value: 6, fill: "var(--chart-5)" },
];

const channelConfig = {
  "جستجوی ارگانیک": {
    label: "جستجوی ارگانیک",
    color: "var(--chart-1)",
  },
  مستقیم: { label: "مستقیم", color: "var(--chart-2)" },
  ارجاع: { label: "ارجاع", color: "var(--chart-3)" },
  "شبکه‌های اجتماعی": {
    label: "شبکه‌های اجتماعی",
    color: "var(--chart-4)",
  },
  ایمیل: { label: "ایمیل", color: "var(--chart-5)" },
} satisfies ChartConfig;

const topPages = [
  { path: "/products", views: 12453, change: 12.5 },
  { path: "/pricing", views: 8234, change: 8.2 },
  { path: "/about", views: 6123, change: -2.1 },
  { path: "/blog/guide", views: 4532, change: 15.8 },
  { path: "/contact", views: 3421, change: 5.4 },
];

const topUsers = [
  {
    name: "سارا احمدی",
    email: "sara@example.com",
    sessions: 47,
    avatar: "/block-media/shadcnblocks/ui/avatar-1.jpg",
  },
  {
    name: "علی رضایی",
    email: "ali@example.com",
    sessions: 42,
    avatar: "/block-media/shadcnblocks/ui/avatar-2.jpg",
  },
  {
    name: "مریم حسینی",
    email: "maryam@example.com",
    sessions: 38,
    avatar: "/block-media/shadcnblocks/ui/avatar-3.jpg",
  },
  {
    name: "محمد کریمی",
    email: "mohammad@example.com",
    sessions: 35,
    avatar: "/block-media/shadcnblocks/ui/avatar-4.jpg",
  },
];

const presetRanges = [
  { label: "امروز", getValue: () => ({ from: new Date(), to: new Date() }) },
  {
    label: "این هفته",
    getValue: () => ({
      from: startOfWeek(new Date(), { locale: faIR }),
      to: endOfWeek(new Date(), { locale: faIR }),
    }),
  },
  {
    label: "این ماه",
    getValue: () => ({
      from: startOfMonth(new Date()),
      to: endOfMonth(new Date()),
    }),
  },
  {
    label: "۷ روز اخیر",
    getValue: () => ({ from: subDays(new Date(), 6), to: new Date() }),
  },
  {
    label: "۳۰ روز اخیر",
    getValue: () => ({ from: subDays(new Date(), 29), to: new Date() }),
  },
  {
    label: "۳ ماه اخیر",
    getValue: () => ({ from: subMonths(new Date(), 3), to: new Date() }),
  },
];

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

const ChartGroup14 = ({ className }: ChartGroup14Props) => {
  const [dateRange, setDateRange] = useState<DateRange | undefined>({
    from: subDays(new Date(), 29),
    to: new Date(),
  });
  const [selectedPreset, setSelectedPreset] = 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 totalSessions = filteredData.reduce(
      (sum, item) => sum + item.sessions,
      0,
    );
    const totalConversions = filteredData.reduce(
      (sum, item) => sum + item.conversions,
      0,
    );
    const avgBounceRate =
      filteredData.length > 0
        ? Math.round(
            filteredData.reduce((sum, item) => sum + item.bounceRate, 0) /
              filteredData.length,
          )
        : 0;
    const conversionRate =
      totalSessions > 0 ? (totalConversions / totalSessions) * 100 : 0;
    return {
      totalRevenue,
      totalSessions,
      totalConversions,
      avgBounceRate,
      conversionRate,
    };
  }, [filteredData]);

  const handlePresetChange = (value: string) => {
    const preset = presetRanges.find((p) => p.label === value);
    if (preset) {
      setDateRange(preset.getValue());
      setSelectedPreset(value);
    }
  };

  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">
              بینش لحظه‌ای از کسب‌وکار شما
            </p>
          </div>
          <div className="flex flex-wrap items-center gap-2">
            <Select value={selectedPreset} onValueChange={handlePresetChange}>
              <SelectTrigger className="w-[160px] text-start">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                {presetRanges.map((preset) => (
                  <SelectItem key={preset.label} value={preset.label}>
                    {preset.label}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
            <Popover>
              <PopoverTrigger asChild>
                <Button
                  variant="outline"
                  className="min-w-[200px] justify-start text-start font-normal"
                >
                  <CalendarIcon className="ms-2 size-4" aria-hidden="true" />
                  {dateRange?.from ? (
                    dateRange.to ? (
                      <>
                        {formatDate(dateRange.from, "d MMM", { locale: faIR })}{" "}
                        –{" "}
                        {formatDate(dateRange.to, "d MMM", { locale: faIR })}
                      </>
                    ) : (
                      formatDate(dateRange.from, "d MMM y", { locale: faIR })
                    )
                  ) : (
                    "انتخاب تاریخ"
                  )}
                </Button>
              </PopoverTrigger>
              <PopoverContent className="w-auto p-0" align="start">
                <Calendar
                  mode="range"
                  numberOfMonths={2}
                  locale={faIR}
                  selected={dateRange}
                  onSelect={(range) => {
                    setDateRange(range);
                    setSelectedPreset("بازه دلخواه");
                  }}
                />
              </PopoverContent>
            </Popover>
          </div>
        </div>

        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
          <Card className="text-start">
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div className="rounded-lg bg-primary/10 p-2">
                  <Activity className="size-5 text-primary" />
                </div>
                <Badge
                  variant="secondary"
                  className="bg-green-100 text-green-700 tabular-nums"
                >
                  <TrendingUp className="ms-1 size-3" />
                  {percentChangeFormatter.format(12.5)}٪
                </Badge>
              </div>
              <div className="mt-3">
                <p className="text-sm text-muted-foreground">مجموع درآمد</p>
                <p className="text-xl font-bold tabular-nums">
                  {currencyFormatter.format(stats.totalRevenue)}
                </p>
              </div>
            </CardContent>
          </Card>

          <Card className="text-start">
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div className="rounded-lg bg-blue-100 p-2">
                  <Users className="size-5 text-blue-600" />
                </div>
                <Badge
                  variant="secondary"
                  className="bg-green-100 text-green-700 tabular-nums"
                >
                  <TrendingUp className="ms-1 size-3" />
                  {percentChangeFormatter.format(8.2)}٪
                </Badge>
              </div>
              <div className="mt-3">
                <p className="text-sm text-muted-foreground">مجموع جلسات</p>
                <p className="text-xl font-bold tabular-nums">
                  {numberFormatter.format(stats.totalSessions)}
                </p>
              </div>
            </CardContent>
          </Card>

          <Card className="text-start">
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div className="rounded-lg bg-green-100 p-2">
                  <Zap className="size-5 text-green-600" />
                </div>
                <Badge
                  variant="secondary"
                  className="bg-green-100 text-green-700 tabular-nums"
                >
                  <TrendingUp className="ms-1 size-3" />
                  {percentChangeFormatter.format(5.4)}٪
                </Badge>
              </div>
              <div className="mt-3">
                <p className="text-sm text-muted-foreground">نرخ تبدیل</p>
                <p className="text-xl font-bold tabular-nums">
                  {formatPercent(stats.conversionRate)}
                </p>
              </div>
            </CardContent>
          </Card>

          <Card className="text-start">
            <CardContent className="pt-6">
              <div className="flex items-center justify-between">
                <div className="rounded-lg bg-orange-100 p-2">
                  <Globe className="size-5 text-orange-600" />
                </div>
                <Badge variant="secondary" className="bg-red-100 text-red-700">
                  <TrendingDown className="ms-1 size-3" />
                  {percentChangeFormatter.format(2.1)}٪
                </Badge>
              </div>
              <div className="mt-3">
                <p className="text-sm text-muted-foreground">نرخ پرش</p>
                <p className="text-xl font-bold tabular-nums">
                  {formatPercent(stats.avgBounceRate)}
                </p>
              </div>
            </CardContent>
          </Card>

          <Card className="text-start md:col-span-2">
            <CardHeader className="pb-2">
              <CardTitle className="text-base">روند درآمد</CardTitle>
            </CardHeader>
            <CardContent>
              <ChartContainer config={revenueConfig} className="h-52 w-full">
                <AreaChart
                  data={filteredData}
                  margin={{ top: 10, right: 10, left: 0, bottom: 0 }}
                >
                  <defs>
                    <linearGradient id="revGrad14" 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={11}
                    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(#revGrad14)"
                  />
                </AreaChart>
              </ChartContainer>
            </CardContent>
          </Card>

          <Card className="text-start md:col-span-2">
            <CardHeader className="pb-2">
              <CardTitle className="text-base">کانال‌های ترافیک</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="flex items-center gap-6">
                <ChartContainer
                  config={channelConfig}
                  className="relative size-32 shrink-0"
                >
                  <PieChart>
                    <ChartTooltip
                      content={
                        <ChartTooltipContent
                          nameKey="name"
                          hideLabel
                          formatter={(value) => formatPercent(Number(value))}
                        />
                      }
                      cursor={false}
                    />
                    <Pie
                      data={channelData}
                      cx="50%"
                      cy="50%"
                      innerRadius={35}
                      outerRadius={55}
                      paddingAngle={2}
                      dataKey="value"
                      nameKey="name"
                      strokeWidth={0}
                    />
                  </PieChart>
                  <div className="absolute inset-0 flex items-center justify-center">
                    <span className="text-lg font-bold tabular-nums">
                      {numberFormatter.format(stats.totalSessions)}
                    </span>
                  </div>
                </ChartContainer>
                <div className="flex-1 space-y-2">
                  {channelData.map((item, index) => (
                    <div
                      key={index}
                      className="flex items-center justify-between gap-2 text-sm"
                    >
                      <div className="flex min-w-0 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>
                      <span className="font-medium tabular-nums">
                        {formatPercent(item.value)}
                      </span>
                    </div>
                  ))}
                </div>
              </div>
            </CardContent>
          </Card>

          <Card className="text-start md:col-span-2">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-base">پرطرفدارترین صفحات</CardTitle>
              <Button variant="ghost" size="sm" className="text-xs">
                مشاهده همه
                <ChevronLeft className="ms-1 size-3" aria-hidden="true" />
              </Button>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {topPages.map((page, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between gap-2"
                  >
                    <div className="flex min-w-0 items-center gap-3">
                      <span className="w-5 shrink-0 text-center text-sm text-muted-foreground tabular-nums">
                        {numberFormatter.format(index + 1)}
                      </span>
                      <span className="truncate text-sm font-medium">
                        {page.path}
                      </span>
                    </div>
                    <div className="flex shrink-0 items-center gap-3">
                      <span className="text-sm text-muted-foreground tabular-nums">
                        {numberFormatter.format(page.views)}
                      </span>
                      <span
                        className={cn(
                          "text-xs tabular-nums",
                          page.change >= 0 ? "text-green-600" : "text-red-600",
                        )}
                      >
                        {percentChangeFormatter.format(page.change)}٪
                      </span>
                    </div>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>

          <Card className="text-start md:col-span-2">
            <CardHeader className="flex flex-row items-center justify-between pb-2">
              <CardTitle className="text-base">فعال‌ترین کاربران</CardTitle>
              <Button variant="ghost" size="sm" className="text-xs">
                مشاهده همه
                <ChevronLeft className="ms-1 size-3" aria-hidden="true" />
              </Button>
            </CardHeader>
            <CardContent>
              <div className="space-y-3">
                {topUsers.map((user, index) => (
                  <div
                    key={index}
                    className="flex items-center justify-between gap-2"
                  >
                    <div className="flex min-w-0 items-center gap-3">
                      <Avatar className="size-8 shrink-0">
                        <AvatarImage src={user.avatar} alt={user.name} />
                        <AvatarFallback>
                          {user.name
                            .split(" ")
                            .map((n) => n[0])
                            .join("")}
                        </AvatarFallback>
                      </Avatar>
                      <div className="min-w-0">
                        <p className="truncate text-sm font-medium">
                          {user.name}
                        </p>
                        <p className="truncate text-xs text-muted-foreground">
                          {user.email}
                        </p>
                      </div>
                    </div>
                    <Badge variant="secondary" className="shrink-0 tabular-nums">
                      {numberFormatter.format(user.sessions)} جلسه
                    </Badge>
                  </div>
                ))}
              </div>
            </CardContent>
          </Card>
        </div>
      </div>
    </section>
  );
};

export { ChartGroup14 };