"use client";

import { useState } from "react";
import { TextField } from "@/components/ui/Field";
import { formatSvnr, requiresAustrianSvnr, svnrErrorMessage, validateSvnr } from "@/lib/svnr";

type SvNummerFieldProps = {
  value: string;
  onChange: (value: string) => void;
  /** Country of the employee's work location — validation applies to Austria only. */
  locationCountry: string | null | undefined;
  /** ISO yyyy-mm-dd; enables the cross-check against the TTMMJJ tail. */
  birthDate?: string | null;
  dense?: boolean;
};

/**
 * Shared by the hire wizard and the "Daten ändern" panel so both apply the
 * same rule. Errors are shown only once the field has been left, so the
 * message does not flash while the ten digits are still being typed.
 */
export function SvNummerField({ value, onChange, locationCountry, birthDate, dense }: SvNummerFieldProps) {
  const [touched, setTouched] = useState(false);
  const applies = requiresAustrianSvnr(locationCountry);
  const error = applies && value.trim() !== "" ? validateSvnr(value, birthDate) : null;

  return (
    <TextField
      label="SV-Nummer"
      dense={dense}
      value={value}
      onChange={onChange}
      inputMode="numeric"
      placeholder={applies ? "1237 010180" : undefined}
      error={touched && error ? svnrErrorMessage(error) : null}
      hint={applies ? "10 Ziffern: laufende Nummer, Prüfziffer, Geburtsdatum (TTMMJJ)." : undefined}
      onBlur={() => {
        setTouched(true);
        // Normalise to the conventional "NNNN TTMMJJ" spacing once the value
        // is complete; anything else is left exactly as typed.
        const formatted = formatSvnr(value);
        if (formatted !== value) onChange(formatted);
      }}
    />
  );
}
