import { useQuery } from "@tanstack/react-query"

import type { HistoryPoint } from "@/client"
import { MAX_SERIES, UplotChart } from "@/components/Common/UplotChart"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { compareQueryOptions, runMetricsQueryOptions, shortId } from "./queries"

/**
 * Why a finished run can have nothing to draw.
 *
 * A cache hit restores what a node returned, not the values it emitted along
 * the way, so a run whose training node was reused has a result and no curve.
 * Said here rather than left as an empty chart, which reads as a fault.
 */
export const NO_CURVE =
  "No curve was recorded. A node restored from the cache replays no emissions, so a run that reused an earlier one draws nothing here — its outputs are still on the result."

/** The metrics one run recorded, in the order they are worth offering. */
export function useMetricNames(runId: string | undefined) {
  const { data } = useQuery({
    ...runMetricsQueryOptions(runId ?? "", ""),
    enabled: Boolean(runId),
  })
  const names = new Set<string>()
  for (const point of data ?? []) if (point.name) names.add(point.name)
  return [...names]
}

/**
 * One metric across one or more runs, drawn on a step axis.
 *
 * The endpoint answers in the chart widget's own series shape, so comparing
 * three curves and showing one are the same call with a different id list.
 */
export function RunMetricChart({
  ids,
  metric,
  refreshMs,
}: {
  ids: string[]
  metric: string
  refreshMs?: number
}) {
  const { data, isPending } = useQuery(
    compareQueryOptions(ids, metric, refreshMs),
  )
  const lines = (data?.lines ?? []).slice(0, MAX_SERIES)
  const labels = lines.map((line) =>
    // The endpoint labels a line with the whole run id, which is too long to
    // read in a legend beside four others.
    line.label.replace(/^\S+/, (id) => shortId(id)),
  )
  const plots: HistoryPoint[][] = lines.map((line) =>
    (line.points ?? []).map(([step, value]) => ({ ts: step, value })),
  )
  const drawn = plots.reduce((total, plot) => total + plot.length, 0)

  return (
    <div className="flex flex-col gap-2">
      <UplotChart
        labels={labels}
        plots={plots}
        xTime={false}
        yLabel={metric}
        pending={isPending}
        empty={NO_CURVE}
      />
      {drawn > 0 && (data?.lines?.length ?? 0) > MAX_SERIES && (
        <p className="text-muted-foreground text-xs">
          Showing {MAX_SERIES} of {data?.lines?.length} runs.
        </p>
      )}
    </div>
  )
}

/** The metric picker both the detail and the comparison sit under. */
export function MetricPicker({
  names,
  value,
  onChange,
}: {
  names: string[]
  value: string
  onChange: (name: string) => void
}) {
  if (names.length === 0) return null
  return (
    <Select value={value} onValueChange={onChange}>
      <SelectTrigger className="h-8 w-56">
        <SelectValue placeholder="Metric" />
      </SelectTrigger>
      <SelectContent>
        {names.map((name) => (
          <SelectItem key={name} value={name}>
            {name}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}