betreuungs-cockpit/src/components/dokumente/upload-formular.tsx

'use client'

import * as React from 'react'
import Link from 'next/link'
import { useActionState } from 'react'
import { useFormStatus } from 'react-dom'
import {
  AlertCircle,
  Camera,
  CheckCircle2,
  FileUp,
  Loader2,
  Trash2,
  Upload,
} from 'lucide-react'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Select } from '@/components/ui/select'
import { Feld } from '@/components/feld'
import { ACCEPT_ATTRIBUT, formatBytes } from '@/lib/speicher/dateityp'
import { dokumenteHochladen, type Aktionszustand } from '@/server/actions/dokumente'
import { ErkennungPanel } from '@/components/dokumente/erkennung-panel'
import { cn } from '@/lib/utils'

/**
 * Dokumente aufnehmen: per Drag&Drop, per Dateiauswahl oder direkt mit der
 * Handykamera.
 *
 * Das Ziel dieser Seite in einem Satz: **Foto hochladen, in zwei Klicks
 * einem Vorgang zuordnen, daraus eine Frist erzeugen.** Alles andere ist
 * Beiwerk. Deshalb sind Titel, Art und Absender optional - was der Brief
 * hergibt, schlaegt die Erkennung anschliessend selbst vor.
 */
export function UploadFormular({
  vorgaenge,
  vorgangVorgewaehlt,
  kameraZuerst,
}: {
  vorgaenge: { id: string; titel: string }[]
  vorgangVorgewaehlt?: string | null
  /** Aufruf aus der Schnellerfassung "Beleg fotografieren". */
  kameraZuerst?: boolean
}) {
  const [zustand, aktion] = useActionState<Aktionszustand, FormData>(dokumenteHochladen, {})
  const [dateien, setDateien] = React.useState<File[]>([])
  const [ueberzogen, setUeberzogen] = React.useState(false)

  const dateiFeld = React.useRef<HTMLInputElement>(null)
  const kameraFeld = React.useRef<HTMLInputElement>(null)

  /**
   * Die ausgewaehlten Dateien werden in einem eigenen Zustand gehalten und
   * vor dem Absenden in das versteckte Feld gespiegelt. Nur so lassen sich
   * Dateiauswahl, Kamera und Drag&Drop zu einem Stapel zusammenfuehren.
   */
  const uebernehmen = React.useCallback((neue: FileList | null) => {
    if (!neue || neue.length === 0) return
    setDateien((bisher) => {
      const zusammen = [...bisher]
      for (const datei of Array.from(neue)) {
        const schonDa = zusammen.some(
          (d) => d.name === datei.name && d.size === datei.size && d.lastModified === datei.lastModified,
        )
        if (!schonDa) zusammen.push(datei)
      }
      return zusammen.slice(0, 30)
    })
  }, [])

  React.useEffect(() => {
    if (!dateiFeld.current) return
    const behaelter = new DataTransfer()
    for (const datei of dateien) behaelter.items.add(datei)
    dateiFeld.current.files = behaelter.files
  }, [dateien])

  // Nach einem erfolgreichen Stapel die Auswahl leeren.
  React.useEffect(() => {
    if (zustand.ergebnisse && zustand.ergebnisse.some((e) => e.dokumentId)) {
      setDateien([])
    }
  }, [zustand.ergebnisse])

  const gesamt = dateien.reduce((summe, datei) => summe + datei.size, 0)
  const einzelnHochgeladen =
    zustand.ergebnisse?.filter((e) => e.dokumentId).length === 1
      ? zustand.ergebnisse.find((e) => e.dokumentId)!.dokumentId!
      : null

  return (
    <div className="space-y-6">
      <form action={aktion} className="space-y-6" noValidate>
        <input
          ref={dateiFeld}
          type="file"
          name="dateien"
          multiple
          accept={ACCEPT_ATTRIBUT}
          className="sr-only"
          tabIndex={-1}
          aria-hidden="true"
          onChange={(ereignis) => uebernehmen(ereignis.target.files)}
        />
        {/* Getrenntes Feld fuer die Kamera: capture darf nicht am Sammelfeld
            haengen, sonst bietet das Handy keine Dateiauswahl mehr an. */}
        <input
          ref={kameraFeld}
          type="file"
          accept="image/*"
          capture="environment"
          className="sr-only"
          tabIndex={-1}
          aria-hidden="true"
          onChange={(ereignis) => {
            uebernehmen(ereignis.target.files)
            ereignis.target.value = ''
          }}
        />

        {zustand.fehler && (
          <Alert variant="fehler">
            <AlertCircle aria-hidden="true" />
            <AlertDescription>{zustand.fehler}</AlertDescription>
          </Alert>
        )}

        <div
          onDragOver={(ereignis) => {
            ereignis.preventDefault()
            setUeberzogen(true)
          }}
          onDragLeave={() => setUeberzogen(false)}
          onDrop={(ereignis) => {
            ereignis.preventDefault()
            setUeberzogen(false)
            uebernehmen(ereignis.dataTransfer.files)
          }}
          className={cn(
            'rounded-lg border-2 border-dashed p-6 text-center transition-colors sm:p-10',
            ueberzogen ? 'border-primary bg-primary/5' : 'border-border',
          )}
        >
          <FileUp className="mx-auto mb-3 size-8 text-muted-foreground" aria-hidden="true" />
          <p className="font-medium">Dokumente hierher ziehen</p>
          <p className="mt-1 text-sm text-muted-foreground">
            PDF, JPEG, PNG, WEBP, TIFF oder HEIC. Mehrere auf einmal sind ausdrücklich erwünscht.
          </p>

          <div className="mt-5 flex flex-col justify-center gap-2 sm:flex-row">
            <Button
              type="button"
              variant={kameraZuerst ? 'default' : 'outline'}
              size="lg"
              onClick={() => kameraFeld.current?.click()}
            >
              <Camera aria-hidden="true" />
              Foto aufnehmen
            </Button>
            <Button
              type="button"
              variant={kameraZuerst ? 'outline' : 'default'}
              size="lg"
              onClick={() => dateiFeld.current?.click()}
            >
              <Upload aria-hidden="true" />
              Dateien auswählen
            </Button>
          </div>
        </div>

        {dateien.length > 0 && (
          <div className="rounded-lg border">
            <div className="flex items-center justify-between border-b px-4 py-2.5 text-sm">
              <span className="font-medium">
                {dateien.length} {dateien.length === 1 ? 'Datei' : 'Dateien'} · {formatBytes(gesamt)}
              </span>
              <Button type="button" variant="ghost" size="sm" onClick={() => setDateien([])}>
                Auswahl leeren
              </Button>
            </div>
            <ul className="divide-y">
              {dateien.map((datei, i) => (
                <li key={`${datei.name}-${i}`} className="flex items-center gap-3 px-4 py-2.5">
                  <span className="min-w-0 flex-1 truncate text-sm">{datei.name}</span>
                  <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
                    {formatBytes(datei.size)}
                  </span>
                  <Button
                    type="button"
                    variant="ghost"
                    size="icon"
                    onClick={() => setDateien((bisher) => bisher.filter((_, index) => index !== i))}
                    aria-label={`${datei.name} aus der Auswahl entfernen`}
                  >
                    <Trash2 aria-hidden="true" />
                  </Button>
                </li>
              ))}
            </ul>
          </div>
        )}

        <div className="grid gap-4 sm:grid-cols-2">
          <Feld
            id="titel"
            beschriftung="Titel"
            erklaerung="Nur bei einer einzelnen Datei. Leer lassen ist in Ordnung – die Erkennung schlägt gleich einen Titel vor."
            fehler={zustand.felder?.titel}
          >
            <Input name="titel" maxLength={200} />
          </Feld>

          <Feld
            id="eingangAm"
            beschriftung="Eingegangen am"
            erklaerung="Maßgeblich für Rechtsbehelfsfristen – nicht das Datum auf dem Brief. Leer = heute."
            fehler={zustand.felder?.eingangAm}
          >
            <Input name="eingangAm" type="date" />
          </Feld>

          <Feld id="vorgangId" beschriftung="Direkt einem Vorgang zuordnen">
            <Select name="vorgangId" defaultValue={vorgangVorgewaehlt ?? ''}>
              <option value="">Später zuordnen</option>
              {vorgaenge.map((vorgang) => (
                <option key={vorgang.id} value={vorgang.id}>
                  {vorgang.titel}
                </option>
              ))}
            </Select>
          </Feld>

          <Feld
            id="ablageortPapier"
            beschriftung="Ablageort des Originals"
            erklaerung="Wo liegt das Blatt in Papier? z. B. „Ordner 2, Register Bezirk“. Papier bleibt Papier."
          >
            <Input name="ablageortPapier" maxLength={150} placeholder="Ordner 2, Register Bezirk" />
          </Feld>
        </div>

        <Absendeknopf anzahl={dateien.length} />
      </form>

      {zustand.ergebnisse && zustand.ergebnisse.length > 0 && (
        <div className="space-y-3">
          <Alert variant={zustand.ergebnisse.every((e) => e.dokumentId) ? 'erfolg' : 'warnung'}>
            <CheckCircle2 aria-hidden="true" />
            <AlertDescription>{zustand.hinweis ?? 'Verarbeitet.'}</AlertDescription>
          </Alert>

          <ul className="divide-y rounded-lg border">
            {zustand.ergebnisse.map((ergebnis, i) => (
              <li key={i} className="flex flex-wrap items-center gap-2 px-4 py-2.5 text-sm">
                <span className="min-w-0 flex-1 truncate">{ergebnis.dateiname}</span>
                {ergebnis.dokumentId ? (
                  <Link
                    href={`/dokumente/${ergebnis.dokumentId}`}
                    className="shrink-0 font-medium text-primary hover:underline"
                  >
                    Öffnen
                  </Link>
                ) : (
                  <span className="text-destructive">{ergebnis.fehler}</span>
                )}
              </li>
            ))}
          </ul>
        </div>
      )}

      {einzelnHochgeladen && (
        <ErkennungPanel dokumentId={einzelnHochgeladen} vorgaenge={vorgaenge} />
      )}
    </div>
  )
}

function Absendeknopf({ anzahl }: { anzahl: number }) {
  const { pending } = useFormStatus()

  return (
    <Button type="submit" size="lg" className="w-full sm:w-auto" disabled={pending || anzahl === 0}>
      {pending ? (
        <>
          <Loader2 className="animate-spin" aria-hidden="true" />
          Wird übernommen …
        </>
      ) : (
        <>
          <Upload aria-hidden="true" />
          {anzahl <= 1 ? 'In die Akte übernehmen' : `${anzahl} Dokumente übernehmen`}
        </>
      )}
    </Button>
  )
}