'use client'

import { useState, useTransition, type ReactNode } from 'react'
import { commonText } from '@/lib/i18n/common'

/**
 * Ein aufklappbares Formular zum Hinzufügen.
 *
 * Beteiligte, Verknüpfungen, Dokumente, Zuordnungen — überall derselbe Ablauf:
 * ein Knopf, ein kleines Formular, eine Server Action, eine Fehlermeldung an
 * Ort und Stelle. Das viermal zu wiederholen kostete nicht nur Zeilen, sondern
 * auch Bündelgrösse auf der Fallakte, die ohnehin die dichteste Seite ist.
 *
 * Der Rückruf bekommt `schliessen`, damit das Formular nur nach einem Erfolg
 * zugeht — ein Fehler soll die Eingabe nicht wegräumen.
 */
export function AddPanel({
  label,
  hint,
  children,
  submitLabel,
  onSubmit,
  disabled,
}: {
  label: string
  hint?: string
  /** Die Eingabefelder. Bekommen den Wartezustand über `disabled`. */
  children: ReactNode
  submitLabel?: string
  onSubmit: () => Promise<{ ok: boolean; error?: string }>
  disabled?: boolean
}) {
  const [offen, setOffen] = useState(false)
  const [fehler, setFehler] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  if (!offen) {
    return (
      <button
        type="button"
        onClick={() => setOffen(true)}
        className="mt-4 border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent"
      >
        {label}
      </button>
    )
  }

  return (
    <div className="mt-4 border border-line p-3">
      {hint ? <p className="max-w-(--container-measure) text-2xs text-text-dim">{hint}</p> : null}

      <div className="mt-3 flex flex-wrap items-center gap-2">
        {children}
        <button
          type="button"
          disabled={pending || disabled}
          onClick={() =>
            startTransition(async () => {
              setFehler(null)
              const ergebnis = await onSubmit()
              if (ergebnis.ok) setOffen(false)
              else setFehler(ergebnis.error ?? commonText.retry)
            })
          }
          className="border border-line bg-raised px-3 py-1 font-condensed text-2xs text-accent disabled:text-text-dim"
        >
          {submitLabel ?? label}
        </button>
        <button
          type="button"
          onClick={() => setOffen(false)}
          className="font-condensed text-2xs text-text-dim"
        >
          {commonText.cancel}
        </button>
      </div>

      {fehler ? <p className="mt-2 font-condensed text-2xs text-stamp-4">{fehler}</p> : null}
    </div>
  )
}

/** Die Auswahlfelder in einem `AddPanel` sehen überall gleich aus. */
export function PanelSelect({
  value,
  onChange,
  label,
  children,
}: {
  value: string
  onChange: (value: string) => void
  label: string
  children: ReactNode
}) {
  return (
    <select
      value={value}
      onChange={(event) => onChange(event.target.value)}
      aria-label={label}
      className="border border-line bg-raised px-2 py-1 text-2xs"
    >
      {children}
    </select>
  )
}