AfiS-Aktensystem/web/app/(app)/faelle/[caseNumber]/EntryActions.tsx

'use client'

import { useState, useTransition } from 'react'
import { de } from '@/lib/i18n/de'
import { editEntryAction, restoreEntryAction, retractEntryAction } from '../actions'

/**
 * Ändern und Zurückziehen eines Verlaufseintrags.
 *
 * Nicht optimistisch: die Begründung gehört erst abgeschickt und bestätigt,
 * bevor der neue Text steht. Siehe docs/09-performance-und-ux.md.
 */
export function EntryActions({
  entryId,
  caseNumber,
  body,
  retracted,
  canEdit,
  canRetract,
}: {
  entryId: string
  caseNumber: string
  body: string
  retracted: boolean
  canEdit: boolean
  canRetract: boolean
}) {
  const [mode, setMode] = useState<'idle' | 'edit' | 'retract'>('idle')
  const [draft, setDraft] = useState(body)
  const [reason, setReason] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  function run(action: () => Promise<{ ok: boolean; error?: string }>) {
    setError(null)
    startTransition(async () => {
      const result = await action()
      if (result.ok) {
        setMode('idle')
        setReason('')
      } else {
        setError(result.error ?? de.actionErrors.default!)
      }
    })
  }

  if (retracted) {
    if (!canRetract) return null
    return (
      <div className="mt-2 flex flex-wrap items-center gap-2 text-2xs">
        <input
          value={reason}
          onChange={(event) => setReason(event.target.value)}
          placeholder={de.entry.retractReason}
          className="w-64 border border-line bg-raised px-2 py-1"
        />
        <button
          type="button"
          disabled={pending}
          onClick={() => run(() => restoreEntryAction({ entryId, caseNumber, reason }))}
          className="font-condensed text-accent disabled:text-text-dim"
        >
          {de.entry.restore}
        </button>
        {error ? <span className="text-stamp-4">{error}</span> : null}
      </div>
    )
  }

  if (mode === 'idle') {
    if (!canEdit && !canRetract) return null
    return (
      <div className="mt-1.5 flex gap-3 text-2xs">
        {canEdit ? (
          <button type="button" onClick={() => setMode('edit')} className="font-condensed text-accent">
            {de.entry.edit}
          </button>
        ) : null}
        {canRetract ? (
          <button
            type="button"
            onClick={() => setMode('retract')}
            className="font-condensed text-accent"
          >
            {de.entry.retract}
          </button>
        ) : null}
      </div>
    )
  }

  return (
    <div className="mt-2 max-w-(--container-measure) text-2xs">
      {mode === 'edit' ? (
        <textarea
          value={draft}
          onChange={(event) => setDraft(event.target.value)}
          rows={4}
          className="block w-full border border-line bg-raised px-3 py-2 text-sm"
        />
      ) : null}

      <input
        value={reason}
        onChange={(event) => setReason(event.target.value)}
        placeholder={mode === 'edit' ? de.entry.changeReason : de.entry.retractReason}
        className="mt-2 block w-full border border-line bg-raised px-2 py-1"
      />

      <div className="mt-2 flex items-center gap-3">
        <button
          type="button"
          disabled={pending}
          onClick={() =>
            run(() =>
              mode === 'edit'
                ? editEntryAction({ entryId, caseNumber, body: draft, changeReason: reason })
                : retractEntryAction({ entryId, caseNumber, reason }),
            )
          }
          className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
        >
          {pending ? de.case.saving : mode === 'edit' ? de.entry.editSave : de.entry.retract}
        </button>
        <button
          type="button"
          onClick={() => {
            setMode('idle')
            setDraft(body)
            setReason('')
            setError(null)
          }}
          className="font-condensed text-text-dim"
        >
          {de.entry.cancel}
        </button>
        {error ? <span className="text-stamp-4">{error}</span> : null}
      </div>
    </div>
  )
}