"use client"

import * as React from "react"
import {
  ResponsiveContainer,
  Tooltip,
  Legend,
} from "recharts"
import type { LegendPayload, LegendProps, TooltipContentProps } from "recharts"

import { cn } from "../../lib/utils"

// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const

export type ChartConfig = {
  [k in string]: {
    label?: React.ReactNode
    icon?: React.ComponentType
  } & (
    | { color?: string; theme?: never }
    | { color?: never; theme: Record<keyof typeof THEMES, string> }
  )
}

type ChartContextProps = {
  config: ChartConfig
}

const ChartContext = React.createContext<ChartContextProps | null>(null)

function useChart() {
  const context = React.useContext(ChartContext)

  if (!context) {
    throw new Error("useChart must be used within a <ChartContainer />")
  }

  return context
}

/**
 * `ResponsiveContainer.debounce` (ms) used by every `ChartContainer`. The
 * sidebar uses `transition-[width] duration-200 ease-out` and dashboards
 * mount many `ChartContainer`s side-by-side — without a debounce, every
 * frame of that 200ms width tween triggers a full Recharts SVG re-render
 * per chart, saturating the main thread and making the rail feel laggy.
 *
 * 120ms is long enough that no measure fires during a 200ms transition
 * (the chart re-renders once, ~120ms after the rail settles) but short
 * enough that real window resizes still feel responsive.
 *
 * Consumers can override per-chart via the `debounce` prop on `ChartContainer`.
 */
const CHART_RESIZE_DEBOUNCE_MS = 120

function ChartContainer({
  id,
  className,
  children,
  config,
  debounce = CHART_RESIZE_DEBOUNCE_MS,
  ...props
}: React.ComponentProps<"div"> & {
  config: ChartConfig
  children: React.ComponentProps<
    typeof ResponsiveContainer
  >["children"]
  /** Forwarded to Recharts `ResponsiveContainer.debounce` (ms). */
  debounce?: number
}) {
  const uniqueId = React.useId()
  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`
  const chartContextValue = React.useMemo(() => ({ config }), [config])

  return (
    <ChartContext.Provider value={chartContextValue}>
      <div
        data-slot="chart"
        data-chart={chartId}
        className={cn(
          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_line]:stroke-border/50 [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_line]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
          className
        )}
        {...props}
      >
        <ChartStyle id={chartId} config={config} />
        <ResponsiveContainer debounce={debounce}>
          {children}
        </ResponsiveContainer>
      </div>
    </ChartContext.Provider>
  )
}

/**
 * Conservative validators for the two values interpolated into a `<style>`
 * block via `dangerouslySetInnerHTML`.
 *
 * `ChartConfig.color` is typed as a free `string` and may be authored by
 * downstream consumers of `@exxatdesignux/ui` who could pass user-controlled
 * data. To prevent CSS injection (escaping the property value, closing the
 * block, or injecting `</style>`) we accept only a documented allowlist of
 * CSS color syntaxes and reject anything that contains rule-terminating or
 * markup-sensitive characters.
 *
 * Keys come from `ChartConfig` and become CSS custom-property names, so they
 * are restricted to a safe identifier alphabet.
 */
const CSS_KEY_PATTERN = /^[A-Za-z0-9_-]+$/

const SAFE_COLOR_PATTERN = new RegExp(
  [
    /^#[0-9a-fA-F]{3,8}$/,                              // #rgb / #rrggbb / #rrggbbaa
    /^rgba?\([^;{}<>"'\\]*\)$/,                         // rgb()/rgba()
    /^hsla?\([^;{}<>"'\\]*\)$/,                         // hsl()/hsla()
    /^hwb\([^;{}<>"'\\]*\)$/,                           // hwb()
    /^lab\([^;{}<>"'\\]*\)$/,                           // lab()
    /^lch\([^;{}<>"'\\]*\)$/,                           // lch()
    /^oklab\([^;{}<>"'\\]*\)$/,                         // oklab()
    /^oklch\([^;{}<>"'\\]*\)$/,                         // oklch()
    /^color\([^;{}<>"'\\]*\)$/,                         // color()
    /^color-mix\([^;{}<>"'\\]*\)$/,                     // color-mix()
    /^var\(--[A-Za-z0-9_-]+(?:\s*,[^;{}<>"'\\]+)?\)$/,  // var(--token[, fallback])
    /^[a-zA-Z]+$/,                                      // named colors + currentColor/transparent
  ]
    .map((re) => re.source)
    .join("|"),
)

function sanitizeChartColor(color: string): string | null {
  const trimmed = color.trim()
  if (!trimmed) return null
  // Defence-in-depth: any of these characters could break out of the value
  // and turn the inline `<style>` block into an injection sink.
  if (/[;{}<>"'\\]/.test(trimmed)) return null
  return SAFE_COLOR_PATTERN.test(trimmed) ? trimmed : null
}

const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
  const colorConfig = Object.entries(config).filter(
    ([, config]) => config.theme || config.color
  )

  if (!colorConfig.length) {
    return null
  }

  // `id` is generated from `React.useId()` in `ChartContainer`, but consumers
  // can override it via the `id` prop, so we still verify the shape before
  // interpolating it into a CSS selector.
  if (!CSS_KEY_PATTERN.test(id)) {
    return null
  }

  return (
    <style
      dangerouslySetInnerHTML={{
        __html: Object.entries(THEMES)
          .flatMap(([theme, prefix]) => {
            const lines = colorConfig.flatMap(([key, itemConfig]) => {
              if (!CSS_KEY_PATTERN.test(key)) return []
              const rawColor =
                itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
                itemConfig.color
              if (!rawColor) return []
              const safeColor = sanitizeChartColor(rawColor)
              return safeColor ? [`  --color-${key}: ${safeColor};`] : []
            })
            if (!lines.length) return []
            return [`\n${prefix} [data-chart=${id}] {\n${lines.join("\n")}\n}\n`]
          })
          .join("\n"),
      }}
    />
  )
}

const ChartTooltip = Tooltip

/**
 * Returns props for `<ChartTooltip />` keyboard parity.
 *
 * Usage — pass `key` explicitly (React requires it outside the spread):
 * ```tsx
 * const sync = chartTooltipKeyboardSyncProps(activeIndex)
 * <ChartTooltip key={sync.key} {...sync.props} />
 * ```
 */
function chartTooltipKeyboardSyncProps(keyboardActiveIndex: number | null): {
  key: string
  props: { defaultIndex?: number }
} {
  const hasKbd =
    typeof keyboardActiveIndex === "number" && keyboardActiveIndex >= 0
  return {
    key: hasKbd ? `kbd-${keyboardActiveIndex}` : "kbd-off",
    props: hasKbd ? { defaultIndex: keyboardActiveIndex } : {},
  }
}

type ChartTooltipContentProps = React.ComponentProps<"div"> & {
  active?: boolean
  payload?: TooltipContentProps["payload"]
  label?: TooltipContentProps["label"]
  labelFormatter?: TooltipContentProps["labelFormatter"]
  labelClassName?: string
  formatter?: TooltipContentProps["formatter"]
  color?: string
  hideLabel?: boolean
  hideIndicator?: boolean
  indicator?: "line" | "dot" | "dashed"
  nameKey?: string
  labelKey?: string
}

function ChartTooltipLabel({
  hideLabel,
  payload,
  label,
  labelFormatter,
  labelClassName,
  labelKey,
  config,
}: Pick<
  ChartTooltipContentProps,
  "hideLabel" | "payload" | "label" | "labelFormatter" | "labelClassName" | "labelKey"
> & { config: ChartConfig }) {
  if (hideLabel || !payload?.length) {
    return null
  }

  const [item] = payload
  const key = `${labelKey || item?.dataKey || item?.name || "value"}`
  const itemConfig = getPayloadConfigFromPayload(config, item, key)
  const value =
    !labelKey && typeof label === "string"
      ? config[label as keyof typeof config]?.label || label
      : itemConfig?.label

  if (labelFormatter) {
    return (
      <div className={cn("font-medium", labelClassName)}>
        {labelFormatter(value, payload)}
      </div>
    )
  }

  if (!value) {
    return null
  }

  return <div className={cn("font-medium", labelClassName)}>{value}</div>
}

function ChartTooltipContent({
  active,
  payload,
  className,
  indicator = "dot",
  hideLabel = false,
  hideIndicator = false,
  label,
  labelFormatter,
  labelClassName,
  formatter,
  color,
  nameKey,
  labelKey,
}: ChartTooltipContentProps) {
  const { config } = useChart()

  const visiblePayload = React.useMemo(
    () => payload?.filter((item) => item.type !== "none") ?? [],
    [payload],
  )

  if (!active || !visiblePayload.length) {
    return null
  }

  const nestLabel = visiblePayload.length === 1 && indicator !== "dot"

  return (
    <div
      className={cn(
        "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
        className
      )}
    >
      {!nestLabel ? (
        <ChartTooltipLabel
          hideLabel={hideLabel}
          payload={payload}
          label={label}
          labelFormatter={labelFormatter}
          labelClassName={labelClassName}
          labelKey={labelKey}
          config={config}
        />
      ) : null}
      <div className="grid gap-1.5">
        {visiblePayload.map((item, index) => {
            const key = `${nameKey || item.name || item.dataKey || "value"}`
            const itemConfig = getPayloadConfigFromPayload(config, item, key)
            const indicatorColor = color || item.payload.fill || item.color

            return (
              <div
                key={`${item.dataKey ?? item.name ?? index}`}
                className={cn(
                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
                  indicator === "dot" && "items-center"
                )}
              >
                {formatter && item?.value !== undefined && item.name ? (
                  formatter(item.value, item.name, item, index, item.payload)
                ) : (
                  <>
                    {itemConfig?.icon ? (
                      <itemConfig.icon />
                    ) : (
                      !hideIndicator && (
                        <div
                          className={cn(
                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                            {
                              "size-2.5": indicator === "dot",
                              "w-1": indicator === "line",
                              "w-0 border-[1.5px] border-dashed bg-transparent":
                                indicator === "dashed",
                              "my-0.5": nestLabel && indicator === "dashed",
                            }
                          )}
                          style={
                            {
                              "--color-bg": indicatorColor,
                              "--color-border": indicatorColor,
                            } as React.CSSProperties
                          }
                        />
                      )
                    )}
                    <div
                      className={cn(
                        "flex flex-1 justify-between leading-none",
                        nestLabel ? "items-end" : "items-center"
                      )}
                    >
                      <div className="grid gap-1.5">
                        {nestLabel ? (
                          <ChartTooltipLabel
                            hideLabel={hideLabel}
                            payload={payload}
                            label={label}
                            labelFormatter={labelFormatter}
                            labelClassName={labelClassName}
                            labelKey={labelKey}
                            config={config}
                          />
                        ) : null}
                        <span className="text-muted-foreground">
                          {itemConfig?.label || item.name}
                        </span>
                      </div>
                      {item.value && (
                        <span className="font-mono font-medium text-foreground tabular-nums">
                          {item.value.toLocaleString()}
                        </span>
                      )}
                    </div>
                  </>
                )}
              </div>
            )
          })}
      </div>
    </div>
  )
}

const ChartLegend = Legend

type ChartLegendContentProps = React.ComponentProps<"div"> & {
  payload?: ReadonlyArray<LegendPayload>
  verticalAlign?: LegendProps["verticalAlign"]
  hideIcon?: boolean
  nameKey?: string
}

function ChartLegendContent({
  className,
  hideIcon = false,
  payload,
  verticalAlign = "bottom",
  nameKey,
}: ChartLegendContentProps) {
  const { config } = useChart()

  const visiblePayload = React.useMemo(
    () => payload?.filter((item) => item.type !== "none") ?? [],
    [payload],
  )

  if (!visiblePayload.length) {
    return null
  }

  return (
    <div
      className={cn(
        "flex items-center justify-center gap-4",
        verticalAlign === "top" ? "pb-3" : "pt-3",
        className
      )}
    >
      {visiblePayload.map((item) => {
          const key = `${nameKey || item.dataKey || "value"}`
          const itemConfig = getPayloadConfigFromPayload(config, item, key)

          return (
            <div
              key={item.value}
              className={cn(
                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
              )}
            >
              {itemConfig?.icon && !hideIcon ? (
                <itemConfig.icon />
              ) : (
                <div
                  className="size-2 shrink-0 rounded-[2px]"
                  style={{
                    backgroundColor: item.color,
                  }}
                />
              )}
              {itemConfig?.label}
            </div>
          )
        })}
    </div>
  )
}

function getPayloadConfigFromPayload(
  config: ChartConfig,
  payload: unknown,
  key: string
) {
  if (typeof payload !== "object" || payload === null) {
    return undefined
  }

  const payloadPayload =
    "payload" in payload &&
    typeof payload.payload === "object" &&
    payload.payload !== null
      ? payload.payload
      : undefined

  let configLabelKey: string = key

  if (
    key in payload &&
    typeof payload[key as keyof typeof payload] === "string"
  ) {
    configLabelKey = payload[key as keyof typeof payload] as string
  } else if (
    payloadPayload &&
    key in payloadPayload &&
    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
  ) {
    configLabelKey = payloadPayload[
      key as keyof typeof payloadPayload
    ] as string
  }

  return configLabelKey in config
    ? config[configLabelKey]
    : config[key as keyof typeof config]
}

export {
  ChartContainer,
  ChartTooltip,
  chartTooltipKeyboardSyncProps,
  ChartTooltipContent,
  ChartLegend,
  ChartLegendContent,
  ChartStyle,
}