"use client";

import { useId, useLayoutEffect, useMemo, useRef, useState } from "react";
import { motion, useReducedMotion } from "framer-motion";
import { cn } from "../lib/utils";

/**
 * Charts for apps: line, area, bar, sparkline, and donut charts drawn
 * as SVG. Strict input (one category key, ≤ 6 numeric series), host-owned
 * styling, animated entry, a hover readout, and an accessible data table
 * for screen readers.
 */

type Tone = "primary" | "positive" | "warning" | "danger" | "muted" | "accent";

export interface ChartProps {
  kind: "line" | "area" | "bar" | "sparkline" | "donut";
  data: Array<Record<string, number | string | null>>;
  xKey: string;
  series: Array<{ key: string; label?: string | undefined; tone?: Tone | undefined }>;
  title?: string | undefined;
  height?: number | undefined;
  valueFormat?: "number" | "percent" | "currency" | "compact" | undefined;
  currency?: string | undefined;
  stacked?: boolean | undefined;
  compact?: boolean | undefined;
}

// Host theme tokens, so charts follow the workspace's palette and dark mode.
const TONE_COLORS: Record<Tone, string> = {
  primary: "var(--action)",
  positive: "var(--status-positive)",
  warning: "var(--status-attention)",
  danger: "var(--status-risk)",
  muted: "var(--muted-foreground)",
  accent: "var(--chart-4)",
};
const DEFAULT_ORDER: Tone[] = ["primary", "accent", "positive", "warning", "danger", "muted"];

function formatter(format: ChartProps["valueFormat"], currency?: string) {
  switch (format) {
    case "percent":
      return new Intl.NumberFormat(undefined, { style: "percent", maximumFractionDigits: 1 });
    case "currency":
      return new Intl.NumberFormat(undefined, {
        style: "currency",
        currency: currency ?? "USD",
        maximumFractionDigits: 0,
      });
    case "compact":
      return new Intl.NumberFormat(undefined, { notation: "compact", maximumFractionDigits: 1 });
    default:
      return new Intl.NumberFormat(undefined, { maximumFractionDigits: 2 });
  }
}

/**
 * Axis ticks from 0 (or a negative minimum) to a round maximum, about four
 * intervals. Whole-number data (counts) never gets fractional ticks.
 */
function niceScale(min: number, max: number, integersOnly: boolean): { min: number; max: number; ticks: number[] } {
  const span = Math.max(max - min, integersOnly ? 1 : Number.EPSILON);
  const rough = span / 4;
  const magnitude = 10 ** Math.floor(Math.log10(rough));
  const candidates = [1, 2, 2.5, 5, 10].map((factor) => factor * magnitude);
  let step = candidates.find((candidate) => candidate >= rough) ?? 10 * magnitude;
  if (integersOnly) step = Math.max(1, Math.ceil(step));
  const low = Math.floor(min / step) * step;
  const high = Math.max(low + step, Math.ceil(max / step) * step);
  const ticks: number[] = [];
  for (let value = low; value <= high + step / 2; value += step) ticks.push(Number(value.toFixed(10)));
  return { min: low, max: high, ticks };
}

/** A bar with rounded top corners and a square baseline. */
function barPath(left: number, top: number, width: number, height: number, radius: number): string {
  const r = Math.max(0, Math.min(radius, width / 2, height));
  const right = left + width;
  const bottom = top + height;
  return `M${left},${bottom} V${top + r} Q${left},${top} ${left + r},${top} H${right - r} Q${right},${top} ${right},${top + r} V${bottom} Z`;
}

function useWidth<T extends HTMLElement>() {
  const ref = useRef<T | null>(null);
  const [width, setWidth] = useState(0);
  useLayoutEffect(() => {
    const element = ref.current;
    if (!element) return;
    setWidth(element.clientWidth);
    const observer = new ResizeObserver(([entry]) => {
      if (entry) setWidth(entry.contentRect.width);
    });
    observer.observe(element);
    return () => observer.disconnect();
  }, []);
  return [ref, width] as const;
}

export function Chart(props: ChartProps) {
  const reduceMotion = useReducedMotion();
  const gradientId = useId();
  const [containerRef, width] = useWidth<HTMLDivElement>();
  const [hover, setHover] = useState<number | null>(null);
  const format = useMemo(() => formatter(props.valueFormat, props.currency), [props.valueFormat, props.currency]);

  const series = props.series.map((entry, index) => ({
    ...entry,
    color: TONE_COLORS[entry.tone ?? DEFAULT_ORDER[index % DEFAULT_ORDER.length]!],
    label: entry.label ?? entry.key,
  }));
  const numeric = (row: Record<string, number | string | null>, key: string) => {
    const value = row[key];
    return typeof value === "number" && Number.isFinite(value) ? value : 0;
  };

  const isSpark = props.kind === "sparkline";
  const height = props.height ?? (isSpark ? 40 : props.kind === "donut" ? 200 : props.compact ? 160 : 240);
  const padding = isSpark
    ? { top: 4, right: 2, bottom: 4, left: 2 }
    : { top: 12, right: 12, bottom: 26, left: 44 };

  if (props.data.length === 0) {
    return (
      <div className="flex h-24 items-center justify-center rounded-xl border border-dashed border-border/70 text-sm text-muted-foreground">
        No data yet
      </div>
    );
  }

  const table = (
    <table className="sr-only">
      {props.title ? <caption>{props.title}</caption> : null}
      <thead>
        <tr>
          <th>{props.xKey}</th>
          {series.map((entry) => (
            <th key={entry.key}>{entry.label}</th>
          ))}
        </tr>
      </thead>
      <tbody>
        {props.data.map((row, index) => (
          <tr key={index}>
            <td>{String(row[props.xKey] ?? "")}</td>
            {series.map((entry) => (
              <td key={entry.key}>{format.format(numeric(row, entry.key))}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );

  if (props.kind === "donut") {
    const first = series[0]!;
    const total = props.data.reduce((sum, row) => sum + Math.max(0, numeric(row, first.key)), 0) || 1;
    const radius = 70;
    const circumference = 2 * Math.PI * radius;
    let offset = 0;
    const slices = props.data.map((row, index) => {
      const value = Math.max(0, numeric(row, first.key));
      const length = (value / total) * circumference;
      const slice = {
        label: String(row[props.xKey] ?? ""),
        value,
        dash: length,
        offset,
        color: TONE_COLORS[DEFAULT_ORDER[index % DEFAULT_ORDER.length]!],
      };
      offset += length;
      return slice;
    });
    const active = hover !== null ? slices[hover] : null;
    return (
      <figure className="flex flex-col gap-3">
        {props.title ? <figcaption className="text-sm font-medium text-foreground">{props.title}</figcaption> : null}
        <div className="flex flex-wrap items-center gap-6">
          <svg viewBox="0 0 200 200" className="size-44 shrink-0 -rotate-90" aria-hidden>
            <circle cx="100" cy="100" r={radius} fill="none" stroke="currentColor" strokeWidth="22" className="text-muted/60" />
            {slices.map((slice, index) => (
              <motion.circle
                key={index}
                cx="100"
                cy="100"
                r={radius}
                fill="none"
                stroke={slice.color}
                strokeWidth={hover === index ? 26 : 22}
                strokeDasharray={`${slice.dash} ${circumference}`}
                initial={reduceMotion ? false : { strokeDashoffset: -slice.offset + slice.dash, opacity: 0 }}
                animate={{ strokeDashoffset: -slice.offset, opacity: hover === null || hover === index ? 1 : 0.35 }}
                transition={{ duration: 0.7, delay: index * 0.06, ease: [0.22, 1, 0.36, 1] }}
                onMouseEnter={() => setHover(index)}
                onMouseLeave={() => setHover(null)}
                className="cursor-default transition-[stroke-width]"
              />
            ))}
          </svg>
          <div className="flex min-w-0 flex-col gap-1.5">
            <p className="text-2xl font-semibold tabular-nums tracking-tight text-foreground">
              {format.format(active ? active.value : total)}
            </p>
            <p className="text-xs text-muted-foreground">{active ? active.label : props.series[0]?.label ? `Total ${props.series[0].label.toLowerCase()}` : "Total"}</p>
            <ul className="mt-2 flex flex-col gap-1">
              {slices.map((slice, index) => (
                <li
                  key={index}
                  onMouseEnter={() => setHover(index)}
                  onMouseLeave={() => setHover(null)}
                  className="flex items-center gap-2 text-xs text-muted-foreground"
                >
                  <span className="size-2 shrink-0 rounded-full" style={{ background: slice.color }} />
                  <span className="truncate">{slice.label}</span>
                  <span className="ml-auto tabular-nums text-foreground">
                    {Math.round((slice.value / total) * 100)}%
                  </span>
                </li>
              ))}
            </ul>
          </div>
        </div>
        {table}
      </figure>
    );
  }

  const innerWidth = Math.max(0, width - padding.left - padding.right);
  const innerHeight = height - padding.top - padding.bottom;
  const count = props.data.length;
  const stackedTotals = props.data.map((row) => series.reduce((sum, entry) => sum + numeric(row, entry.key), 0));
  const rawMax = props.stacked
    ? Math.max(...stackedTotals, 0)
    : Math.max(...props.data.flatMap((row) => series.map((entry) => numeric(row, entry.key))), 0);
  const rawMin = props.stacked ? 0 : Math.min(0, ...props.data.flatMap((row) => series.map((entry) => numeric(row, entry.key))));
  const integersOnly = props.data.every((row) => series.every((entry) => Number.isInteger(numeric(row, entry.key))));
  const scale = isSpark ? { min: rawMin, max: rawMax || 1, ticks: [] as number[] } : niceScale(rawMin, rawMax, integersOnly);
  const max = scale.max;
  const min = scale.min;
  const y = (value: number) => padding.top + innerHeight - ((value - min) / (max - min || 1)) * innerHeight;
  const bandWidth = innerWidth / count;
  const x = (index: number) =>
    props.kind === "bar"
      ? padding.left + bandWidth * index + bandWidth / 2
      : padding.left + (count === 1 ? innerWidth / 2 : (innerWidth / (count - 1)) * index);
  const ticks = scale.ticks;
  const labelEvery = Math.max(1, Math.ceil(count / Math.max(1, Math.floor(innerWidth / 72))));

  function pathFor(key: string, offsets: number[] | null) {
    return props.data
      .map((row, index) => {
        const base = offsets ? offsets[index]! : 0;
        return `${index === 0 ? "M" : "L"}${x(index).toFixed(2)},${y(base + numeric(row, key)).toFixed(2)}`;
      })
      .join(" ");
  }

  const cumulative = props.data.map(() => 0);
  const layers = series.map((entry) => {
    const offsets = props.stacked ? [...cumulative] : null;
    const line = pathFor(entry.key, offsets);
    if (props.stacked) props.data.forEach((row, index) => (cumulative[index]! += numeric(row, entry.key)));
    return { entry, offsets, line };
  });

  const hovered = hover !== null ? props.data[hover] : null;

  return (
    <figure className="flex min-w-0 flex-col gap-2">
      {props.title || (!isSpark && series.length > 1) ? (
        <div className="flex flex-wrap items-center justify-between gap-2">
          {props.title ? <figcaption className="text-sm font-medium text-foreground">{props.title}</figcaption> : <span />}
          {series.length > 1 && !isSpark ? (
            <ul className="flex flex-wrap items-center gap-3">
              {series.map((entry) => (
                <li key={entry.key} className="flex items-center gap-1.5 text-xs text-muted-foreground">
                  <span className="size-2 rounded-full" style={{ background: entry.color }} />
                  {entry.label}
                </li>
              ))}
            </ul>
          ) : null}
        </div>
      ) : null}
      <div ref={containerRef} className="relative w-full" style={{ height }}>
        {width > 0 ? (
          <svg
            width={width}
            height={height}
            className="overflow-visible"
            role="img"
            aria-label={props.title ?? `${props.kind} chart`}
            onMouseLeave={() => setHover(null)}
            onMouseMove={(event) => {
              const box = event.currentTarget.getBoundingClientRect();
              const offset = event.clientX - box.left - padding.left;
              const index =
                props.kind === "bar"
                  ? Math.floor(offset / bandWidth)
                  : Math.round(offset / (innerWidth / Math.max(1, count - 1)));
              setHover(index >= 0 && index < count ? index : null);
            }}
          >
            <defs>
              {series.map((entry, index) => (
                <linearGradient key={entry.key} id={`${gradientId}-${index}`} x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor={entry.color} stopOpacity={0.28} />
                  <stop offset="100%" stopColor={entry.color} stopOpacity={0} />
                </linearGradient>
              ))}
            </defs>
            {ticks.map((tick, index) => (
              <g key={index}>
                <line
                  x1={padding.left}
                  x2={width - padding.right}
                  y1={y(tick)}
                  y2={y(tick)}
                  className="stroke-border"
                  strokeDasharray={tick === 0 ? undefined : "2 4"}
                />
                <text
                  x={padding.left - 8}
                  y={y(tick)}
                  dy="0.32em"
                  textAnchor="end"
                  className="fill-muted-foreground text-xs tabular-nums"
                >
                  {formatter(props.valueFormat === "currency" ? "compact" : props.valueFormat, props.currency).format(tick)}
                </text>
              </g>
            ))}
            {!isSpark
              ? props.data.map((row, index) =>
                  index % labelEvery === 0 ? (
                    <text
                      key={index}
                      x={x(index)}
                      y={height - 8}
                      textAnchor="middle"
                      className="fill-muted-foreground text-xs"
                    >
                      {String(row[props.xKey] ?? "").slice(0, 12)}
                    </text>
                  ) : null,
                )
              : null}

            {props.kind === "bar"
              ? layers.map(({ entry, offsets }, seriesIndex) => {
                  const groupWidth = Math.min(bandWidth * 0.62, 44);
                  const barWidth = props.stacked ? groupWidth : groupWidth / series.length;
                  return props.data.map((row, index) => {
                    const value = numeric(row, entry.key);
                    const base = offsets ? offsets[index]! : 0;
                    const top = y(base + value);
                    const bottom = y(base);
                    const left =
                      x(index) - groupWidth / 2 + (props.stacked ? 0 : barWidth * seriesIndex);
                    return (
                      <motion.path
                        key={`${entry.key}-${index}`}
                        fill={entry.color}
                        style={{ transformOrigin: `0px ${bottom}px`, transformBox: "view-box" }}
                        d={barPath(left + 1, Math.min(top, bottom), Math.max(1, barWidth - 2), Math.abs(bottom - top), 6)}
                        initial={reduceMotion ? false : { scaleY: 0 }}
                        animate={{ scaleY: 1, opacity: hover === null || hover === index ? 1 : 0.45 }}
                        transition={{ duration: 0.55, delay: index * 0.025 + seriesIndex * 0.05, ease: [0.22, 1, 0.36, 1] }}
                      />
                    );
                  });
                })
              : layers.map(({ entry, offsets, line }, seriesIndex) => {
                  const areaBase = props.data
                    .map((_, index) => `L${x(count - 1 - index).toFixed(2)},${y(offsets ? offsets[count - 1 - index]! : Math.max(min, 0)).toFixed(2)}`)
                    .join(" ");
                  return (
                    <g key={entry.key}>
                      {props.kind === "area" || isSpark ? (
                        <motion.path
                          d={`${line} ${areaBase} Z`}
                          fill={`url(#${gradientId}-${seriesIndex})`}
                          initial={reduceMotion ? false : { opacity: 0 }}
                          animate={{ opacity: 1 }}
                          transition={{ duration: 0.6, delay: 0.25 }}
                        />
                      ) : null}
                      <motion.path
                        d={line}
                        fill="none"
                        stroke={entry.color}
                        strokeWidth={isSpark ? 1.75 : 2}
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        initial={reduceMotion ? false : { pathLength: 0 }}
                        animate={{ pathLength: 1 }}
                        transition={{ duration: 0.9, delay: seriesIndex * 0.08, ease: [0.22, 1, 0.36, 1] }}
                      />
                    </g>
                  );
                })}

            {hover !== null && props.kind !== "bar" && !isSpark ? (
              <g>
                <line
                  x1={x(hover)}
                  x2={x(hover)}
                  y1={padding.top}
                  y2={padding.top + innerHeight}
                  className="stroke-foreground/20"
                />
                {layers.map(({ entry }) => {
                  const row = props.data[hover]!;
                  const stackedValue = props.stacked
                    ? series
                        .slice(0, series.findIndex((candidate) => candidate.key === entry.key) + 1)
                        .reduce((sum, candidate) => sum + numeric(row, candidate.key), 0)
                    : numeric(row, entry.key);
                  return (
                    <circle
                      key={entry.key}
                      cx={x(hover)}
                      cy={y(stackedValue)}
                      r={4}
                      fill={entry.color}
                      className="stroke-background"
                      strokeWidth={2}
                    />
                  );
                })}
              </g>
            ) : null}
          </svg>
        ) : null}
        {hovered && !isSpark ? (
          <div
            className={cn(
              "pointer-events-none absolute top-1 z-10 min-w-32 rounded-xl border border-border/70 bg-popover/95 px-3 py-2 text-xs shadow-lg backdrop-blur",
            )}
            style={{
              left: Math.min(Math.max(x(hover!) - 64, 0), Math.max(0, width - 140)),
            }}
          >
            <p className="mb-1 font-medium text-foreground">{String(hovered[props.xKey] ?? "")}</p>
            {series.map((entry) => (
              <p key={entry.key} className="flex items-center gap-2 text-muted-foreground">
                <span className="size-1.5 rounded-full" style={{ background: entry.color }} />
                <span className="truncate">{entry.label}</span>
                <span className="ml-auto pl-3 font-medium tabular-nums text-foreground">
                  {format.format(numeric(hovered, entry.key))}
                </span>
              </p>
            ))}
          </div>
        ) : null}
      </div>
      {table}
    </figure>
  );
}

type SeriesInput = ChartProps["series"];

/** Line chart over a category key. */
export function LineChart(props: Omit<ChartProps, "kind">) {
  return <Chart {...props} kind="line" />;
}

/** Filled area chart; pass `stacked` to stack series. */
export function AreaChart(props: Omit<ChartProps, "kind">) {
  return <Chart {...props} kind="area" />;
}

/** Grouped or stacked bars. */
export function BarChart(props: Omit<ChartProps, "kind">) {
  return <Chart {...props} kind="bar" />;
}

/** One proportion per category; uses the first series. */
export function DonutChart(props: Omit<ChartProps, "kind">) {
  return <Chart {...props} kind="donut" />;
}

/** A tiny trend line for stats and table cells. */
export function Sparkline({
  values,
  tone = "primary",
  height = 32,
  className,
}: {
  values: number[];
  tone?: NonNullable<SeriesInput[number]["tone"]>;
  height?: number;
  className?: string;
}) {
  return (
    <div className={className}>
      <Chart
        kind="sparkline"
        data={values.map((value, index) => ({ x: index, value }))}
        xKey="x"
        series={[{ key: "value", tone }]}
        height={height}
      />
    </div>
  );
}