AfiS-Aktensystem/web/components/files/Attachments.tsx

'use client'

import { useCallback, useRef, useState, useTransition } from 'react'
import { attachmentText } from '@/lib/i18n/documents'
import { MAX_FILE_BYTES, formatBytes } from '@/lib/files/limits'
import { releaseAttachmentAction } from '@/app/(app)/dateien/actions'
import { useStream, type ScanEvent } from '@/components/realtime/useStream'

export type AttachmentView = {
  id: string
  originalName: string
  mimeType: string
  sizeBytes: number
  scanStatus: string
  scanMessage: string | null
  blurhash: string | null
  width: number | null
  height: number | null
  hasThumb: boolean
  createdAt: string
}

/** Welchem Besitzer die Datei angehängt wird. Genau eines der drei Felder. */
export type UploadTarget = {
  caseNumber?: string
  entryId?: string
  documentNumber?: string
}

type Laufend = { key: string; name: string; progress: number; error?: string }

/**
 * Anhänge einer Akte, eines Eintrags oder eines Dokuments.
 *
 * Der Ablauf folgt docs/09-performance-und-ux.md: die Datei erscheint sofort
 * in der Liste, der Fortschrittsbalken zeigt nur die **Übertragung**, und
 * danach steht „Wird geprüft", bis das Ereignis aus `/api/events` kommt. Kein
 * Balken wartet auf einen Virenscanner, und kein Spinner blockiert die Seite.
 */
export function Attachments({
  target,
  topic,
  initial,
  canUpload,
  canRelease,
}: {
  target: UploadTarget
  /** Thema des Besitzers, damit die Prüfergebnisse ankommen. */
  topic: string
  initial: AttachmentView[]
  canUpload: boolean
  canRelease: boolean
}) {
  const [dateien, setDateien] = useState<AttachmentView[]>(initial)
  const [laufend, setLaufend] = useState<Laufend[]>([])
  const [pending, startTransition] = useTransition()
  const eingabe = useRef<HTMLInputElement>(null)

  const uebernehmen = useCallback((event: ScanEvent) => {
    setDateien((bisher) =>
      bisher.map((datei) =>
        datei.id === event.id
          ? {
              ...datei,
              scanStatus: event.scanStatus,
              scanMessage: event.scanMessage,
              mimeType: event.mimeType,
              sizeBytes: event.sizeBytes,
              blurhash: event.blurhash,
              width: event.width,
              height: event.height,
              hasThumb: event.hasThumb,
            }
          : datei,
      ),
    )
  }, [])

  useStream([topic], { 'attachment.scanned': (data) => uebernehmen(data as ScanEvent) })

  function hochladen(datei: File) {
    const key = `${datei.name}-${Date.now()}-${Math.random()}`
    if (datei.size > MAX_FILE_BYTES) {
      setLaufend((l) => [
        ...l,
        { key, name: datei.name, progress: 0, error: attachmentText.errors['file-too-large'] },
      ])
      return
    }

    setLaufend((l) => [...l, { key, name: datei.name, progress: 0 }])

    const form = new FormData()
    form.set('file', datei)
    for (const [feld, wert] of Object.entries(target)) {
      if (wert) form.set(feld, wert)
    }

    // XMLHttpRequest und nicht fetch: nur so gibt es einen echten
    // Fortschritt beim Senden. `fetch` meldet ihn bis heute nicht.
    const anfrage = new XMLHttpRequest()
    anfrage.open('POST', '/api/files')

    anfrage.upload.addEventListener('progress', (event) => {
      if (!event.lengthComputable) return
      const anteil = Math.round((event.loaded / event.total) * 100)
      setLaufend((l) => l.map((e) => (e.key === key ? { ...e, progress: anteil } : e)))
    })

    anfrage.addEventListener('load', () => {
      const fertig = () => setLaufend((l) => l.filter((e) => e.key !== key))
      if (anfrage.status === 201) {
        const { id } = JSON.parse(anfrage.responseText) as { id: string }
        setDateien((bisher) => [
          ...bisher,
          {
            id,
            originalName: datei.name,
            mimeType: datei.type || 'application/octet-stream',
            sizeBytes: datei.size,
            scanStatus: 'PENDING',
            scanMessage: null,
            blurhash: null,
            width: null,
            height: null,
            hasThumb: false,
            createdAt: new Date().toISOString(),
          },
        ])
        fertig()
        return
      }

      let meldung = attachmentText.errors.transfer!
      try {
        meldung = (JSON.parse(anfrage.responseText) as { error?: string }).error ?? meldung
      } catch {
        // Antwort ohne JSON, dann bleibt die allgemeine Meldung.
      }
      setLaufend((l) => l.map((e) => (e.key === key ? { ...e, error: meldung } : e)))
    })

    anfrage.addEventListener('error', () => {
      setLaufend((l) =>
        l.map((e) => (e.key === key ? { ...e, error: attachmentText.errors.transfer! } : e)),
      )
    })

    anfrage.send(form)
  }

  return (
    <div>
      {dateien.length === 0 && laufend.length === 0 ? (
        <p className="text-text-dim">{attachmentText.empty}</p>
      ) : (
        <ul className="border-t border-line">
          {dateien.map((datei) => (
            <li key={datei.id} className="border-b border-line py-2">
              <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
                {datei.hasThumb ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={`/api/files/${datei.id}?variant=thumb`}
                    alt=""
                    className="h-10 w-10 border border-line object-cover"
                  />
                ) : null}
                <span className="grow text-sm">{datei.originalName}</span>
                <span className="font-mono text-2xs text-text-dim">
                  {formatBytes(datei.sizeBytes)}
                </span>
                <span
                  className={`font-condensed text-2xs ${
                    datei.scanStatus === 'BLOCKED' ? 'text-stamp-4' : 'text-text-dim'
                  }`}
                >
                  {attachmentText.statusNames[datei.scanStatus] ?? datei.scanStatus}
                </span>
                {datei.scanStatus === 'CLEAN' ? (
                  <a href={`/api/files/${datei.id}`} className="font-condensed text-2xs">
                    {attachmentText.download}
                  </a>
                ) : null}
                {datei.scanStatus === 'FAILED' && canRelease ? (
                  <button
                    type="button"
                    disabled={pending}
                    title={attachmentText.releaseHint}
                    onClick={() =>
                      startTransition(async () => {
                        await releaseAttachmentAction({ id: datei.id })
                      })
                    }
                    className="font-condensed text-2xs text-stamp-3"
                  >
                    {attachmentText.release}
                  </button>
                ) : null}
              </div>
              {datei.scanMessage ? (
                <p className="mt-1 text-2xs text-text-dim">{datei.scanMessage}</p>
              ) : null}
            </li>
          ))}

          {laufend.map((eintrag) => (
            <li key={eintrag.key} className="border-b border-line py-2">
              <div className="flex flex-wrap items-center gap-x-4 gap-y-1">
                <span className="grow text-sm text-text-dim">{eintrag.name}</span>
                <span className="font-condensed text-2xs text-text-dim">
                  {eintrag.error ?? `${attachmentText.uploading} ${eintrag.progress} %`}
                </span>
              </div>
              {!eintrag.error ? (
                <div className="mt-1 h-0.5 w-full bg-raised">
                  <div
                    className="h-full bg-accent transition-[width] duration-150"
                    style={{ width: `${eintrag.progress}%` }}
                  />
                </div>
              ) : null}
            </li>
          ))}
        </ul>
      )}

      {canUpload ? (
        <div className="mt-4">
          <input
            ref={eingabe}
            type="file"
            multiple
            accept="image/png,image/jpeg,image/webp,application/pdf,text/plain"
            onChange={(event) => {
              for (const datei of event.target.files ?? []) hochladen(datei)
              event.target.value = ''
            }}
            className="hidden"
          />
          <button
            type="button"
            onClick={() => eingabe.current?.click()}
            className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
          >
            {attachmentText.add}
          </button>
          <p className="mt-1 text-2xs text-text-dim">{attachmentText.allowed}</p>
        </div>
      ) : null}
    </div>
  )
}