'use client'

import { useActionState, useState } from 'react'
import type { BescheidPruefStatus } from '@prisma/client'
import { Scale } from 'lucide-react'
import { Feld } from '@/components/feld'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Badge } from '@/components/ui/badge'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Select } from '@/components/ui/select'
import { Rechtshinweis } from '@/components/rechtshinweis'
import { Absenden, Meldung } from '@/components/sozialhilfe/bausteine'
import { BescheidAbzeichen } from '@/components/sozialhilfe/abzeichen'
import {
  PRUEFSTATUS,
  PRUEFSTATUS_BESCHRIFTUNG,
  PRUEFSTATUS_ERKLAERUNG,
} from '@/lib/sozialhilfe/bescheide'
import { bescheidStatusSetzen, type Formularzustand } from '@/server/actions/sozialhilfe'

/**
 * Die Prüfansicht eines Bescheids: Rechenweg der Widerspruchsfrist,
 * Ampel und Statuswechsel.
 *
 * Der Rechenweg steht ausgeschrieben da, weil die Anwendung sich irren
 * kann. Wer eine Frist verpasst, soll sehen, wo die Rechnung abgebogen
 * ist - und nicht einer Zahl vertrauen müssen, die aus dem Nichts kommt.
 */

export type Rechenweg = {
  berechenbar: boolean
  widerspruchMoeglichBis: string | null
  rechnerischesEnde: string | null
  verschoben: boolean
  tageVerbleibend: number | null
  abgelaufen: boolean
  ampel: { variante: 'rot' | 'orange' | 'gelb' | 'gruen' | 'secondary'; text: string }
  schritte: { titel: string; text: string; rechtsgrundlage: string }[]
  hinweise: string[]
}

function alsAnzeige(iso: string | null): string {
  return iso ? iso.split('-').reverse().join('.') : '–'
}

export function BescheidPruefung({
  bescheidId,
  pruefStatus,
  widerspruchEingelegtAm,
  rechenweg,
  darfSchreiben,
}: {
  bescheidId: string
  pruefStatus: BescheidPruefStatus
  widerspruchEingelegtAm: string
  rechenweg: Rechenweg
  darfSchreiben: boolean
}) {
  const [zustand, aktion] = useActionState<Formularzustand, FormData>(bescheidStatusSetzen, {})
  const [status, setStatus] = useState<BescheidPruefStatus>(pruefStatus)

  return (
    <div className="space-y-6">
      <Card>
        <CardHeader>
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <CardTitle>Widerspruchsfrist</CardTitle>
              <CardDescription>
                Berechnet aus dem Zugangsdatum. Die Anwendung rechnet — entscheiden tun der Träger
                und im Streitfall das Sozialgericht.
              </CardDescription>
            </div>
            <Badge variant={rechenweg.ampel.variante}>{rechenweg.ampel.text}</Badge>
          </div>
        </CardHeader>

        <CardContent className="space-y-4">
          {rechenweg.berechenbar ? (
            <>
              <div className="rounded-lg border bg-muted/40 p-4">
                <p className="text-sm text-muted-foreground">Widerspruch möglich bis</p>
                <p className="text-2xl font-semibold tabular-nums">
                  {alsAnzeige(rechenweg.widerspruchMoeglichBis)}
                </p>
                {rechenweg.verschoben && (
                  <p className="mt-1 text-sm text-muted-foreground">
                    Rechnerisch wäre es der {alsAnzeige(rechenweg.rechnerischesEnde)} gewesen —
                    verschoben auf den nächsten Werktag.
                  </p>
                )}
              </div>

              <ol className="space-y-3">
                {rechenweg.schritte.map((schritt, i) => (
                  <li key={i} className="flex gap-3">
                    <span
                      className="mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full bg-muted text-xs font-semibold"
                      aria-hidden="true"
                    >
                      {i + 1}
                    </span>
                    <div className="min-w-0">
                      <p className="text-sm font-medium">{schritt.titel}</p>
                      <p className="text-sm text-muted-foreground">{schritt.text}</p>
                      <p className="mt-0.5 text-xs font-medium text-muted-foreground">
                        {schritt.rechtsgrundlage}
                      </p>
                    </div>
                  </li>
                ))}
              </ol>
            </>
          ) : (
            <Alert variant="warnung">
              <Scale aria-hidden="true" />
              <AlertTitle>Frist noch nicht berechenbar</AlertTitle>
              <AlertDescription>
                Ohne Zugangsdatum lässt sich nichts rechnen. Trag oben ein, wann der Bescheid im
                Briefkasten lag.
              </AlertDescription>
            </Alert>
          )}

          {rechenweg.hinweise.map((hinweis, i) => (
            <Alert key={i} variant="hinweis">
              <Scale aria-hidden="true" />
              <AlertDescription>{hinweis}</AlertDescription>
            </Alert>
          ))}

          <Rechtshinweis rechtsgrundlage="§ 84 SGG" />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <div className="flex flex-wrap items-center justify-between gap-3">
            <div>
              <CardTitle>Prüfstand</CardTitle>
              <CardDescription>{PRUEFSTATUS_ERKLAERUNG[pruefStatus]}</CardDescription>
            </div>
            <BescheidAbzeichen status={pruefStatus} />
          </div>
        </CardHeader>

        <CardContent>
          {darfSchreiben ? (
            <form action={aktion} className="space-y-4">
              <input type="hidden" name="bescheidId" value={bescheidId} />
              <Meldung zustand={zustand} />

              <Feld
                id="pruefStatus"
                beschriftung="Neuer Stand"
                fehler={zustand.felder?.pruefStatus}
                erklaerung={PRUEFSTATUS_ERKLAERUNG[status]}
              >
                <Select
                  name="pruefStatus"
                  value={status}
                  onChange={(e) => setStatus(e.target.value as BescheidPruefStatus)}
                >
                  {PRUEFSTATUS.map((s) => (
                    <option key={s} value={s}>
                      {PRUEFSTATUS_BESCHRIFTUNG[s]}
                    </option>
                  ))}
                </Select>
              </Feld>

              {status === 'WIDERSPRUCH_EINGELEGT' && (
                <Feld
                  id="widerspruchEingelegtAm"
                  beschriftung="Widerspruch eingelegt am"
                  pflicht
                  fehler={zustand.felder?.widerspruchEingelegtAm}
                  erklaerung="Der Tag, an dem der Widerspruch beim Träger eingegangen ist — nicht der Tag, an dem du ihn geschrieben hast."
                >
                  <Input
                    name="widerspruchEingelegtAm"
                    type="date"
                    defaultValue={widerspruchEingelegtAm}
                  />
                </Feld>
              )}

              <Absenden variant="outline">Stand übernehmen</Absenden>
            </form>
          ) : (
            <p className="text-sm text-muted-foreground">
              Zum Ändern des Prüfstands fehlt dir die Schreibberechtigung.
            </p>
          )}
        </CardContent>
      </Card>
    </div>
  )
}