planer/src/components/aufgaben/aufgabe-formular.tsx

'use client'

import { useTransition, useState } from 'react'
import { useRouter } from 'next/navigation'
import { Loader2 } from 'lucide-react'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select } from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'
import {
  AUFWAND_MAX_MINUTEN,
  PRIORITAET_NAME,
  STATUS_NAME,
  TYP_NAME,
  moeglicheUebergaenge,
} from '@/lib/aufgabe'
import type { AufgabeAnzeige } from '@/lib/aufgabe-anzeige'
import { aufgabeAendern, aufgabeAnlegen } from '@/server/aktionen/aufgaben'

export type BereichWahl = { id: string; name: string }
export type ProjektWahl = { id: string; name: string }

type Eigenschaften = {
  /** Fehlt sie, wird eine neue Aufgabe angelegt. */
  aufgabe?: AufgabeAnzeige
  bereiche: BereichWahl[]
  projekte: ProjektWahl[]
  /** Vorbelegung beim Anlegen. */
  vorgabe?: { bereichId?: string; projektId?: string; typ?: string }
  onFertig?: () => void
}

const TYPEN = ['AUFGABE', 'IDEE', 'ARBEITSPAKET', 'MEILENSTEIN'] as const

export function AufgabeFormular({
  aufgabe,
  bereiche,
  projekte,
  vorgabe,
  onFertig,
}: Eigenschaften) {
  const router = useRouter()
  const [laeuft, starte] = useTransition()
  const [felder, setFelder] = useState<Record<string, string>>({})

  // Aus einem abgeschlossenen Zustand geht es nur zurück nach OFFEN. Die
  // Auswahl zeigt deshalb nur, was von hier aus wirklich möglich ist.
  const statusAuswahl = aufgabe
    ? [aufgabe.status, ...moeglicheUebergaenge(aufgabe.status)]
    : (['OFFEN', 'GEPLANT', 'WARTET'] as const)

  function absenden(ereignis: React.FormEvent<HTMLFormElement>) {
    ereignis.preventDefault()
    const formular = ereignis.currentTarget
    const daten = new FormData(formular)

    starte(async () => {
      const antwort = aufgabe
        ? await aufgabeAendern(aufgabe.id, daten)
        : await aufgabeAnlegen(daten)

      if (antwort.ok) {
        setFelder({})
        toast.success(antwort.meldung)
        if (!aufgabe) formular.reset()
        router.refresh()
        onFertig?.()
      } else {
        setFelder(antwort.felder ?? {})
        toast.error(antwort.fehler)
      }
    })
  }

  const kennung = aufgabe?.id ?? 'neu'

  return (
    <form onSubmit={absenden} className="flex flex-col gap-4">
      <div className="flex flex-col gap-2">
        <Label htmlFor={`titel-${kennung}`}>Titel</Label>
        <Input
          id={`titel-${kennung}`}
          name="titel"
          defaultValue={aufgabe?.titel ?? ''}
          required
          maxLength={200}
          aria-invalid={Boolean(felder.titel)}
        />
        {felder.titel && <p className="text-gefahr text-xs">{felder.titel}</p>}
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor={`notiz-${kennung}`}>Notiz</Label>
        <Textarea
          id={`notiz-${kennung}`}
          name="notiz"
          defaultValue={aufgabe?.notiz ?? ''}
          maxLength={5000}
          placeholder="Was dazugehört, aber nicht in den Titel passt."
        />
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        <div className="flex flex-col gap-2">
          <Label htmlFor={`typ-${kennung}`}>Art</Label>
          <Select
            id={`typ-${kennung}`}
            name="typ"
            defaultValue={aufgabe?.typ ?? vorgabe?.typ ?? 'AUFGABE'}
          >
            {TYPEN.map((typ) => (
              <option key={typ} value={typ}>
                {TYP_NAME[typ]}
              </option>
            ))}
          </Select>
        </div>

        <div className="flex flex-col gap-2">
          <Label htmlFor={`status-${kennung}`}>Status</Label>
          <Select
            id={`status-${kennung}`}
            name="status"
            defaultValue={aufgabe?.status ?? 'OFFEN'}
            aria-invalid={Boolean(felder.status)}
          >
            {[...new Set(statusAuswahl)].map((status) => (
              <option key={status} value={status}>
                {STATUS_NAME[status]}
              </option>
            ))}
          </Select>
          {felder.status && <p className="text-gefahr text-xs">{felder.status}</p>}
        </div>

        <div className="flex flex-col gap-2">
          <Label htmlFor={`prioritaet-${kennung}`}>Priorität</Label>
          <Select
            id={`prioritaet-${kennung}`}
            name="prioritaet"
            defaultValue={String(aufgabe?.prioritaet ?? 3)}
          >
            {[1, 2, 3, 4, 5].map((stufe) => (
              <option key={stufe} value={stufe}>
                {stufe} – {PRIORITAET_NAME[stufe]}
              </option>
            ))}
          </Select>
        </div>

        <div className="flex flex-col gap-2">
          <Label htmlFor={`aufwand-${kennung}`}>Aufwand in Minuten</Label>
          <Input
            id={`aufwand-${kennung}`}
            name="aufwandMinuten"
            type="number"
            min={1}
            max={AUFWAND_MAX_MINUTEN}
            step={15}
            defaultValue={aufgabe?.aufwandMinuten ?? ''}
            placeholder="noch nicht geschätzt"
            aria-invalid={Boolean(felder.aufwandMinuten)}
          />
          {felder.aufwandMinuten && (
            <p className="text-gefahr text-xs">{felder.aufwandMinuten}</p>
          )}
        </div>

        <div className="flex flex-col gap-2">
          <Label htmlFor={`faellig-${kennung}`}>Fällig am</Label>
          <Input
            id={`faellig-${kennung}`}
            name="faelligAm"
            type="date"
            defaultValue={aufgabe?.faelligWert ?? ''}
            aria-invalid={Boolean(felder.faelligAm)}
          />
          {felder.faelligAm && <p className="text-gefahr text-xs">{felder.faelligAm}</p>}
        </div>

        <div className="flex flex-col gap-2">
          <Label htmlFor={`bereich-${kennung}`}>Bereich</Label>
          <Select
            id={`bereich-${kennung}`}
            name="bereichId"
            defaultValue={aufgabe?.bereich?.id ?? vorgabe?.bereichId ?? ''}
            aria-invalid={Boolean(felder.bereichId)}
          >
            <option value="">Inbox – noch nicht einsortiert</option>
            {bereiche.map((bereich) => (
              <option key={bereich.id} value={bereich.id}>
                {bereich.name}
              </option>
            ))}
          </Select>
          {felder.bereichId && <p className="text-gefahr text-xs">{felder.bereichId}</p>}
        </div>

        <div className="flex flex-col gap-2 sm:col-span-2">
          <Label htmlFor={`projekt-${kennung}`}>Projekt</Label>
          <Select
            id={`projekt-${kennung}`}
            name="projektId"
            defaultValue={aufgabe?.projekt?.id ?? vorgabe?.projektId ?? ''}
            aria-invalid={Boolean(felder.projektId)}
          >
            <option value="">Kein Projekt</option>
            {projekte.map((projekt) => (
              <option key={projekt.id} value={projekt.id}>
                {projekt.name}
              </option>
            ))}
          </Select>
          {felder.projektId && <p className="text-gefahr text-xs">{felder.projektId}</p>}
        </div>
      </div>

      <div className="flex gap-2">
        <Button type="submit" disabled={laeuft}>
          {laeuft && <Loader2 className="animate-spin" aria-hidden />}
          {aufgabe ? 'Speichern' : 'Aufgabe anlegen'}
        </Button>
        {onFertig && (
          <Button type="button" art="leise" onClick={onFertig} disabled={laeuft}>
            Abbrechen
          </Button>
        )}
      </div>
    </form>
  )
}