Date picker

"use client";

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

export type DatePickerProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
  label: ReactNode;
  /** ISO date, "2026-11-13". null while empty or while the typed text is not a date. */
  value?: string | null;
  defaultValue?: string | null;
  /** Called with the ISO date whenever the typed text becomes a date, on a pick and on clear. */
  onValueChange?: (value: string | null) => void;
  /** Earliest valid day, ISO. */
  min?: string;
  /** Latest valid day, ISO. */
  max?: string;
  /** Name of a hidden input that carries the ISO value in a form. */
  name?: string;
  required?: boolean;
  disabled?: boolean;
  hint?: ReactNode;
  /** Error text. Replaces the part's own message for unreadable or out-of-range dates. */
  error?: ReactNode;
  /** Sets the order typed numbers are read in, the shown format and the calendar's names. */
  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;
  /** Shows a button that empties the field while it has a date. */
  clearable?: boolean;
  placeholder?: string;
};

type Kind = "day" | "month" | "year";

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

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

/** Builds the ISO date, or null when the day does not exist (31 April, 29 February 2027). */
function toISO(year: number, month: number, day: number): string | null {
  if (year < 1 || year > 9999 || month < 1 || month > 12 || day < 1) return null;
  const date = new Date(0);
  date.setUTCFullYear(year, month - 1, day);
  if (date.getUTCFullYear() !== year || date.getUTCMonth() !== month - 1 || date.getUTCDate() !== day) return null;
  return `${pad(year, 4)}-${pad(month)}-${pad(day)}`;
}

function isISO(text: string | null | undefined): text is string {
  const m = text?.match(/^(\d{4})-(\d{2})-(\d{2})$/);
  return !!m && toISO(Number(m[1]), Number(m[2]), Number(m[3])) !== null;
}

/** Order of day, month and year for the locale, and its numeric separator, read from a fixed date. */
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 };
}

/** Lower-case month names, long and short, so "13 Nov 2026" and "November 13, 2026" both read. */
function monthNamesFor(locale: string) {
  return (["long", "short"] as const).flatMap((month) => {
    const format = new Intl.DateTimeFormat(locale, { month, timeZone: "UTC" });
    return Array.from({ length: 12 }, (_, i) => ({
      name: format.format(new Date(Date.UTC(2026, i, 1))).toLowerCase().replace(/\.$/, ""),
      month: i + 1,
    }));
  });
}

/**
 * Reads typed text as a date. Accepts ISO, numbers in the locale's order with any of / . - or
 * space between them, and a month written as a word. Two-digit years are 2000 to 2099.
 */
function parse(text: string, order: Kind[], months: { name: string; month: number }[]): string | null {
  const t = text.trim().toLowerCase();
  if (!t) return null;
  const iso = t.match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
  if (iso) return toISO(Number(iso[1]), Number(iso[2]), Number(iso[3]));

  const tokens = t.split(/[\s/.,-]+/).filter(Boolean);
  if (tokens.length !== 3) return null;
  const word = tokens.findIndex((token) => /\p{L}/u.test(token));
  const year = (s: string) => (/^\d{4}$/.test(s) ? Number(s) : /^\d{2}$/.test(s) ? 2000 + Number(s) : NaN);

  if (word !== -1) {
    const found = months.find((m) => m.name === tokens[word]) ?? months.find((m) => tokens[word].length >= 3 && m.name.startsWith(tokens[word]));
    if (!found) return null;
    const numbers = tokens.filter((_, i) => i !== word);
    if (!numbers.every((n) => /^\d+$/.test(n))) return null;
    // With the month as a word, the four-digit number is the year and the other is the day.
    const [a, b] = numbers;
    const y = a.length === 4 ? a : b;
    const d = a.length === 4 ? b : a;
    if (d.length > 2) return null;
    return toISO(year(y), found.month, Number(d));
  }

  if (!tokens.every((n) => /^\d+$/.test(n))) return null;
  const parts: Record<Kind, number> = { day: NaN, month: NaN, year: NaN };
  order.forEach((kind, i) => {
    const token = tokens[i];
    parts[kind] = kind === "year" ? year(token) : token.length <= 2 ? Number(token) : NaN;
  });
  if (Object.values(parts).some(Number.isNaN)) return null;
  return toISO(parts.year, parts.month, parts.day);
}

export function DatePicker({
  label,
  value,
  defaultValue,
  onValueChange,
  min,
  max,
  name,
  required,
  disabled,
  hint,
  error,
  locale = "en-GB",
  weekStartsOn = 1,
  today,
  clearable = true,
  placeholder,
  className,
  ...rest
}: DatePickerProps) {
  const id = useId();
  const inputId = `${id}-input`;
  const popoverId = `${id}-calendar`;
  const { order, separator } = useMemo(() => layoutFor(locale), [locale]);
  const months = useMemo(() => monthNamesFor(locale), [locale]);
  const shown = useMemo(() => new Intl.DateTimeFormat(locale, { day: "numeric", month: "short", year: "numeric", timeZone: "UTC" }), [locale]);
  const spoken = useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }), [locale]);
  const format = (iso: string | null | undefined) => (isISO(iso) ? shown.format(new Date(`${iso}T00:00Z`)) : "");
  const example = order.map((kind) => (kind === "day" ? "13" : kind === "month" ? "11" : "2026")).join(separator);

  const start = isISO(value ?? defaultValue) ? (value ?? defaultValue ?? null) : null;
  const [iso, setIso] = useState<string | null>(start);
  const [text, setText] = useState(() => format(start));
  const [synced, setSynced] = useState(value);
  const [touched, setTouched] = useState(false);
  const [open, setOpen] = useState(false);
  const [month, setMonth] = useState<string | undefined>();
  const [opened, setOpened] = useState(0);

  // A controlled value that changes from outside rewrites the text.
  if (value !== undefined && value !== synced) {
    setSynced(value);
    if (value !== iso) {
      setIso(isISO(value) ? value : null);
      setText(format(value));
    }
  }

  const inputRef = useRef<HTMLInputElement>(null);
  const surface = useRef<HTMLDivElement>(null);

  const unreadable = text.trim() !== "" && iso === null;
  const early = iso !== null && min !== undefined && iso < min;
  const late = iso !== null && max !== undefined && iso > max;
  const problem = unreadable
    ? `Enter a date like ${example} or ${format("2026-11-13")}.`
    : early
      ? `Choose a date on or after ${format(min)}.`
      : late
        ? `Choose a date on or before ${format(max)}.`
        : "";
  // An unreadable date waits until the field has been left, so typing is not interrupted. A date
  // out of range is a real date that cannot be used, so it is flagged at once.
  const message = error || (unreadable ? touched && problem : problem) || null;
  const hintId = hint ? `${id}-hint` : undefined;
  const errorId = message ? `${id}-error` : undefined;

  // The input carries the problem for constraint validation, so a form's checks and :user-invalid see it.
  useLayoutEffect(() => {
    inputRef.current?.setCustomValidity(problem);
  }, [problem]);

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

  // A form reset puts the field back to where it started.
  useEffect(() => {
    const form = inputRef.current?.form;
    if (!form) return;
    function reset() {
      setTouched(false);
      commit(start);
      setText(format(start));
    }
    form.addEventListener("reset", reset);
    return () => form.removeEventListener("reset", reset);
  });

  function commit(next: string | null) {
    if (next === iso) return;
    setIso(next);
    onValueChange?.(next);
  }

  function handleChange(event: ChangeEvent<HTMLInputElement>) {
    const next = event.target.value;
    setText(next);
    commit(parse(next, order, months));
  }

  /** Leaving the field, or Enter, turns a readable date into the one unambiguous format. */
  function settle() {
    setTouched(true);
    if (iso) setText(format(iso));
  }

  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {
    if (event.key === "Enter") settle();
    else if (event.key === "ArrowDown" && event.altKey) {
      event.preventDefault();
      surface.current?.showPopover();
    } else if (event.key === "Escape" && text !== "" && !open) {
      event.preventDefault();
      event.stopPropagation();
      clear();
    }
  }

  function clear() {
    setText("");
    commit(null);
    inputRef.current?.focus();
  }

  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);
    setMonth((iso && (!min || iso >= min) ? iso : (today ?? localToday())).slice(0, 7));
  }

  function pick(next: string) {
    commit(next);
    setText(format(next));
    setTouched(true);
    surface.current?.hidePopover();
    inputRef.current?.focus();
  }

  return (
    <div {...rest} className={["eq-date-picker", className].filter(Boolean).join(" ")} data-disabled={disabled || undefined}>
      <label className="eq-date-picker-label" htmlFor={inputId}>
        {label}
      </label>
      <div className="eq-date-picker-control" data-invalid={Boolean(message) || undefined}>
        <input
          ref={inputRef}
          id={inputId}
          className="eq-date-picker-input"
          type="text"
          autoComplete="off"
          spellCheck={false}
          placeholder={placeholder ?? example}
          value={text}
          required={required}
          disabled={disabled}
          aria-invalid={Boolean(message) || undefined}
          aria-describedby={[hintId, errorId].filter(Boolean).join(" ") || undefined}
          onChange={handleChange}
          onBlur={settle}
          onKeyDown={handleKeyDown}
        />
        {clearable && text !== "" && !disabled && (
          <button type="button" className="eq-date-picker-clear" aria-label="Clear date" onClick={clear}>
            <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" aria-hidden="true">
              <path d="m5 5 6 6m0-6-6 6" />
            </svg>
          </button>
        )}
        <Button
          className="eq-date-picker-trigger"
          variant="ghost"
          size="s"
          popoverTarget={popoverId}
          aria-label={iso ? `Change date, ${spoken.format(new Date(`${iso}T00:00Z`))}` : "Choose date"}
          aria-expanded={open}
          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-picker-hint" id={hintId}>
          {hint}
        </p>
      )}
      {message && (
        <p className="eq-date-picker-error" id={errorId}>
          {message}
        </p>
      )}
      {name && <input type="hidden" name={name} value={iso ?? ""} />}
      <Popover
        ref={surface}
        id={popoverId}
        placement="bottom-end"
        role="dialog"
        aria-label={typeof label === "string" ? label : "Choose date"}
        onBeforeToggle={handleBeforeToggle}
        onToggle={(event) => setOpen(event.newState === "open")}
      >
        <Calendar
          key={opened}
          value={iso}
          today={today}
          onValueChange={pick}
          month={month}
          onMonthChange={setMonth}
          min={min}
          max={max}
          locale={locale}
          weekStartsOn={weekStartsOn}
        />
      </Popover>
    </div>
  );
}