import { jsx, jsxs } from "react/jsx-runtime";
import { Box, Text, useInput } from "ink";
import { useEffect, useRef, useState } from "react";
import { semantic } from "../theme/palette.js";
import { reducedMotion } from "../theme/motion-guard.js";
const PULSE_TTL = 500;
function Sidebar({ routes, activeRoute, dirtyByCategory, onSelect, focused }) {
  const [cursor, setCursor] = useState(() => Math.max(0, routes.findIndex((r) => r.id === activeRoute)));
  useEffect(() => {
    const i = routes.findIndex((r) => r.id === activeRoute);
    if (i >= 0) setCursor(i);
  }, [activeRoute, routes]);
  const prevDirtyRef = useRef({});
  const [pulsingCategories, setPulsingCategories] = useState(/* @__PURE__ */ new Set());
  const pulseTimers = useRef(/* @__PURE__ */ new Map());
  useEffect(() => {
    const prev = prevDirtyRef.current;
    if (!reducedMotion()) {
      for (const id of Object.keys(prev)) {
        const prevCount = prev[id] ?? 0;
        const curCount = dirtyByCategory[id] ?? 0;
        if (prevCount > 0 && curCount === 0 && !pulseTimers.current.has(id)) {
          setPulsingCategories((existing) => {
            const next = new Set(existing);
            next.add(id);
            return next;
          });
          const handle = setTimeout(() => {
            setPulsingCategories((s) => {
              const next = new Set(s);
              next.delete(id);
              return next;
            });
            pulseTimers.current.delete(id);
          }, PULSE_TTL);
          pulseTimers.current.set(id, handle);
        }
      }
    }
    prevDirtyRef.current = { ...dirtyByCategory };
  }, [dirtyByCategory]);
  useEffect(() => {
    return () => {
      for (const handle of pulseTimers.current.values()) clearTimeout(handle);
      pulseTimers.current.clear();
    };
  }, []);
  useInput((_input, key) => {
    if (!focused) return;
    if (key.upArrow) {
      setCursor((c) => Math.max(0, c - 1));
    } else if (key.downArrow) {
      setCursor((c) => Math.min(routes.length - 1, c + 1));
    } else if (key.return) {
      const route = routes[cursor];
      if (route) onSelect(route.id);
    }
  }, { isActive: focused });
  const settingsRoutes = routes.filter((r) => r.group === "settings");
  const actionsRoutes = routes.filter((r) => r.group === "actions");
  const renderRow = (r, globalIndex) => {
    const isCursor = focused && globalIndex === cursor;
    const isActive = r.id === activeRoute;
    const dirty = r.group === "settings" && (dirtyByCategory[r.id] ?? 0) > 0;
    const pulsing = r.group === "settings" && pulsingCategories.has(r.id);
    const showDot = dirty || pulsing;
    return /* @__PURE__ */ jsxs(Box, { justifyContent: "space-between", children: [
      /* @__PURE__ */ jsxs(Text, { color: isCursor || isActive ? semantic.accent : semantic.text, bold: isCursor, children: [
        isCursor ? "\u25B8 " : "  ",
        r.label
      ] }),
      showDot && /* @__PURE__ */ jsx(Text, { color: pulsing ? semantic.accentAlt : semantic.accent, children: "\u25CF" })
    ] }, r.id);
  };
  return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", width: 24, paddingX: 1, children: [
    /* @__PURE__ */ jsx(Text, { color: semantic.textDim, bold: true, children: "SETTINGS" }),
    settingsRoutes.map((r, i) => renderRow(r, i)),
    /* @__PURE__ */ jsx(Text, { color: semantic.textMuted, children: "\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500" }),
    /* @__PURE__ */ jsx(Text, { color: semantic.textDim, bold: true, children: "ACTIONS" }),
    actionsRoutes.map((r, i) => renderRow(r, settingsRoutes.length + i))
  ] });
}
export {
  Sidebar
};
//# sourceMappingURL=Sidebar.js.map