'use client'

import { useRef, useState, useTransition } from 'react'
import { useRouter } from 'next/navigation'
import { Lightbulb, Loader2, Plus } from 'lucide-react'
import { toast } from 'sonner'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { schnellErfassen } from '@/server/aktionen/aufgaben'

/**
 * Ein Feld, ein Knopf, fertig.
 *
 * Alles Weitere — Bereich, Termin, Aufwand — kommt später beim Einsortieren.
 * Wer beim Erfassen erst ein Formular ausfüllen muss, erfasst nichts.
 */
export function Schnellerfassung({ typ = 'AUFGABE' }: { typ?: 'AUFGABE' | 'IDEE' }) {
  const router = useRouter()
  const [titel, setTitel] = useState('')
  const [laeuft, starte] = useTransition()
  const feld = useRef<HTMLInputElement>(null)

  function absenden(ereignis: React.FormEvent) {
    ereignis.preventDefault()
    const wert = titel.trim()
    if (wert.length < 2) {
      toast.error('Bitte mindestens zwei Zeichen eingeben.')
      return
    }

    const daten = new FormData()
    daten.set('titel', wert)
    daten.set('typ', typ)

    starte(async () => {
      const antwort = await schnellErfassen(daten)
      if (antwort.ok) {
        setTitel('')
        toast.success(antwort.meldung)
        router.refresh()
        // Gleich weiter erfassen können, ohne noch einmal zu klicken.
        feld.current?.focus()
      } else {
        toast.error(antwort.fehler)
      }
    })
  }

  return (
    <form onSubmit={absenden} className="flex gap-2">
      <Input
        ref={feld}
        value={titel}
        onChange={(e) => setTitel(e.target.value)}
        placeholder={typ === 'IDEE' ? 'Idee notieren …' : 'Was ist zu tun?'}
        maxLength={200}
        disabled={laeuft}
        aria-label={typ === 'IDEE' ? 'Neue Idee' : 'Neue Aufgabe'}
      />
      <Button type="submit" disabled={laeuft} className="shrink-0">
        {laeuft ? (
          <Loader2 className="animate-spin" aria-hidden />
        ) : typ === 'IDEE' ? (
          <Lightbulb aria-hidden />
        ) : (
          <Plus aria-hidden />
        )}
        Erfassen
      </Button>
    </form>
  )
}