"use client";

import React from "react";

/**
 * Legende als eigene Komponente statt Recharts-Legend:
 * Recharts platziert die Legende im SVG und kostet damit Chartfläche.
 * Carbon setzt sie über den Chart, linksbündig, 12 px, 12 px Marker.
 *
 * **Der Marker zeigt, was das Diagramm zeichnet.** Eine gefüllte Reihe bekommt
 * einen Punkt, eine gestrichelte Vergleichsreihe ein gestricheltes
 * Linienstück mit demselben Strichmuster wie im Chart.
 *
 * Vorher war auch die gestrichelte Reihe ein 10 px großes Kästchen, nur mit
 * gestricheltem Rand. Auf zehn Pixel bleiben von einem gestrichelten Rechteck
 * ein paar Eckstriche übrig; das sah aus wie ein Zeichenfehler und nicht wie
 * eine Linie. Und es stimmte auch nicht: Im Diagramm ist „Vorjahr" kein
 * Kästchen, sondern eine Linie.
 */

/** Muss zur Vergleichsreihe in AreaVerlauf.tsx passen: 1,5 px, Muster 4/4. */
const STRICH = { breite: 18, staerke: 1.5, muster: "4 4" } as const;
export function ChartLegende({
  eintraege,
  /** Ausgeblendete Reihen erscheinen ausgegraut: Klick schaltet um. */
  inaktiv = [],
  onToggle,
}: {
  eintraege: { name: string; farbe: string; wert?: string; gestrichelt?: boolean }[];
  inaktiv?: string[];
  onToggle?: (name: string) => void;
}) {
  return (
    <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
      {eintraege.map((eintrag) => {
        const aus = inaktiv.includes(eintrag.name);
        const Inhalt = (
          <>
            {eintrag.gestrichelt ? (
              <svg
                width={STRICH.breite}
                height={STRICH.staerke * 2}
                viewBox={`0 0 ${STRICH.breite} ${STRICH.staerke * 2}`}
                className="flex-none overflow-visible"
                style={{ opacity: aus ? 0.35 : 1 }}
                aria-hidden
              >
                <line
                  x1="0"
                  y1={STRICH.staerke}
                  x2={STRICH.breite}
                  y2={STRICH.staerke}
                  stroke={eintrag.farbe}
                  strokeWidth={STRICH.staerke}
                  strokeDasharray={STRICH.muster}
                />
              </svg>
            ) : (
              <span
                className="h-2.5 w-2.5 flex-none rounded-sm"
                style={{ background: eintrag.farbe, opacity: aus ? 0.35 : 1 }}
              />
            )}
            <span
              className="text-[12px]"
              style={{ color: aus ? "#a8a8a8" : "#525252" }}
            >
              {eintrag.name}
            </span>
            {eintrag.wert ? (
              <span className="text-[12px] font-semibold tabular-nums text-text-neutral-primary">
                {eintrag.wert}
              </span>
            ) : null}
          </>
        );

        return onToggle ? (
          <button
            key={eintrag.name}
            onClick={() => onToggle(eintrag.name)}
            className="flex items-center gap-1.5 rounded px-1 py-0.5 hover:bg-neutral-50"
          >
            {Inhalt}
          </button>
        ) : (
          <span key={eintrag.name} className="flex items-center gap-1.5">
            {Inhalt}
          </span>
        );
      })}
    </div>
  );
}