"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { ProjectColorDot } from "../../../lib/timesheets-ui/ProjectColorDot.js";
import { useActiveTimesheetTimer } from "../../../lib/timesheets-ui/useActiveTimesheetTimer.js";
function formatElapsed(seconds) {
  const h = Math.floor(seconds / 3600);
  const m = Math.floor(seconds % 3600 / 60);
  const s = seconds % 60;
  return `${h}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
}
function TimerSidebarIndicator() {
  const t = useT();
  const timer = useActiveTimesheetTimer();
  const [elapsed, setElapsed] = React.useState(0);
  const intervalRef = React.useRef(null);
  React.useEffect(() => {
    if (!timer.running || !timer.startedAt) {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
      setElapsed(0);
      return;
    }
    const startTime = new Date(timer.startedAt).getTime();
    const calcElapsed = () => Math.max(0, Math.floor((Date.now() - startTime) / 1e3));
    setElapsed(calcElapsed());
    intervalRef.current = setInterval(() => setElapsed(calcElapsed()), 1e3);
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
        intervalRef.current = null;
      }
    };
  }, [timer.running, timer.startedAt]);
  if (!timer.running || !timer.entryId) return null;
  return /* @__PURE__ */ jsxs(
    "a",
    {
      href: "/backend/staff/timesheets",
      className: "flex items-center gap-2 rounded-md px-2 py-1.5 text-xs hover:bg-muted transition-colors cursor-pointer",
      title: t("staff.timesheets.sidebar.timerRunning", "Timer running \u2014 click to view"),
      children: [
        /* @__PURE__ */ jsxs("span", { className: "relative flex h-2.5 w-2.5 shrink-0", children: [
          /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75" }),
          /* @__PURE__ */ jsx("span", { className: "relative inline-flex h-2.5 w-2.5 rounded-full bg-red-500" })
        ] }),
        timer.projectName ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 truncate", children: [
          /* @__PURE__ */ jsx(ProjectColorDot, { colorKey: timer.projectColor, projectName: timer.projectName, size: "xs" }),
          /* @__PURE__ */ jsx("span", { className: "truncate", children: timer.projectName })
        ] }) : null,
        /* @__PURE__ */ jsx("span", { className: "ml-auto font-mono tabular-nums shrink-0", children: formatElapsed(elapsed) })
      ]
    }
  );
}
const widget = {
  metadata: {
    id: "staff.injection.timer-sidebar-indicator",
    title: "Active timer indicator",
    description: "Shows a pulsing indicator in the sidebar when a timesheet timer is running.",
    features: ["staff.timesheets.manage_own"]
  },
  Widget: TimerSidebarIndicator
};
var widget_default = widget;
export {
  widget_default as default
};
//# sourceMappingURL=widget.js.map
