alpenwerk-hr/components/orgchart/PrintChart.tsx

"use client";

import { ChevronRight, Printer } from "lucide-react";
import Link from "next/link";
import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
import { Button } from "@/components/ui/Button";
import { fmtDate } from "@/lib/format";
import type { PrintModel, PrintPerson, PrintUnit } from "@/lib/orgchart-print";

// Auswahl, dann Vorschau, dann Papier.
//
// Drei Entscheidungen prägen das hier:
//
// **Erstens wird gefragt, bevor gedruckt wird.** Ein Organigramm mit 810
// Personen auf Papier ist fast nie das, was jemand braucht — meist geht es um
// einen Bereich, oder um die oberen zwei Ebenen für eine Besprechung. Wer
// alles bekommt, druckt vierzig Blätter und wirft achtunddreissig weg.
//
// **Zweitens wird hierarchisch gezeichnet, nicht aufgelistet.** Kästen mit
// Verbindungslinien zeigen die Über- und Unterordnung; eine Spaltenliste
// zeigt sie nicht, egal wie sauber sie gesetzt ist. Die Linien entstehen aus
// Rahmen von Pseudo-Elementen — damit sind sie im PDF Vektoren und bleiben
// beim Hineinzoomen scharf.
//
// **Drittens breitet sich nur eine Ebene waagrecht aus.** Ein Baum, der auf
// jeder Stufe in die Breite geht, wächst exponentiell: sechs Bereiche mit je
// drei Abteilungen sind achtzehn Kästen nebeneinander, und quer über ein A4
// bleiben davon zwei Millimeter je Kasten — die erste Fassung lief genau
// deshalb über den Blattrand hinaus. Jetzt stehen die Bereiche in einer
// Reihe, und alles darunter hängt längs an einer Linie: die Breite ist die
// Zahl der Bereiche, unabhängig von der Tiefe. Was dann immer noch übersteht,
// wird als Ganzes so weit verkleinert, bis es aufs Blatt passt.

type Tiefe = "bereich" | "abteilung" | "team" | "personen";

const TIEFEN: { wert: Tiefe; label: string; hinweis: string }[] = [
  { wert: "bereich", label: "Bereiche", hinweis: "Gesellschaft und Bereiche — ein Blatt" },
  { wert: "abteilung", label: "bis Abteilung", hinweis: "eine Ebene tiefer, noch immer ein Blatt" },
  { wert: "team", label: "bis Team", hinweis: "je Bereich ein Blatt, ohne Namen" },
  { wert: "personen", label: "mit Personen", hinweis: "je Abteilung ein Blatt, mit allen Namen" },
];

type Format = "a4" | "a3";
// Die Satzfläche ist die Blattgrösse abzüglich der Ränder aus @page, ein
// wenig knapper gerechnet. Die Vorschau bekommt genau diese Masse fest
// zugewiesen — dadurch ist das, was am Bildschirm zu sehen ist, dasselbe, was
// aufs Papier passt, und nicht bloss ungefähr.
const FORMATE: Record<Format, { label: string; css: string; blatt: string; satzBreite: string; satzHoehe: string }> = {
  a4: { label: "A4 quer", css: "A4 landscape", blatt: "297mm", satzBreite: "268mm", satzHoehe: "182mm" },
  a3: { label: "A3 quer", css: "A3 landscape", blatt: "420mm", satzBreite: "390mm", satzHoehe: "269mm" },
};

/** Unter diesem Massstab wird es auf A4 mühsam — dann lieber A3. */
const LESBAR = 0.55;

type Seite = {
  key: string;
  titel: string;
  unterzeile: string;
  wurzel: PrintUnit;
  /** Nur auf der Übersicht: die gewählten Bereiche statt aller Kinder. */
  kinder?: PrintUnit[];
  /** Wie viele Ebenen unter der Wurzel gezeichnet werden. */
  ebenen: number;
  mitPersonen: boolean;
};

function seitenBauen(model: PrintModel, bereiche: PrintUnit[], tiefe: Tiefe, asOf: string): Seite[] {
  const stand = `Stand ${fmtDate(asOf)}`;
  const seiten: Seite[] = [];

  if (model.root) {
    seiten.push({
      key: "uebersicht",
      titel: model.root.name,
      unterzeile: `Organigramm · ${stand} · ${model.totals.people} Personen`,
      wurzel: model.root,
      kinder: bereiche,
      // Bei „bis Abteilung" ist die Übersicht das ganze Ergebnis. Sonst folgen
      // Detailblätter, und dann bleibt sie eine reine Bereichsübersicht.
      ebenen: tiefe === "abteilung" ? 2 : 1,
      mitPersonen: false,
    });
  }

  if (tiefe === "team") {
    for (const b of bereiche) {
      seiten.push({
        key: b.id,
        titel: b.name,
        unterzeile: `${b.totalPeople} Personen · ${stand}`,
        wurzel: b,
        ebenen: 2,
        mitPersonen: false,
      });
    }
  }

  if (tiefe === "personen") {
    for (const b of bereiche) {
      // Wer unmittelbar im Bereich sitzt, hätte sonst kein Blatt — die
      // Leitung steht auf der Übersicht, die übrigen nirgends.
      if (b.members.length > 0) {
        seiten.push({
          key: `${b.id}-direkt`,
          titel: b.name,
          unterzeile: `Bereichsleitung und Stab · ${stand}`,
          wurzel: b,
          ebenen: 0,
          mitPersonen: true,
        });
      }
      for (const a of b.children) {
        seiten.push({
          key: a.id,
          titel: `${b.name} · ${a.name}`,
          unterzeile: `${a.totalPeople} Personen · ${stand}`,
          wurzel: a,
          ebenen: 1,
          mitPersonen: true,
        });
      }
    }
  }

  return seiten;
}

export function PrintChart({ model, asOf, today }: { model: PrintModel; asOf: string; today: string }) {
  const [format, setFormat] = useState<Format>("a4");
  const [tiefe, setTiefe] = useState<Tiefe>("team");
  const [gewaehlt, setGewaehlt] = useState<Set<string>>(() => new Set(model.divisions.map((d) => d.id)));
  const [schritt, setSchritt] = useState<"auswahl" | "vorschau">("auswahl");

  const bereiche = useMemo(() => model.divisions.filter((d) => gewaehlt.has(d.id)), [model.divisions, gewaehlt]);
  const seiten = useMemo(() => seitenBauen(model, bereiche, tiefe, asOf), [model, bereiche, tiefe, asOf]);

  // Der kleinste Massstab aller Blätter — daran hängt der Hinweis auf A3.
  //
  // Die gemeldeten Werte tragen die Auswahl mit, für die sie gemessen wurden:
  // ändert sie sich, sind die alten Werte nicht mehr gültig und werden
  // verworfen, sobald das erste Blatt der neuen Auswahl meldet. Das erspart
  // einen Effekt, der beim Wechsel aufräumt — und damit eine Renderrunde,
  // in der noch der Hinweis der vorherigen Auswahl stünde.
  const signatur = `${format}|${tiefe}|${[...gewaehlt].sort().join(",")}`;
  const [gemessen, setGemessen] = useState<{ signatur: string; werte: Record<string, number> }>({ signatur, werte: {} });
  const meldeMassstab = useCallback(
    (key: string, faktor: number) => {
      setGemessen((prev) => {
        // Unverändert heisst unverändert: denselben Zustand zurückgeben, nicht
        // ein gleich aussehendes neues Objekt. Ein neues Objekt zählt für React
        // als Änderung und löst ein Rendern aus — und da das Rendern die
        // Messung anstösst, die wieder hier landet, dreht sich das ohne Ende.
        // Genau daran ist die Vorschau eingefroren.
        if (prev.signatur === signatur && prev.werte[key] === faktor) return prev;
        return prev.signatur === signatur
          ? { signatur, werte: { ...prev.werte, [key]: faktor } }
          : { signatur, werte: { [key]: faktor } };
      });
    },
    [signatur]
  );
  const engste = Math.min(1, ...Object.values(gemessen.signatur === signatur ? gemessen.werte : {}));

  function umschalten(id: string) {
    setGewaehlt((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  }

  return (
    <div className="flex flex-col gap-6">
      <style>{`
        @page { size: ${FORMATE[format].css}; margin: 12mm 14mm 14mm; }
        @media print {
          html, body { background: #fff; }
          .nur-bildschirm { display: none !important; }
          .blatt {
            box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
            margin: 0 !important; width: auto !important; padding: 0 !important;
            break-after: page;
          }
          .blatt:last-child { break-after: auto; }
          /* Die Satzfläche behält ihre Masse — der Massstab wurde für genau
             diese berechnet. Nur der Rand fällt weg, den setzt @page. */
          .satz { margin: 0 !important; }
        }

        /* Eine Reihe: waagrechte Geschwister mit Winkeln nach oben. Das erste
           und das letzte Kind lassen ihre Aussenseite weg — zusammen ergibt
           das eine durchgehende Querlinie ohne ein einziges Hilfselement. */
        ul.reihe {
          position: relative; display: flex; justify-content: center;
          list-style: none; margin: 0; padding: 18px 0 0;
        }
        ul.reihe::before {
          content: ""; position: absolute; top: 0; left: 50%;
          height: 18px; border-left: 1px solid var(--color-border);
        }
        ul.reihe > li { position: relative; width: var(--spalte); padding: 18px 6px 0; }
        ul.reihe > li::before, ul.reihe > li::after {
          content: ""; position: absolute; top: 0; width: 50%; height: 18px;
          border-top: 1px solid var(--color-border);
        }
        ul.reihe > li::before { right: 50%; }
        ul.reihe > li::after { left: 50%; border-left: 1px solid var(--color-border); }
        ul.reihe > li:first-child::before { border-top: 0; }
        ul.reihe > li:last-child::after { border-top: 0; }

        /* Ein Stapel: längs an einer Linie, mit Winkel in jeden Kasten. Kostet
           Höhe statt Breite — und Höhe ist auf einem Querformat übrig. */
        ul.stapel { list-style: none; margin: 0; padding: 0; text-align: left; }
        ul.stapel > li { position: relative; padding: 8px 0 0 20px; }
        ul.stapel > li::before {
          content: ""; position: absolute; left: 9px; top: 0; bottom: 0;
          border-left: 1px solid var(--color-border);
        }
        ul.stapel > li:last-child::before { bottom: auto; height: 22px; }
        ul.stapel > li::after {
          content: ""; position: absolute; left: 9px; top: 22px; width: 11px;
          border-top: 1px solid var(--color-border);
        }
      `}</style>

      {/* ── Auswahl ─────────────────────────────────────────── */}
      <section className="nur-bildschirm rounded border border-border bg-white p-5">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div>
            <h2 className="text-sm font-bold text-ink">Was soll aufs Papier?</h2>
            <p className="mt-0.5 max-w-prose text-sm text-ink-muted">
              Das vollständige Organigramm sind {model.totals.people} Personen. Gedruckt wird selten alles — hier steht,
              wie tief und welche Bereiche.
            </p>
          </div>
          <p className="whitespace-nowrap text-sm text-ink-muted">
            Stand {fmtDate(asOf)}
            {asOf !== today && " · abweichender Stichtag"}
          </p>
        </div>

        <div className="mt-5">
          <p className="mb-2 text-xs font-bold uppercase tracking-wide text-ink-muted">Tiefe</p>
          <div className="flex flex-wrap gap-2">
            {TIEFEN.map((t) => (
              <button
                key={t.wert}
                type="button"
                onClick={() => setTiefe(t.wert)}
                aria-pressed={tiefe === t.wert}
                className={`rounded-md border px-3 py-2 text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 ${
                  tiefe === t.wert ? "border-brand-500 bg-brand-50" : "border-border hover:bg-surface"
                }`}
              >
                <span className="block text-sm font-semibold text-ink">{t.label}</span>
                <span className="block text-xs text-ink-muted">{t.hinweis}</span>
              </button>
            ))}
          </div>
        </div>

        <div className="mt-5">
          <div className="mb-2 flex items-center justify-between">
            <p className="text-xs font-bold uppercase tracking-wide text-ink-muted">
              Bereiche ({gewaehlt.size} von {model.divisions.length})
            </p>
            <div className="flex gap-3 text-xs">
              <button
                type="button"
                onClick={() => setGewaehlt(new Set(model.divisions.map((d) => d.id)))}
                className="rounded font-semibold text-brand-700 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
              >
                Alle
              </button>
              <button
                type="button"
                onClick={() => setGewaehlt(new Set())}
                className="rounded font-semibold text-brand-700 hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
              >
                Keine
              </button>
            </div>
          </div>
          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-3">
            {model.divisions.map((d) => (
              <label
                key={d.id}
                className={`flex cursor-pointer items-start gap-2 rounded-md border px-3 py-2 ${
                  gewaehlt.has(d.id) ? "border-brand-500 bg-brand-50" : "border-border"
                }`}
              >
                <input
                  type="checkbox"
                  checked={gewaehlt.has(d.id)}
                  onChange={() => umschalten(d.id)}
                  className="mt-0.5 h-4 w-4 rounded border-border text-brand-600"
                />
                <span>
                  <span className="block text-sm font-semibold text-ink">{d.name}</span>
                  <span className="block text-xs text-ink-muted">
                    {d.totalPeople} Personen · {d.children.length} Abteilungen
                  </span>
                </span>
              </label>
            ))}
          </div>
        </div>

        <div className="mt-5 flex flex-wrap items-center justify-between gap-3 border-t border-border-subtle pt-4">
          <p className="text-sm text-ink-muted">
            {gewaehlt.size === 0 ? (
              <span className="text-danger-text">Kein Bereich gewählt — es bliebe nur die Übersicht.</span>
            ) : (
              <>
                Ergibt <strong className="text-ink">{seiten.length}</strong> {seiten.length === 1 ? "Seite" : "Seiten"}
              </>
            )}
          </p>
          <div className="flex items-center gap-3">
            <Link
              href="/orgchart"
              className="rounded-md border border-border px-3 py-2 text-sm font-semibold text-ink hover:bg-brand-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500"
            >
              Zurück
            </Link>
            <Button onClick={() => setSchritt("vorschau")}>
              Vorschau <ChevronRight className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </section>

      {schritt === "vorschau" && (
        <>
          <div className="nur-bildschirm flex flex-wrap items-center justify-between gap-3">
            <p className="text-sm text-ink-muted">
              {seiten.length} {seiten.length === 1 ? "Seite" : "Seiten"} · so kommt es aus dem Drucker
            </p>
            <div className="flex items-center gap-3">
              <div className="flex rounded-md border border-border p-0.5">
                {(Object.keys(FORMATE) as Format[]).map((f) => (
                  <button
                    key={f}
                    type="button"
                    onClick={() => setFormat(f)}
                    aria-pressed={format === f}
                    className={`rounded px-3 py-1.5 text-xs font-semibold focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-500 ${
                      format === f ? "bg-brand-500 text-white" : "text-ink-muted hover:bg-surface"
                    }`}
                  >
                    {FORMATE[f].label}
                  </button>
                ))}
              </div>
              <Button onClick={() => window.print()}>
                <Printer className="h-4 w-4" />
                Als PDF speichern
              </Button>
            </div>
          </div>

          {format === "a4" && engste < LESBAR && (
            <p className="nur-bildschirm rounded border border-warning-text/30 bg-warning-bg px-3 py-2 text-sm text-warning-text">
              Ein Blatt musste auf {Math.round(engste * 100)} % verkleinert werden, damit es passt — auf A4 kaum noch
              lesbar. A3 wählen oder weniger Bereiche.
            </p>
          )}

          <p className="nur-bildschirm max-w-prose text-xs leading-relaxed text-ink-muted">
            Im Druckdialog &bdquo;Als PDF speichern&ldquo; wählen. Hintergrundgrafiken müssen dort eingeschaltet sein,
            sonst fehlen die farbigen Kopfzeilen &mdash; in Chrome unter &bdquo;Weitere Einstellungen&ldquo;.
          </p>

          <div className="flex flex-col items-center gap-8">
            {seiten.map((seite, i) => (
              <Blatt key={seite.key} format={format}>
                <Kopf
                  titel={seite.titel}
                  unterzeile={seite.unterzeile}
                  seite={i === 0 ? "Übersicht" : `Seite ${i + 1} von ${seiten.length}`}
                />
                <Skaliert kennung={`${seite.key}|${format}|${tiefe}`} onFaktor={(f) => meldeMassstab(seite.key, f)}>
                  <Chart seite={seite} />
                </Skaliert>
              </Blatt>
            ))}
          </div>
        </>
      )}
    </div>
  );
}

function Blatt({ children, format }: { children: React.ReactNode; format: Format }) {
  const { blatt, satzBreite, satzHoehe } = FORMATE[format];
  return (
    <div className="blatt rounded border border-border bg-white shadow-[var(--shadow-card)]" style={{ width: blatt }}>
      <div className="satz flex flex-col" style={{ width: satzBreite, height: satzHoehe, margin: "12mm 14mm 14mm" }}>
        {children}
      </div>
    </div>
  );
}

function Kopf({ titel, unterzeile, seite }: { titel: string; unterzeile: string; seite: string }) {
  return (
    <header className="mb-5 flex shrink-0 items-end justify-between border-b-2 border-brand-500 pb-2">
      <div>
        <h1 className="text-lg font-extrabold tracking-tight text-ink">{titel}</h1>
        <p className="mt-0.5 text-xs text-ink-muted">{unterzeile}</p>
      </div>
      <p className="whitespace-nowrap text-xs font-semibold text-ink-muted">{seite}</p>
    </header>
  );
}

/**
 * Verkleinert den Inhalt so weit, dass er in die Satzfläche passt.
 *
 * Ein Organigramm hat keine Grösse, die man vorher kennt — sie hängt daran,
 * wie viele Bereiche jemand angehakt hat und wie tief. Statt zu raten wird
 * gemessen: die natürliche Grösse steht im Layout, die verfügbare auch, und
 * `transform: scale` ändert nur die Darstellung, nicht das Layout. Damit ist
 * die Messung stabil und läuft nicht gegen sich selbst.
 */
function Skaliert({
  kennung,
  onFaktor,
  children,
}: {
  kennung: string;
  onFaktor: (faktor: number) => void;
  children: React.ReactNode;
}) {
  const rahmen = useRef<HTMLDivElement>(null);
  const inhalt = useRef<HTMLDivElement>(null);
  const [faktor, setFaktor] = useState(1);
  const [versatz, setVersatz] = useState(0);

  // Die Meldefunktion wird beim Aufruf frisch erzeugt und ist daher bei jedem
  // Rendern eine andere. Stünde sie in den Abhängigkeiten, liefe der Effekt
  // nach jedem Rendern erneut — samt Messung, die das nächste Rendern
  // auslöst. Über eine Referenz bleibt der aktuelle Stand erreichbar, ohne
  // dass der Effekt daran hängt.
  const melden = useRef(onFaktor);
  useEffect(() => {
    melden.current = onFaktor;
  });

  useLayoutEffect(() => {
    const aussen = rahmen.current;
    const innen = inhalt.current;
    if (!aussen || !innen) return;

    function messen() {
      if (!aussen || !innen) return;
      const breite = aussen.clientWidth;
      const hoehe = aussen.clientHeight;
      const noetigeBreite = innen.offsetWidth;
      const noetigeHoehe = innen.offsetHeight;
      if (!breite || !hoehe || !noetigeBreite || !noetigeHoehe) return;
      const f = Math.min(1, breite / noetigeBreite, hoehe / noetigeHoehe);
      setFaktor(f);
      // Waagrecht mittig: die Verkleinerung geht von links oben aus, sonst
      // klebt ein schmales Diagramm am linken Blattrand.
      setVersatz(Math.max(0, (breite - noetigeBreite * f) / 2));
      melden.current(f);
    }

    messen();
    // Schriften kommen nach dem ersten Layout — bis dahin sind alle Kästen in
    // der Ersatzschrift gesetzt und damit anders breit.
    void document.fonts?.ready.then(messen);
    const beobachter = new ResizeObserver(messen);
    beobachter.observe(aussen);
    return () => beobachter.disconnect();
  }, [kennung]);

  return (
    <div ref={rahmen} className="min-h-0 flex-1 overflow-hidden">
      <div
        ref={inhalt}
        style={{
          width: "max-content",
          transform: `scale(${faktor})`,
          transformOrigin: "top left",
          marginLeft: versatz,
        }}
      >
        {children}
      </div>
    </div>
  );
}

function Chart({ seite }: { seite: Seite }) {
  const kinder = seite.kinder ?? seite.wurzel.children;
  const zeigeKinder = seite.ebenen > 0 && kinder.length > 0;

  return (
    // Feste Spaltenbreite: dadurch sitzt jeder Kasten mittig unter seiner
    // Verbindungslinie, und die Gesamtbreite ist die Zahl der Spalten mal
    // dieser Breite — berechenbar, statt vom längsten Namen abzuhängen.
    <div className="inline-block text-center" style={{ ["--spalte" as string]: "13rem" }}>
      <div className="mx-auto w-[15rem]">
        <Kasten unit={seite.wurzel} mitPersonen={seite.mitPersonen} />
      </div>
      {zeigeKinder && (
        <ul className="reihe">
          {kinder.map((k) => (
            <li key={k.id}>
              <Kasten unit={k} mitPersonen={seite.mitPersonen} />
              <Stapel units={k.children} ebenen={seite.ebenen - 1} mitPersonen={seite.mitPersonen} />
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

function Stapel({ units, ebenen, mitPersonen }: { units: PrintUnit[]; ebenen: number; mitPersonen: boolean }) {
  if (ebenen <= 0 || units.length === 0) return null;
  return (
    <ul className="stapel">
      {units.map((u) => (
        <li key={u.id}>
          <Kasten unit={u} mitPersonen={mitPersonen} />
          <Stapel units={u.children} ebenen={ebenen - 1} mitPersonen={mitPersonen} />
        </li>
      ))}
    </ul>
  );
}

const KOPFFARBE: Record<PrintUnit["unitType"], string> = {
  // Nach unten hin blasser: so bleibt die Rangfolge auch auf dem
  // Schwarzweissdrucker sichtbar, auf dem die meisten Ausdrucke landen.
  // Vier Stufen einer Farbe statt drei plus der Seitenflaeche: so ist es
  // eine Reihe und nicht eine Reihe mit einem Fremdkoerper am Ende.
  Gesellschaft: "bg-brand-500 text-white",
  Bereich: "bg-brand-200 text-ink",
  Abteilung: "bg-brand-100 text-ink",
  Team: "bg-brand-50 text-ink",
};

function Kasten({ unit, mitPersonen }: { unit: PrintUnit; mitPersonen: boolean }) {
  const offen = unit.vacancies.filter((v) => !v.isChief);
  // Lange Namenslisten in zwei Spalten: sonst wächst der Kasten in die Höhe,
  // und die Höhe ist es, die den Massstab drückt.
  const zweispaltig = mitPersonen && unit.members.length > 8;

  return (
    <div className="w-full overflow-hidden rounded border border-border text-left">
      <div className={`px-2 py-1 ${KOPFFARBE[unit.unitType]}`}>
        <p className="text-[11px] font-bold leading-tight">{unit.name}</p>
        <p
          className={`text-[9px] uppercase tracking-wide ${
            unit.unitType === "Gesellschaft" ? "text-white/75" : "text-ink-muted"
          }`}
        >
          {unit.unitType} · {unit.totalPeople}
        </p>
      </div>

      <div className="px-2 py-1">
        {unit.chief ? (
          <PersonZeile p={unit.chief} leitung />
        ) : (
          <p className="text-[10px] italic text-ink-muted">Leitung unbesetzt</p>
        )}

        {mitPersonen && unit.members.length > 0 && (
          <div className={`mt-1 border-t border-border-subtle pt-1 ${zweispaltig ? "columns-2 gap-2" : ""}`}>
            {unit.members.map((p) => (
              <div key={p.id} className="break-inside-avoid">
                <PersonZeile p={p} />
              </div>
            ))}
          </div>
        )}

        {mitPersonen &&
          offen.map((v) => (
            <p key={v.positionNumber} className="text-[10px] italic text-ink-muted">
              offen · {v.jobTitle}
            </p>
          ))}

        {!mitPersonen && unit.members.length > 0 && (
          <p className="text-[10px] text-ink-muted">
            {unit.members.length} {unit.members.length === 1 ? "Person" : "Personen"}
          </p>
        )}
      </div>
    </div>
  );
}

function PersonZeile({ p, leitung }: { p: PrintPerson; leitung?: boolean }) {
  return (
    <p className="text-[10px] leading-tight">
      <span className={leitung ? "font-bold text-ink" : "text-ink"}>{p.name}</span>
      {p.absent && <span className="text-ink-muted"> · abwesend</span>}
      <br />
      <span className="text-ink-muted">{p.jobTitle}</span>
    </p>
  );
}