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

'use client'

import { useState, useTransition } from 'react'
import { caseText, entryText } from '@/lib/i18n/cases'
import { actionErrorsText, commonText } from '@/lib/i18n/common'
import { changeStatusAction, reclassifyAction } from '../actions'

/**
 * Statuswechsel und Umklassifizierung.
 *
 * Bewusst **nicht** optimistisch: beides ist folgenreich und teils nicht
 * umkehrbar. Stattdessen ein sofortiger Wartezustand am Knopf und eine klare
 * Rückmeldung. Siehe docs/09-performance-und-ux.md.
 */
export function CaseActions({
  caseNumber,
  classification,
  statusTargets,
  levels,
  maxLevel,
}: {
  caseNumber: string
  classification: number
  statusTargets: string[]
  levels: { level: number; name: string }[]
  maxLevel: number
}) {
  const [nextStatus, setNextStatus] = useState(statusTargets[0] ?? '')
  const [statusReason, setStatusReason] = useState('')
  const [nextLevel, setNextLevel] = useState(classification)
  const [levelReason, setLevelReason] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  const lowering = nextLevel < classification

  function run(action: () => Promise<{ ok: boolean; error?: string }>, confirmText: string) {
    if (!confirm(confirmText)) return
    setError(null)
    startTransition(async () => {
      const result = await action()
      if (!result.ok) setError(result.error ?? actionErrorsText.default!)
    })
  }

  return (
    <div className="mt-6 flex flex-wrap gap-x-10 gap-y-5 border-t border-line pt-5 text-xs">
      {statusTargets.length > 0 ? (
        <div>
          <p className="font-condensed text-text-dim">{caseText.statusChange}</p>
          <div className="mt-1.5 flex flex-wrap items-center gap-2">
            <select
              value={nextStatus}
              onChange={(event) => setNextStatus(event.target.value)}
              className="border border-line bg-raised px-2 py-1"
            >
              {statusTargets.map((target) => (
                <option key={target} value={target}>
                  {caseText.statusNames[target] ?? target}
                </option>
              ))}
            </select>
            <input
              value={statusReason}
              onChange={(event) => setStatusReason(event.target.value)}
              placeholder={entryText.changeReason}
              className="w-56 border border-line bg-raised px-2 py-1"
            />
            <button
              type="button"
              disabled={pending || !nextStatus}
              onClick={() =>
                run(
                  () =>
                    changeStatusAction({
                      caseNumber,
                      to: nextStatus,
                      reason: statusReason || undefined,
                    }),
                  `${caseText.statusChange}: ${caseText.statusNames[nextStatus] ?? nextStatus}?`,
                )
              }
              className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
            >
              {pending ? caseText.saving : commonText.save}
            </button>
          </div>
        </div>
      ) : null}

      <div>
        <p className="font-condensed text-text-dim">{caseText.reclassify}</p>
        <div className="mt-1.5 flex flex-wrap items-center gap-2">
          <select
            value={nextLevel}
            onChange={(event) => setNextLevel(Number(event.target.value))}
            className="border border-line bg-raised px-2 py-1"
          >
            {levels
              .filter((level) => level.level <= maxLevel)
              .map((level) => (
                <option key={level.level} value={level.level}>
                  {level.level} · {level.name}
                </option>
              ))}
          </select>
          {/* Eine Herabstufung macht Inhalte für Leute sichtbar, die sie vorher
              nicht sehen durften. Deshalb ist die Begründung Pflicht. */}
          {lowering ? (
            <input
              value={levelReason}
              onChange={(event) => setLevelReason(event.target.value)}
              placeholder={caseText.reclassifyReason}
              className="w-64 border border-line bg-raised px-2 py-1"
            />
          ) : null}
          <button
            type="button"
            disabled={pending || nextLevel === classification}
            onClick={() =>
              run(
                () =>
                  reclassifyAction({
                    caseNumber,
                    to: nextLevel,
                    reason: levelReason || undefined,
                  }),
                `${caseText.reclassify}: ${nextLevel}?`,
              )
            }
            className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
          >
            {pending ? caseText.saving : commonText.save}
          </button>
        </div>
      </div>

      {error ? <p className="w-full font-condensed text-2xs text-stamp-4">{error}</p> : null}
    </div>
  )
}