Dashboard/features/dashboard/components/cards/AlertList.tsx

"use client";

import React from "react";
import {
  FeatherAlertTriangle,
  FeatherArrowRight,
  FeatherCheckCircle,
  FeatherInfo,
} from "@subframe/core";
import { STATUS_FARBEN } from "../../utils/chartTheme";
import { formatEuro } from "../../utils/formatters";
import { useToast } from "../../context/ToastContext";
import type { AlertEintrag } from "../../data/calculations";

/**
 * Handlungsbedarf-Liste (COMP-08).
 *
 * Jede Zeile nennt drei Dinge: was los ist, um wie viel Geld es geht und was
 * zu tun ist. Ohne den Betrag lassen sich die Zeilen nicht gegeneinander
 * abwägen, ohne die Handlung ist die Liste ein Bericht statt einer Arbeitsliste.
 * Der Absprung in die jeweilige Arbeitsliste ist im Prototyp eine Attrappe.
 */
export function AlertList({
  eintraege,
  leerText = "Keine offenen Punkte",
  /** Zwei Spalten, wenn die Karte über die volle Seitenbreite läuft. */
  spalten = 1,
}: {
  eintraege: AlertEintrag[];
  leerText?: string;
  spalten?: 1 | 2;
}) {
  const { zeigeToast } = useToast();
  const rang = { kritisch: 0, warnung: 1, hinweis: 2 } as const;
  const sortiert = [...eintraege].sort((a, b) => rang[a.art] - rang[b.art]);

  if (!sortiert.length) {
    return (
      <div className="flex h-full min-h-[180px] flex-col items-center justify-center gap-2 text-center">
        <FeatherCheckCircle className="text-[22px]" style={{ color: STATUS_FARBEN.positiv }} />
        <span className="text-[13px] text-text-neutral-tertiary">{leerText}</span>
      </div>
    );
  }

  return (
    // Container-Query statt Viewport: dieselbe Liste steht mal über die volle
    // Seitenbreite und mal in einer Drittelkarte. Der Viewport weiß davon nichts.
    <ul
      className={`@container ${
        spalten === 2 ? "grid grid-cols-1 gap-x-8 xl:grid-cols-2" : "flex flex-col"
      }`}
    >
      {sortiert.map((eintrag) => {
        const farbe =
          eintrag.art === "kritisch"
            ? STATUS_FARBEN.negativ
            : eintrag.art === "warnung"
              ? STATUS_FARBEN.warnung
              : STATUS_FARBEN.info;

        return (
          /**
           * Der Trennstrich sitzt oben, nicht unten.
           *
           * Unten liegend braucht er eine Ausnahme für die letzte Zeile — und
           * „die letzte Zeile" gibt es bei zwei Spalten zweimal, einmal je
           * Spalte, an einer Stelle, die von der Anzahl der Einträge abhängt.
           * Die rechte Spalte behielt dadurch einen Strich, unter dem nichts
           * mehr kam.
           *
           * Oben liegend ist die Ausnahme dagegen die *erste* Zeile jeder
           * Spalte, und die steht bei zeilenweisem Fluss immer an derselben
           * Stelle: die ersten beiden Kinder. Das gilt unabhängig davon, wie
           * viele Einträge die Liste hat.
           */
          <li
            key={eintrag.id}
            className={`border-t border-solid border-border-default first:border-t-0 ${
              spalten === 2 ? "xl:[&:nth-child(-n+2)]:border-t-0" : ""
            }`}
          >
            <button
              onClick={() =>
                zeigeToast(eintrag.aktion, `${eintrag.text} — Absprung folgt in der Umsetzung`)
              }
              /* -mx-2 und die zusätzliche Breite: Der Untergrund lief vorher
                 genau bis zum Pfeil und schnitt dort hart ab — bei zwei Spalten
                 besonders sichtbar, weil daneben 32 px Spaltenabstand ungefärbt
                 blieben. Jetzt greift er acht Pixel über den Inhalt hinaus und
                 hat runde Ecken; er liest sich als Fläche unter der Zeile statt
                 als Kasten um sie herum.

                 Der Trennstrich sitzt dafür an der Zeile und nicht mehr am
                 Knopf: Er soll die Zeilen trennen und nicht mitwandern. */
              className="group -mx-2 flex w-[calc(100%+1rem)] items-center gap-3 rounded-md px-2 py-3 text-left transition-colors duration-150 hover:bg-neutral-50"
            >
              <span className="flex-none" style={{ color: farbe }}>
                {eintrag.art === "hinweis" ? (
                  <FeatherInfo className="text-[16px]" />
                ) : (
                  <FeatherAlertTriangle className="text-[16px]" />
                )}
              </span>

              <span className="flex min-w-0 grow flex-col">
                <span className="min-w-0 break-words text-[13px] font-medium leading-snug text-text-neutral-primary">
                  {eintrag.text}
                </span>
                <span className="min-w-0 break-words text-[12px] leading-snug text-text-neutral-tertiary">
                  {eintrag.detail}
                </span>
              </span>

              {eintrag.betrag !== undefined ? (
                <span className="flex-none whitespace-nowrap text-[14px] font-semibold tabular-nums text-text-neutral-primary">
                  {formatEuro(eintrag.betrag)}
                </span>
              ) : null}

              {/* Schmale Karte: nur der Pfeil, die Handlung steht im Tooltip. */}
              <span
                title={eintrag.aktion}
                className="flex flex-none items-center justify-end gap-1 whitespace-nowrap text-[12px] font-medium text-text-neutral-tertiary group-hover:text-text-neutral-primary @md:w-[150px]"
              >
                <span className="hidden @md:inline">{eintrag.aktion}</span>
                <FeatherArrowRight className="text-[13px]" />
              </span>
            </button>
          </li>
        );
      })}
    </ul>
  );
}