AfiS-Aktensystem/web/app/(app)/abteilungen/[key]/DepartmentEntries.tsx

'use client'

import { useState, useTransition } from 'react'
import { uuidv7 } from '@/lib/uuidv7'
import { departmentEntryText, departmentText } from '@/lib/i18n/departments'
import { commonText } from '@/lib/i18n/common'
import { createEntryAction, editEntryAction, retractEntryAction } from './actions'

export type EntryView = {
  id: string
  body: string
  minClearance: number
  authorId: string
  authorName: string
  createdAt: string
  version: number
  editedAt: string | null
  retractedAt: string | null
  retractedByName: string | null
  retractionReason: string | null
}

/**
 * Die Vermerke einer Abteilung.
 *
 * Dieselbe Zusicherung wie im Verlauf einer Akte, und sie steht auch so da:
 * ein geänderter Vermerk trägt seine Fassungsnummer, ein zurückgezogener
 * bleibt als Grabstein mit Grund und Namen stehen. Nichts verschwindet.
 */
export function DepartmentEntries({
  departmentKey,
  entries,
  currentUserId,
  canWrite,
  canRetract,
  canEditAny,
  canEditOwn,
  levels,
}: {
  departmentKey: string
  entries: EntryView[]
  currentUserId: string
  canWrite: boolean
  canRetract: boolean
  canEditAny: boolean
  canEditOwn: boolean
  levels: { level: number; name: string }[]
}) {
  const [liste, setListe] = useState(entries)
  const [text, setText] = useState('')
  const [stufe, setStufe] = useState(0)
  const [fehler, setFehler] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  function schreiben() {
    const inhalt = text.trim()
    if (!inhalt) return

    const id = uuidv7()
    setFehler(null)

    startTransition(async () => {
      const ergebnis = await createEntryAction({
        id,
        departmentKey,
        body: inhalt,
        minClearance: stufe,
      })
      if (!ergebnis.ok) {
        setFehler(ergebnis.error)
        return
      }
      setListe((bisher) => [
        {
          id,
          body: inhalt,
          minClearance: stufe,
          authorId: currentUserId,
          authorName: '',
          createdAt: new Date().toISOString(),
          version: 1,
          editedAt: null,
          retractedAt: null,
          retractedByName: null,
          retractionReason: null,
        },
        ...bisher,
      ])
      setText('')
    })
  }

  return (
    <div>
      {canWrite ? (
        <div className="mb-8 border border-line p-4">
          <label className="block">
            <span className="font-condensed text-2xs text-text-dim">
              {departmentEntryText.body}
            </span>
            <textarea
              value={text}
              onChange={(event) => setText(event.target.value)}
              rows={3}
              className="field mt-1.5 w-full"
            />
          </label>

          <div className="mt-3 flex flex-wrap items-center gap-4">
            <label className="flex items-center gap-2 text-2xs text-text-dim">
              {departmentEntryText.minClearance}
              <select
                value={stufe}
                onChange={(event) => setStufe(Number(event.target.value))}
                className="field"
              >
                {levels.map((level) => (
                  <option key={level.level} value={level.level}>
                    {level.level} · {level.name}
                  </option>
                ))}
              </select>
            </label>

            <button
              type="button"
              onClick={schreiben}
              disabled={pending || text.trim().length === 0}
              aria-busy={pending}
              className="btn btn-primary"
            >
              {pending ? departmentEntryText.saving : departmentEntryText.save}
            </button>
            {fehler ? <span className="font-condensed text-2xs text-stamp-4">{fehler}</span> : null}
          </div>

          <p className="mt-3 text-2xs text-text-dim">{departmentEntryText.hint}</p>
        </div>
      ) : null}

      {liste.length === 0 ? <p className="text-text-dim">{departmentText.entriesEmpty}</p> : null}

      <ul className="timeline space-y-6">
        {liste.map((vermerk) => (
          <Vermerk
            key={vermerk.id}
            vermerk={vermerk}
            departmentKey={departmentKey}
            canEdit={
              canEditAny || (canEditOwn && vermerk.authorId === currentUserId)
            }
            canRetract={canRetract}
            onChange={(neu) =>
              setListe((bisher) => bisher.map((v) => (v.id === neu.id ? neu : v)))
            }
          />
        ))}
      </ul>
    </div>
  )
}

function Vermerk({
  vermerk,
  departmentKey,
  canEdit,
  canRetract,
  onChange,
}: {
  vermerk: EntryView
  departmentKey: string
  canEdit: boolean
  canRetract: boolean
  onChange: (neu: EntryView) => void
}) {
  const [modus, setModus] = useState<'lesen' | 'aendern' | 'zurueckziehen'>('lesen')
  const [text, setText] = useState(vermerk.body)
  const [grund, setGrund] = useState('')
  const [fehler, setFehler] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()
  const zurueckgezogen = vermerk.retractedAt !== null

  return (
    <li>
      <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1">
        <span className="font-condensed text-2xs text-text-dim">{vermerk.authorName}</span>
        <time className="text-2xs text-text-dim">
          {new Date(vermerk.createdAt).toLocaleString('de-DE')}
        </time>
        {vermerk.editedAt ? (
          <span className="font-condensed text-2xs text-text-dim">
            {departmentEntryText.edited(vermerk.version)}
          </span>
        ) : null}
        {vermerk.minClearance > 0 ? (
          <span className="font-mono text-2xs text-text-dim">
            {departmentEntryText.minClearance} {vermerk.minClearance}
          </span>
        ) : null}
      </div>

      {zurueckgezogen ? (
        <p className="mt-1 border-l-(length:--spacing-edge) border-stamp-4 pl-3 text-sm text-text-dim">
          {departmentEntryText.retractedBy(
            vermerk.retractedByName ?? '',
            vermerk.retractionReason ?? '',
          )}
        </p>
      ) : modus === 'aendern' ? (
        <div className="mt-2">
          <textarea
            value={text}
            onChange={(event) => setText(event.target.value)}
            rows={4}
            className="field w-full"
          />
          <div className="mt-2 flex flex-wrap items-center gap-3">
            <button
              type="button"
              disabled={pending}
              aria-busy={pending}
              className="btn btn-sm btn-primary"
              onClick={() =>
                startTransition(async () => {
                  const ergebnis = await editEntryAction({
                    id: vermerk.id,
                    departmentKey,
                    body: text,
                  })
                  if (!ergebnis.ok) {
                    setFehler(ergebnis.error)
                    return
                  }
                  onChange({
                    ...vermerk,
                    body: text,
                    version: vermerk.version + 1,
                    editedAt: new Date().toISOString(),
                  })
                  setModus('lesen')
                })
              }
            >
              {departmentEntryText.editSave}
            </button>
            <button type="button" onClick={() => setModus('lesen')} className="btn btn-sm">
              {departmentEntryText.cancel}
            </button>
          </div>
        </div>
      ) : (
        <p className="mt-1 text-sm whitespace-pre-wrap">{vermerk.body}</p>
      )}

      {modus === 'zurueckziehen' ? (
        <div className="mt-2">
          <label className="block">
            <span className="font-condensed text-2xs text-text-dim">
              {departmentEntryText.retractReason}
            </span>
            <input
              value={grund}
              onChange={(event) => setGrund(event.target.value)}
              className="field mt-1.5 w-full max-w-sm"
            />
          </label>
          <div className="mt-2 flex flex-wrap items-center gap-3">
            <button
              type="button"
              disabled={pending || grund.trim().length < 10}
              aria-busy={pending}
              className="btn btn-sm text-stamp-4"
              onClick={() =>
                startTransition(async () => {
                  const ergebnis = await retractEntryAction({
                    id: vermerk.id,
                    departmentKey,
                    reason: grund,
                  })
                  if (!ergebnis.ok) {
                    setFehler(ergebnis.error)
                    return
                  }
                  onChange({
                    ...vermerk,
                    retractedAt: new Date().toISOString(),
                    retractionReason: grund,
                  })
                  setModus('lesen')
                })
              }
            >
              {departmentEntryText.retract}
            </button>
            <button type="button" onClick={() => setModus('lesen')} className="btn btn-sm">
              {departmentEntryText.cancel}
            </button>
          </div>
        </div>
      ) : null}

      {!zurueckgezogen && modus === 'lesen' ? (
        <div className="mt-2 flex flex-wrap gap-3">
          {canEdit ? (
            <button type="button" onClick={() => setModus('aendern')} className="btn btn-sm">
              {departmentEntryText.edit}
            </button>
          ) : null}
          {canRetract ? (
            <button
              type="button"
              onClick={() => setModus('zurueckziehen')}
              className="btn btn-sm text-stamp-4"
            >
              {departmentEntryText.retract}
            </button>
          ) : null}
        </div>
      ) : null}

      {fehler ? (
        <p className="mt-2 font-condensed text-2xs text-stamp-4">{fehler || commonText.unknown}</p>
      ) : null}
    </li>
  )
}