betreuungs-cockpit/src/components/finanzen/bausteine.tsx

import * as React from 'react'
import Link from 'next/link'
import { AlertTriangle, FileCheck, FileWarning, Paperclip } from 'lucide-react'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent } from '@/components/ui/card'
import { cn, formatCent } from '@/lib/utils'

/**
 * Kleine Bausteine, die in mehreren Finanzseiten vorkommen.
 *
 * Alle rein darstellend und ohne Zustand - sie laufen deshalb sowohl in
 * Server- als auch in Client-Komponenten. Betraege kommen hier immer als
 * Number in Cent an; die Umwandlung aus BigInt passiert vorher mit
 * centZuZahl().
 */

/**
 * Ein Geldbetrag. Ausgaben werden mit Minuszeichen UND in gedeckter
 * Farbe gezeigt - die Farbe allein waere fuer farbfehlsichtige Nutzer
 * keine Information.
 */
export function Betrag({
  cent,
  richtung,
  fett,
  className,
}: {
  cent: number | null
  richtung?: 'EINNAHME' | 'AUSGABE' | 'UMBUCHUNG'
  fett?: boolean
  className?: string
}) {
  if (cent === null) {
    return <span className={cn('tabular-nums text-muted-foreground', className)}>nicht erfasst</span>
  }

  const vorzeichenbehaftet = richtung === 'AUSGABE' ? -Math.abs(cent) : cent
  const negativ = vorzeichenbehaftet < 0

  return (
    <span
      className={cn(
        'tabular-nums',
        fett && 'font-semibold',
        negativ ? 'text-ampel-rot' : undefined,
        className,
      )}
    >
      {formatCent(vorzeichenbehaftet)}
    </span>
  )
}

/** Kachel mit einer Zahl und einer Erklärung, was sie bedeutet. */
export function Kennzahl({
  titel,
  wert,
  hinweis,
  ton = 'neutral',
  href,
}: {
  titel: string
  wert: React.ReactNode
  hinweis?: React.ReactNode
  ton?: 'neutral' | 'gut' | 'achtung' | 'schlecht'
  href?: string
}) {
  const rahmen =
    ton === 'gut'
      ? 'border-ampel-gruen/40'
      : ton === 'achtung'
        ? 'border-ampel-orange/50'
        : ton === 'schlecht'
          ? 'border-ampel-rot/50'
          : undefined

  const inhalt = (
    <CardContent className="space-y-1 p-4">
      <p className="text-sm font-medium text-muted-foreground">{titel}</p>
      <p className="text-2xl font-semibold tabular-nums">{wert}</p>
      {hinweis && <p className="text-sm text-muted-foreground">{hinweis}</p>}
    </CardContent>
  )

  if (href) {
    return (
      <Card className={cn('transition-colors hover:bg-accent/40', rahmen)}>
        <Link href={href} className="block focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring">
          {inhalt}
        </Link>
      </Card>
    )
  }

  return <Card className={rahmen}>{inhalt}</Card>
}

/**
 * Belegzustand einer Buchung. Der Belegzwang verbietet nichts - er macht
 * sichtbar. Eine Buchung ohne Beleg und ohne Begruendung ist die, nach
 * der beim Rechtspfleger gefragt wird.
 */
export function Belegzeichen({
  belegTitel,
  begruendung,
  belegId,
  vertragBezeichnung = null,
  vertragAutomatisch = false,
  betragZuPruefen = false,
}: {
  belegId: string | null
  belegTitel: string | null
  begruendung: string | null
  /** Dauerzahlung: gesetzt, wenn der Vertrag als Beleg gilt. */
  vertragBezeichnung?: string | null
  /** Beim Import automatisch zugeordnet - eine Vermutung, kein Urteil. */
  vertragAutomatisch?: boolean
  /** Zugeordnet, aber der Betrag weicht ab. */
  betragZuPruefen?: boolean
}) {
  if (belegId) {
    return (
      <span className="inline-flex items-center gap-1 text-sm text-muted-foreground">
        <Paperclip className="size-3.5 shrink-0" aria-hidden="true" />
        <span className="truncate">{belegTitel ?? 'Beleg hinterlegt'}</span>
      </span>
    )
  }

  // Zugeordnet, aber der Betrag passt nicht. Steht vor allem anderen: Das
  // ist der Fall, den jemand ansehen soll.
  if (betragZuPruefen) {
    return (
      <Badge
        variant="rot"
        title="Der Betrag weicht deutlich vom hinterlegten Beitrag ab. Meist eine Beitragsanpassung, die am Vertrag noch fehlt."
      >
        <AlertTriangle className="size-3.5" aria-hidden="true" />
        Betrag prüfen
      </Badge>
    )
  }

  if (vertragBezeichnung) {
    return (
      <Badge
        variant="gruen"
        title={
          vertragAutomatisch
            ? `Beim Import automatisch dem Vertrag „${vertragBezeichnung}“ zugeordnet. Bitte einmal durchsehen.`
            : `Dauerzahlung zu Vertrag „${vertragBezeichnung}“.`
        }
      >
        <FileCheck className="size-3.5" aria-hidden="true" />
        {vertragAutomatisch ? 'Vertrag (automatisch)' : 'durch Vertrag belegt'}
      </Badge>
    )
  }

  if (begruendung && begruendung.trim() !== '') {
    return (
      <Badge variant="gelb" title={begruendung}>
        <FileWarning className="size-3.5" aria-hidden="true" />
        Beleg begründet fehlend
      </Badge>
    )
  }

  return (
    <Badge variant="rot">
      <AlertTriangle className="size-3.5" aria-hidden="true" />
      Beleg fehlt
    </Badge>
  )
}

/**
 * Die Warnung, um die es bei der Trennung der Vermoegensmassen geht:
 * eine Buchung auf einem Konto des Betreuers, die trotzdem als Vermoegen
 * der betreuten Person gefuehrt wird.
 */
export function Vermischungswarnung({ kurz = false }: { kurz?: boolean }) {
  if (kurz) {
    return (
      <Badge variant="rot">
        <AlertTriangle className="size-3.5" aria-hidden="true" />
        Vermögen vermischt
      </Badge>
    )
  }

  return (
    <div className="flex items-start gap-2.5 rounded-md border border-ampel-rot/50 bg-ampel-rot/10 p-3">
      <AlertTriangle className="mt-0.5 size-4 shrink-0 text-ampel-rot" aria-hidden="true" />
      <div className="space-y-1 text-sm">
        <p className="font-medium">Vorsicht: hier vermischen sich zwei Vermögen.</p>
        <p className="text-muted-foreground">
          Die Buchung läuft über ein Konto, das als <strong>Konto des Betreuers</strong> markiert
          ist, gilt aber als Vermögen der betreuten Person. Genau das fällt einem in der
          Rechnungslegung um die Ohren. Entweder ist das Konto falsch markiert, oder es ist eine
          eigene Auslage – dann bitte den Haken bei „betrifft das Vermögen der betreuten Person“
          entfernen.
        </p>
      </div>
    </div>
  )
}

/** Zeile in einer Bestands- oder Summenaufstellung. */
export function Summenzeile({
  beschriftung,
  cent,
  betont,
}: {
  beschriftung: React.ReactNode
  cent: number
  betont?: boolean
}) {
  return (
    <div
      className={cn(
        'flex items-baseline justify-between gap-4 border-t py-2',
        betont && 'border-foreground/40 font-semibold',
      )}
    >
      <span>{beschriftung}</span>
      <Betrag cent={cent} fett={betont} />
    </div>
  )
}

/** Hinweise aus einer Berechnung - Lücken werden benannt, nicht versteckt. */
export function Hinweisliste({ hinweise, titel }: { hinweise: string[]; titel?: string }) {
  if (hinweise.length === 0) return null
  return (
    <div className="rounded-md border border-ampel-orange/50 bg-ampel-orange/10 p-3">
      <p className="mb-1.5 text-sm font-medium">{titel ?? 'Das solltest du vor der Abgabe klären'}</p>
      <ul className="list-disc space-y-1 pl-5 text-sm text-muted-foreground">
        {hinweise.map((hinweis, i) => (
          <li key={i}>{hinweis}</li>
        ))}
      </ul>
    </div>
  )
}