AfiS-Aktensystem/web/app/(app)/dokumente/[documentNumber]/DocumentActions.tsx

'use client'

import { useState, useTransition } from 'react'
import { de } from '@/lib/i18n/de'
import {
  finalizeDocumentAction,
  reclassifyDocumentAction,
  retractDocumentAction,
} from '../actions'

/**
 * Ausfertigen, Zurückziehen, Umklassifizieren.
 *
 * Wie beim Fall bewusst **nicht** optimistisch: alle drei sind folgenreich.
 * Das Ausfertigen fragt nach, das Zurückziehen verlangt eine Begründung — es
 * gibt kein Löschen, der Grabstein bleibt stehen.
 */
export function DocumentActions({
  documentNumber,
  classification,
  canFinalize,
  canRetract,
  canReclassify,
  levels,
}: {
  documentNumber: string
  classification: number
  canFinalize: boolean
  canRetract: boolean
  canReclassify: boolean
  levels: { level: number; name: string }[]
}) {
  const [reason, setReason] = useState('')
  const [retracting, setRetracting] = useState(false)
  const [nextLevel, setNextLevel] = useState(classification)
  const [levelReason, setLevelReason] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  if (!canFinalize && !canRetract && !canReclassify) return null

  const lowering = nextLevel < classification

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

  return (
    <div className="mt-6 flex flex-wrap gap-x-10 gap-y-5 border-t border-line pt-5 text-xs">
      {canFinalize ? (
        <div>
          <button
            type="button"
            disabled={pending}
            onClick={() => {
              if (!confirm(de.document.finalizeHint)) return
              run(() => finalizeDocumentAction({ documentNumber }))
            }}
            className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
          >
            {de.document.finalize}
          </button>
        </div>
      ) : null}

      {canReclassify ? (
        <div>
          <p className="font-condensed text-text-dim">{de.document.reclassify}</p>
          <div className="mt-1.5 flex flex-wrap items-center gap-2">
            <select
              value={nextLevel}
              onChange={(event) => setNextLevel(Number(event.target.value))}
              aria-label={de.clearance.classification}
              className="border border-line bg-raised px-2 py-1"
            >
              {levels.map((level) => (
                <option key={level.level} value={level.level}>
                  {level.level} · {level.name}
                </option>
              ))}
            </select>
            <button
              type="button"
              disabled={pending || nextLevel === classification}
              onClick={() =>
                run(() =>
                  reclassifyDocumentAction({
                    documentNumber,
                    to: nextLevel,
                    reason: levelReason,
                  }),
                )
              }
              className="border border-line bg-raised px-3 py-1 font-condensed text-accent disabled:text-text-dim"
            >
              {de.common.save}
            </button>
          </div>
          {lowering ? (
            <textarea
              value={levelReason}
              onChange={(event) => setLevelReason(event.target.value)}
              rows={2}
              placeholder={de.case.reclassifyReason}
              aria-label={de.case.reclassifyReason}
              className="mt-2 block w-full max-w-sm border border-line bg-raised px-3 py-2 text-2xs"
            />
          ) : null}
        </div>
      ) : null}

      {canRetract ? (
        <div>
          {retracting ? (
            <div>
              <textarea
                value={reason}
                onChange={(event) => setReason(event.target.value)}
                rows={2}
                placeholder={de.document.retractReason}
                aria-label={de.document.retractReason}
                className="block w-full max-w-sm border border-line bg-raised px-3 py-2 text-2xs"
              />
              <div className="mt-2 flex gap-3">
                <button
                  type="button"
                  disabled={pending || reason.trim().length < 10}
                  onClick={() => run(() => retractDocumentAction({ documentNumber, reason }))}
                  className="border border-line bg-raised px-3 py-1 font-condensed text-stamp-4 disabled:text-text-dim"
                >
                  {de.document.retract}
                </button>
                <button
                  type="button"
                  onClick={() => setRetracting(false)}
                  className="font-condensed text-text-dim"
                >
                  {de.common.cancel}
                </button>
              </div>
            </div>
          ) : (
            <button
              type="button"
              onClick={() => setRetracting(true)}
              className="font-condensed text-text-dim"
            >
              {de.document.retract}
            </button>
          )}
        </div>
      ) : null}

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