"use client";

import * as React from "react";
import { animate, motion, useInView, useMotionValue, useReducedMotion, useTransform } from "framer-motion";
import { IconArrowDownRight, IconArrowUpRight } from "@tabler/icons-react";
import { cn } from "../lib/utils";
import { Sparkline } from "./chart";

/** Counts up to a number once it scrolls into view. */
export function AnimatedNumber({
  value,
  format = (next) => Math.round(next).toLocaleString(),
  className,
}: {
  value: number;
  format?: (value: number) => string;
  className?: string;
}) {
  const ref = React.useRef<HTMLSpanElement | null>(null);
  const inView = useInView(ref, { once: true });
  const reduceMotion = useReducedMotion();
  const motionValue = useMotionValue(reduceMotion ? value : 0);
  const display = useTransform(motionValue, (latest) => format(latest));
  React.useEffect(() => {
    if (!inView) return;
    if (reduceMotion) {
      motionValue.set(value);
      return;
    }
    const controls = animate(motionValue, value, { duration: 0.8, ease: [0.22, 1, 0.36, 1] });
    return () => controls.stop();
  }, [inView, motionValue, reduceMotion, value]);
  return (
    <motion.span ref={ref} className={cn("tabular-nums", className)}>
      {display}
    </motion.span>
  );
}

export interface StatProps {
  label: string;
  value: React.ReactNode;
  delta?: { value: string; tone?: "positive" | "negative" | "neutral" };
  hint?: React.ReactNode;
  trend?: number[];
  className?: string;
}

/** One metric: label, value, change, and an optional trend line. */
export function Stat({ label, value, delta, hint, trend, className }: StatProps) {
  const tone = delta?.tone ?? "neutral";
  return (
    <div
      className={cn(
        "flex min-w-0 flex-col gap-1.5 rounded-2xl border border-border/60 bg-card p-4 shadow-[0_1px_2px_rgba(0,0,0,0.03)]",
        className,
      )}
    >
      <p className="truncate text-xs font-medium text-muted-foreground">{label}</p>
      <div className="flex items-end justify-between gap-3">
        <div className="min-w-0 truncate text-2xl font-semibold tracking-tight text-foreground tabular-nums">{value}</div>
        {trend && trend.length > 1 ? (
          <Sparkline values={trend} tone={tone === "negative" ? "danger" : "positive"} className="w-24 shrink-0" />
        ) : null}
      </div>
      {delta || hint ? (
        <div className="flex items-center gap-2 text-xs">
          {delta ? (
            <span
              className={cn(
                "inline-flex items-center gap-0.5 rounded-md px-1.5 py-px font-medium tabular-nums",
                tone === "positive" && "bg-positive/12 text-positive-fg",
                tone === "negative" && "bg-risk/12 text-risk-fg",
                tone === "neutral" && "bg-muted text-muted-foreground",
              )}
            >
              {tone === "positive" ? <IconArrowUpRight className="size-3" /> : null}
              {tone === "negative" ? <IconArrowDownRight className="size-3" /> : null}
              {delta.value}
            </span>
          ) : null}
          {hint ? <span className="truncate text-muted-foreground">{hint}</span> : null}
        </div>
      ) : null}
    </div>
  );
}

/** A responsive row of stats. */
export function StatGrid({ children, className }: { children: React.ReactNode; className?: string }) {
  return <div className={cn("grid grid-cols-[repeat(auto-fit,minmax(11rem,1fr))] gap-3", className)}>{children}</div>;
}