import { useSyncExternalStore } from "react";

/** Hash routes: #/ , #/s/<id>, #/new, #/settings[/tab], #/stats */
export function useRoute(): string[] {
  const hash = useSyncExternalStore(
    (l) => {
      window.addEventListener("hashchange", l);
      return () => window.removeEventListener("hashchange", l);
    },
    () => location.hash,
  );
  return hash.replace(/^#\/?/, "").split("/").filter(Boolean);
}

export function navigate(path: string) {
  location.hash = path.startsWith("/") ? path : `/${path}`;
}

/** Chats shown side by side: #/s/<id>+<id>+<id> (at most 3). */
export const MAX_PANES = 3;

export function openChats(): string[] {
  const m = location.hash.match(/^#\/s\/([^/]+)/);
  return m ? m[1].split("+").filter(Boolean) : [];
}

/** Add a chat as another column (replaces the last one when all columns are used). */
export function openBeside(id: string) {
  const ids = openChats().filter((x) => x !== id);
  if (ids.length >= MAX_PANES) ids.pop();
  navigate(`/s/${[...ids, id].join("+")}`);
}

export function closePane(id: string) {
  const ids = openChats().filter((x) => x !== id);
  navigate(ids.length ? `/s/${ids.join("+")}` : "/");
}