"use client";

import { useActionState } from "react";
import { mitarbeiterAktivSetzenAktion, type AktionsErgebnis } from "@/server/actions/mitarbeiter";

/**
 * Deaktivieren und wieder aktivieren.
 *
 * Der einzige „Weg hinaus“ – geloescht wird nichts. Ein archivierter Lauf zeigt
 * auf diese Person, und dieser Verweis muss in zehn Jahren noch aufloesbar sein.
 */
export function MitarbeiterAktiv({ mitarbeiterId, aktiv }: { mitarbeiterId: string; aktiv: boolean }) {
  const [ergebnis, aktion, laeuft] = useActionState<AktionsErgebnis, FormData>(
    mitarbeiterAktivSetzenAktion,
    {},
  );

  return (
    <div>
      <form action={aktion}>
        <input type="hidden" name="mitarbeiterId" value={mitarbeiterId} />
        <input type="hidden" name="aktiv" value={aktiv ? "false" : "true"} />
        <button
          type="submit"
          disabled={laeuft}
          className={`flex min-h-11 w-fit items-center rounded-pille px-4 text-sm md:min-h-10 ${
            aktiv
              ? "border border-linie text-nebentext hover:bg-flaeche-hoch hover:text-text"
              : "bg-flaeche-hoch text-nebentext hover:text-text"
          }`}
        >
          {aktiv ? "deaktivieren" : "wieder aktivieren"}
        </button>
      </form>
      {ergebnis.fehler ? (
        <p role="alert" className="mt-2 max-w-prose text-sm text-fehler">
          {ergebnis.fehler}
        </p>
      ) : null}
    </div>
  );
}