Session timeout

"use client";

import { useEffect, useId, useRef, useState } from "react";
import {
  AlertDialog,
  AlertDialogActions,
  AlertDialogDescription,
  AlertDialogTitle,
  type AlertDialogProps,
} from "./alert-dialog";
import { Button } from "./button";
import "./session-timeout.css";

export type SessionTimeoutProps = Omit<AlertDialogProps, "id" | "title" | "children" | "tone" | "ref"> & {
  /** Defaults to a generated id. */
  id?: string;
  /** When the session ends, in epoch milliseconds. null while signed out. The caller owns the real session. */
  expiresAt: number | null;
  /** Seconds before expiry that the warning opens. */
  warnBefore?: number;
  /** "Stay signed in" or Escape. Refresh the session and pass the new expiresAt. */
  onExtend: () => void;
  /** Called once when the time runs out. */
  onExpire: () => void;
  /** "Sign out" was chosen. */
  onSignOut: () => void;
  title?: string;
  /** What the person is signed in to, used in the message: "signed out of Larder in". */
  label?: string;
};

const MARKS = [60, 30, 10];
const MAX_DELAY = 2 ** 31 - 1;

function spell(seconds: number) {
  const m = Math.floor(seconds / 60);
  const s = seconds % 60;
  const parts: string[] = [];
  if (m) parts.push(`${m} minute${m === 1 ? "" : "s"}`);
  if (s || !m) parts.push(`${s} second${s === 1 ? "" : "s"}`);
  return parts.join(" ");
}

export function SessionTimeout({
  id,
  expiresAt,
  warnBefore = 120,
  onExtend,
  onExpire,
  onSignOut,
  title = "Are you still there?",
  label,
  className,
  onClose,
  ...rest
}: SessionTimeoutProps) {
  const generated = useId();
  const dialogRef = useRef<HTMLDialogElement>(null);
  const closeRef = useRef<HTMLButtonElement>(null);
  const onExpireRef = useRef(onExpire);
  const expiredFor = useRef<number | null>(null);
  const marks = useRef<number[] | null>(null);
  const [now, setNow] = useState<number | null>(null);
  const [signedOut, setSignedOut] = useState(false);
  const [announcement, setAnnouncement] = useState("");

  useEffect(() => {
    onExpireRef.current = onExpire;
  });

  useEffect(() => {
    if (expiresAt == null) {
      setNow(null);
      return;
    }
    const end = expiresAt;
    let timer = 0;
    function tick() {
      window.clearTimeout(timer);
      const t = Date.now();
      setNow(t);
      const ms = end - t;
      if (ms <= 0) {
        if (expiredFor.current !== end) {
          expiredFor.current = end;
          setSignedOut(true);
          onExpireRef.current();
        }
        return;
      }
      const untilWarning = ms - warnBefore * 1000;
      const delay = untilWarning > 0 ? untilWarning : ms % 1000 || 1000;
      timer = window.setTimeout(tick, Math.min(delay, MAX_DELAY));
    }
    function onVisible() {
      if (document.visibilityState === "visible") tick();
    }
    if (end > Date.now()) setSignedOut(false);
    tick();
    document.addEventListener("visibilitychange", onVisible);
    return () => {
      window.clearTimeout(timer);
      document.removeEventListener("visibilitychange", onVisible);
    };
  }, [expiresAt, warnBefore]);

  const left = expiresAt != null && now != null ? Math.max(0, Math.ceil((expiresAt - now) / 1000)) : null;
  const phase = signedOut ? "expired" : left != null && left > 0 && left <= warnBefore ? "warning" : "idle";

  useEffect(() => {
    if (phase !== "warning" || left == null) {
      marks.current = null;
      setAnnouncement("");
      return;
    }
    // The dialog's own description is read when it opens; the live region speaks only at later marks.
    if (marks.current == null) {
      marks.current = MARKS.filter((m) => m < left);
      return;
    }
    if (marks.current.some((m) => left <= m)) {
      marks.current = marks.current.filter((m) => left > m);
      setAnnouncement(`${spell(left)} left before you are signed out.`);
    }
  }, [phase, left]);

  useEffect(() => {
    const dialog = dialogRef.current;
    if (!dialog) return;
    if (phase !== "idle" && !dialog.open) dialog.showModal();
    if (phase === "idle" && dialog.open) dialog.close();
    if (phase === "expired") closeRef.current?.focus();
  }, [phase]);

  const seconds = left ?? warnBefore;
  const minutesPart = Math.floor(seconds / 60);

  return (
    <AlertDialog
      {...rest}
      ref={dialogRef}
      id={id ?? generated}
      className={["eq-session-timeout", className].filter(Boolean).join(" ")}
      data-phase={phase}
      onClose={(event) => {
        onClose?.(event);
        // Only Escape closes the dialog by itself: treat it as "Stay signed in".
        if (phase === "warning") onExtend();
        if (phase === "expired") setSignedOut(false);
      }}
    >
      {phase === "expired" ? (
        <>
          <AlertDialogTitle>You were signed out</AlertDialogTitle>
          <AlertDialogDescription>
            <p>For your security, you were signed out{label ? ` of ${label}` : ""} after a period of inactivity.</p>
          </AlertDialogDescription>
          <AlertDialogActions>
            <Button ref={closeRef} type="button" variant="outline" onClick={() => setSignedOut(false)}>
              Close
            </Button>
          </AlertDialogActions>
        </>
      ) : (
        <>
          <AlertDialogTitle>{title}</AlertDialogTitle>
          <AlertDialogDescription>
            <p>
              You will be signed out{label ? ` of ${label}` : ""} in{" "}
              <time className="eq-session-timeout-time" dateTime={`PT${minutesPart}M${seconds % 60}S`}>
                {spell(seconds)}
              </time>
              . Any unsaved work may be lost.
            </p>
          </AlertDialogDescription>
          <p role="status" className="eq-session-timeout-live">
            {announcement}
          </p>
          <AlertDialogActions>
            <Button type="button" variant="accent" onClick={onExtend}>
              Stay signed in
            </Button>
            <Button type="button" variant="outline" onClick={onSignOut}>
              Sign out
            </Button>
          </AlertDialogActions>
        </>
      )}
    </AlertDialog>
  );
}