"use client";

import React from "react";
import { CHART, TOOLTIP_SCHATTEN } from "../../utils/chartTheme";

/**
 * Einheitlicher Tooltip für alle Charts.
 *
 * Carbon-Vorgabe (@carbon/charts, .cds--cc--tooltip): helle Fläche
 * (--cds-layer-02), Text in --cds-text-primary, 12 px, abgesetzt allein durch
 * den Schatten, kein Rahmen, kein Doppelpunkt zwischen Name und Wert,
 * maximal 270 px breit.
 *
 * Bis Carbon v10 war der Tooltip dunkel (#393939). Viele Quellen im Netz
 * zeigen noch diesen Stand; maßgeblich ist das ausgelieferte Stylesheet.
 * Geprüft von scripts/verify-carbon.mjs.
 *
 * Die Props sind bewusst weit typisiert: Recharts reicht sein internes
 * Payload-Format durch, das je nach Chart-Typ leicht abweicht.
 */
interface TooltipPayload {
  name?: unknown;
  value?: unknown;
  color?: string;
  dataKey?: unknown;
}

export function ChartTooltip({
  active,
  label,
  payload,
  formatWert,
  labelPrefix,
}: {
  active?: boolean;
  label?: unknown;
  payload?: readonly TooltipPayload[];
  formatWert: (wert: number) => string;
  labelPrefix?: string;
}) {
  if (!active || !payload?.length) return null;

  const reihen = payload
    .filter((eintrag) => typeof eintrag.value === "number")
    .map((eintrag) => ({
      name: String(eintrag.name ?? eintrag.dataKey ?? ""),
      value: eintrag.value as number,
      color: eintrag.color,
    }));

  if (!reihen.length) return null;

  const labelText = label === undefined || label === null ? "" : String(label);

  return (
    <div
      className="pointer-events-none max-w-[270px] rounded-md px-3 py-2"
      style={{
        background: CHART.tooltipBg,
        color: CHART.tooltipFg,
        boxShadow: TOOLTIP_SCHATTEN,
      }}
    >
      {labelText ? (
        <div className="mb-1 text-[12px]" style={{ color: CHART.textSekundaer }}>
          {labelPrefix ? `${labelPrefix} ` : ""}
          {labelText}
        </div>
      ) : null}
      <div className="flex flex-col gap-0.5">
        {reihen.map((reihe) => (
          <div key={reihe.name} className="flex items-center gap-2 text-[12px]">
            {reihe.color ? (
              <span
                className="h-2.5 w-2.5 flex-none rounded-sm"
                style={{ background: reihe.color }}
              />
            ) : null}
            <span style={{ color: CHART.textSekundaer }}>{reihe.name}</span>
            <span className="ml-auto font-semibold tabular-nums">{formatWert(reihe.value)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}