'use client'

import { useState, useTransition } from 'react'
import { caseText, entryText } from '@/lib/i18n/cases'
import { actionErrorsText } from '@/lib/i18n/common'
import { changeStatusAction } from '@/app/(app)/faelle/actions'
import type { StatusOption } from '@/lib/cases/lifecycle'

/**
 * Der Lebenszyklus als Karte statt als Auswahlliste.
 *
 * Vorher stand hier ein Auswahlfeld, das nur die gerade erreichbaren Zustände
 * enthielt. Das liest sich nicht: man sah weder, wo die Akte steht, noch
 * welche Zustände es überhaupt gibt, und die Liste hatte nach jedem Wechsel
 * andere Einträge. Eine Auswahl, die ihre Einträge tauscht, ist keine
 * Orientierung.
 *
 * Jetzt stehen **immer alle sieben** da, in der Reihenfolge des Lebenszyklus.
 * Was sich ändert, ist allein die Schaltbarkeit - und wer auf einen gesperrten
 * Zustand zeigt, erfährt den Grund, statt ihn zu raten.
 *
 * Nicht optimistisch: ein Statuswechsel schreibt einen Verlaufseintrag und ist
 * teils nicht umkehrbar. Siehe docs/09-performance-und-ux.md.
 */
const MIN_BEGRUENDUNG = 10

export function StatusMap({
  caseNumber,
  current,
  options,
}: {
  caseNumber: string
  current: string
  /** Zu jedem Zustand die Auskunft vom Server. Reihenfolge = Lebenszyklus. */
  options: StatusOption[]
}) {
  const [ziel, setZiel] = useState<string | null>(null)
  const [grund, setGrund] = useState('')
  const [fehler, setFehler] = useState<string | null>(null)
  const [pending, startTransition] = useTransition()

  const gewaehlt = options.find((o) => o.status === ziel) ?? null
  const brauchtGrund = gewaehlt?.requiresReason ?? false
  const grundFehlt = brauchtGrund && grund.trim().length < MIN_BEGRUENDUNG
  const irgendwasMoeglich = options.some((o) => o.available)

  // Hauptweg und Nebenwege getrennt: DRAFT bis ARCHIVED ist eine Linie,
  // Ruhend und Versiegelt hängen daneben. In einer Reihe sähe es aus, als
  // käme nach "Archiviert" noch etwas.
  const haupt = options.slice(0, 5)
  const neben = options.slice(5)

  function wechseln() {
    if (!ziel) return
    const name = caseText.statusNames[ziel] ?? ziel
    if (!confirm(`${caseText.statusTo(name)}?`)) return

    setFehler(null)
    startTransition(async () => {
      const ergebnis = await changeStatusAction({
        caseNumber,
        to: ziel,
        reason: grund.trim() || undefined,
      })
      if (ergebnis.ok) {
        setZiel(null)
        setGrund('')
      } else {
        setFehler(ergebnis.error ?? actionErrorsText.default!)
      }
    })
  }

  return (
    <div>
      <p className="font-condensed text-text-dim">{caseText.statusMap}</p>

      <div className="mt-2 flex flex-wrap items-center gap-1.5">
        {haupt.map((option, index) => (
          <span key={option.status} className="flex items-center gap-1.5">
            {index > 0 ? <span aria-hidden className="text-text-dim">›</span> : null}
            <StatusChip
              option={option}
              current={current}
              selected={ziel === option.status}
              onPick={() => setZiel(option.status)}
              disabled={pending}
            />
          </span>
        ))}
      </div>

      <div className="mt-2 flex flex-wrap items-center gap-1.5">
        <span className="font-condensed text-2xs text-text-dim">{caseText.statusSide}</span>
        {neben.map((option) => (
          <StatusChip
            key={option.status}
            option={option}
            current={current}
            selected={ziel === option.status}
            onPick={() => setZiel(option.status)}
            disabled={pending}
          />
        ))}
      </div>

      {/* Was der gewählte Zustand bedeutet - und was er verlangt. Beides stand
          vorher nirgends, sondern kam erst als Absage zurück. */}
      <p className="mt-3 max-w-md text-2xs text-text-dim">
        {ziel
          ? (caseText.statusHints[ziel] ?? '')
          : irgendwasMoeglich
            ? caseText.statusPick
            : caseText.statusNothingPossible}
      </p>

      {gewaehlt?.requiresCompleteSections ? (
        <p className="mt-1 max-w-md text-2xs text-stamp-3">{caseText.statusNeedsComplete}</p>
      ) : null}

      {ziel ? (
        <div className="mt-3 flex flex-wrap items-center gap-2">
          <input
            value={grund}
            onChange={(event) => setGrund(event.target.value)}
            placeholder={entryText.changeReason}
            aria-label={entryText.changeReason}
            className="field w-56"
          />
          <button
            type="button"
            onClick={wechseln}
            disabled={pending || grundFehlt}
            className="btn btn-primary"
          >
            {pending ? caseText.saving : caseText.statusGo}
          </button>
          {brauchtGrund ? (
            <span className="text-2xs text-stamp-3">{caseText.statusReasonRequired}</span>
          ) : null}
        </div>
      ) : null}

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

/**
 * Ein Zustand. Immer sichtbar - gesperrt heisst blass und nicht anklickbar,
 * nicht abwesend. Der Grund steht als Titel daran, damit niemand rät.
 */
function StatusChip({
  option,
  current,
  selected,
  onPick,
  disabled,
}: {
  option: StatusOption
  current: string
  selected: boolean
  onPick: () => void
  disabled: boolean
}) {
  const name = caseText.statusNames[option.status] ?? option.status
  const istJetzt = option.status === current

  const grund = option.block
    ? option.block.kind === 'no-permission'
      ? caseText.statusNoPermission(option.block.permission)
      : option.block.kind === 'locked'
        ? (caseText.statusBlocked[option.block.reason] ?? caseText.statusBlocked.locked!)
        : (caseText.statusBlocked[option.block.kind] ?? '')
    : (caseText.statusHints[option.status] ?? '')

  if (istJetzt) {
    return (
      <span className="stamp-mark" title={grund}>
        {name}
        <span className="ml-1.5 text-2xs opacity-70">{caseText.statusNow}</span>
      </span>
    )
  }

  return (
    <button
      type="button"
      onClick={onPick}
      disabled={!option.available || disabled}
      title={grund}
      aria-pressed={selected}
      className={`btn btn-sm ${selected ? 'btn-primary' : ''} ${
        option.available ? '' : 'opacity-40'
      }`}
    >
      {name}
    </button>
  )
}