"use client";

import { BarList, ColumnChart, LineChart, type BarListItem, type ColumnDatum, type Series } from "@/components/ui/charts";
import { fmtCompact, fmtInt, fmtMw } from "@/lib/format";

/* ------------------------------------------------------------------------------------------
   Client wrappers so server pages can request a formatter by name (functions cannot cross the
   RSC boundary). All charts are the ui kit's SVG charts; nothing new is drawn here.
   ------------------------------------------------------------------------------------------ */

type Fmt = "int" | "mw" | "compact";
const FMT: Record<Fmt, (v: number | null) => string> = { int: (v) => fmtInt(v), mw: (v) => fmtMw(v), compact: (v) => fmtCompact(v) };

export function Columns({ data, format = "int", height, color, unit, ariaLabel, className }: { data: ColumnDatum[]; format?: Fmt; height?: number; color?: string; unit?: string; ariaLabel?: string; className?: string }) {
  return <ColumnChart data={data} format={FMT[format]} height={height} color={color} unit={unit} ariaLabel={ariaLabel} className={className} />;
}

export function Lines({ series, format = "int", height, unit, ariaLabel, className, yLabel }: { series: Series[]; format?: Fmt; height?: number; unit?: string; ariaLabel?: string; className?: string; yLabel?: string }) {
  return <LineChart series={series} format={FMT[format]} height={height} unit={unit} ariaLabel={ariaLabel} className={className} yLabel={yLabel} />;
}

/** Step chart for cumulative values (countries / metros entered by year). */
export function StepLines(props: Parameters<typeof Lines>[0]) {
  return <Lines {...props} series={props.series.map((s) => ({ ...s, step: true }))} />;
}

export function Bars({ items, format = "int", showRank, max, className, barColor }: { items: BarListItem[]; format?: Fmt; showRank?: boolean; max?: number; className?: string; barColor?: string }) {
  return <BarList items={items} format={FMT[format]} showRank={showRank} max={max} className={className} barColor={barColor} />;
}