'use client';

import { useActionState } from 'react';
import { Absenden, Meldung } from '@/komponenten/Formularmeldung';
import { blattAbzeichnen, blattZurueckgeben, type Rueckmeldung } from '../aktionen';

/**
 * Abzeichnen oder zurückgeben.
 *
 * Zurückgeben verlangt eine Anmerkung – ohne sie weiß der Azubi nicht, was er
 * ändern soll, und das Blatt pendelt hin und her.
 */
export function Abzeichnen({
  berichtId,
  anmerkung,
  status,
}: {
  berichtId: string;
  anmerkung: string;
  status: string;
}) {
  const [abzeichenZustand, abzeichnen] = useActionState<Rueckmeldung, FormData>(blattAbzeichnen, {});
  const [rueckgabeZustand, zurueckgeben] = useActionState<Rueckmeldung, FormData>(blattZurueckgeben, {});

  if (status === 'abgezeichnet') return null;

  return (
    <form action={abzeichnen} className="stapel-eng">
      <input type="hidden" name="berichtId" value={berichtId} />

      <Meldung zustand={abzeichenZustand} />
      <Meldung zustand={rueckgabeZustand} />

      <label htmlFor="anmerkung">Anmerkung an den Azubi</label>
      <textarea
        id="anmerkung"
        name="anmerkung"
        rows={3}
        maxLength={2000}
        defaultValue={anmerkung}
        placeholder="Beim Abzeichnen freiwillig, beim Zurückgeben nötig: Was soll er ändern?"
      />

      <div className="reihe">
        <Absenden className="knopf knopf-akzent">Abzeichnen</Absenden>
        <button type="submit" className="knopf knopf-zweit" formAction={zurueckgeben}>
          Zur Nacharbeit zurückgeben
        </button>
      </div>

      <p className="leise" style={{ marginBottom: 0 }}>
        Abzeichnen sperrt das Blatt endgültig – der Azubi kann es danach nicht mehr ändern.
      </p>
    </form>
  );
}