"use client";

import { useState } from "react";
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;
  labelClassName?: string;
};

/**
 * 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, labelClassName }: SvNummerFieldProps) {
  const [touched, setTouched] = useState(false);
  const applies = requiresAustrianSvnr(locationCountry);
  const error = applies && value.trim() !== "" ? validateSvnr(value, birthDate) : null;
  const showError = touched && error !== null;

  return (
    <div>
      <label htmlFor="sv-nummer" className={labelClassName ?? "mb-1 block text-sm font-semibold text-ink"}>
        SV-Nummer
      </label>
      <input
        id="sv-nummer"
        value={value}
        inputMode="numeric"
        placeholder={applies ? "1237 010180" : undefined}
        onChange={(e) => onChange(e.target.value)}
        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);
        }}
        aria-invalid={showError || undefined}
        aria-describedby={showError ? "sv-nummer-error" : undefined}
        className={`w-full rounded border px-3 py-2 text-sm ${showError ? "border-danger-solid" : "border-border"}`}
      />
      {showError && (
        <p id="sv-nummer-error" className="mt-1 text-xs font-semibold text-danger-text">
          {svnrErrorMessage(error)}
        </p>
      )}
      {applies && !showError && (
        <p className="mt-1 text-xs text-ink-muted">10 Ziffern: laufende Nummer, Prüfziffer, Geburtsdatum (TTMMJJ).</p>
      )}
    </div>
  );
}