"use client";

/**
 * Folder selection lives outside React so the sidebar (desktop) and the folder
 * pills (mobile) can drive the same view.
 */

import { useSyncExternalStore } from "react";

export const ALL_FOLDERS = "all";

let selected = ALL_FOLDERS;
const listeners = new Set<() => void>();

export const folderSelection = {
  subscribe(listener: () => void): () => void {
    listeners.add(listener);
    return () => listeners.delete(listener);
  },
  getSnapshot(): string {
    return selected;
  },
  getServerSnapshot(): string {
    return ALL_FOLDERS;
  },
  set(id: string): void {
    if (selected === id) return;
    selected = id;
    listeners.forEach((listener) => listener());
  },
};

export function useSelectedFolder(): string {
  return useSyncExternalStore(
    folderSelection.subscribe,
    folderSelection.getSnapshot,
    folderSelection.getServerSnapshot,
  );
}