Connection

"use client";

import { useEffect, useRef, useState, type ComponentProps } from "react";
import { Button } from "./button";
import { Spinner } from "./spinner";
import "./connection.css";

export type ConnectionProps = ComponentProps<"div"> & {
  /** Controlled connectivity. Leave it out to follow navigator.onLine and the online and offline events. */
  online?: boolean;
  /** Changes queued on this device and not yet synced. */
  pending?: number;
  /** True while queued changes are being sent. */
  syncing?: boolean;
  /** Shows a Try again button while offline or while changes are waiting. */
  onRetry?: () => void;
  /** A strip along the top edge of the positioned container, or an inline pill. */
  variant?: "bar" | "pill";
  /** Shows a quiet "Saved" for 2 seconds after a sync finishes. */
  showSaved?: boolean;
};

type State = "offline" | "syncing" | "saved" | "back" | "waiting";

const BACK_MS = 3000;
const SAVED_MS = 2000;

const changes = (n: number) => `${n} ${n === 1 ? "change" : "changes"}`;

function words(state: State, pending: number, pill: boolean) {
  switch (state) {
    case "offline":
      if (pill) return pending > 0 ? `Offline, ${changes(pending)} waiting` : "Offline";
      return pending > 0
        ? `You are offline. ${changes(pending)} will sync when you reconnect.`
        : "You are offline. Changes you make will sync when you reconnect.";
    case "syncing":
      return pending > 0 ? `Syncing ${changes(pending)}` : "Syncing changes";
    case "saved":
      return "Saved";
    case "back":
      return "Back online";
    case "waiting":
      return `${changes(pending)} not synced yet`;
  }
}

function Icon({ state }: { state: State }) {
  if (state === "syncing") return <Spinner size="s" label="" role="none" aria-hidden="true" />;
  return (
    <svg
      key={state}
      viewBox="0 0 16 16"
      fill="none"
      stroke="currentColor"
      strokeWidth="1.5"
      strokeLinecap="round"
      strokeLinejoin="round"
      aria-hidden="true"
    >
      {state === "offline" && (
        <>
          <path d="M4.5 12.5h7a3 3 0 0 0 .6-5.94A4.25 4.25 0 0 0 5 5.2" />
          <path d="M3.2 7.4A2.6 2.6 0 0 0 4.5 12.5" />
          <path d="m2.5 2.5 11 11" />
        </>
      )}
      {(state === "back" || state === "saved") && <path className="eq-connection-tick" pathLength="1" d="m3.5 8.5 3 3 6-7" />}
      {state === "waiting" && (
        <>
          <circle cx="8" cy="8" r="5.75" />
          <path d="M8 5v3.25M8 10.75h.01" />
        </>
      )}
    </svg>
  );
}

export function Connection({
  online,
  pending = 0,
  syncing = false,
  onRetry,
  variant = "bar",
  showSaved = false,
  className,
  ...rest
}: ConnectionProps) {
  const controlled = online !== undefined;
  const [mounted, setMounted] = useState(false);
  const [browserOnline, setBrowserOnline] = useState(true);
  const [back, setBack] = useState(false);
  const [saved, setSaved] = useState(false);
  const prevOnline = useRef<boolean | null>(null);
  const prevSyncing = useRef(syncing);
  const last = useRef<{ state: State; text: string } | null>(null);
  const isOnline = online ?? browserOnline;

  useEffect(() => {
    setMounted(true);
    if (controlled) return;
    const update = () => setBrowserOnline(navigator.onLine);
    update();
    window.addEventListener("online", update);
    window.addEventListener("offline", update);
    return () => {
      window.removeEventListener("online", update);
      window.removeEventListener("offline", update);
    };
  }, [controlled]);

  useEffect(() => {
    if (!mounted) return;
    const prev = prevOnline.current;
    prevOnline.current = isOnline;
    if (!isOnline) {
      setBack(false);
      setSaved(false);
      return;
    }
    if (prev === false) setBack(true);
  }, [isOnline, mounted]);

  useEffect(() => {
    if (!back) return;
    const timer = window.setTimeout(() => setBack(false), BACK_MS);
    return () => window.clearTimeout(timer);
  }, [back]);

  useEffect(() => {
    const was = prevSyncing.current;
    prevSyncing.current = syncing;
    if (showSaved && was && !syncing && pending === 0 && isOnline) setSaved(true);
  }, [syncing, pending, isOnline, showSaved]);

  useEffect(() => {
    if (!saved) return;
    const timer = window.setTimeout(() => setSaved(false), SAVED_MS);
    return () => window.clearTimeout(timer);
  }, [saved]);

  if (!mounted) return null;

  const state: State | null = !isOnline
    ? "offline"
    : syncing
      ? "syncing"
      : saved
        ? "saved"
        : back
          ? "back"
          : pending > 0
            ? "waiting"
            : null;
  const view = state ? { state, text: words(state, pending, variant === "pill") } : null;
  if (view) last.current = view;
  const shown = view ?? last.current;
  const retry = onRetry && (state === "offline" || state === "waiting");

  return (
    <div
      {...rest}
      role="status"
      className={["eq-connection", className].filter(Boolean).join(" ")}
      data-variant={variant}
    >
      {shown && (
        <div className="eq-connection-message" data-state={shown.state} data-open={view ? "" : undefined}>
          <span className="eq-connection-icon">
            <Icon state={shown.state} />
          </span>
          <span className="eq-connection-text">{shown.text}</span>
          {retry && (
            <Button
              size="s"
              variant={variant === "pill" ? "ghost" : "outline"}
              className="eq-connection-retry"
              onClick={onRetry}
            >
              Try again
            </Button>
          )}
        </div>
      )}
    </div>
  );
}