sprint/packages/frontend/src/components/timer-display.tsx

import { calculateWorkTimeMs } from "@sprint/shared";
import { useEffect, useMemo, useState } from "react";
import { toast } from "sonner";
import { useInactiveTimers, useTimerState } from "@/lib/query/hooks";
import { parseError } from "@/lib/server";
import { formatTime } from "@/lib/utils";

const FALLBACK_TIME = "--:--:--";
const REFRESH_INTERVAL_MS = 10000;

export function getWorkTimeMs(timestamps: string[] | undefined): number {
  if (!timestamps?.length) return 0;
  const dates = timestamps.map((t) => new Date(t));
  return calculateWorkTimeMs(dates);
}

export function TimerDisplay({ issueId }: { issueId: number }) {
  const { data: timerState, error: timerError } = useTimerState(issueId, {
    refetchInterval: REFRESH_INTERVAL_MS,
  });
  const { data: inactiveTimers = [], error: inactiveError } = useInactiveTimers(issueId, {
    refetchInterval: REFRESH_INTERVAL_MS,
  });

  const [tick, setTick] = useState(0);
  const [error, setError] = useState<string | null>(null);

  const combinedError = timerError ?? inactiveError;

  useEffect(() => {
    if (combinedError) {
      const message = parseError(combinedError as Error);
      setError(message);
      toast.error(`Error fetching timer data: ${message}`, {
        dismissible: false,
      });
      return;
    }
    setError(null);
  }, [combinedError]);

  useEffect(() => {
    if (!timerState?.isRunning) return;

    const interval = window.setInterval(() => {
      setTick((t) => t + 1);
    }, 1000);

    return () => window.clearInterval(interval);
  }, [timerState?.isRunning]);

  const inactiveWorkTimeMs = useMemo(
    () => inactiveTimers.reduce((total, session) => total + getWorkTimeMs(session?.timestamps), 0),
    [inactiveTimers],
  );

  void tick;
  const currentWorkTimeMs = getWorkTimeMs(timerState?.timestamps);
  const totalWorkTimeMs = inactiveWorkTimeMs + currentWorkTimeMs;
  const displayWorkTime = error ? FALLBACK_TIME : formatTime(totalWorkTimeMs);

  return (
    <div className="flex items-center gap-2 text-sm text-muted-foreground">
      <span className="font-mono tabular-nums">{displayWorkTime}</span>
    </div>
  );
}