Date field

"use client";

import {
  Fragment,
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type ChangeEvent,
  type ComponentProps,
  type KeyboardEvent,
  type ReactNode,
  type ToggleEvent,
} from "react";
import { Button } from "./button";
import { Calendar } from "./calendar";
import { Popover } from "./popover";
import "./date-field.css";

type Kind = "day" | "month" | "year";
type Parts = Record<Kind, number | null>;

export type DateFieldProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
  label: string;
  /** ISO date, "2026-11-13". null while the field is empty or incomplete. */
  value?: string | null;
  defaultValue?: string | null;
  /** Called with the ISO date once day, month and year are all set, and with null when one is cleared. */
  onValueChange?: (value: string | null) => void;
  min?: string;
  max?: string;
  /** Name of a hidden input that carries the ISO value in a form. */
  name?: string;
  hint?: ReactNode;
  error?: ReactNode;
  disabled?: boolean;
  locale?: string;
  weekStartsOn?: 0 | 1;
  /** Today as an ISO date, for the calendar's marker. When absent it is read from the device after mount. */
  today?: string;
};

const SEGMENTS: Record<Kind, { label: string; placeholder: string; length: number; min: number; max: number }> = {
  day: { label: "Day", placeholder: "dd", length: 2, min: 1, max: 31 },
  month: { label: "Month", placeholder: "mm", length: 2, min: 1, max: 12 },
  year: { label: "Year", placeholder: "yyyy", length: 4, min: 1, max: 9999 },
};

const pad = (n: number, length = 2) => String(n).padStart(length, "0");

function daysIn(year: number, month: number) {
  const date = new Date(0);
  date.setUTCFullYear(year, month, 0);
  return date.getUTCDate();
}

function toParts(iso: string | null | undefined): Parts {
  const match = iso?.match(/^(\d{4})-(\d{2})-(\d{2})$/);
  if (!match) return { day: null, month: null, year: null };
  return { year: Number(match[1]), month: Number(match[2]), day: Number(match[3]) };
}

function toISO({ day, month, year }: Parts) {
  return day && month && year ? `${pad(year, 4)}-${pad(month)}-${pad(day)}` : null;
}

function localToday() {
  const now = new Date();
  return `${pad(now.getFullYear(), 4)}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`;
}

/** Segment order and separator for the locale, read from a fixed date so the render is stable. */
function layoutFor(locale: string) {
  const parts = new Intl.DateTimeFormat(locale, {
    day: "2-digit",
    month: "2-digit",
    year: "numeric",
    timeZone: "UTC",
  }).formatToParts(new Date(Date.UTC(2026, 10, 13)));
  const order = parts.map((p) => p.type).filter((t): t is Kind => t === "day" || t === "month" || t === "year");
  const separator = parts.find((p) => p.type === "literal")?.value.trim() || "/";
  return { order: order.length === 3 ? order : (["day", "month", "year"] as Kind[]), separator };
}

export function DateField({
  label,
  value,
  defaultValue,
  onValueChange,
  min,
  max,
  name,
  hint,
  error,
  disabled,
  locale = "en-GB",
  weekStartsOn = 1,
  today,
  className,
  ...rest
}: DateFieldProps) {
  const id = useId();
  const [parts, setParts] = useState<Parts>(() => toParts(value ?? defaultValue));
  const [synced, setSynced] = useState(value);
  const iso = toISO(parts);
  if (value !== undefined && value !== synced) {
    setSynced(value);
    if (value !== iso) setParts(toParts(value));
  }
  const [typing, setTyping] = useState<{ kind: Kind; text: string } | null>(null);
  const [open, setOpen] = useState(false);
  const [calendarMonth, setCalendarMonth] = useState<string | undefined>();
  const [opened, setOpened] = useState(0);
  const inputs = useRef<Partial<Record<Kind, HTMLInputElement | null>>>({});
  const surface = useRef<HTMLDivElement>(null);
  const trigger = useRef<HTMLButtonElement>(null);
  const { order, separator } = useMemo(() => layoutFor(locale), [locale]);
  const spoken = useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }), [locale]);

  const outOfRange = iso !== null && ((min !== undefined && iso < min) || (max !== undefined && iso > max));
  const invalid = Boolean(error) || outOfRange;
  const hintId = hint ? `${id}-hint` : undefined;
  const errorId = error ? `${id}-error` : undefined;
  const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
  const popoverId = `${id}-calendar`;

  useEffect(() => {
    if (open) surface.current?.querySelector<HTMLElement>('.eq-calendar-day[tabindex="0"]')?.focus();
  }, [open]);

  function limit(kind: Kind, p: Parts) {
    const spec = SEGMENTS[kind];
    if (kind !== "day" || !p.month) return spec;
    return { ...spec, max: daysIn(p.year ?? 2000, p.month) };
  }

  function commit(next: Parts) {
    if (next.day && next.month) {
      const last = daysIn(next.year ?? 2000, next.month);
      if (next.day > last) next = { ...next, day: last };
    }
    setParts(next);
    const nextIso = toISO(next);
    if (nextIso !== iso) onValueChange?.(nextIso);
  }

  function focusAt(index: number) {
    const kind = order[index];
    if (kind) inputs.current[kind]?.focus();
  }

  function typeDigit(kind: Kind, digit: string) {
    const spec = limit(kind, parts);
    let text = (typing?.kind === kind ? typing.text : "") + digit;
    if (text.length > spec.length || Number(text) > spec.max) text = digit;
    const n = Number(text);
    setTyping({ kind, text });
    // A year is held until all four digits are in, so year 2 never clamps 29 February.
    if (n >= spec.min && (kind !== "year" || text.length === spec.length)) commit({ ...parts, [kind]: n });
    if (text.length >= spec.length || n * 10 > spec.max) focusAt(order.indexOf(kind) + 1);
  }

  function spin(kind: Kind, delta: number) {
    const spec = limit(kind, parts);
    const current = parts[kind];
    let n: number;
    if (current === null) {
      const [y, m, d] = (today ?? localToday()).split("-").map(Number);
      n = kind === "day" ? Math.min(d, spec.max) : kind === "month" ? m : y;
    } else if (kind === "year") {
      n = Math.min(spec.max, Math.max(spec.min, current + delta));
    } else {
      const span = spec.max - spec.min + 1;
      n = ((((current + delta - spec.min) % span) + span) % span) + spec.min;
    }
    setTyping(null);
    commit({ ...parts, [kind]: n });
  }

  function clear(kind: Kind) {
    setTyping(null);
    commit({ ...parts, [kind]: null });
  }

  function handleKeyDown(kind: Kind, event: KeyboardEvent<HTMLInputElement>) {
    const index = order.indexOf(kind);
    if (event.metaKey || event.ctrlKey || event.altKey) return;
    if (/^\d$/.test(event.key)) {
      event.preventDefault();
      event.stopPropagation();
      typeDigit(kind, event.key);
      return;
    }
    switch (event.key) {
      case "ArrowUp":
        spin(kind, 1);
        break;
      case "ArrowDown":
        spin(kind, -1);
        break;
      case "ArrowLeft":
        focusAt(index - 1);
        break;
      case "ArrowRight":
        focusAt(index + 1);
        break;
      case "Backspace":
      case "Delete":
        if (parts[kind] === null && !typing && event.key === "Backspace") focusAt(index - 1);
        else clear(kind);
        break;
      default:
        if (event.key.length !== 1) return;
        event.stopPropagation();
        // Typing the separator moves on, as it would in a plain text date.
        if (/[\s./,-]/.test(event.key)) focusAt(index + 1);
    }
    event.preventDefault();
  }

  /** Touch keyboards send input events rather than key presses; read the digit that arrived. */
  function handleChange(kind: Kind, event: ChangeEvent<HTMLInputElement>) {
    const text = event.target.value;
    if (text.length < display(kind).length) {
      clear(kind);
      return;
    }
    const typed = text.charAt((event.target.selectionStart ?? text.length) - 1);
    if (/^\d$/.test(typed)) typeDigit(kind, typed);
  }

  function display(kind: Kind) {
    if (typing?.kind === kind) return typing.text;
    const n = parts[kind];
    return n === null ? "" : pad(n, SEGMENTS[kind].length);
  }

  function handleBeforeToggle(event: ToggleEvent<HTMLDivElement>) {
    if (event.newState !== "open") return;
    // A fresh calendar each time: focus starts on the chosen day and nothing replays.
    setOpened((n) => n + 1);
    setCalendarMonth((iso ?? today ?? localToday()).slice(0, 7));
  }

  function pick(next: string) {
    setTyping(null);
    commit(toParts(next));
    surface.current?.hidePopover();
    trigger.current?.focus();
  }

  return (
    <div
      {...rest}
      className={["eq-date-field", className].filter(Boolean).join(" ")}
      data-disabled={disabled || undefined}
    >
      <label className="eq-date-field-label" id={`${id}-label`} htmlFor={`${id}-${order[0]}`}>
        {label}
      </label>
      <div
        className="eq-date-field-control"
        role="group"
        aria-labelledby={`${id}-label`}
        aria-describedby={describedBy}
        data-invalid={invalid || undefined}
      >
        {order.map((kind, index) => {
          const spec = limit(kind, parts);
          const shown = display(kind);
          return (
            <Fragment key={kind}>
              {index > 0 && (
                <span className="eq-date-field-separator" aria-hidden="true">
                  {separator}
                </span>
              )}
              <input
                ref={(node) => {
                  inputs.current[kind] = node;
                }}
                id={`${id}-${kind}`}
                className="eq-date-field-segment"
                data-kind={kind}
                role="spinbutton"
                inputMode="numeric"
                autoComplete="off"
                spellCheck={false}
                aria-label={spec.label}
                aria-valuemin={spec.min}
                aria-valuemax={spec.max}
                aria-valuenow={parts[kind] ?? undefined}
                aria-valuetext={shown || "Empty"}
                aria-invalid={invalid || undefined}
                aria-describedby={describedBy}
                placeholder={spec.placeholder}
                value={shown}
                disabled={disabled}
                onFocus={() => setTyping(null)}
                onBlur={() => {
                  if (typing?.kind === "year" && kind === "year" && Number(typing.text) >= 1) {
                    commit({ ...parts, year: Number(typing.text) });
                  }
                  setTyping(null);
                }}
                onKeyDown={(event) => handleKeyDown(kind, event)}
                onChange={(event) => handleChange(kind, event)}
              />
            </Fragment>
          );
        })}
        <Button
          ref={trigger}
          className="eq-date-field-trigger"
          variant="ghost"
          size="s"
          popoverTarget={popoverId}
          aria-label={iso ? `Change date, ${spoken.format(new Date(`${iso}T00:00Z`))}` : "Choose date"}
          disabled={disabled}
          lead={
            <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
              <rect x="2.5" y="3.5" width="11" height="10" rx="2" stroke="currentColor" strokeWidth="1.5" />
              <path d="M2.5 6.75h11M5.5 2v2.5M10.5 2v2.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
            </svg>
          }
        />
      </div>
      {hint && (
        <p className="eq-date-field-hint" id={hintId}>
          {hint}
        </p>
      )}
      {error && (
        <p className="eq-date-field-error" id={errorId}>
          {error}
        </p>
      )}
      {name && <input type="hidden" name={name} value={iso ?? ""} />}
      <Popover
        ref={surface}
        id={popoverId}
        placement="bottom-end"
        role="dialog"
        aria-label={label}
        onBeforeToggle={handleBeforeToggle}
        onToggle={(event) => setOpen(event.newState === "open")}
      >
        <Calendar
          key={opened}
          value={iso}
          today={today}
          onValueChange={pick}
          month={calendarMonth}
          onMonthChange={setCalendarMonth}
          min={min}
          max={max}
          locale={locale}
          weekStartsOn={weekStartsOn}
        />
      </Popover>
    </div>
  );
}