"use client";

import * as React from "react";
import { useState, useEffect } from "react";
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";

import { useIsMobile } from "@/hooks/use-mobile";
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  ChartConfig,
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
} from "@/components/ui/chart";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
import useAxios from "@/hooks/useAxios";
import toast from "react-hot-toast";

interface Payment {
  _id: string;
  price: number;
  course_name: string;
  course_id: any;
  academy_id: string;
  status: string; // "success" = پرداخت نشده, "settled" = پرداخت شده
  createdAt: string;
  updatedAt: string;
  payment_authority: string;
  payment_ref_id: string;
  discountAmount: number;
  taxAmount: number;
  taxRate: number;
  user_id: any;
}

interface ChartDataItem {
  date: string;
  amount: number;
  count: number;
  formattedDate: string;
  persianDate: string;
  jalaliDate: string;
}

const chartConfig = {
  amount: {
    label: "مبلغ فروش",
    color: "#ff107d",
  },
  count: {
    label: "تعداد فروش",
    color: "#10b981",
  },
} satisfies ChartConfig;

// تبدیل تاریخ میلادی به شمسی
const toJalaliDate = (date: Date): string => {
  return new Intl.DateTimeFormat("fa-IR", {
    year: "numeric",
    month: "numeric",
    day: "numeric",
  }).format(date);
};

// نمایش ساده برای محور X
const getJalaliDayMonth = (date: Date): string => {
  return new Intl.DateTimeFormat("fa-IR", {
    month: "numeric",
    day: "numeric",
  }).format(date);
};

// تابع برای تولید تمام روزهای بازه زمانی
const generateDateRange = (startDate: Date, endDate: Date): string[] => {
  const dates: string[] = [];
  const currentDate = new Date(startDate);

  while (currentDate <= endDate) {
    dates.push(currentDate.toISOString().split("T")[0]);
    currentDate.setDate(currentDate.getDate() + 1);
  }

  return dates;
};

export function ChartAreaInteractive() {
  const isMobile = useIsMobile();
  const [timeRange, setTimeRange] = useState("90d");
  const [isLoading, setIsLoading] = useState(false);
  const [chartData, setChartData] = useState<ChartDataItem[]>([]);
  const [totalSales, setTotalSales] = useState(0); // مجموع فروش‌های موفق (تسویه نشده)
  const [totalCount, setTotalCount] = useState(0);
  const [averageAmount, setAverageAmount] = useState(0);
  const [settledAmount, setSettledAmount] = useState(0); // مبلغ تسویه شده (پرداخت شده)

  const { request } = useAxios();

  useEffect(() => {
    if (isMobile) {
      setTimeRange("30d");
    }
  }, [isMobile]);

  // محاسبه تاریخ شروع بر اساس بازه زمانی
  const getStartDate = (range: string, endDate: Date): Date => {
    const start = new Date(endDate);
    switch (range) {
      case "7d":
        start.setDate(start.getDate() - 6);
        break;
      case "30d":
        start.setDate(start.getDate() - 29);
        break;
      case "90d":
        start.setDate(start.getDate() - 89);
        break;
      default:
        start.setDate(start.getDate() - 89);
    }
    start.setHours(0, 0, 0, 0);
    return start;
  };

  // پردازش داده‌ها و تکمیل روزهای بدون فروش
  const processPaymentsData = (payments: Payment[], range: string) => {
    const now = new Date();
    now.setHours(23, 59, 59, 999);
    const startDate = getStartDate(range, now);

    // گروه‌بندی پرداخت‌های موجود بر اساس تاریخ
    const groupedByDate: { [key: string]: { amount: number; count: number } } =
      {};
    let settledTotal = 0; // مجموع مبالغ تسویه شده (پرداخت شده)

    payments.forEach((payment) => {
      const date = new Date(payment.createdAt);
      const dateKey = date.toISOString().split("T")[0];

      // مبلغ: price یا taxAmount
      const amount = payment.taxAmount || 0;

      // محاسبه مبالغ تسویه شده (status = settled)
      if (payment.status === "settled") {
        settledTotal += amount;
      }

      // فقط پرداخت‌های داخل بازه زمانی را برای چارت در نظر بگیر
      // برای چارت، فقط فروش‌های موفق (success) را نشان می‌دهیم
      if (payment.status === "success" && date >= startDate && date <= now) {
        if (!groupedByDate[dateKey]) {
          groupedByDate[dateKey] = { amount: 0, count: 0 };
        }
        groupedByDate[dateKey].amount += amount;
        groupedByDate[dateKey].count += 1;
      }
      if (payment.status === "settled" && date >= startDate && date <= now) {
        if (!groupedByDate[dateKey]) {
          groupedByDate[dateKey] = { amount: 0, count: 0 };
        }
        groupedByDate[dateKey].amount += amount;
        groupedByDate[dateKey].count += 1;
      }
    });

    setSettledAmount(settledTotal);

    // تولید تمام روزهای بازه زمانی
    const allDates = generateDateRange(startDate, now);

    // ساخت آرایه نهایی با تمام روزها (روزهای بدون فروش مقدار صفر دارند)
    const result: ChartDataItem[] = allDates.map((date) => {
      const existing = groupedByDate[date];
      const currentDate = new Date(date);

      return {
        date: date,
        amount: existing?.amount || 0,
        count: existing?.count || 0,
        formattedDate: currentDate.toLocaleDateString("fa-IR", {
          month: "numeric",
          day: "numeric",
        }),
        persianDate: toJalaliDate(currentDate),
        jalaliDate: getJalaliDayMonth(currentDate),
      };
    });

    // محاسبه مجموع کل فروش در بازه زمانی (فقط success ها)
    const total = result.reduce((sum, item) => sum + item.amount, 0);
    const count = result.reduce((sum, item) => sum + item.count, 0);
    const avg = count > 0 ? Math.round(total / count) : 0;

    setTotalSales(total);
    setTotalCount(count);
    setAverageAmount(avg);

    return result;
  };

  const fetchCoursesPayment = async () => {
    setIsLoading(true);
    try {
      // دریافت تمام پرداخت‌ها (هم success و هم settled)
      const response = await request(
        "GET",
        `/academy/course/getAllAcademyPayments`
      );

      console.log("تمامی پرداخت‌ها:", response?.data?.payments);

      if (response?.data?.payments && Array.isArray(response.data.payments)) {
        const processedData = processPaymentsData(
          response.data.payments,
          timeRange
        );
        setChartData(processedData);
      } else {
        // اگر داده‌ای نبود، یک بازه خالی با تمام روزها و مقدار صفر ایجاد کن
        const now = new Date();
        const startDate = getStartDate(timeRange, now);
        const allDates = generateDateRange(startDate, now);
        const emptyData: ChartDataItem[] = allDates.map((date) => ({
          date: date,
          amount: 0,
          count: 0,
          formattedDate: new Date(date).toLocaleDateString("fa-IR", {
            month: "numeric",
            day: "numeric",
          }),
          persianDate: toJalaliDate(new Date(date)),
          jalaliDate: getJalaliDayMonth(new Date(date)),
        }));
        setChartData(emptyData);
        setTotalSales(0);
        setTotalCount(0);
        setAverageAmount(0);
        setSettledAmount(0);
      }
    } catch (err) {
      console.log("get error:", err);
      toast.error("خطا در دریافت اطلاعات");
      setChartData([]);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchCoursesPayment();
  }, []);

  useEffect(() => {
    if (chartData.length > 0) {
      fetchCoursesPayment();
    }
  }, [timeRange]);

  if (isLoading) {
    return (
      <Card className="@container/card">
        <CardHeader>
          <CardTitle>مقدار فروش</CardTitle>
          <CardDescription>در حال بارگذاری داده‌ها...</CardDescription>
        </CardHeader>
        <CardContent className="flex justify-center items-center h-[250px]">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-pink-500"></div>
        </CardContent>
      </Card>
    );
  }

  // فرمتر محور X با تاریخ شمسی
  const formatXAxis = (value: string) => {
    const date = new Date(value);
    return getJalaliDayMonth(date);
  };

  return (
    <Card className="@container/card">
      <CardHeader>
        <div className="flex justify-between items-start flex-wrap gap-4">
          <div>
            <CardTitle className="text-xl font-bold">
              آمار فروش آکادمی
            </CardTitle>
          </div>
          <CardAction>
            <ToggleGroup
              type="single"
              value={timeRange}
              onValueChange={setTimeRange}
              variant="outline"
              className="hidden *:data-[slot=toggle-group-item]:!px-4 @[767px]/card:flex"
            >
              <ToggleGroupItem value="90d">۹۰ روز</ToggleGroupItem>
              <ToggleGroupItem value="30d">۳۰ روز</ToggleGroupItem>
              <ToggleGroupItem value="7d">۷ روز</ToggleGroupItem>
            </ToggleGroup>
            <Select value={timeRange} onValueChange={setTimeRange}>
              <SelectTrigger
                className="flex w-40 **:data-[slot=select-value]:block **:data-[slot=select-value]:truncate @[767px]/card:hidden"
                size="sm"
                aria-label="Select a value"
              >
                <SelectValue placeholder="انتخاب بازه زمانی" />
              </SelectTrigger>
              <SelectContent className="rounded-xl">
                <SelectItem value="90d" className="rounded-lg">
                  ۹۰ روز
                </SelectItem>
                <SelectItem value="30d" className="rounded-lg">
                  ۳۰ روز
                </SelectItem>
                <SelectItem value="7d" className="rounded-lg">
                  ۷ روز
                </SelectItem>
              </SelectContent>
            </Select>
          </CardAction>
        </div>
      </CardHeader>
      <CardContent className="px-2 pt-4 sm:px-6 sm:pt-6">
        {chartData.length === 0 ? (
          <div className="flex justify-center items-center h-[250px] text-muted-foreground">
            <div className="text-center">
              <svg
                className="w-16 h-16 mx-auto mb-4 text-gray-400"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={1.5}
                  d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
                />
              </svg>
              <p>هیچ داده‌ای برای نمایش وجود ندارد</p>
              <p className="text-sm mt-2">هنوز فروشی ثبت نشده است</p>
            </div>
          </div>
        ) : (
          <ChartContainer
            config={chartConfig}
            className="aspect-auto h-[250px] w-full"
          >
            <AreaChart data={chartData}>
              <defs>
                <linearGradient id="fillAmount" x1="0" y1="0" x2="0" y2="1">
                  <stop
                    offset="5%"
                    stopColor="var(--color-amount)"
                    stopOpacity={1.0}
                  />
                  <stop
                    offset="95%"
                    stopColor="var(--color-amount)"
                    stopOpacity={0.1}
                  />
                </linearGradient>
                <linearGradient id="fillCount" x1="0" y1="0" x2="0" y2="1">
                  <stop
                    offset="5%"
                    stopColor="var(--color-count)"
                    stopOpacity={0.8}
                  />
                  <stop
                    offset="95%"
                    stopColor="var(--color-count)"
                    stopOpacity={0.1}
                  />
                </linearGradient>
              </defs>
              <CartesianGrid vertical={false} />
              <XAxis
                dataKey="date"
                tickLine={false}
                axisLine={false}
                tickMargin={8}
                minTickGap={timeRange === "7d" ? 40 : 60}
                tickFormatter={formatXAxis}
                interval={
                  timeRange === "7d" ? 0 : Math.floor(chartData.length / 10)
                }
              />
              <ChartTooltip
                cursor={false}
                content={
                  <ChartTooltipContent
                    labelFormatter={(value) => {
                      const date = new Date(value);
                      return toJalaliDate(date);
                    }}
                    formatter={(value, name) => {
                      if (name === "amount") {
                        return [
                          `${Number(value).toLocaleString("fa-IR")}`,
                          "مبلغ فروش",
                        ];
                      }
                      if (name === "count") {
                        return [`${value}`, "تعداد فروش"];
                      }
                      return [value, name];
                    }}
                    indicator="dot"
                  />
                }
              />
              <Area
                dataKey="count"
                type="monotone"
                fill="url(#fillCount)"
                stroke="var(--color-count)"
                strokeWidth={2}
                name="count"
                isAnimationActive={false}
              />
              <Area
                dataKey="amount"
                type="monotone"
                fill="url(#fillAmount)"
                stroke="var(--color-amount)"
                strokeWidth={2}
                name="amount"
                isAnimationActive={false}
              />
            </AreaChart>
          </ChartContainer>
        )}
      </CardContent>
    </Card>
  );
}
