AfiS-Aktensystem/web/app/(app)/export/Approvals.tsx

'use client'

import { useState, useTransition } from 'react'
import { exportText } from '@/lib/i18n/export'
import { commonText } from '@/lib/i18n/common'
import { approveExportAction, rejectExportAction } from './actions'

type Auftrag = {
  id: string
  kind: string
  label: string
  requestedBy: string
  clearanceAtTime: number
  createdAt: string
}

/**
 * Offene Exportfreigaben.
 *
 * Vier-Augen-Prinzip: hier steht nur, was **jemand anderes** angefragt hat.
 * Die eigene Anfrage taucht gar nicht erst auf, und der Dienst weist sie auch
 * dann zurück, wenn jemand die Kennung von Hand einsetzt.
 */
export function Approvals({ jobs }: { jobs: Auftrag[] }) {
  const [ablehnung, setAblehnung] = useState<string | null>(null)
  const [grund, setGrund] = useState('')
  const [fehler, setFehler] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  if (jobs.length === 0) {
    return <p className="text-text-dim">{exportText.approvalsEmpty}</p>
  }

  return (
    <div>
      <ul className="border-t border-line">
        {jobs.map((auftrag) => (
          <li key={auftrag.id} className="border-b border-line py-2">
            <div className="flex flex-wrap items-baseline gap-x-4 gap-y-1 text-2xs">
              <span className="font-condensed text-text-dim">
                {exportText.kinds[auftrag.kind] ?? auftrag.kind}
              </span>
              <span className="font-mono">{auftrag.label}</span>
              <span className="grow text-text-dim">
                {exportText.requestedBy} {auftrag.requestedBy}
              </span>
              <button
                type="button"
                disabled={pending}
                onClick={() =>
                  startTransition(async () => {
                    const ergebnis = await approveExportAction({ id: auftrag.id })
                    if (ergebnis.error) setFehler(ergebnis.error)
                  })
                }
                className="border border-line bg-raised px-2 py-0.5 font-condensed text-accent"
              >
                {exportText.approve}
              </button>
              <button
                type="button"
                onClick={() => setAblehnung(auftrag.id)}
                className="font-condensed text-text-dim"
              >
                {exportText.reject}
              </button>
            </div>

            {ablehnung === auftrag.id ? (
              <div className="mt-2">
                <textarea
                  value={grund}
                  onChange={(event) => setGrund(event.target.value)}
                  rows={2}
                  placeholder={exportText.rejectReason}
                  aria-label={exportText.rejectReason}
                  className="block w-full max-w-sm border border-line bg-raised px-3 py-2 text-2xs"
                />
                <div className="mt-1 flex gap-3 text-2xs">
                  <button
                    type="button"
                    disabled={pending || grund.trim().length < 10}
                    onClick={() =>
                      startTransition(async () => {
                        const ergebnis = await rejectExportAction({
                          id: auftrag.id,
                          reason: grund,
                        })
                        if (ergebnis.error) setFehler(ergebnis.error)
                        else {
                          setAblehnung(null)
                          setGrund('')
                        }
                      })
                    }
                    className="font-condensed text-stamp-4 disabled:text-text-dim"
                  >
                    {exportText.reject}
                  </button>
                  <button
                    type="button"
                    onClick={() => setAblehnung(null)}
                    className="font-condensed text-text-dim"
                  >
                    {commonText.cancel}
                  </button>
                </div>
              </div>
            ) : null}
          </li>
        ))}
      </ul>

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