import { SelectField, TextField } from "@/components/ui/Field";
import { EMERGENCY_RELATIONS } from "@/lib/types";
import type { HireDraftData } from "./types";

// Eigener Schritt, kurz vor der Zusammenfassung.
//
// Zuerst stand das zwischen den Stammdaten — dort ging es unter, obwohl es
// die einzige Angabe im ganzen Assistenten ist, die eine dritte Person
// betrifft und im Ernstfall gebraucht wird.
//
// Die Angabe bleibt freiwillig. Wer sie macht, braucht Name und Nummer
// zusammen; das prüft der Assistent, bevor er weiterlässt, und die Datenbank
// noch einmal (chk_emergency_contact).
export function StepNotfallkontakt({
  draft,
  update,
}: {
  draft: HireDraftData;
  update: (patch: Partial<HireDraftData>) => void;
}) {
  const angefangen = Boolean(draft.emergencyContactName.trim() || draft.emergencyContactPhone.trim());
  const unvollstaendig = angefangen && !(draft.emergencyContactName.trim() && draft.emergencyContactPhone.trim());

  return (
    <div className="flex flex-col gap-4">
      <p className="max-w-prose text-sm text-ink-muted">
        Wen sollen wir verständigen, wenn etwas passiert? Die Angabe ist freiwillig — Name und Telefonnummer gehören
        aber zusammen, eines allein hilft im Ernstfall nicht.
      </p>

      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <TextField
          label="Name"
          value={draft.emergencyContactName}
          onChange={(emergencyContactName) => update({ emergencyContactName })}
        />
        <TextField
          label="Telefon"
          type="tel"
          value={draft.emergencyContactPhone}
          onChange={(emergencyContactPhone) => update({ emergencyContactPhone })}
        />
      </div>

      <SelectField
        label="Verhältnis"
        value={draft.emergencyContactRelation}
        onChange={(emergencyContactRelation) => update({ emergencyContactRelation })}
        placeholder="Bitte wählen…"
        options={EMERGENCY_RELATIONS.map((r) => ({ value: r, label: r }))}
      />

      {unvollstaendig && (
        <p role="alert" className="rounded-md border border-danger-text/20 bg-danger-bg px-3 py-2 text-sm text-danger-text">
          Name und Telefonnummer werden beide gebraucht — oder beide leer lassen.
        </p>
      )}
    </div>
  );
}