"use client";
import * as React from "react";
import { Bar, BarChart, CartesianGrid, Cell, LabelList, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
import { AXIS_TICK, CHART_COLORS } from "./chart-theme";
import { ChartTooltip } from "./chart-tooltip";

export type HorizontalBarFormat = "number" | "percent" | "ms" | "usd";

const FORMATTERS: Record<HorizontalBarFormat, (v: number) => string> = {
  number: (v) => v.toLocaleString("en-US"),
  percent: (v) => `${v.toFixed(1)}%`,
  ms: (v) => (v < 1000 ? `${Math.round(v)} ms` : `${(v / 1000).toFixed(2)} s`),
  usd: (v) => (v < 0.01 && v > 0 ? `$${v.toFixed(4)}` : `$${v.toFixed(2)}`),
};

export interface HorizontalBarDatum {
  label: string;
  value: number;
  /** Optional per-entity color (defaults to accent). */
  color?: string;
  /** Optional secondary text shown in the tooltip (e.g. request count). */
  hint?: string;
}

/**
 * Single-series horizontal bars (one color for all bars unless the entity has a fixed color).
 * Used for success rate by network and error-code breakdowns.
 */
export function HorizontalBarChart({
  data,
  color = CHART_COLORS.accent,
  max,
  format = "number",
  rowHeight = 34,
  labelWidth = 120,
}: {
  data: HorizontalBarDatum[];
  color?: string;
  max?: number;
  /** Serializable formatter key (server components cannot pass functions to client components). */
  format?: HorizontalBarFormat;
  rowHeight?: number;
  labelWidth?: number;
}) {
  const valueFormatter = FORMATTERS[format];
  const height = Math.max(rowHeight * Math.max(data.length, 1) + 16, 80);
  return (
    <ResponsiveContainer width="100%" height={height}>
      <BarChart data={data} layout="vertical" margin={{ top: 4, right: 56, bottom: 4, left: 0 }} barCategoryGap="28%">
        <CartesianGrid horizontal={false} stroke={CHART_COLORS.grid} />
        <XAxis type="number" hide domain={[0, max ?? "auto"]} />
        <YAxis type="category" dataKey="label" width={labelWidth} tick={{ ...AXIS_TICK, fill: "var(--fg-muted)", fontSize: 12 }} axisLine={false} tickLine={false} interval={0} />
        <Tooltip
          cursor={{ fill: CHART_COLORS.cursor, opacity: 0.6 }}
          content={
            <ChartTooltip
              labelFormatter={(l) => String(l)}
              valueFormatter={(v) => valueFormatter(v)}
              names={{ value: "Value" }}
              footer={(p) => {
                const hint = (p[0]?.payload as HorizontalBarDatum | undefined)?.hint;
                return hint ? <span>{hint}</span> : null;
              }}
            />
          }
        />
        <Bar dataKey="value" radius={[0, 3, 3, 0]} maxBarSize={18} isAnimationActive={false} background={{ fill: "var(--bg-muted)", radius: 3 }}>
          {data.map((d) => (
            <Cell key={d.label} fill={d.color ?? color} />
          ))}
          <LabelList dataKey="value" position="right" formatter={(v: unknown) => valueFormatter(Number(v))} style={{ fill: "var(--fg-muted)", fontSize: 11.5, fontFamily: "var(--font-mono)" }} />
        </Bar>
      </BarChart>
    </ResponsiveContainer>
  );
}