Dashboard/features/dashboard/components/charts/BalkenHorizontal.tsx

"use client";

import React from "react";
import { farbeFuer, farbe as paletteFarbe } from "../../utils/chartTheme";
import { ChartLeer } from "./ChartLeer";

/**
 * Horizontale Balken für Rangfolgen (Top-Kunden, Aufträge je Gewerk).
 *
 * Bewusst als HTML/CSS statt Recharts: Kategorienamen sind hier lang und
 * unterschiedlich breit; im SVG müsste man sie hart abschneiden. In HTML
 * bleiben sie umbruchfähig, selektierbar und barrierefrei lesbar.
 * Hover hebt den Balken hervor und zeigt den vollen Namen als Titel.
 */
export function BalkenHorizontal({
  daten,
  formatWert,
  maxBalken = 6,
  /**
   * Einfarbig für Rangfolgen (Top-Kunden, Aufträge je Mitarbeiter):
   * Dort trägt die Farbe keine Information und würde nur Unruhe erzeugen.
   * Palette nur, wenn die Balken echte Kategorien sind.
   */
  einfarbig = true,
  farbeStart = 1,
  /**
   * Zweitwert rechts neben dem Hauptwert — z. B. Auftragswert neben der
   * Anzahl Abschlüsse. Erspart eine zweite Karte mit derselben Kodierung
   * auf derselben Personenachse.
   */
  formatZweitwert,
}: {
  daten: { name: string; value: number; zweitwert?: number }[];
  formatWert: (wert: number) => string;
  maxBalken?: number;
  einfarbig?: boolean;
  farbeStart?: number;
  formatZweitwert?: (wert: number) => string;
}) {
  const [aktiv, setAktiv] = React.useState<string | null>(null);

  const sichtbar = [...daten]
    .filter((d) => d.value > 0)
    .sort((a, b) => b.value - a.value)
    .slice(0, maxBalken);

  if (!sichtbar.length) return <ChartLeer hoehe={180} />;

  const max = Math.max(...sichtbar.map((d) => d.value));

  return (
    <ul className="flex flex-col gap-2.5">
      {sichtbar.map((eintrag, index) => {
        const anteil = max > 0 ? (eintrag.value / max) * 100 : 0;
        const balkenFarbe = einfarbig
          ? paletteFarbe(1)
          : farbeFuer(eintrag.name, farbeStart + index);
        const hervorgehoben = aktiv === eintrag.name;

        return (
          <li
            key={eintrag.name}
            title={eintrag.name}
            onMouseEnter={() => setAktiv(eintrag.name)}
            onMouseLeave={() => setAktiv(null)}
            className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1"
          >
            <span className="min-w-0 truncate text-[12px] text-text-neutral-secondary">
              {eintrag.name}
            </span>
            <span className="flex items-baseline gap-2 whitespace-nowrap tabular-nums">
              <span className="text-[12px] font-semibold text-text-neutral-primary">
                {formatWert(eintrag.value)}
              </span>
              {formatZweitwert && eintrag.zweitwert !== undefined ? (
                <span className="text-[12px] text-text-neutral-tertiary">
                  {formatZweitwert(eintrag.zweitwert)}
                </span>
              ) : null}
            </span>
            <span className="col-span-2 block h-2.5 w-full overflow-hidden rounded-sm bg-neutral-100">
              <span
                className="block h-full rounded-r-sm transition-[width,opacity] duration-300"
                style={{
                  width: `${Math.max(2, anteil)}%`,
                  background: balkenFarbe,
                  opacity: aktiv && !hervorgehoben ? 0.45 : 1,
                }}
              />
            </span>
          </li>
        );
      })}
    </ul>
  );
}