"use client";
import * as React from "react";

export interface TooltipEntry {
  name?: string | number;
  value?: number | string | ReadonlyArray<number | string>;
  color?: string;
  fill?: string;
  dataKey?: string | number;
  payload?: Record<string, unknown>;
}

export interface ChartTooltipProps {
  active?: boolean;
  payload?: ReadonlyArray<TooltipEntry>;
  label?: unknown;
  /** Format the heading (bucket label). */
  labelFormatter?: (label: unknown, payload: ReadonlyArray<TooltipEntry>) => React.ReactNode;
  /** Format a series value. */
  valueFormatter?: (value: number, entry: TooltipEntry) => React.ReactNode;
  /** Optional display names per dataKey. */
  names?: Record<string, string>;
  /** Extra footer line (e.g. total). */
  footer?: (payload: ReadonlyArray<TooltipEntry>) => React.ReactNode;
}

/** Theme-matched tooltip body; recharts clones it with `active`, `payload` and `label`. */
export function ChartTooltip({ active, payload, label, labelFormatter, valueFormatter, names, footer }: ChartTooltipProps) {
  if (!active || !payload || payload.length === 0) return null;
  const rows = payload.filter((p) => p.value !== undefined && p.value !== null);
  if (!rows.length) return null;
  return (
    <div className="pointer-events-none min-w-[150px] rounded-md border border-border bg-bg-elevated px-3 py-2 text-[12px] shadow-md">
      <div className="mb-1.5 font-medium text-fg">{labelFormatter ? labelFormatter(label, payload) : String(label ?? "")}</div>
      <ul className="space-y-1">
        {rows.map((p, i) => {
          const key = String(p.dataKey ?? p.name ?? i);
          const raw = Array.isArray(p.value) ? Number(p.value[0]) : Number(p.value);
          return (
            <li key={key} className="flex items-center justify-between gap-4">
              <span className="flex items-center gap-1.5 text-fg-muted">
                <span aria-hidden className="inline-block size-2 rounded-[2px]" style={{ backgroundColor: p.color ?? p.fill ?? "var(--fg-subtle)" }} />
                {names?.[key] ?? String(p.name ?? key)}
              </span>
              <span className="font-mono tabular text-fg">{valueFormatter ? valueFormatter(raw, p) : Number.isFinite(raw) ? raw.toLocaleString("en-US") : "—"}</span>
            </li>
          );
        })}
      </ul>
      {footer ? <div className="mt-1.5 border-t border-border pt-1.5 text-fg-muted">{footer(payload)}</div> : null}
    </div>
  );
}