"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());
  },
};

/* Mobile drawer ---------------------------------------------------------- */

let drawerOpen = false;
const drawerListeners = new Set<() => void>();

export const sidebarOpen = {
  subscribe(listener: () => void): () => void {
    drawerListeners.add(listener);
    return () => drawerListeners.delete(listener);
  },
  getSnapshot(): boolean {
    return drawerOpen;
  },
  getServerSnapshot(): boolean {
    return false;
  },
  set(value: boolean): void {
    drawerOpen = value;
    drawerListeners.forEach((listener) => listener());
  },
  toggle(): void {
    sidebarOpen.set(!drawerOpen);
  },
};

export function useSidebarOpen(): boolean {
  return useSyncExternalStore(
    sidebarOpen.subscribe,
    sidebarOpen.getSnapshot,
    sidebarOpen.getServerSnapshot,
  );
}

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