'use client'

import * as React from 'react'
import { useActionState } from 'react'
import { useFormStatus } from 'react-dom'
import { AlertCircle, ChevronDown } from 'lucide-react'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Input } from '@/components/ui/input'
import { Select } from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'
import { Feld } from '@/components/feld'
import {
  DAUER_SCHNELLWAHL,
  KONTAKT_ARTEN,
  KONTAKT_ARTEN_SCHNELLWAHL,
  KONTAKT_ART_BESCHRIFTUNG,
} from '@/lib/validierung/kontakte'
import { protokollSpeichern, type KontaktZustand } from '@/server/actions/kontakte'
import { cn } from '@/lib/utils'

/**
 * Die Schnellerfassung.
 *
 * Sie muss am Handy in unter 20 Sekunden zu bedienen sein - im Flur des
 * Pflegeheims, direkt nach dem Besuch, mit einer Hand. Deshalb:
 *
 * - Das Datum ist auf heute vorbelegt.
 * - Die Art ist eine Knopfreihe, kein Auswahlmenue.
 * - Die Dauer hat vier Schnellwahlen und daneben ein freies Feld.
 * - Ein Haekchen fuer den persoenlichen Kontakt - die Angabe, auf die es
 *   im Jahresbericht nach § 1863 BGB ankommt.
 * - Ein grosses Freitextfeld.
 *
 * Alles Weitere steckt eingeklappt in "Weitere Angaben". Speichern ist der
 * einzige auffaellige Knopf auf der Seite.
 */

export type ProtokollWerte = {
  id: string
  datum: string
  art: string
  dauerMinuten: number | null
  gespraechspartner: string | null
  mitBetreuter: boolean
  kontaktId: string | null
  vorgangId: string | null
  inhalt: string | null
  wuensche: string | null
  folgeaufgaben: string | null
}

export type Auswahleintrag = { id: string; bezeichnung: string }

const ANFANG: KontaktZustand = {}

/** Die uebrigen Arten, die nicht in der grossen Reihe stehen. */
const WEITERE_ARTEN = KONTAKT_ARTEN.filter(
  (art) => !(KONTAKT_ARTEN_SCHNELLWAHL as readonly string[]).includes(art),
)

export function ProtokollErfassung({
  betreuteId,
  heute,
  kontakte,
  vorgaenge,
  protokoll,
  weiter,
}: {
  betreuteId: string
  /** Vorbelegung fuer das Datumsfeld im Format JJJJ-MM-TT. */
  heute: string
  kontakte: Auswahleintrag[]
  vorgaenge: Auswahleintrag[]
  protokoll?: ProtokollWerte
  /** Wohin nach dem Speichern? Muss ein Pfad dieser Anwendung sein. */
  weiter?: string
}) {
  const [zustand, aktion] = useActionState(protokollSpeichern, ANFANG)

  const vorgabeDauer =
    zustand.werte?.dauerMinuten ??
    (protokoll?.dauerMinuten !== null && protokoll?.dauerMinuten !== undefined
      ? String(protokoll.dauerMinuten)
      : '')

  const [dauer, setDauer] = React.useState<string>(vorgabeDauer)

  const vorgabeArt = zustand.werte?.art ?? protokoll?.art ?? 'BESUCH'
  const vorgabeDatum = zustand.werte?.datum ?? protokoll?.datum ?? heute
  const vorgabeMitBetreuter =
    zustand.werte !== undefined
      ? zustand.werte.mitBetreuter === 'on'
      : (protokoll?.mitBetreuter ?? false)

  const mehrOffen = Boolean(
    protokoll?.gespraechspartner ||
      protokoll?.kontaktId ||
      protokoll?.vorgangId ||
      protokoll?.wuensche ||
      protokoll?.folgeaufgaben ||
      zustand.felder?.gespraechspartner ||
      zustand.felder?.kontaktId ||
      zustand.felder?.vorgangId,
  )

  return (
    <form action={aktion} className="space-y-6">
      <input type="hidden" name="betreuteId" value={betreuteId} />
      {protokoll && <input type="hidden" name="id" value={protokoll.id} />}
      {weiter && <input type="hidden" name="weiter" value={weiter} />}

      {zustand.fehler && (
        <Alert variant="fehler">
          <AlertCircle aria-hidden="true" />
          <AlertTitle>Das hat noch nicht geklappt</AlertTitle>
          <AlertDescription>{zustand.fehler}</AlertDescription>
        </Alert>
      )}

      {/* --- Datum ---------------------------------------------------------- */}
      <Feld id="datum" beschriftung="Wann war das?" pflicht fehler={zustand.felder?.datum}>
        <Input name="datum" type="date" defaultValue={vorgabeDatum} required max={heute} />
      </Feld>

      {/* --- Art als Knopfreihe --------------------------------------------- */}
      <fieldset>
        <legend className="mb-2 text-sm font-medium">Wie fand der Kontakt statt?</legend>
        <div className="grid grid-cols-2 gap-2 sm:grid-cols-5">
          {KONTAKT_ARTEN_SCHNELLWAHL.map((art) => (
            <ArtKnopf key={art} art={art} gross vorgabe={vorgabeArt} />
          ))}
        </div>
        <div className="mt-2 flex flex-wrap gap-2">
          {WEITERE_ARTEN.map((art) => (
            <ArtKnopf key={art} art={art} vorgabe={vorgabeArt} />
          ))}
        </div>
        {zustand.felder?.art && (
          <p className="mt-2 text-sm font-medium text-destructive">{zustand.felder.art}</p>
        )}
      </fieldset>

      {/* --- Dauer ---------------------------------------------------------- */}
      <fieldset>
        <legend className="mb-2 text-sm font-medium">Wie lange? (optional)</legend>
        <div className="flex flex-wrap items-center gap-2">
          {DAUER_SCHNELLWAHL.map((minuten) => {
            const gewaehlt = dauer === String(minuten)
            return (
              <button
                key={minuten}
                type="button"
                aria-pressed={gewaehlt}
                onClick={() => setDauer(gewaehlt ? '' : String(minuten))}
                className={cn(
                  'min-h-11 min-w-16 rounded-md border px-4 text-base font-medium transition-colors',
                  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
                  gewaehlt
                    ? 'border-primary bg-primary text-primary-foreground'
                    : 'border-input bg-background hover:bg-accent',
                )}
              >
                {minuten} min
              </button>
            )
          })}
          <label htmlFor="dauerMinuten" className="sr-only">
            Dauer in Minuten
          </label>
          <Input
            id="dauerMinuten"
            name="dauerMinuten"
            type="number"
            inputMode="numeric"
            min={1}
            max={1440}
            step={1}
            placeholder="frei"
            className="w-28"
            value={dauer}
            onChange={(e) => setDauer(e.target.value)}
            aria-invalid={zustand.felder?.dauerMinuten ? true : undefined}
          />
        </div>
        {zustand.felder?.dauerMinuten && (
          <p className="mt-2 text-sm font-medium text-destructive">
            {zustand.felder.dauerMinuten}
          </p>
        )}
      </fieldset>

      {/* --- Persoenlicher Kontakt ------------------------------------------ */}
      <label
        htmlFor="mitBetreuter"
        className={cn(
          'flex min-h-14 cursor-pointer items-center gap-3 rounded-md border border-input',
          'bg-background px-4 py-3 hover:bg-accent',
        )}
      >
        <Checkbox
          id="mitBetreuter"
          name="mitBetreuter"
          defaultChecked={vorgabeMitBetreuter}
          className="size-6"
        />
        <span>
          <span className="block font-medium">Persönlicher Kontakt zur betreuten Person</span>
          <span className="block text-sm text-muted-foreground">
            Zählt für den Jahresbericht nach § 1863 BGB.
          </span>
        </span>
      </label>

      {/* --- Freitext -------------------------------------------------------- */}
      <Feld
        id="inhalt"
        beschriftung="Was war?"
        erklaerung="Ein oder zwei Sätze reichen. Wird verschlüsselt gespeichert."
        fehler={zustand.felder?.inhalt}
      >
        <Textarea
          name="inhalt"
          rows={6}
          className="min-h-36"
          defaultValue={zustand.werte?.inhalt ?? protokoll?.inhalt ?? ''}
          placeholder="Besuch im Heim, Mutter war wach und hat gegessen. Sauerstoff läuft. Pflegedienstleitung will sich wegen der Höherstufung melden."
        />
      </Feld>

      {/* --- Alles Weitere, eingeklappt -------------------------------------- */}
      <details className="rounded-md border" open={mehrOffen}>
        <summary
          className={cn(
            'flex min-h-11 cursor-pointer list-none items-center justify-between gap-2 px-4 py-3',
            'text-sm font-medium marker:content-none hover:bg-accent',
            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
          )}
        >
          Weitere Angaben (optional)
          <ChevronDown className="size-4 shrink-0" aria-hidden="true" />
        </summary>

        <div className="space-y-5 border-t p-4">
          <Feld
            id="gespraechspartner"
            beschriftung="Mit wem gesprochen?"
            fehler={zustand.felder?.gespraechspartner}
          >
            <Input
              name="gespraechspartner"
              defaultValue={
                zustand.werte?.gespraechspartner ?? protokoll?.gespraechspartner ?? ''
              }
            />
          </Feld>

          <Feld
            id="kontaktId"
            beschriftung="Zu welchem Kontakt gehört das?"
            fehler={zustand.felder?.kontaktId}
          >
            <Select
              name="kontaktId"
              defaultValue={zustand.werte?.kontaktId ?? protokoll?.kontaktId ?? ''}
            >
              <option value="">– keinem bestimmten –</option>
              {kontakte.map((k) => (
                <option key={k.id} value={k.id}>
                  {k.bezeichnung}
                </option>
              ))}
            </Select>
          </Feld>

          <Feld
            id="vorgangId"
            beschriftung="Zu welchem Vorgang gehört das?"
            fehler={zustand.felder?.vorgangId}
          >
            <Select
              name="vorgangId"
              defaultValue={zustand.werte?.vorgangId ?? protokoll?.vorgangId ?? ''}
            >
              <option value="">– keinem bestimmten –</option>
              {vorgaenge.map((v) => (
                <option key={v.id} value={v.id}>
                  {v.bezeichnung}
                </option>
              ))}
            </Select>
          </Feld>

          <Feld
            id="wuensche"
            beschriftung="Geäußerte Wünsche"
            erklaerung="Der Wille der betreuten Person ist seit 2023 Leitschnur des Betreuerhandelns (§ 1821 BGB). Was hier steht, gehört in den Jahresbericht."
            fehler={zustand.felder?.wuensche}
          >
            <Textarea
              name="wuensche"
              rows={3}
              defaultValue={zustand.werte?.wuensche ?? protokoll?.wuensche ?? ''}
            />
          </Feld>

          <Feld
            id="folgeaufgaben"
            beschriftung="Was folgt daraus?"
            erklaerung="Wird nicht automatisch zu einer Aufgabe – für eine Frist bitte zusätzlich eine anlegen."
            fehler={zustand.felder?.folgeaufgaben}
          >
            <Textarea
              name="folgeaufgaben"
              rows={3}
              defaultValue={zustand.werte?.folgeaufgaben ?? protokoll?.folgeaufgaben ?? ''}
            />
          </Feld>
        </div>
      </details>

      <SpeichernKnopf neu={!protokoll} />
    </form>
  )
}

function ArtKnopf({
  art,
  vorgabe,
  gross,
}: {
  art: string
  vorgabe: string
  gross?: boolean
}) {
  return (
    <label className="block cursor-pointer">
      <input
        type="radio"
        name="art"
        value={art}
        defaultChecked={vorgabe === art}
        className="peer sr-only"
      />
      <span
        className={cn(
          'flex items-center justify-center rounded-md border border-input bg-background',
          'text-center font-medium transition-colors hover:bg-accent',
          'peer-checked:border-primary peer-checked:bg-primary peer-checked:text-primary-foreground',
          'peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2',
          gross ? 'min-h-14 px-3 text-base' : 'min-h-11 px-3 text-sm',
        )}
      >
        {KONTAKT_ART_BESCHRIFTUNG[art as keyof typeof KONTAKT_ART_BESCHRIFTUNG] ?? art}
      </span>
    </label>
  )
}

function SpeichernKnopf({ neu }: { neu: boolean }) {
  const { pending } = useFormStatus()
  return (
    <Button type="submit" size="lg" className="w-full text-base" disabled={pending}>
      {pending ? 'Wird gespeichert …' : neu ? 'Speichern' : 'Änderungen speichern'}
    </Button>
  )
}