Progress

// Progress: a bone fill on a faint track. The head runs hot only while the value is moving
// and cools 600ms after the last change. Indeterminate is a single accent segment that
// travels the track. Reaching 100 flashes the fill once and swaps the number for a check.

import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { SPRING, Spring, createLoop } from '../shared/spring';
import { measureGrid, snapEdge, useOnScreen, useReducedMotion } from '../shared/chart-kit';
import { RollingNumber } from '../shared/RollingNumber';
import { resolveAccent, type Accent } from '../shared/accent';
import { Check } from '../status-kit/Check';
import { clamp, useSize } from '../status-kit/kit';
import '../shared/ember.css';
import './progress.css';

export interface ProgressProps {
  /** 0–100. Leave undefined for indeterminate. */
  value?: number;
  size?: 'line' | 'bar';
  showValue?: boolean;
  /** Accessible name. */
  label?: string;
  accent?: Accent;
  className?: string;
}

const COOL_MS = 600;

export function Progress({ value, size = 'line', showValue = true, label = 'Progress', accent: accentProp, className }: ProgressProps) {
  const accent = resolveAccent(accentProp);
  const reduced = useReducedMotion();
  const rootRef = useRef<HTMLDivElement>(null);
  const trackRef = useRef<HTMLDivElement>(null);
  const fillRef = useRef<HTMLDivElement>(null);
  const flashRef = useRef<HTMLDivElement>(null);
  const onScreen = useOnScreen(rootRef);
  const { w: trackW } = useSize(trackRef);

  const indeterminate = value === undefined || value === null || !Number.isFinite(value);
  const pct = indeterminate ? 0 : clamp(value as number, 0, 100);
  const complete = !indeterminate && pct >= 100;

  const [hot, setHot] = useState(false);
  // True once the fill has actually arrived at 100 (the number then gives way to the check).
  const [arrived, setArrived] = useState(complete);
  const [checkInstant, setCheckInstant] = useState(complete);

  const state = useRef<{ spring: Spring; loop: ReturnType<typeof createLoop>; arrived: boolean } | null>(null);
  if (!state.current) {
    const spring = new Spring(pct, SPRING.soft);
    state.current = { spring, arrived: complete, loop: createLoop((dt) => step(dt)) };
  }
  const trackWRef = useRef(trackW);
  trackWRef.current = trackW;
  const completeRef = useRef(complete);
  completeRef.current = complete;
  const reducedRef = useRef(reduced);
  reducedRef.current = reduced;

  const paint = () => {
    const fill = fillRef.current;
    const track = trackRef.current;
    if (!fill || !track) return;
    const s = state.current!.spring;
    const w = trackWRef.current;
    const grid = measureGrid(track);
    const px = clamp((w * s.value) / 100, 0, w);
    fill.style.width = `${px <= 0 ? 0 : Math.max(0, snapEdge(px, grid.ox, grid.dpr))}px`;
  };

  function step(dt: number): boolean {
    const st = state.current!;
    const moving = st.spring.step(dt);
    paint();
    if (!st.arrived && completeRef.current && st.spring.value >= 99.95) {
      st.arrived = true;
      setArrived(true);
      setCheckInstant(false);
      setHot(false);
      if (!reducedRef.current) {
        flashRef.current?.animate([{ opacity: 1 }, { opacity: 1, offset: 0.38 }, { opacity: 0 }], { duration: 260, easing: 'linear' });
      }
    }
    return moving;
  }

  // Value changes: spring the fill, heat the head, cool it 600ms after the last change.
  const first = useRef(true);
  useEffect(() => {
    const st = state.current!;
    if (first.current) {
      first.current = false;
      return;
    }
    if (indeterminate) {
      st.spring.set(0);
      st.arrived = false;
      setArrived(false);
      setHot(false);
      paint();
      return;
    }
    if (!complete && st.arrived) {
      st.arrived = false;
      setArrived(false);
    }
    st.spring.target = pct;
    if (reduced) {
      st.spring.set(pct);
      paint();
      step(0);
      return;
    }
    if (!complete) setHot(true);
    st.loop.wake();
    const t = window.setTimeout(() => setHot(false), COOL_MS);
    return () => window.clearTimeout(t);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pct, indeterminate]);

  useLayoutEffect(paint, [trackW, size]);
  useEffect(() => () => state.current?.loop.stop(), []);

  const aria = indeterminate
    ? {}
    : { 'aria-valuemin': 0, 'aria-valuemax': 100, 'aria-valuenow': Math.round(pct), 'aria-valuetext': `${Math.round(pct)}%` };

  return (
    <div
      ref={rootRef}
      className={className ? `ember epg ${className}` : 'ember epg'}
      data-accent={accent}
      data-size={size}
      data-reduced={reduced || undefined}
      role="progressbar"
      aria-label={label}
      {...aria}
    >
      <div ref={trackRef} className="epg-track">
        <div ref={fillRef} className="epg-fill" hidden={indeterminate}>
          <div className="epg-head" data-on={(hot && !reduced) || undefined} />
          <div ref={flashRef} className="epg-flash" />
        </div>
        {indeterminate ? <div className="epg-seg" data-paused={!onScreen || undefined} /> : null}
      </div>
      {showValue ? (
        <div className="epg-value" aria-hidden="true">
          {indeterminate ? null : (
            <>
              <span className="epg-num" data-gone={arrived || undefined}>
                <RollingNumber value={String(Math.round(pct))} reduced={reduced} />
                <span className="epg-pct">%</span>
              </span>
              <Check className="epg-check" drawn={arrived} instant={checkInstant || reduced} size={12} />
            </>
          )}
        </div>
      ) : null}
    </div>
  );
}

export default Progress;