'use client'

import * as React from 'react'
import { useActionState } from 'react'
import { AlertCircle, Trash2 } from 'lucide-react'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { Absendeknopf } from '@/components/finanzen/eingaben'
import type { Formularzustand } from '@/server/actions/finanzen'

type Aktion = (zustand: Formularzustand, daten: FormData) => Promise<Formularzustand>

/**
 * Löschknopf mit Rückfrage.
 *
 * Gelöscht wird im Papierkorb-Sinn: geloeschtAm wird gesetzt, der
 * Datensatz bleibt 30 Tage bestehen. Bei Saldoständen und Wertständen
 * ist es dagegen ein echtes Entfernen – deshalb steht bei denen ein
 * deutlicherer Text.
 */
export function Loeschknopf({
  aktion,
  felder,
  beschriftung = 'Löschen',
  frage,
  variante = 'ghost',
}: {
  aktion: Aktion
  felder: Record<string, string>
  beschriftung?: string
  frage: string
  variante?: 'ghost' | 'destructive' | 'outline'
}) {
  const [zustand, absenden] = useActionState<Formularzustand, FormData>(aktion, {})
  const [gefragt, setGefragt] = React.useState(false)

  if (!gefragt) {
    return (
      <div className="space-y-2">
        {zustand.fehler && (
          <Alert variant="fehler">
            <AlertCircle aria-hidden="true" />
            <AlertDescription>{zustand.fehler}</AlertDescription>
          </Alert>
        )}
        <Button type="button" variant={variante} size="sm" onClick={() => setGefragt(true)}>
          <Trash2 aria-hidden="true" />
          {beschriftung}
        </Button>
      </div>
    )
  }

  return (
    <form action={absenden} className="space-y-2 rounded-md border border-destructive/50 p-3">
      {Object.entries(felder).map(([name, wert]) => (
        <input key={name} type="hidden" name={name} value={wert} />
      ))}
      <p className="text-sm">{frage}</p>
      <div className="flex gap-2">
        <Absendeknopf variant="destructive" size="sm" wartetext="Wird gelöscht …">
          Ja, löschen
        </Absendeknopf>
        <Button type="button" variant="ghost" size="sm" onClick={() => setGefragt(false)}>
          Abbrechen
        </Button>
      </div>
    </form>
  )
}