import type { ReactNode } from "react";
import { cn } from "./cn";

export interface MetricProps {
  value: ReactNode;
  unit?: ReactNode;
  label: ReactNode;
  delta?: number | null;
  deltaLabel?: string;
  note?: ReactNode;
  size?: "sm" | "md" | "lg";
  className?: string;
  /** render as skeleton */
  loading?: boolean;
  href?: string;
}

/** Big figure in mono/tabular, tight tracking; unit in small caps beside; label under. */
export function Metric({ value, unit, label, delta, deltaLabel, note, size = "md", className, loading }: MetricProps) {
  const vs = size === "lg" ? "text-[30px] sm:text-[36px]" : size === "sm" ? "text-[18px]" : "text-[24px] sm:text-[28px]";
  return (
    <div className={cn("flex min-w-0 flex-col gap-0.5", className)}>
      <div className={cn("flex items-baseline gap-1 leading-none", vs)}>
        {loading ? <span className="inline-block h-[0.9em] w-[3.2em] animate-pulse-soft rounded-xs bg-surface-3" /> : <span className="figure font-medium tracking-[-0.03em] text-ink">{value}</span>}
        {unit && !loading && <span className="text-[0.5em] font-medium text-ink-3">{unit}</span>}
        {delta !== undefined && delta !== null && !loading && (
          <span className={cn("figure ml-1 text-[0.45em] font-medium", delta > 0 ? "text-ok" : delta < 0 ? "text-danger" : "text-ink-3")} title={deltaLabel}>
            {delta > 0 ? "+" : ""}
            {delta}
          </span>
        )}
      </div>
      <div className="label-caps truncate">{label}</div>
      {note && <div className="text-[11px] leading-tight text-ink-3">{note}</div>}
    </div>
  );
}

/**
 * Metric strip. Under 640 px: a 2-column grid so every figure is visible without scrolling (an odd
 * last cell spans both columns); ≥ 640 px: one row of `cols` columns. Hairline separators, no cards.
 */
export function MetricRow({ children, className, cols }: { children: ReactNode; className?: string; cols?: number }) {
  return (
    <div
      className={cn(
        "grid grid-cols-2 border-y border-hair [&>*]:min-w-0",
        // phones: vertical hairline between the two columns, horizontal hairline between rows, odd last cell full width
        "max-sm:[&>*:nth-child(even)]:border-l max-sm:[&>*:nth-child(n+3)]:border-t max-sm:[&>*:nth-child(odd)]:pl-0 max-sm:[&>*:last-child:nth-child(odd)]:col-span-2 max-sm:[&>*]:border-hair",
        // ≥ sm: one row, separators between cells
        "sm:[grid-template-columns:var(--metric-cols)] sm:[&>*+*]:border-l sm:[&>*]:border-hair",
        className,
      )}
      style={{ ["--metric-cols" as string]: `repeat(${cols ?? 4}, minmax(0, 1fr))` }}
    >
      {children}
    </div>
  );
}

/** Wrapper for one metric cell inside MetricRow. */
export function MetricCell({ children, className }: { children: ReactNode; className?: string }) {
  return <div className={cn("min-w-0 px-3 py-3 sm:px-4 sm:first:pl-0", className)}>{children}</div>;
}