'use client';
import dynamic from 'next/dynamic';
import { InteractiveLineChart, type Point, type ScatterPoint } from '@/components/charts';

// d3's log scale yields last-digit float differences between Node and Chromium (cx=400.02442488279183 vs …917), which React
// reports as a hydration mismatch — so the scatter is rendered on the client only, with a fixed-height placeholder.
const ScatterChart = dynamic(() => import('@/components/charts/scatter-chart').then((m) => m.ScatterChart), { ssr: false, loading: () => <div className="animate-pulse bg-surface-2/60" style={{ height: 420 }} aria-hidden /> });
import { fmtScoreUnit, xFormatter } from '@/components/models/shared';

/*
  Client wrappers for the benchmark pages: server components cannot pass formatter functions across the boundary, so these take
  a `unit` / axis key and build the formatters on the client.
*/

export function FrontierLineChart({ points, unit, label, height = 220 }: { points: { x: string; y: number }[]; unit: string | null; label: string; height?: number }) {
  const pts: Point[] = points.map((p) => ({ x: new Date(p.x), y: p.y }));
  return <InteractiveLineChart series={[{ name: 'Best score', color: 'var(--type-benchmark)', points: pts }]} height={height} step showDots yFormat={(v) => fmtScoreUnit(v, unit)} yLabel={label} />;
}


export function ParetoChart({ points, xKey, unit, log, xLabel, yLabel, frontier, highlight, height = 420 }: { points: ScatterPoint[]; xKey: string; unit: string | null; log: boolean; xLabel: string; yLabel: string; frontier: { x: number; y: number }[]; highlight: string[]; height?: number }) {
  return <ScatterChart points={points} xScale={log && points.every((p) => p.x > 0) ? 'log' : 'linear'} yScale="linear" xLabel={xLabel} yLabel={yLabel} xFormat={xFormatter(xKey)} yFormat={(v) => fmtScoreUnit(v, unit)} frontier={frontier} highlight={highlight} height={height} labelTop={8} color="var(--type-model)" />;
}