import { SvNummerField } from "@/components/employees/SvNummerField";
import { TitleFields } from "@/components/employees/TitleFields";
import { SelectField, TextField } from "@/components/ui/Field";
import type { HireDraftData } from "./types";

type StepPersonProps = {
  draft: HireDraftData;
  update: (patch: Partial<HireDraftData>) => void;
  locations: { id: string; name: string; country: string }[];
};

export function StepPerson({ draft, update, locations }: StepPersonProps) {
  return (
    <div className="flex flex-col gap-4">
      <TextField
        label="Personalnummer"
        required
        inputMode="numeric"
        value={draft.personnelNumber}
        onChange={(personnelNumber) => update({ personnelNumber: personnelNumber.replace(/\D/g, "") })}
        hint="Muss mit Loga und Interflex übereinstimmen. Wird nicht automatisch vergeben."
      />
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <TextField label="Vorname" required value={draft.firstName} onChange={(firstName) => update({ firstName })} />
        <TextField label="Nachname" required value={draft.lastName} onChange={(lastName) => update({ lastName })} />
      </div>
      <TitleFields value={draft} onChange={update} />
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <SelectField
          label="Geschlecht"
          required
          value={draft.gender}
          onChange={(gender) => update({ gender: gender as HireDraftData["gender"] })}
          options={[
            { value: "m", label: "männlich" },
            { value: "w", label: "weiblich" },
          ]}
        />
        <TextField label="Geburtsdatum" required type="date" value={draft.birthDate} onChange={(birthDate) => update({ birthDate })} />
      </div>
      <SvNummerField
        value={draft.svNummer}
        onChange={(svNummer) => update({ svNummer })}
        locationCountry={locations.find((l) => l.id === draft.locationId)?.country}
        birthDate={draft.birthDate || null}
      />
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <TextField label="E-Mail" required type="email" value={draft.email} onChange={(email) => update({ email })} />
        <TextField label="Telefon" type="tel" value={draft.phone} onChange={(phone) => update({ phone })} />
      </div>
      {/* Daten einer dritten Person — nur für den Notfall erhoben. Name und
          Nummer gehören zusammen: eines allein nützt im Ernstfall nichts,
          und die Datenbank weist es ab. */}
      <fieldset className="rounded-md border border-border-subtle p-3">
        <legend className="px-1 text-xs font-semibold uppercase tracking-wide text-ink-muted">Notfallkontakt</legend>
        <div className="flex flex-col gap-3">
          <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>
          <TextField
            label="Verhältnis"
            value={draft.emergencyContactRelation}
            onChange={(emergencyContactRelation) => update({ emergencyContactRelation })}
            hint="Zum Beispiel Gattin, Bruder, Freundin. Freitext — die Aufzählung liesse sich nicht schliessen."
          />
        </div>
      </fieldset>

      <SelectField
        label="Standort"
        required
        value={draft.locationId}
        onChange={(locationId) => update({ locationId })}
        placeholder="Bitte wählen…"
        options={locations.map((l) => ({ value: l.id, label: `${l.name} (${l.country})` }))}
      />
    </div>
  );
}