/* ==========================================================================
   StatsRow.tsx
   --------------------------------------------------------------------------
   The activity stats tray: view count, response count, and when the last
   response arrived. Counts animate when they change.

   The source rendered this through a shared `PageHeader` component in an
   "activity-stats" variant, passing a `stats` array of `{ value }` objects.
   PageHeader's title row and per-stat labels received no values and so
   rendered nothing visible; only the toolbar/detail markup is reproduced
   here. The `stats` array shape is kept so the structure stays recognisable.

   React is loaded as a UMD global (see test.html) rather than imported. JSX
   makes this file a module to tsc (the automatic JSX runtime implies one),
   and a module can't see a UMD global directly, so it needs its own local
   alias here; a plain script (no JSX) can reference `React` directly
   instead, see useStreamedSummary.ts.
   ========================================================================== */

declare const React: typeof import("react");

(function (SB: any) {
  "use strict";

  const useState = React.useState;
  const useEffect = React.useEffect;
  const useRef = React.useRef;

  const h = SB.helpers;
  const icons = SB.icons;

  // NOTE: ported from the source, which showed the response stat only when
  // `responseCount > 1`, so a posting with exactly one response showed no
  // response stat at all. Almost certainly a bug (an earlier revision used
  // `!== 0`), kept so output matches existing screenshots. Set to 0 to show a
  // lone response.
  const SHOW_RESPONSES_WHEN = 1;

  function prefersReducedMotion(): boolean {
    return (
      typeof window.matchMedia === "function" &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches
    );
  }

  /* ---- CountUp ---------------------------------------------------------
     Replaces `react-countup`, with the same props the source used:
     start, end, duration (seconds), preserveValue.
     ---------------------------------------------------------------------- */

  interface CountUpProps {
    end?: number;
    start?: number;
    duration?: number;
    preserveValue?: boolean;
  }

  function CountUp(props: CountUpProps) {
    const end = props.end || 0;
    const start = props.start || 0;
    const duration = props.duration === undefined ? 1 : props.duration;
    const preserveValue = props.preserveValue !== false;

    const [value, setValue] = useState(start);

    // Where the next animation starts from: the last value we landed on.
    const fromRef = useRef(start);
    const rafRef = useRef<number | null>(null);

    useEffect(
      function () {
        const from = preserveValue ? fromRef.current : start;
        const to = end;

        const settle = function () {
          fromRef.current = to;
          setValue(to);
        };

        if (from === to || duration <= 0 || prefersReducedMotion()) {
          settle();
          return;
        }

        const ms = duration * 1000;
        const t0 = performance.now();

        const tick = function (now: number) {
          const p = Math.min(1, (now - t0) / ms);
          const eased = 1 - Math.pow(1 - p, 3); // ease-out cubic
          setValue(Math.round(from + (to - from) * eased));

          if (p < 1) {
            rafRef.current = requestAnimationFrame(tick);
          } else {
            fromRef.current = to;
          }
        };

        rafRef.current = requestAnimationFrame(tick);

        return function () {
          if (rafRef.current) cancelAnimationFrame(rafRef.current);
        };
      },
      [end, start, duration, preserveValue]
    );

    return <>{value.toLocaleString()}</>;
  }

  /* ---- DateDisplay -----------------------------------------------------
     Replaces the shared `TimeDiff` component: a relative timestamp with the
     absolute date on hover.
     ---------------------------------------------------------------------- */

  function DateDisplay(props: { date: DateLike }) {
    const relative = h.fromNow(props.date);
    const absolute = h.formatDate(props.date);

    return (
      <span className="sb__date" title={absolute}>
        {relative}
        <span className="sb__date__tooltip">{absolute}</span>
      </span>
    );
  }

  /* ---- StatsRow --------------------------------------------------------- */

  interface Stat {
    unit: "view" | "response" | "lastResponse";
    value: number | DateLike;
    display: boolean;
  }

  interface StatsRowProps {
    posting: ReferralStats | null | undefined;
    viewer?: Viewer;
    now?: number;
  }

  function StatsRow(props: StatsRowProps) {
    const posting = props.posting;
    if (!posting) return null;

    // Same gate the source applied to the stats row: open/pending, and never
    // on a direct posting.
    if (!h.isOpenOrPending(posting) || h.isDirect(posting)) return null;

    const viewCount = posting.viewCount || 0;
    const responseCount = posting.responseCount || 0;
    const lastResponseAt = posting.lastResponseAt;

    const allStats: Stat[] = [
      { unit: "view", value: viewCount, display: viewCount > 0 },
      {
        unit: "response",
        value: responseCount,
        display: responseCount > SHOW_RESPONSES_WHEN,
      },
      {
        unit: "lastResponse",
        value: lastResponseAt,
        display: isFinite(h.toTime(lastResponseAt)),
      },
    ];
    const stats = allStats.filter(function (stat) {
      return stat.display;
    });

    if (!stats.length) return null;

    return (
      <div className="sb__stats">
        {stats.map(function (stat) {
          return (
            <div className="sb__stat" key={"stat-" + stat.unit}>
              <span className="sb__stat__value">{renderStat(stat)}</span>
            </div>
          );
        })}
      </div>
    );
  }

  function renderStat(stat: Stat) {
    if (stat.unit === "view") {
      const value = stat.value as number;
      return (
        <>
          <img className="sb__icon" alt="" src={icons.views} />
          <b>
            <CountUp end={value} duration={1} preserveValue={true} />
          </b>{" "}
          {h.plurify("view", value)}
        </>
      );
    }

    if (stat.unit === "response") {
      const value = stat.value as number;
      return (
        <>
          <img className="sb__icon" alt="" src={icons.chat} />
          <b>
            <CountUp end={value} duration={1} preserveValue={true} />
          </b>{" "}
          {h.plurify("response", value)}
        </>
      );
    }

    if (stat.unit === "lastResponse") {
      return (
        <>
          <img className="sb__icon" alt="" src={icons.reply} />
          <span>
            Last response: <DateDisplay date={stat.value as DateLike} />
          </span>
        </>
      );
    }

    return null;
  }

  SB.StatsRow = StatsRow;
  SB.CountUp = CountUp;
  SB.DateDisplay = DateDisplay;
})((window as any).SB = (window as any).SB || {});