'use client'

import { useActionState } from 'react'
import { useFormStatus } from 'react-dom'
import { AlertCircle, CheckCircle2, Loader2 } from 'lucide-react'
import { passwortAendern, type PasswortZustand } from '@/server/actions/konto'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Feld } from '@/components/feld'

function Absenden() {
  const { pending } = useFormStatus()
  return (
    <Button type="submit" disabled={pending}>
      {pending && <Loader2 className="animate-spin" aria-hidden="true" />}
      {pending ? 'Wird geändert …' : 'Passwort ändern'}
    </Button>
  )
}

export function PasswortFormular() {
  const [zustand, aktion] = useActionState<PasswortZustand, FormData>(passwortAendern, {})

  if (zustand.erfolg) {
    return (
      <Alert variant="erfolg">
        <CheckCircle2 aria-hidden="true" />
        <AlertDescription>
          Passwort geändert. Alle offenen Sitzungen wurden beendet — auch diese hier. Beim
          nächsten Klick wirst du zur Anmeldung geschickt.
        </AlertDescription>
      </Alert>
    )
  }

  return (
    <form action={aktion} className="space-y-4" noValidate>
      {zustand.fehler && (
        <Alert variant="fehler">
          <AlertCircle aria-hidden="true" />
          <AlertDescription>{zustand.fehler}</AlertDescription>
        </Alert>
      )}

      <Feld id="aktuell" beschriftung="Bisheriges Passwort" fehler={zustand.felder?.aktuell} pflicht>
        <Input name="aktuell" type="password" autoComplete="current-password" required />
      </Feld>

      <Feld
        id="neu"
        beschriftung="Neues Passwort"
        erklaerung="Mindestens 12 Zeichen."
        fehler={zustand.felder?.neu}
        pflicht
      >
        <Input name="neu" type="password" autoComplete="new-password" required />
      </Feld>

      <Feld
        id="wiederholung"
        beschriftung="Neues Passwort wiederholen"
        fehler={zustand.felder?.wiederholung}
        pflicht
      >
        <Input name="wiederholung" type="password" autoComplete="new-password" required />
      </Feld>

      <Absenden />
    </form>
  )
}