"use client";

import {
  type ChartConfig,
  ChartContainer,
  ChartLegend,
  ChartLegendContent,
  ChartTooltip,
  ChartTooltipContent,
} from "@openstatus/ui/components/ui/chart";
import { useQuery } from "@tanstack/react-query";
import { endOfDay } from "date-fns";
import {
  Area,
  AreaChart,
  CartesianGrid,
  Label,
  ReferenceLine,
  XAxis,
  YAxis,
} from "recharts";

import {
  type PERCENTILES,
  type PERIODS,
  mapLatency,
} from "@/data/metrics.client";
import { periodToFromDate } from "@/data/metrics.client";
import { useTRPC } from "@/lib/trpc/client";

import { ChartTooltipNumber } from "./chart-tooltip-number";

const chartConfig = {
  latency: {
    label: "Latency",
    color: "var(--success)",
  },
} satisfies ChartConfig;

// TODO: create new pipes for timing phase metrics

export function ChartAreaLatency({
  monitorId,
  degradedAfter,
  period,
  type,
  percentile,
  regions,
}: {
  monitorId: string;
  degradedAfter: number | null;
  percentile: (typeof PERCENTILES)[number];
  period: (typeof PERIODS)[number];
  type: "http" | "tcp";
  regions: string[] | undefined;
}) {
  const trpc = useTRPC();
  const fromDate = periodToFromDate[period];
  const toDate = endOfDay(new Date());

  const { data: latency } = useQuery(
    trpc.tinybird.metricsLatency.queryOptions({
      monitorId,
      period,
      type,
      regions,
      fromDate: fromDate.toISOString(),
      toDate: toDate.toISOString(),
    }),
  );

  const refinedLatency = latency ? mapLatency(latency, percentile) : [];

  return (
    <ChartContainer config={chartConfig} className="h-[250px] w-full">
      <AreaChart accessibilityLayer data={refinedLatency}>
        <CartesianGrid vertical={false} />
        <XAxis
          dataKey="timestamp"
          tickLine={false}
          axisLine={false}
          tickMargin={8}
          //   tickFormatter={(value) => value.slice(0, 3)}
        />
        <ChartTooltip
          cursor={false}
          content={
            <ChartTooltipContent
              indicator="dot"
              formatter={(value, name) => (
                <ChartTooltipNumber
                  chartConfig={chartConfig}
                  value={value}
                  name={name}
                />
              )}
            />
          }
        />
        <Area
          dataKey="latency"
          type="monotone"
          fill="var(--color-latency)"
          fillOpacity={0.4}
          stroke="var(--color-latency)"
          stackId="a"
        />
        {degradedAfter ? (
          <ReferenceLine
            y={degradedAfter}
            stroke="var(--warning)"
            strokeDasharray="3 3"
          >
            <Label
              value="Degraded"
              position="insideBottomRight"
              fill="var(--warning)"
            />
          </ReferenceLine>
        ) : null}
        <YAxis
          domain={["dataMin", "dataMax"]}
          tickLine={false}
          axisLine={false}
          tickMargin={8}
          orientation="right"
          tickFormatter={(value) => `${value}ms`}
        />
        <ChartLegend content={<ChartLegendContent />} />
      </AreaChart>
    </ChartContainer>
  );
}