Date range

"use client";

import {
  useEffect,
  useId,
  useMemo,
  useRef,
  useState,
  type ComponentProps,
  type KeyboardEvent,
} from "react";
import { Button } from "./button";
import "./date-range.css";

export type DateRangeValue = { start: string; end: string };

export type DateRangeProps = Omit<ComponentProps<"div">, "defaultValue" | "onChange"> & {
  /** ISO start and end days, inclusive. */
  value?: DateRangeValue | null;
  defaultValue?: DateRangeValue | null;
  onValueChange?: (value: DateRangeValue) => void;
  min?: string;
  max?: string;
  /** Months shown side by side. */
  months?: 1 | 2;
  /** Quick ranges shown as buttons under the grid. */
  presets?: { label: string; start: string; end: string }[];
  /** 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 addMonth = (month: string, n: number) => addMonths(`${month}-01`, n).slice(0, 7);
const column = (iso: string, weekStartsOn: number) => (toDate(iso).getUTCDay() - weekStartsOn + 7) % 7;
const ordered = (a: string, b: string): DateRangeValue => (a <= b ? { start: a, end: b } : { start: b, end: a });

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

/** Weeks of the month, with null where a day belongs to the month before or after. */
function weeksOf(month: string, weekStartsOn: number) {
  const [y, m] = month.split("-").map(Number);
  const cells: (string | null)[] = Array(column(`${month}-01`, weekStartsOn)).fill(null);
  for (let d = 1; d <= daysIn(y, m); d++) cells.push(`${month}-${pad(d)}`);
  while (cells.length % 7) cells.push(null);
  return Array.from({ length: cells.length / 7 }, (_, w) => cells.slice(w * 7, w * 7 + 7));
}

export function DateRange({
  value,
  defaultValue = null,
  onValueChange,
  min,
  max,
  months = 1,
  presets,
  today: todayProp,
  locale = "en-GB",
  weekStartsOn = 1,
  size = "m",
  className,
  ...rest
}: DateRangeProps) {
  const id = useId();
  const [rangeState, setRangeState] = useState(defaultValue);
  const range = value !== undefined ? value : rangeState;
  const [deviceToday, setDeviceToday] = useState<string | null>(null);
  const today = todayProp ?? deviceToday;
  const [first, setFirst] = useState<string | null>(() => (range?.start ?? todayProp ?? min)?.slice(0, 7) ?? null);
  const [focused, setFocused] = useState<string | null>(null);
  const [anchor, setAnchor] = useState<string | null>(null);
  const [hovered, setHovered] = useState<string | null>(null);
  const [focusInside, setFocusInside] = useState(false);
  const [status, setStatus] = useState("");
  const focusPending = useRef(false);

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

  useEffect(() => {
    if (todayProp) return;
    const now = localToday();
    setDeviceToday(now);
    setFirst((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" }),
      span: new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeZone: "UTC" }),
      weekday: new Intl.DateTimeFormat(locale, { weekday: "narrow", timeZone: "UTC" }),
      weekdayLong: new Intl.DateTimeFormat(locale, { weekday: "long", timeZone: "UTC" }),
    }),
    [locale],
  );

  const shownMonths = first ? Array.from({ length: months }, (_, i) => addMonth(first, i)) : [];
  const last = shownMonths[shownMonths.length - 1];
  const isShown = (iso: string) => shownMonths.includes(iso.slice(0, 7));
  const disabled = (iso: string) => (min !== undefined && iso < min) || (max !== undefined && iso > max);
  const clamp = (iso: string) => (min !== undefined && iso < min ? min : max !== undefined && iso > max ? max : iso);

  function fallback() {
    if (!first) return null;
    for (const candidate of [anchor, range?.start, range?.end, today]) {
      if (candidate && isShown(candidate)) return candidate;
    }
    const start = `${first}-01`;
    return min !== undefined && min.startsWith(first) && start < min ? min : start;
  }

  const active = focused && isShown(focused) ? focused : fallback();
  const tip = anchor ? (hovered ?? (focusInside ? active : null)) : null;
  const span = anchor ? ordered(anchor, tip ?? anchor) : range;

  function showMonthOf(iso: string) {
    const month = iso.slice(0, 7);
    if (!first || isShown(iso)) return;
    setFirst(month < first ? month : addMonth(month, 1 - months));
  }

  function move(target: string) {
    const next = clamp(target);
    setHovered(null);
    if (next === active) return;
    focusPending.current = true;
    setFocused(next);
    showMonthOf(next);
  }

  function step(n: number) {
    if (!first) return;
    setFirst(addMonth(first, n));
    if (active) setFocused(clamp(addMonths(active, n)));
  }

  function commit(next: DateRangeValue) {
    if (value === undefined) setRangeState(next);
    onValueChange?.(next);
  }

  function pick(iso: string) {
    if (disabled(iso)) return;
    setFocused(iso);
    if (anchor) {
      setAnchor(null);
      commit(ordered(anchor, iso));
      setStatus(spanText(ordered(anchor, iso)));
    } else {
      setAnchor(iso);
      setStatus(`Start ${format.full.format(toDate(iso))}. Choose the end date.`);
    }
  }

  const spanText = (r: DateRangeValue) => format.span.formatRange(toDate(r.start), toDate(r.end));

  function applyPreset(start: string, end: string) {
    setAnchor(null);
    commit(ordered(start, end));
    setStatus(spanText(ordered(start, end)));
    setFocused(null);
    setFirst(start.slice(0, 7));
  }

  useEffect(() => {
    if (!focusPending.current || !active) return;
    focusPending.current = false;
    const target = document.getElementById(`${id}-${active}`);
    const current = document.activeElement;
    if (!target || (current && current !== document.body && !target.closest(".eq-date-range")?.contains(current))) return;
    target.focus();
  }, [active, id]);

  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {
    if (!active || !(event.target instanceof HTMLElement) || !event.target.classList.contains("eq-date-range-day")) 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();
        pick(active);
        return;
      case "Escape":
        if (!anchor) return;
        event.preventDefault();
        event.stopPropagation();
        setAnchor(null);
        setStatus("");
        return;
      default:
        return;
    }
    event.preventDefault();
    move(next);
  }

  const prevOff = !first || (min !== undefined && addMonth(first, -1) < min.slice(0, 7));
  const nextOff = !last || (max !== undefined && addMonth(last, 1) > max.slice(0, 7));
  const weekdays = Array.from({ length: 7 }, (_, i) => toDate(addDays("2026-11-01", weekStartsOn + i)));

  const chevron = (d: string) => (
    <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d={d} stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );

  return (
    <div
      {...rest}
      className={["eq-date-range", className].filter(Boolean).join(" ")}
      data-size={size}
      data-choosing={anchor ? "" : undefined}
    >
      <div
        className="eq-date-range-months"
        onKeyDown={handleKeyDown}
        onFocus={() => setFocusInside(true)}
        onBlur={(event) => {
          if (!event.currentTarget.contains(event.relatedTarget)) setFocusInside(false);
        }}
      >
        {shownMonths.map((month, index) => {
          const titleId = `${id}-title-${index}`;
          const [y, m] = month.split("-").map(Number);
          const monthDays = daysIn(y, m);
          return (
            <div key={index} className="eq-date-range-month">
              <div className="eq-date-range-header">
                {index === 0 && (
                  <button
                    type="button"
                    className="eq-date-range-nav"
                    aria-label="Previous month"
                    disabled={prevOff}
                    onClick={() => step(-1)}
                  >
                    {chevron("M10 3.5 5.5 8l4.5 4.5")}
                  </button>
                )}
                <span className="eq-date-range-title" id={titleId} aria-live="polite">
                  {format.title.format(toDate(`${month}-01`))}
                </span>
                {index === shownMonths.length - 1 && (
                  <button
                    type="button"
                    className="eq-date-range-nav"
                    aria-label="Next month"
                    disabled={nextOff}
                    onClick={() => step(1)}
                  >
                    {chevron("m6 3.5 4.5 4.5L6 12.5")}
                  </button>
                )}
              </div>
              <table
                key={month}
                className="eq-date-range-grid"
                data-slide={slide}
                role="grid"
                aria-labelledby={titleId}
                aria-multiselectable="true"
                onPointerLeave={() => setHovered(null)}
              >
                <thead>
                  <tr>
                    {weekdays.map((date) => (
                      <th
                        key={date.getUTCDay()}
                        className="eq-date-range-weekday"
                        scope="col"
                        abbr={format.weekdayLong.format(date)}
                      >
                        {format.weekday.format(date)}
                      </th>
                    ))}
                  </tr>
                </thead>
                <tbody>
                  {weeksOf(month, weekStartsOn).map((week, w) => (
                    <tr key={w}>
                      {week.map((iso, col) => {
                        if (!iso) return <td key={col} className="eq-date-range-blank" role="gridcell" />;
                        const inSpan = span !== null && iso >= span.start && iso <= span.end;
                        const day = Number(iso.slice(8));
                        const edge =
                          span && iso === span.start && iso === span.end
                            ? "both"
                            : span && iso === span.start
                              ? "start"
                              : span && iso === span.end
                                ? "end"
                                : undefined;
                        return (
                          <td
                            key={iso}
                            id={`${id}-${iso}`}
                            className="eq-date-range-day"
                            role="gridcell"
                            tabIndex={iso === active ? 0 : -1}
                            aria-label={format.full.format(toDate(iso))}
                            aria-selected={(!anchor && inSpan) || iso === anchor}
                            aria-disabled={disabled(iso) || undefined}
                            aria-current={iso === today ? "date" : undefined}
                            data-in-span={inSpan || undefined}
                            data-edge={inSpan ? edge : undefined}
                            data-cap-start={col === 0 || day === 1 || undefined}
                            data-cap-end={col === 6 || day === monthDays || undefined}
                            onClick={() => pick(iso)}
                            onPointerEnter={() => setHovered(iso)}
                          >
                            <span className="eq-date-range-mark">{format.day.format(toDate(iso))}</span>
                          </td>
                        );
                      })}
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          );
        })}
      </div>
      {presets && presets.length > 0 && (
        <div className="eq-date-range-presets" role="group" aria-label="Quick ranges">
          {presets.map((preset) => {
            const on = !anchor && range?.start === preset.start && range?.end === preset.end;
            return (
              <Button
                key={preset.label}
                size="s"
                variant={on ? "solid" : "outline"}
                aria-pressed={on}
                onClick={() => applyPreset(preset.start, preset.end)}
              >
                {preset.label}
              </Button>
            );
          })}
        </div>
      )}
      <span className="eq-date-range-status" aria-live="polite">
        {status}
      </span>
    </div>
  );
}