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

'use client'

import { useState, useTransition } from 'react'
import Link from 'next/link'
import { de } from '@/lib/i18n/de'
import { LINK_KINDS } from '@/lib/cases/terms'
import { linkCasesAction, unlinkCasesAction } from '../actions'
import { classificationEdgeStyle } from '@/components/StampMark'

type Verknuepfung = {
  kind: string
  direction: 'in' | 'out'
  other: { id: string; caseNumber: string; title: string; status: string; classification: number }
}

/**
 * Verknüpfungen zwischen Akten.
 *
 * Lösen ohne Bestätigungsdialog: eine Verknüpfung ist umkehrbar, sie lässt
 * sich in zwei Klicks neu ziehen. Siehe docs/09-performance-und-ux.md.
 */
export function CaseLinks({
  caseNumber,
  links,
  canEdit,
}: {
  caseNumber: string
  links: Verknuepfung[]
  canEdit: boolean
}) {
  const [open, setOpen] = useState(false)
  const [target, setTarget] = useState('')
  const [kind, setKind] = useState<string>('RELATED')
  const [error, setError] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  return (
    <div>
      {links.length === 0 ? (
        <p className="text-text-dim">{de.link.empty}</p>
      ) : (
        <ul className="border-t border-line">
          {links.map((link) => (
            <li
              key={`${link.direction}:${link.kind}:${link.other.id}`}
              className="flex flex-wrap items-baseline gap-x-4 gap-y-1 border-b border-line py-2 pl-3"
              style={classificationEdgeStyle(link.other.classification)}
            >
              <span className="font-condensed text-2xs text-text-dim">
                {(link.direction === 'in' ? de.link.incoming : de.link.kinds)[link.kind] ??
                  link.kind}
              </span>
              <Link
                href={`/faelle/${link.other.caseNumber}`}
                prefetch
                className="font-mono text-xs text-text-dim"
              >
                {link.other.caseNumber}
              </Link>
              <span className="grow text-sm">{link.other.title}</span>
              {canEdit ? (
                <button
                  type="button"
                  disabled={pending}
                  onClick={() =>
                    startTransition(async () => {
                      const result = await unlinkCasesAction({
                        fromCaseNumber: caseNumber,
                        toCaseNumber: link.other.caseNumber,
                        kind: link.kind,
                      })
                      if (!result.ok) setError(result.error)
                    })
                  }
                  className="font-condensed text-2xs text-text-dim"
                >
                  {de.link.remove}
                </button>
              ) : null}
            </li>
          ))}
        </ul>
      )}

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

      {canEdit ? (
        open ? (
          <div className="mt-4 flex flex-wrap items-center gap-2">
            <select
              value={kind}
              onChange={(event) => setKind(event.target.value)}
              aria-label={de.link.kind}
              className="border border-line bg-raised px-2 py-1 text-2xs"
            >
              {LINK_KINDS.map((value) => (
                <option key={value} value={value}>
                  {de.link.kinds[value] ?? value}
                </option>
              ))}
            </select>
            <input
              value={target}
              onChange={(event) => setTarget(event.target.value)}
              placeholder={de.link.target}
              aria-label={de.link.target}
              className="border border-line bg-raised px-2 py-1 font-mono text-2xs"
            />
            <button
              type="button"
              disabled={pending || target.trim() === ''}
              onClick={() =>
                startTransition(async () => {
                  setError(null)
                  const result = await linkCasesAction({
                    fromCaseNumber: caseNumber,
                    toCaseNumber: target.trim(),
                    kind,
                  })
                  if (result.ok) {
                    setTarget('')
                    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.link.add}
            </button>
            <button
              type="button"
              onClick={() => setOpen(false)}
              className="font-condensed text-2xs text-text-dim"
            >
              {de.common.cancel}
            </button>
          </div>
        ) : (
          <button
            type="button"
            onClick={() => setOpen(true)}
            className="mt-4 border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
          >
            {de.link.add}
          </button>
        )
      ) : null}
    </div>
  )
}