AfiS-Aktensystem/web/app/(app)/personalakten/[id]/PersonnelHead.tsx

'use client'

import { useActionState, useState, useTransition } from 'react'
import { de } from '@/lib/i18n/de'
import { StatusTags } from '@/components/StatusTags'
import {
  reclassifyPersonnelAction,
  updatePersonnelAction,
  type ActionResult,
} from '../actions'

type File = {
  id: string
  displayName: string
  rank: string | null
  department: string | null
  statusTags: string[]
  note: string | null
  classification: number
  userId: string | null
}

/**
 * Kopfdaten einer Personalakte: lesen und ändern in derselben Ansicht.
 *
 * Die Klassifizierung steht bewusst getrennt. Sie ändert, wer die Akte
 * überhaupt sieht, und eine Herabstufung braucht eine Begründung — das gehört
 * nicht in dasselbe Formular wie eine Korrektur der Dienstnummer.
 */
export function PersonnelHead({
  file,
  canEdit,
  levels,
  statusTags,
}: {
  file: File
  canEdit: boolean
  levels: { level: number; name: string }[]
  statusTags: { key: string; name: string; colorToken: string }[]
}) {
  const [editing, setEditing] = useState(false)
  const [state, action, pending] = useActionState<ActionResult | null, FormData>(
    updatePersonnelAction,
    null,
  )

  if (!editing) {
    return (
      <div>
        <dl className="grid gap-x-8 gap-y-2 text-sm sm:grid-cols-2">
          <Zeile label={de.personnel.rank} value={file.rank} />
          <Zeile label={de.personnel.department} value={file.department} />
          <Zeile
            label={de.personnel.linkedAccount}
            value={file.userId ? file.userId : de.personnel.noAccount}
            mono={Boolean(file.userId)}
          />
        </dl>

        <div className="mt-3 flex flex-wrap items-baseline gap-3">
          <span className="font-condensed text-xs text-text-dim">{de.personnel.status}</span>
          {file.statusTags.length > 0 ? (
            <StatusTags tags={file.statusTags} known={statusTags} />
          ) : (
            <span className="text-sm text-text-dim">{de.personnel.statusNone}</span>
          )}
        </div>

        {file.note ? (
          <p className="mt-4 max-w-(--container-measure) border-l-(length:--spacing-edge) border-line pl-3 text-sm whitespace-pre-wrap">
            {file.note}
          </p>
        ) : null}

        {canEdit ? (
          <div className="mt-4 flex flex-wrap items-center gap-4">
            <button
              type="button"
              onClick={() => setEditing(true)}
              className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
            >
              {de.personnel.edit}
            </button>
            <Reclassify id={file.id} current={file.classification} levels={levels} />
          </div>
        ) : null}
      </div>
    )
  }

  return (
    <form
      action={action}
      onSubmit={() => setEditing(false)}
      className="max-w-(--container-measure) space-y-4"
    >
      <input type="hidden" name="id" value={file.id} />
      <Feld id="displayName" label={de.personnel.name} defaultValue={file.displayName} required />
      <div className="grid gap-4 sm:grid-cols-2">
        <Feld id="rank" label={de.personnel.rank} defaultValue={file.rank} />
        <Feld id="department" label={de.personnel.department} defaultValue={file.department} />
      </div>

      <fieldset>
        <legend className="font-condensed text-2xs text-text-dim">{de.personnel.status}</legend>
        <div className="mt-2 flex flex-wrap gap-x-6 gap-y-2">
          {statusTags.map((tag) => (
            <label key={tag.key} className="flex items-center gap-2 text-sm">
              <input
                type="checkbox"
                name="statusTags"
                value={tag.key}
                defaultChecked={file.statusTags.includes(tag.key)}
              />
              {tag.name}
            </label>
          ))}
        </div>
        <p className="mt-1 text-2xs text-text-dim">{de.personnel.statusHint}</p>
      </fieldset>
      <div>
        <label htmlFor="note" className="font-condensed text-2xs text-text-dim">
          {de.personnel.note}
        </label>
        <textarea
          id="note"
          name="note"
          rows={3}
          defaultValue={file.note ?? ''}
          className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
        />
      </div>

      {state && !state.ok ? (
        <p className="font-condensed text-2xs text-stamp-4">{state.error}</p>
      ) : null}

      <div className="flex gap-3">
        <button
          type="submit"
          disabled={pending}
          className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
        >
          {pending ? de.common.loading : de.common.save}
        </button>
        <button
          type="button"
          onClick={() => setEditing(false)}
          className="font-condensed text-2xs text-text-dim"
        >
          {de.common.cancel}
        </button>
      </div>
    </form>
  )
}

function Reclassify({
  id,
  current,
  levels,
}: {
  id: string
  current: number
  levels: { level: number; name: string }[]
}) {
  const [open, setOpen] = useState(false)
  const [to, setTo] = useState(current)
  const [reason, setReason] = useState('')
  const [error, setError] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  const lowering = to < current

  if (!open) {
    return (
      <button
        type="button"
        onClick={() => setOpen(true)}
        className="font-condensed text-2xs text-text-dim"
      >
        {de.personnel.reclassify}
      </button>
    )
  }

  return (
    <div className="w-full border border-line p-3">
      <div className="flex flex-wrap items-center gap-3">
        <select
          value={to}
          onChange={(event) => setTo(Number(event.target.value))}
          aria-label={de.clearance.classification}
          className="border border-line bg-raised px-2 py-1 text-2xs"
        >
          {levels.map((level) => (
            <option key={level.level} value={level.level}>
              {level.level} · {level.name}
            </option>
          ))}
        </select>
        <button
          type="button"
          disabled={pending || to === current}
          onClick={() =>
            startTransition(async () => {
              const result = await reclassifyPersonnelAction({ id, to, reason })
              if (result.ok) setOpen(false)
              else setError(result.error)
            })
          }
          className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
        >
          {de.common.save}
        </button>
        <button
          type="button"
          onClick={() => setOpen(false)}
          className="font-condensed text-2xs text-text-dim"
        >
          {de.common.cancel}
        </button>
      </div>

      {/* Nur die Herabstufung braucht eine Begründung: sie macht die Akte für
          Leute sichtbar, die sie vorher nicht sehen durften. */}
      {lowering ? (
        <textarea
          value={reason}
          onChange={(event) => setReason(event.target.value)}
          rows={2}
          placeholder={de.case.reclassifyReason}
          aria-label={de.case.reclassifyReason}
          className="mt-2 block w-full border border-line bg-raised px-3 py-2 text-2xs"
        />
      ) : null}

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

function Zeile({
  label,
  value,
  mono,
}: {
  label: string
  value: string | null
  mono?: boolean
}) {
  return (
    <div className="flex gap-3">
      <dt className="font-condensed text-xs text-text-dim">{label}</dt>
      <dd className={mono ? 'font-mono text-xs' : ''}>{value || '—'}</dd>
    </div>
  )
}

function Feld({
  id,
  label,
  defaultValue,
  required,
}: {
  id: string
  label: string
  defaultValue?: string | null
  required?: boolean
}) {
  return (
    <div>
      <label htmlFor={id} className="font-condensed text-2xs text-text-dim">
        {label}
      </label>
      <input
        id={id}
        name={id}
        required={required}
        minLength={required ? 2 : undefined}
        maxLength={120}
        defaultValue={defaultValue ?? ''}
        className="mt-1 block w-full border border-line bg-raised px-3 py-2 text-sm"
      />
    </div>
  )
}