'use client'

import * as React from 'react'
import { useActionState } from 'react'
import { AlertCircle, CheckCircle2, Link2, Undo2, XCircle } from 'lucide-react'
import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Absendeknopf } from '@/components/finanzen/eingaben'
import {
  zahlungenVertragZuordnen,
  zahlungsgruppeAbhaken,
  zahlungsgruppeZurueckholen,
  type Formularzustand,
} from '@/server/actions/finanzen'

/**
 * „Kein Vertrag" — eine Gruppe dauerhaft aus der Liste nehmen.
 *
 * Die Begründung ist freiwillig, steht aber im Formular ganz vorn. In einem
 * Jahr weiß niemand mehr, warum „Stadtwerke Bamberg" abgehakt wurde, und
 * dann fängt die Prüfung von vorn an. Ein halber Satz jetzt spart das.
 */
export function AlsGeklaertAbhaken({
  betreuteId,
  schluessel,
  anzeigename,
}: {
  betreuteId: string
  schluessel: string
  anzeigename: string
}) {
  const [zustand, absenden] = useActionState<Formularzustand, FormData>(
    zahlungsgruppeAbhaken,
    {},
  )
  const [offen, setOffen] = React.useState(false)

  if (!offen) {
    return (
      <div className="space-y-2">
        {zustand.fehler && (
          <Alert variant="fehler">
            <AlertCircle aria-hidden="true" />
            <AlertDescription>{zustand.fehler}</AlertDescription>
          </Alert>
        )}
        <Button type="button" variant="ghost" size="sm" onClick={() => setOffen(true)}>
          <XCircle aria-hidden="true" />
          Kein Vertrag
        </Button>
      </div>
    )
  }

  return (
    <form action={absenden} className="space-y-2 rounded-md border p-3">
      <input type="hidden" name="betreuteId" value={betreuteId} />
      <input type="hidden" name="schluessel" value={schluessel} />
      <input type="hidden" name="anzeigename" value={anzeigename} />

      <p className="text-sm">
        „{anzeigename}“ verschwindet aus der Liste. Zurückholen geht jederzeit.
      </p>

      <Input
        name="begruendung"
        placeholder="Warum kein Vertrag? (z. B. Miete, Strom, Steuer)"
        maxLength={200}
        autoFocus
      />

      <div className="flex gap-2">
        <Absendeknopf size="sm" wartetext="Wird abgehakt …">
          Abhaken
        </Absendeknopf>
        <Button type="button" variant="ghost" size="sm" onClick={() => setOffen(false)}>
          Abbrechen
        </Button>
      </div>
    </form>
  )
}

/** Holt eine abgehakte Gruppe zurück in die Liste. */
export function Zurueckholen({
  betreuteId,
  eintragId,
}: {
  betreuteId: string
  eintragId: string
}) {
  const [zustand, absenden] = useActionState<Formularzustand, FormData>(
    zahlungsgruppeZurueckholen,
    {},
  )

  return (
    <form action={absenden} className="inline">
      <input type="hidden" name="betreuteId" value={betreuteId} />
      <input type="hidden" name="eintragId" value={eintragId} />
      {zustand.fehler && (
        <span className="mr-2 text-xs text-destructive">{zustand.fehler}</span>
      )}
      <Absendeknopf variant="ghost" size="sm" wartetext="…">
        <Undo2 aria-hidden="true" />
        Zurückholen
      </Absendeknopf>
    </form>
  )
}

/**
 * Zeigt die Rückmeldung der letzten Aktion.
 *
 * Bewusst getrennt von den Knöpfen: Nach dem Abhaken verschwindet die
 * ganze Zeile samt Knopf, und mit ihr die Erfolgsmeldung. Sie hier
 * anzuzeigen wäre sinnlos — deshalb steht der Erfolg als kurzer Hinweis
 * oben auf der Seite, sobald die Liste neu geladen ist.
 */
export function Rueckmeldung({ text }: { text: string | null }) {
  if (!text) return null
  return (
    <Alert variant="erfolg">
      <CheckCircle2 aria-hidden="true" />
      <AlertDescription>{text}</AlertDescription>
    </Alert>
  )
}

/**
 * Ordnet alle noch offenen Buchungen einer Gruppe dem Vertrag zu.
 *
 * Der Sinn dieses Knopfes ist die Menge: Eine monatliche Prämie über drei
 * Jahre sind 36 Buchungen. Sie einzeln anzuklicken wäre genau die stumpfe
 * Arbeit, die diese Zuordnung abschaffen soll.
 */
export function ZahlungenZuordnen({
  betreuteId,
  vertragId,
  vertragBezeichnung,
  buchungIds,
}: {
  betreuteId: string
  vertragId: string
  vertragBezeichnung: string
  buchungIds: string[]
}) {
  const [zustand, absenden] = useActionState<Formularzustand, FormData>(
    zahlungenVertragZuordnen,
    {},
  )

  if (buchungIds.length === 0) return null

  return (
    <form action={absenden} className="flex flex-wrap items-center gap-2">
      <input type="hidden" name="betreuteId" value={betreuteId} />
      <input type="hidden" name="vertragId" value={vertragId} />
      <input type="hidden" name="buchungIds" value={buchungIds.join(',')} />

      {zustand.fehler && (
        <span className="text-xs text-destructive">{zustand.fehler}</span>
      )}
      {zustand.erfolg && (
        <span className="text-xs text-ampel-gruen">{zustand.erfolg}</span>
      )}

      <Absendeknopf variant="outline" size="sm" wartetext="Wird zugeordnet …">
        <Link2 aria-hidden="true" />
        {buchungIds.length} Zahlung{buchungIds.length === 1 ? '' : 'en'} als belegt zuordnen
      </Absendeknopf>

      <span className="text-xs text-muted-foreground">zu „{vertragBezeichnung}“</span>
    </form>
  )
}