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">
      <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 (privat)" type="email" value={draft.email} onChange={(email) => update({ email })} />
        <TextField label="Telefon" type="tel" value={draft.phone} onChange={(phone) => update({ phone })} />
      </div>
      <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>
  );
}