Countdown

"use client";

import { useEffect, useRef, useState, type ComponentProps } from "react";
import "./countdown.css";

type Unit = "days" | "hours" | "minutes" | "seconds";

const ORDER: Unit[] = ["days", "hours", "minutes", "seconds"];
const SIZE: Record<Unit, number> = { days: 86400, hours: 3600, minutes: 60, seconds: 1 };
const CAPTION: Record<Unit, string> = { days: "days", hours: "hours", minutes: "mins", seconds: "secs" };
const SHORT: Record<Unit, string> = { days: "d", hours: "h", minutes: "m", seconds: "s" };
const WORD: Record<Unit, string> = { days: "day", hours: "hour", minutes: "minute", seconds: "second" };
const MAX_DELAY = 2 ** 31 - 1;

export type CountdownProps = Omit<ComponentProps<"span">, "children"> & {
  /** The moment to count to: epoch ms, a date string or a Date. null shows the placeholder until you know it. */
  to: number | string | Date | null;
  /** What is being counted down to, e.g. "Public beta opens in". Read before the time. */
  label: string;
  /** Units to show, largest first. The largest absorbs overflow and the smallest rounds up. */
  units?: Unit[];
  /** Called once per target when the time reaches zero, including a target already past. */
  onDone?: () => void;
  /** Shown in place of the time at zero. */
  doneText?: string;
  /** One mono line, "2d 4h 12m", instead of boxes with captions. */
  compact?: boolean;
};

function toMs(to: CountdownProps["to"]) {
  if (to == null) return Number.NaN;
  if (to instanceof Date) return to.getTime();
  return typeof to === "number" ? to : Date.parse(to);
}

function split(total: number, units: Unit[]) {
  const list = ORDER.filter((u) => units.includes(u));
  if (list.length === 0) return [];
  let rest = Math.ceil(total / SIZE[list[list.length - 1]]) * SIZE[list[list.length - 1]];
  const parts = list.map((u) => {
    const value = Math.floor(rest / SIZE[u]);
    rest -= value * SIZE[u];
    return { unit: u, value };
  });
  let first = 0;
  while (first < parts.length - 1 && parts[first].value === 0) first++;
  return parts.slice(first);
}

function spell(parts: { unit: Unit; value: number }[]) {
  return parts
    .filter((p) => p.value > 0)
    .map((p) => `${p.value} ${WORD[p.unit]}${p.value === 1 ? "" : "s"}`)
    .join(" ");
}

function duration(total: number) {
  const d = Math.floor(total / 86400);
  const h = Math.floor((total % 86400) / 3600);
  const m = Math.floor((total % 3600) / 60);
  const s = total % 60;
  return `P${d ? `${d}D` : ""}T${h}H${m}M${s}S`;
}

export function Countdown({
  to,
  label,
  units = ORDER,
  onDone,
  doneText = "Ended",
  compact = false,
  className,
  ...rest
}: CountdownProps) {
  const target = toMs(to);
  const [now, setNow] = useState<number | null>(null);
  const [announcement, setAnnouncement] = useState("");
  const onDoneRef = useRef(onDone);
  const doneFor = useRef<number | null>(null);
  const previous = useRef<number | null>(null);

  useEffect(() => {
    onDoneRef.current = onDone;
  });

  useEffect(() => {
    if (!Number.isFinite(target)) {
      setNow(null);
      return;
    }
    let timer = 0;
    function tick() {
      window.clearTimeout(timer);
      const t = Date.now();
      setNow(t);
      const ms = target - t;
      if (ms <= 0 || document.visibilityState === "hidden") return;
      timer = window.setTimeout(tick, Math.min(ms % 1000 || 1000, MAX_DELAY));
    }
    function onVisibility() {
      if (document.visibilityState === "visible") tick();
      else window.clearTimeout(timer);
    }
    tick();
    document.addEventListener("visibilitychange", onVisibility);
    return () => {
      window.clearTimeout(timer);
      document.removeEventListener("visibilitychange", onVisibility);
    };
  }, [target]);

  const remaining =
    now != null && Number.isFinite(target) ? Math.max(0, Math.ceil((target - now) / 1000)) : null;
  const parts = remaining != null ? split(remaining, units) : null;
  const done = remaining === 0;
  const spoken = done ? doneText : parts ? spell(parts) : "";

  useEffect(() => {
    if (!done || doneFor.current === target) return;
    doneFor.current = target;
    onDoneRef.current?.();
  }, [done, target]);

  useEffect(() => {
    const prev = previous.current;
    previous.current = remaining;
    if (remaining == null || prev == null || remaining >= prev) return;
    // Polite and rare: each minute down to one minute, then 30 and 10 seconds, then done.
    // Minute announcements only in the last ten minutes: a two-day countdown must not speak every minute.
    const minuteMark = remaining >= 60 && remaining <= 600 && Math.ceil(remaining / 60) < Math.ceil(prev / 60);
    const secondMark = [30, 10].some((mark) => prev > mark && remaining <= mark);
    if (remaining === 0) setAnnouncement(`${label} ${doneText}`);
    else if (minuteMark || secondMark) setAnnouncement(`${spoken} left`);
  }, [remaining, label, doneText, spoken]);

  const slots = parts ?? ORDER.filter((u) => units.includes(u)).map((unit) => ({ unit, value: null }));

  return (
    <span
      {...rest}
      className={["eq-countdown", className].filter(Boolean).join(" ")}
      data-compact={compact || undefined}
      data-done={done || undefined}
    >
      <time className="eq-countdown-time" dateTime={remaining != null ? duration(remaining) : undefined}>
        <span className="eq-countdown-text">
          {label} {spoken}
        </span>
        {done ? (
          <span className="eq-countdown-done" aria-hidden="true">
            {doneText}
          </span>
        ) : compact ? (
          <span className="eq-countdown-compact" aria-hidden="true">
            {slots.map(({ unit, value }, i) => (
              <span key={unit} className="eq-countdown-value">
                <span key={value ?? "-"} className="eq-countdown-digits">
                  {value == null ? "--" : i === 0 ? value : String(value).padStart(2, "0")}
                  {SHORT[unit]}
                </span>
              </span>
            ))}
          </span>
        ) : (
          <span className="eq-countdown-units" aria-hidden="true">
            {slots.map(({ unit, value }) => (
              <span key={unit} className="eq-countdown-unit">
                <span className="eq-countdown-value">
                  <span key={value ?? "-"} className="eq-countdown-digits">
                    {value == null ? "--" : unit === "days" ? value : String(value).padStart(2, "0")}
                  </span>
                </span>
                <span className="eq-countdown-caption">{CAPTION[unit]}</span>
              </span>
            ))}
          </span>
        )}
      </time>
      <span role="status" className="eq-countdown-live">
        {announcement}
      </span>
    </span>
  );
}