'use client'

import { useState } from 'react'
import { Plus, X } from 'lucide-react'
import { AufgabeFormular } from '@/components/aufgaben/aufgabe-formular'
import { Button } from '@/components/ui/button'
import { Card, CardInhalt, CardKopf, CardTitel } from '@/components/ui/card'

type Eigenschaften = {
  bereiche: { id: string; name: string }[]
  projekte: { id: string; name: string }[]
  vorgabe?: { bereichId?: string; projektId?: string; typ?: string }
  beschriftung?: string
}

/** Klappt das vollständige Formular auf; im Normalfall genügt die Inbox. */
export function NeueAufgabe({
  bereiche,
  projekte,
  vorgabe,
  beschriftung = 'Neue Aufgabe',
}: Eigenschaften) {
  const [offen, setOffen] = useState(false)

  if (!offen) {
    return (
      <Button onClick={() => setOffen(true)}>
        <Plus aria-hidden />
        {beschriftung}
      </Button>
    )
  }

  return (
    <Card className="w-full">
      <CardKopf className="flex-row items-center justify-between">
        <CardTitel className="text-base">{beschriftung}</CardTitel>
        <Button art="leise" groesse="quadrat" onClick={() => setOffen(false)}>
          <X aria-hidden />
          <span className="sr-only">Schließen</span>
        </Button>
      </CardKopf>
      <CardInhalt>
        <AufgabeFormular
          bereiche={bereiche}
          projekte={projekte}
          {...(vorgabe ? { vorgabe } : {})}
          onFertig={() => setOffen(false)}
        />
      </CardInhalt>
    </Card>
  )
}