'use client'

import * as React from 'react'
import { useFormStatus } from 'react-dom'
import { AlertCircle, CheckCircle2, Loader2 } from 'lucide-react'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button, type ButtonProps } from '@/components/ui/button'
import type { Formularzustand } from '@/server/actions/sozialhilfe'

/**
 * Kleinteile, die in allen Formularen des Sozialhilfemoduls
 * wiederkehren. Sie liegen hier zusammen, damit nicht jedes Formular
 * seinen eigenen Absende-Knopf und seine eigene Meldung erfindet.
 */

/**
 * Absende-Knopf, der während des Speicherns gesperrt ist. Ohne die Sperre
 * entstehen bei langsamer Verbindung Dubletten - und eine doppelt
 * angelegte Nachforderung fällt erst beim Bezirk auf.
 */
export function Absenden({
  children = 'Speichern',
  laedtText = 'Wird gespeichert …',
  disabled,
  ...props
}: ButtonProps & { laedtText?: string }) {
  const { pending } = useFormStatus()
  return (
    <Button type="submit" {...props} disabled={pending || disabled}>
      {pending && <Loader2 className="animate-spin" aria-hidden="true" />}
      {pending ? laedtText : children}
    </Button>
  )
}

/** Rückmeldung einer Server Action - Fehler oder Erfolg. */
export function Meldung({ zustand }: { zustand: Formularzustand }) {
  if (zustand.fehler) {
    return (
      <Alert variant="fehler">
        <AlertCircle aria-hidden="true" />
        <AlertDescription>{zustand.fehler}</AlertDescription>
      </Alert>
    )
  }
  if (zustand.erfolg) {
    return (
      <Alert variant="erfolg">
        <CheckCircle2 aria-hidden="true" />
        <AlertDescription>{zustand.erfolg}</AlertDescription>
      </Alert>
    )
  }
  return null
}

/**
 * Ein Knopf, der eine Aktion ohne Formularfelder auslöst und vorher
 * nachfragt. Für Löschen und andere Schritte, die man nicht versehentlich
 * gehen will.
 */
export function AktionMitRueckfrage({
  aktion,
  frage,
  children,
  variant = 'ghost',
  size = 'sm',
}: {
  aktion: () => Promise<void>
  frage: string
  children: React.ReactNode
  variant?: ButtonProps['variant']
  size?: ButtonProps['size']
}) {
  return (
    <form
      action={aktion}
      onSubmit={(ereignis) => {
        if (!window.confirm(frage)) ereignis.preventDefault()
      }}
    >
      <Absenden variant={variant} size={size} laedtText="Einen Moment …">
        {children}
      </Absenden>
    </form>
  )
}