// Per-device display preferences (localStorage), observable from React.
import { useSyncExternalStore } from "react";

export type ReasoningMode = "collapsed" | "live" | "expanded" | "hidden";

const KEY = "codecraft.reasoning";
const listeners = new Set<() => void>();

export function getReasoningMode(): ReasoningMode {
  const v = localStorage.getItem(KEY);
  return v === "live" || v === "expanded" || v === "hidden" ? v : "collapsed";
}

export function setReasoningMode(mode: ReasoningMode) {
  localStorage.setItem(KEY, mode);
  listeners.forEach((l) => l());
}

export function useReasoningMode(): ReasoningMode {
  return useSyncExternalStore(
    (l) => {
      listeners.add(l);
      return () => listeners.delete(l);
    },
    getReasoningMode,
  );
}

const TODOS_KEY = "codecraft.todosCollapsed";

/** Task list above the composer folded to a one-line summary (per device). */
export function useTodosCollapsed(): [boolean, (v: boolean) => void] {
  const v = useSyncExternalStore(
    (l) => {
      listeners.add(l);
      return () => listeners.delete(l);
    },
    () => localStorage.getItem(TODOS_KEY) === "1",
  );
  const set = (c: boolean) => {
    localStorage.setItem(TODOS_KEY, c ? "1" : "0");
    listeners.forEach((l) => l());
  };
  return [v, set];
}