'use client'

import * as React from 'react'
import { Check, Loader2 } from 'lucide-react'
import type { PosteingangStatus } from '@prisma/client'
import { Button } from '@/components/ui/button'
import { posteingangSetzen } from '@/server/actions/dokumente'
import { POSTEINGANG_BESCHRIFTUNG, POSTEINGANG_STUFEN } from '@/lib/validierung/dokumente'
import { cn } from '@/lib/utils'

/**
 * Das Posteingangsbuch als Kette: NEU -> GESICHTET -> ZUGEORDNET ->
 * BEANTWORTET.
 *
 * Diese vier Stufen sind kein Selbstzweck. Sie beantworten die Frage, die
 * man sich am Kuechentisch mit dem Poststapel stellt: Was habe ich schon
 * gelesen, was noch nicht, und was wartet noch auf eine Antwort? Nichts
 * darf durchrutschen - dafuer gibt es diese Zeile.
 */
export function PosteingangStufen({
  dokumentId,
  status,
  schreibrecht,
  kompakt,
}: {
  dokumentId: string
  status: PosteingangStatus
  schreibrecht: boolean
  kompakt?: boolean
}) {
  const [laeuft, setLaeuft] = React.useState<string | null>(null)
  const [aktuell, setAktuell] = React.useState<PosteingangStatus>(status)

  React.useEffect(() => setAktuell(status), [status])

  const erreicht = POSTEINGANG_STUFEN.indexOf(aktuell)

  return (
    <div
      className="flex flex-wrap items-center gap-1.5"
      role="group"
      aria-label="Stand im Posteingang"
    >
      {POSTEINGANG_STUFEN.map((stufe, i) => {
        const istAktuell = stufe === aktuell
        const istErledigt = i < erreicht

        return (
          <Button
            key={stufe}
            type="button"
            size={kompakt ? 'sm' : 'default'}
            variant={istAktuell ? 'default' : istErledigt ? 'secondary' : 'outline'}
            disabled={!schreibrecht || laeuft !== null || istAktuell}
            aria-current={istAktuell ? 'step' : undefined}
            className={cn(!schreibrecht && 'pointer-events-none')}
            onClick={async () => {
              setLaeuft(stufe)
              const ergebnis = await posteingangSetzen(dokumentId, stufe)
              if (!ergebnis.fehler) setAktuell(stufe)
              setLaeuft(null)
            }}
          >
            {laeuft === stufe ? (
              <Loader2 className="animate-spin" aria-hidden="true" />
            ) : istErledigt ? (
              <Check aria-hidden="true" />
            ) : null}
            {POSTEINGANG_BESCHRIFTUNG[stufe]}
          </Button>
        )
      })}
    </div>
  )
}