import { LinearGradient, matchFont, vec } from "@shopify/react-native-skia";
import { useState } from "react";
import { Platform, View } from "react-native";
import { useCSSVariable } from "uniwind";
import { CartesianChart, StackedArea } from "victory-native";

import { useTranslation } from "@turbostarter/i18n";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@turbostarter/ui-mobile/card";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@turbostarter/ui-mobile/select";
import { Text } from "@turbostarter/ui-mobile/text";

const chartData = [
  { date: "2024-04-01", desktop: 222, mobile: 150 },
  { date: "2024-04-02", desktop: 97, mobile: 180 },
  { date: "2024-04-03", desktop: 167, mobile: 120 },
  { date: "2024-04-04", desktop: 242, mobile: 260 },
  { date: "2024-04-05", desktop: 373, mobile: 290 },
  { date: "2024-04-06", desktop: 301, mobile: 340 },
  { date: "2024-04-07", desktop: 245, mobile: 180 },
  { date: "2024-04-08", desktop: 409, mobile: 320 },
  { date: "2024-04-09", desktop: 59, mobile: 110 },
  { date: "2024-04-10", desktop: 261, mobile: 190 },
  { date: "2024-04-11", desktop: 327, mobile: 350 },
  { date: "2024-04-12", desktop: 292, mobile: 210 },
  { date: "2024-04-13", desktop: 342, mobile: 380 },
  { date: "2024-04-14", desktop: 137, mobile: 220 },
  { date: "2024-04-15", desktop: 120, mobile: 170 },
  { date: "2024-04-16", desktop: 138, mobile: 190 },
  { date: "2024-04-17", desktop: 446, mobile: 360 },
  { date: "2024-04-18", desktop: 364, mobile: 410 },
  { date: "2024-04-19", desktop: 243, mobile: 180 },
  { date: "2024-04-20", desktop: 89, mobile: 150 },
  { date: "2024-04-21", desktop: 137, mobile: 200 },
  { date: "2024-04-22", desktop: 224, mobile: 170 },
  { date: "2024-04-23", desktop: 138, mobile: 230 },
  { date: "2024-04-24", desktop: 387, mobile: 290 },
  { date: "2024-04-25", desktop: 215, mobile: 250 },
  { date: "2024-04-26", desktop: 75, mobile: 130 },
  { date: "2024-04-27", desktop: 383, mobile: 420 },
  { date: "2024-04-28", desktop: 122, mobile: 180 },
  { date: "2024-04-29", desktop: 315, mobile: 240 },
  { date: "2024-04-30", desktop: 454, mobile: 380 },
  { date: "2024-05-01", desktop: 165, mobile: 220 },
  { date: "2024-05-02", desktop: 293, mobile: 310 },
  { date: "2024-05-03", desktop: 247, mobile: 190 },
  { date: "2024-05-04", desktop: 385, mobile: 420 },
  { date: "2024-05-05", desktop: 481, mobile: 390 },
  { date: "2024-05-06", desktop: 498, mobile: 520 },
  { date: "2024-05-07", desktop: 388, mobile: 300 },
  { date: "2024-05-08", desktop: 149, mobile: 210 },
  { date: "2024-05-09", desktop: 227, mobile: 180 },
  { date: "2024-05-10", desktop: 293, mobile: 330 },
  { date: "2024-05-11", desktop: 335, mobile: 270 },
  { date: "2024-05-12", desktop: 197, mobile: 240 },
  { date: "2024-05-13", desktop: 197, mobile: 160 },
  { date: "2024-05-14", desktop: 448, mobile: 490 },
  { date: "2024-05-15", desktop: 473, mobile: 380 },
  { date: "2024-05-16", desktop: 338, mobile: 400 },
  { date: "2024-05-17", desktop: 499, mobile: 420 },
  { date: "2024-05-18", desktop: 315, mobile: 350 },
  { date: "2024-05-19", desktop: 235, mobile: 180 },
  { date: "2024-05-20", desktop: 177, mobile: 230 },
  { date: "2024-05-21", desktop: 82, mobile: 140 },
  { date: "2024-05-22", desktop: 81, mobile: 120 },
  { date: "2024-05-23", desktop: 252, mobile: 290 },
  { date: "2024-05-24", desktop: 294, mobile: 220 },
  { date: "2024-05-25", desktop: 201, mobile: 250 },
  { date: "2024-05-26", desktop: 213, mobile: 170 },
  { date: "2024-05-27", desktop: 420, mobile: 460 },
  { date: "2024-05-28", desktop: 233, mobile: 190 },
  { date: "2024-05-29", desktop: 78, mobile: 130 },
  { date: "2024-05-30", desktop: 340, mobile: 280 },
  { date: "2024-05-31", desktop: 178, mobile: 230 },
  { date: "2024-06-01", desktop: 178, mobile: 200 },
  { date: "2024-06-02", desktop: 470, mobile: 410 },
  { date: "2024-06-03", desktop: 103, mobile: 160 },
  { date: "2024-06-04", desktop: 439, mobile: 380 },
  { date: "2024-06-05", desktop: 88, mobile: 140 },
  { date: "2024-06-06", desktop: 294, mobile: 250 },
  { date: "2024-06-07", desktop: 323, mobile: 370 },
  { date: "2024-06-08", desktop: 385, mobile: 320 },
  { date: "2024-06-09", desktop: 438, mobile: 480 },
  { date: "2024-06-10", desktop: 155, mobile: 200 },
  { date: "2024-06-11", desktop: 92, mobile: 150 },
  { date: "2024-06-12", desktop: 492, mobile: 420 },
  { date: "2024-06-13", desktop: 81, mobile: 130 },
  { date: "2024-06-14", desktop: 426, mobile: 380 },
  { date: "2024-06-15", desktop: 307, mobile: 350 },
  { date: "2024-06-16", desktop: 371, mobile: 310 },
  { date: "2024-06-17", desktop: 475, mobile: 520 },
  { date: "2024-06-18", desktop: 107, mobile: 170 },
  { date: "2024-06-19", desktop: 341, mobile: 290 },
  { date: "2024-06-20", desktop: 408, mobile: 450 },
  { date: "2024-06-21", desktop: 169, mobile: 210 },
  { date: "2024-06-22", desktop: 317, mobile: 270 },
  { date: "2024-06-23", desktop: 480, mobile: 530 },
  { date: "2024-06-24", desktop: 132, mobile: 180 },
  { date: "2024-06-25", desktop: 141, mobile: 190 },
  { date: "2024-06-26", desktop: 434, mobile: 380 },
  { date: "2024-06-27", desktop: 448, mobile: 490 },
  { date: "2024-06-28", desktop: 149, mobile: 200 },
  { date: "2024-06-29", desktop: 103, mobile: 160 },
  { date: "2024-06-30", desktop: 446, mobile: 400 },
];

export function AreaChart() {
  const { t, i18n } = useTranslation(["common", "dashboard"]);
  const mutedForeground = useCSSVariable("--muted-foreground");
  const color1 = useCSSVariable("--chart-1");
  const color4 = useCSSVariable("--chart-4");

  const [timeRange, setTimeRange] = useState("90d");

  const filteredData = chartData.filter((item) => {
    const date = new Date(item.date);
    const referenceDate = new Date("2024-06-30");
    let daysToSubtract = 90;
    if (timeRange === "30d") {
      daysToSubtract = 30;
    } else if (timeRange === "7d") {
      daysToSubtract = 7;
    }
    const startDate = new Date(referenceDate);
    startDate.setDate(startDate.getDate() - daysToSubtract);
    return date >= startDate;
  });

  const chartConfig = {
    mobile: {
      label: t("mobile"),
      color: color4,
    },
    desktop: {
      label: t("desktop"),
      color: color1,
    },
  } as const;

  const options = [
    {
      value: "90d",
      label: t("common:lastMonths", { count: 3 }),
    },
    {
      value: "30d",
      label: t("common:lastMonths", { count: 1 }),
    },
    {
      value: "7d",
      label: t("common:lastDays", { count: 7 }),
    },
  ] as const;

  return (
    <Card className="w-full">
      <CardHeader className="items-center gap-4">
        <View className="items-center">
          <CardTitle className="text-lg leading-tight">
            {t("chart.area")}
          </CardTitle>
          <CardDescription>{t("chart.showing")}</CardDescription>
        </View>

        <Select
          value={{
            value: timeRange,
            label:
              options.find((option) => option.value === timeRange)?.label ?? "",
          }}
          onValueChange={(option) => setTimeRange(option?.value ?? "90d")}
        >
          <SelectTrigger className="w-[160px] rounded-lg sm:ml-auto">
            <SelectValue
              placeholder={
                options.find((option) => option.value === timeRange)?.label ??
                ""
              }
              className="text-foreground"
            />
          </SelectTrigger>
          <SelectContent className="rounded-xl" align="start" sideOffset={4}>
            {options.map((option) => (
              <SelectItem
                key={option.value}
                value={option.value}
                label={option.label}
                className="rounded-lg"
              >
                <Text> {option.label}</Text>
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </CardHeader>

      <CardContent className="h-[250px] px-4">
        <CartesianChart
          data={filteredData}
          xKey="date"
          yKeys={["desktop", "mobile"]}
          padding={{ bottom: 12 }}
          domainPadding={{ top: 200 }}
          xAxis={{
            font: matchFont({
              fontFamily: Platform.select({
                android: "helvetica",
                ios: "Helvetica Neue",
              }),
              fontSize: 12,
            }),
            labelOffset: 4,
            lineWidth: 0,
            formatXLabel: (value) => {
              const date = new Date(value);
              return date.toLocaleDateString(i18n.language, {
                month: "short",
                day: "numeric",
              });
            },
            labelColor: mutedForeground?.toString(),
          }}
        >
          {({ points, chartBounds }) => (
            <>
              <StackedArea
                points={[points.desktop, points.mobile]}
                y0={chartBounds.bottom}
                curveType="basis"
                animate={{ type: "timing" }}
                areaOptions={({ rowIndex, lowestY, highestY }) => {
                  const color =
                    Object.values(chartConfig)[rowIndex]?.color ?? color1;

                  switch (rowIndex) {
                    case 0:
                      return {
                        children: (
                          <LinearGradient
                            start={vec(0, highestY - 50)}
                            end={vec(0, lowestY)}
                            colors={[
                              color?.toString() ?? "",
                              `${color?.toString() ?? ""}4d`,
                            ]}
                          />
                        ),
                      };
                    case 1:
                      return {
                        children: (
                          <LinearGradient
                            start={vec(0, highestY - 100)}
                            end={vec(0, lowestY)}
                            colors={[
                              color?.toString() ?? "",
                              `${color?.toString() ?? ""}4d`,
                            ]}
                          />
                        ),
                      };
                    default:
                      return {};
                  }
                }}
              />
            </>
          )}
        </CartesianChart>
      </CardContent>

      <CardFooter className="mx-auto -mt-2 flex-row items-center gap-4">
        {Object.values(chartConfig).map((config) => (
          <View key={config.color} className="flex-row items-center gap-2">
            <View
              className="size-3 rounded-sm"
              style={{ backgroundColor: config.color?.toString() }}
            />
            <Text className="text-sm">{config.label}</Text>
          </View>
        ))}
      </CardFooter>
    </Card>
  );
}
