import { useQuery } from '@tanstack/react-query';
import { useParams } from 'react-router';
import { useClient } from 'hooks/useClient';

// Which attached tab is being previewed is `/browser/:tabId`. It used to be a `BROWSER_SELECTED_TAB`
// global read by three components, which meant the address bar said `/browser` no matter what you were
// looking at, and a tab row was a `<button>` with the id in its onClick closure.

export type BrowserTarget = {
  id: string;
  sessionId: string;
  type: string;
  title: string;
  url: string;
};

export const browserTabPath = (id: string) => `/browser/${encodeURIComponent(id)}`;

/** The previewed tab, or null on the bare `/browser` route — the list with nothing open. */
export const useSelectedTabId = (): string | null => useParams<{ tabId?: string }>().tabId ?? null;

// Both panels want this list and React Query serves both observers from one key, so the preview being
// able to tell "no tab open" from "that tab is gone" costs no extra request. It needs to: a CDP target
// id dies with the browser session, and now that the id is in the URL a reload can carry a stale one in
// — which the old global, living in memory, could never do.
export const useBrowserTargets = (enabled: boolean) => {
  const client = useClient();
  return useQuery({
    queryKey: ['browser-targets'],
    queryFn: () => client.get<BrowserTarget[]>('/browser/targets'),
    refetchInterval: 3000,
    enabled,
  });
};
