import * as React from 'react'
import { AlertCircle } from 'lucide-react'
import { Label } from '@/components/ui/label'
import { cn } from '@/lib/utils'

/**
 * Ein Formularfeld mit Beschriftung, Erklaerung und Fehlermeldung.
 *
 * Der Erklaerungstext ist kein Beiwerk: Diese Anwendung benutzt an vielen
 * Stellen Begriffe aus dem Betreuungs- und Sozialrecht. Wer sie nicht
 * kennt, soll sie hier erklaert bekommen, statt nachschlagen zu muessen.
 *
 * Beschriftung, Erklaerung und Fehler sind ueber aria-describedby mit dem
 * Eingabefeld verbunden - Screenreader lesen sie mit vor.
 */
export function Feld({
  id,
  beschriftung,
  erklaerung,
  fehler,
  pflicht,
  className,
  children,
}: {
  id: string
  beschriftung: string
  erklaerung?: React.ReactNode
  fehler?: string | string[] | null
  pflicht?: boolean
  className?: string
  children: React.ReactNode
}) {
  const fehlertext = Array.isArray(fehler) ? fehler[0] : fehler
  const erklaerungId = erklaerung ? `${id}-erklaerung` : undefined
  const fehlerId = fehlertext ? `${id}-fehler` : undefined
  const beschriftungVon = [erklaerungId, fehlerId].filter(Boolean).join(' ') || undefined

  return (
    <div className={cn('space-y-1.5', className)}>
      <Label htmlFor={id}>
        {beschriftung}
        {pflicht && (
          <span className="ml-1 text-destructive" aria-label="Pflichtfeld">
            *
          </span>
        )}
      </Label>

      {React.isValidElement(children)
        ? React.cloneElement(children as React.ReactElement<Record<string, unknown>>, {
            id,
            'aria-describedby': beschriftungVon,
            'aria-invalid': fehlertext ? true : undefined,
            'aria-required': pflicht || undefined,
          })
        : children}

      {erklaerung && (
        <p id={erklaerungId} className="text-sm text-muted-foreground">
          {erklaerung}
        </p>
      )}

      {fehlertext && (
        <p id={fehlerId} className="flex items-start gap-1.5 text-sm font-medium text-destructive">
          <AlertCircle className="mt-0.5 size-4 shrink-0" aria-hidden="true" />
          {fehlertext}
        </p>
      )}
    </div>
  )
}

/** Gruppiert zusammengehoerige Felder mit einer Ueberschrift. */
export function Feldgruppe({
  titel,
  beschreibung,
  children,
  className,
}: {
  titel: string
  beschreibung?: React.ReactNode
  children: React.ReactNode
  className?: string
}) {
  return (
    <fieldset className={cn('space-y-4', className)}>
      <legend className="sr-only">{titel}</legend>
      <div>
        <h2 className="text-base font-semibold">{titel}</h2>
        {beschreibung && <p className="mt-0.5 text-sm text-muted-foreground">{beschreibung}</p>}
      </div>
      <div className="grid gap-4 sm:grid-cols-2">{children}</div>
    </fieldset>
  )
}