Calendar

"use client";

import { useEffect, useId, useMemo, useRef, useState, type ComponentProps, type KeyboardEvent } from "react";
import "./calendar.css";

export type CalendarProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
  /** Selected day as an ISO date, "2026-11-13". */
  value?: string | null;
  defaultValue?: string | null;
  onValueChange?: (value: string) => void;
  /** Earliest selectable day, ISO. */
  min?: string;
  /** Latest selectable day, ISO. */
  max?: string;
  /** Days that can be focused but not picked, such as booked dates. */
  isUnavailable?: (iso: string) => boolean;
  /** Shown month, "2026-11". */
  month?: string;
  defaultMonth?: string;
  onMonthChange?: (month: string) => void;
  /** Today as an ISO date. When absent it is read from the device after mount. */
  today?: string;
  locale?: string;
  weekStartsOn?: 0 | 1;
  size?: "s" | "m";
};

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

function toDate(iso: string) {
  const [y, m, d = 1] = iso.split("-").map(Number);
  const date = new Date(0);
  date.setUTCFullYear(y, m - 1, d);
  return date;
}

function toISO(date: Date) {
  return `${pad(date.getUTCFullYear(), 4)}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
}

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

function addDays(iso: string, n: number) {
  const date = toDate(iso);
  date.setUTCDate(date.getUTCDate() + n);
  return toISO(date);
}

function addMonths(iso: string, n: number) {
  const [y, m, d] = iso.split("-").map(Number);
  const total = y * 12 + m - 1 + n;
  const year = Math.floor(total / 12);
  const month = (total % 12) + 1;
  return `${pad(year, 4)}-${pad(month)}-${pad(Math.min(d, daysIn(year, month)))}`;
}

const column = (iso: string, weekStartsOn: number) => (toDate(iso).getUTCDay() - weekStartsOn + 7) % 7;

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

function weeksOf(month: string, weekStartsOn: number) {
  const first = `${month}-01`;
  const [y, m] = month.split("-").map(Number);
  const last = `${month}-${pad(daysIn(y, m))}`;
  const end = addDays(last, 6 - column(last, weekStartsOn));
  const weeks: string[][] = [];
  for (let day = addDays(first, -column(first, weekStartsOn)); day <= end; ) {
    const week: string[] = [];
    for (let i = 0; i < 7; i++, day = addDays(day, 1)) week.push(day);
    weeks.push(week);
  }
  return weeks;
}

export function Calendar({
  value,
  defaultValue = null,
  onValueChange,
  min,
  max,
  isUnavailable,
  month,
  defaultMonth,
  onMonthChange,
  today: todayProp,
  locale = "en-GB",
  weekStartsOn = 1,
  size = "m",
  className,
  ...rest
}: CalendarProps) {
  const id = useId();
  const [selectedState, setSelectedState] = useState(defaultValue);
  const selected = value !== undefined ? value : selectedState;
  const [deviceToday, setDeviceToday] = useState<string | null>(null);
  const today = todayProp ?? deviceToday;
  const [monthState, setMonthState] = useState<string | null>(
    () => defaultMonth ?? (selected ?? todayProp ?? min)?.slice(0, 7) ?? null,
  );
  const shown = month ?? monthState;
  const [focused, setFocused] = useState<string | null>(null);
  const focusPending = useRef(false);

  const [lastShown, setLastShown] = useState(shown);
  const [slide, setSlide] = useState<"next" | "prev" | undefined>();
  if (shown !== lastShown) {
    setLastShown(shown);
    setSlide(lastShown && shown ? (shown < lastShown ? "prev" : "next") : undefined);
  }

  useEffect(() => {
    if (todayProp) return;
    const now = localToday();
    setDeviceToday(now);
    setMonthState((current) => current ?? now.slice(0, 7));
  }, [todayProp]);

  const format = useMemo(
    () => ({
      title: new Intl.DateTimeFormat(locale, { month: "long", year: "numeric", timeZone: "UTC" }),
      day: new Intl.DateTimeFormat(locale, { day: "numeric", timeZone: "UTC" }),
      full: new Intl.DateTimeFormat(locale, { dateStyle: "full", timeZone: "UTC" }),
      weekday: new Intl.DateTimeFormat(locale, { weekday: "narrow", timeZone: "UTC" }),
      weekdayLong: new Intl.DateTimeFormat(locale, { weekday: "long", timeZone: "UTC" }),
    }),
    [locale],
  );

  const disabled = (iso: string) =>
    (min !== undefined && iso < min) || (max !== undefined && iso > max) || Boolean(isUnavailable?.(iso));

  const clamp = (iso: string) => (min !== undefined && iso < min ? min : max !== undefined && iso > max ? max : iso);

  function fallback(m: string) {
    if (selected && selected.startsWith(m)) return selected;
    if (today && today.startsWith(m)) return today;
    const first = `${m}-01`;
    return min !== undefined && min.startsWith(m) && first < min ? min : first;
  }

  const active = shown ? (focused && focused.startsWith(shown) ? focused : fallback(shown)) : null;

  function changeMonth(next: string) {
    if (month === undefined) setMonthState(next);
    onMonthChange?.(next);
  }

  function move(target: string) {
    const next = clamp(target);
    if (next === active) return;
    focusPending.current = true;
    setFocused(next);
    if (next.slice(0, 7) !== shown) changeMonth(next.slice(0, 7));
  }

  function step(n: number) {
    if (!shown || !active) return;
    const next = addMonths(`${shown}-01`, n).slice(0, 7);
    setFocused(clamp(addMonths(active, n)));
    changeMonth(next);
  }

  function select(iso: string) {
    if (disabled(iso)) return;
    if (iso.slice(0, 7) !== shown) move(iso);
    else setFocused(iso);
    if (value === undefined) setSelectedState(iso);
    onValueChange?.(iso);
  }

  useEffect(() => {
    if (!focusPending.current || !active) return;
    focusPending.current = false;
    const target = document.getElementById(`${id}-${active}`);
    const current = document.activeElement;
    // Only pull focus back into the grid it left, never away from something else on the page.
    if (!target || (current && current !== document.body && !target.closest(".eq-calendar")?.contains(current))) return;
    target.focus();
  }, [active, id]);

  function handleKeyDown(event: KeyboardEvent<HTMLTableElement>) {
    if (!active) return;
    let next: string;
    switch (event.key) {
      case "ArrowLeft":
        next = addDays(active, -1);
        break;
      case "ArrowRight":
        next = addDays(active, 1);
        break;
      case "ArrowUp":
        next = addDays(active, -7);
        break;
      case "ArrowDown":
        next = addDays(active, 7);
        break;
      case "Home":
        next = addDays(active, -column(active, weekStartsOn));
        break;
      case "End":
        next = addDays(active, 6 - column(active, weekStartsOn));
        break;
      case "PageUp":
        next = addMonths(active, event.shiftKey ? -12 : -1);
        break;
      case "PageDown":
        next = addMonths(active, event.shiftKey ? 12 : 1);
        break;
      case "Enter":
      case " ":
        event.preventDefault();
        select(active);
        return;
      default:
        return;
    }
    event.preventDefault();
    move(next);
  }

  const titleId = `${id}-title`;
  const weeks = shown ? weeksOf(shown, weekStartsOn) : [];
  const prevOff = !shown || (min !== undefined && addMonths(`${shown}-01`, -1).slice(0, 7) < min.slice(0, 7));
  const nextOff = !shown || (max !== undefined && addMonths(`${shown}-01`, 1).slice(0, 7) > max.slice(0, 7));
  const weekdays = Array.from({ length: 7 }, (_, i) => toDate(addDays("2026-11-01", weekStartsOn + i)));

  return (
    <div {...rest} className={["eq-calendar", className].filter(Boolean).join(" ")} data-size={size}>
      <div className="eq-calendar-header">
        <button
          type="button"
          className="eq-calendar-nav"
          aria-label="Previous month"
          disabled={prevOff}
          onClick={() => step(-1)}
        >
          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <path d="M10 3.5 5.5 8l4.5 4.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
        <span className="eq-calendar-title" id={titleId} aria-live="polite">
          {shown ? format.title.format(toDate(`${shown}-01`)) : ""}
        </span>
        <button
          type="button"
          className="eq-calendar-nav"
          aria-label="Next month"
          disabled={nextOff}
          onClick={() => step(1)}
        >
          <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
            <path d="m6 3.5 4.5 4.5L6 12.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
          </svg>
        </button>
      </div>
      <table
        key={shown ?? "empty"}
        className="eq-calendar-grid"
        role="grid"
        aria-labelledby={titleId}
        data-slide={slide}
        onKeyDown={handleKeyDown}
      >
        <thead>
          <tr>
            {weekdays.map((date) => (
              <th
                key={date.getUTCDay()}
                className="eq-calendar-weekday"
                scope="col"
                abbr={format.weekdayLong.format(date)}
              >
                {format.weekday.format(date)}
              </th>
            ))}
          </tr>
        </thead>
        <tbody>
          {weeks.map((week) => (
            <tr key={week[0]}>
              {week.map((iso) => (
                <td
                  key={iso}
                  id={`${id}-${iso}`}
                  className="eq-calendar-day"
                  role="gridcell"
                  tabIndex={iso === active ? 0 : -1}
                  aria-label={format.full.format(toDate(iso))}
                  aria-selected={iso === selected}
                  aria-disabled={disabled(iso) || undefined}
                  aria-current={iso === today ? "date" : undefined}
                  data-outside={!iso.startsWith(shown ?? "") || undefined}
                  onClick={() => select(iso)}
                >
                  {format.day.format(toDate(iso))}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}