betreuungs-cockpit/src/components/dokumente/metadaten-formular.tsx

'use client'

import { useActionState } from 'react'
import { useFormStatus } from 'react-dom'
import { AlertCircle, CheckCircle2, Loader2, Save } from 'lucide-react'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import { Select } from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'
import { Feld, Feldgruppe } from '@/components/feld'
import { ART_BESCHRIFTUNG, RICHTUNG_BESCHRIFTUNG } from '@/lib/dokumente/erkennung'
import {
  DOKUMENT_ARTEN,
  DOKUMENT_RICHTUNGEN,
  POSTEINGANG_BESCHRIFTUNG,
  POSTEINGANG_STUFEN,
} from '@/lib/validierung/dokumente'
import { dokumentSpeichern, type Aktionszustand } from '@/server/actions/dokumente'

export type MetadatenWerte = {
  id: string
  titel: string
  art: string
  richtung: string
  schreibenVom: string
  eingangAm: string
  versandAm: string
  absender: string
  empfaenger: string
  aktenzeichen: string
  ablageortPapier: string
  wiedervorlageAm: string
  ablaufAm: string
  posteingangStatus: string
  notizen: string
  tagIds: string[]
}

/**
 * Die Metadaten eines Dokuments.
 *
 * Das Feld, das hier am leichtesten uebersehen wird und trotzdem das
 * wichtigste ist: **der Ablageort des Originals**. Diese Anwendung ersetzt
 * den Leitz-Ordner nicht - sie sagt, in welchem er liegt. Wenn das Gericht
 * das Original sehen will, muss man es finden.
 */
export function MetadatenFormular({
  werte,
  tags,
  schreibrecht,
}: {
  werte: MetadatenWerte
  tags: { id: string; name: string }[]
  schreibrecht: boolean
}) {
  const [zustand, aktion] = useActionState<Aktionszustand, FormData>(dokumentSpeichern, {})

  return (
    <form action={aktion} className="space-y-6" noValidate>
      <input type="hidden" name="dokumentId" value={werte.id} />

      {zustand.fehler && (
        <Alert variant="fehler">
          <AlertCircle aria-hidden="true" />
          <AlertDescription>{zustand.fehler}</AlertDescription>
        </Alert>
      )}
      {zustand.hinweis && (
        <Alert variant="erfolg">
          <CheckCircle2 aria-hidden="true" />
          <AlertDescription>{zustand.hinweis}</AlertDescription>
        </Alert>
      )}

      <fieldset disabled={!schreibrecht} className="space-y-6">
        <Feldgruppe titel="Das Schreiben">
          <Feld
            id="titel"
            beschriftung="Titel"
            erklaerung="Woran erkennst du dieses Dokument in einem Jahr wieder?"
            fehler={zustand.felder?.titel}
            pflicht
            className="sm:col-span-2"
          >
            <Input name="titel" defaultValue={werte.titel} maxLength={200} required />
          </Feld>

          <Feld id="art" beschriftung="Art">
            <Select name="art" defaultValue={werte.art}>
              {DOKUMENT_ARTEN.map((art) => (
                <option key={art} value={art}>
                  {ART_BESCHRIFTUNG[art]}
                </option>
              ))}
            </Select>
          </Feld>

          <Feld id="richtung" beschriftung="Richtung">
            <Select name="richtung" defaultValue={werte.richtung}>
              {DOKUMENT_RICHTUNGEN.map((richtung) => (
                <option key={richtung} value={richtung}>
                  {RICHTUNG_BESCHRIFTUNG[richtung]}
                </option>
              ))}
            </Select>
          </Feld>

          <Feld id="absender" beschriftung="Absender" fehler={zustand.felder?.absender}>
            <Input name="absender" defaultValue={werte.absender} maxLength={200} />
          </Feld>

          <Feld id="empfaenger" beschriftung="Empfänger">
            <Input name="empfaenger" defaultValue={werte.empfaenger} maxLength={200} />
          </Feld>

          <Feld
            id="aktenzeichen"
            beschriftung="Aktenzeichen / Nummer"
            erklaerung="Gerichtsaktenzeichen, Kundennummer, Versicherungsschein-Nr. – was das Schreiben eben trägt."
          >
            <Input name="aktenzeichen" defaultValue={werte.aktenzeichen} maxLength={100} />
          </Feld>
        </Feldgruppe>

        <Feldgruppe
          titel="Daten"
          beschreibung="Für Rechtsbehelfsfristen zählt der Eingang, nicht das Datum auf dem Brief."
        >
          <Feld id="schreibenVom" beschriftung="Datum des Schreibens">
            <Input name="schreibenVom" type="date" defaultValue={werte.schreibenVom} />
          </Feld>

          <Feld
            id="eingangAm"
            beschriftung="Eingegangen am"
            fehler={zustand.felder?.eingangAm}
            erklaerung="Der Tag, an dem der Brief bei dir im Kasten lag."
          >
            <Input name="eingangAm" type="date" defaultValue={werte.eingangAm} />
          </Feld>

          <Feld id="versandAm" beschriftung="Versandt am" erklaerung="Nur bei ausgehender Post.">
            <Input name="versandAm" type="date" defaultValue={werte.versandAm} />
          </Feld>

          <Feld
            id="wiedervorlageAm"
            beschriftung="Wiedervorlage am"
            erklaerung="Wann willst du dieses Blatt wiedersehen?"
          >
            <Input name="wiedervorlageAm" type="date" defaultValue={werte.wiedervorlageAm} />
          </Feld>

          <Feld
            id="ablaufAm"
            beschriftung="Gültig bis"
            erklaerung="z. B. Ablauf des Betreuerausweises oder der Zuzahlungsbefreiung."
          >
            <Input name="ablaufAm" type="date" defaultValue={werte.ablaufAm} />
          </Feld>
        </Feldgruppe>

        <Feldgruppe titel="Ablage">
          <Feld
            id="ablageortPapier"
            beschriftung="Ablageort des Originals"
            erklaerung="Ordner und Register, in dem das Blatt in Papier liegt. Papier bleibt Papier – und das Gericht fragt danach."
            className="sm:col-span-2"
          >
            <Input
              name="ablageortPapier"
              defaultValue={werte.ablageortPapier}
              maxLength={150}
              placeholder="Ordner 2, Register Bezirk Oberfranken"
            />
          </Feld>

          <Feld id="posteingangStatus" beschriftung="Stand im Posteingang">
            <Select name="posteingangStatus" defaultValue={werte.posteingangStatus}>
              {POSTEINGANG_STUFEN.map((stufe) => (
                <option key={stufe} value={stufe}>
                  {POSTEINGANG_BESCHRIFTUNG[stufe]}
                </option>
              ))}
            </Select>
          </Feld>

          <Feld
            id="neueTags"
            beschriftung="Neue Schlagworte"
            erklaerung="Mit Komma getrennt, z. B. „Heimkosten, wichtig“."
          >
            <Input name="neueTags" maxLength={200} placeholder="Heimkosten, wichtig" />
          </Feld>

          {tags.length > 0 && (
            <fieldset className="sm:col-span-2">
              <legend className="mb-2 text-sm font-medium">Vorhandene Schlagworte</legend>
              <div className="flex flex-wrap gap-3">
                {tags.map((tag) => (
                  <label key={tag.id} className="flex min-h-11 items-center gap-2 text-sm">
                    <Checkbox
                      name="tagIds"
                      value={tag.id}
                      defaultChecked={werte.tagIds.includes(tag.id)}
                    />
                    {tag.name}
                  </label>
                ))}
              </div>
            </fieldset>
          )}

          <Feld
            id="notizen"
            beschriftung="Notizen"
            erklaerung="Werden verschlüsselt gespeichert."
            className="sm:col-span-2"
          >
            <Textarea name="notizen" defaultValue={werte.notizen} rows={4} maxLength={4000} />
          </Feld>
        </Feldgruppe>
      </fieldset>

      {schreibrecht && <SpeichernKnopf />}
    </form>
  )
}

function SpeichernKnopf() {
  const { pending } = useFormStatus()
  return (
    <Button type="submit" size="lg" disabled={pending}>
      {pending ? <Loader2 className="animate-spin" aria-hidden="true" /> : <Save aria-hidden="true" />}
      Speichern
    </Button>
  )
}