import { createContext, useContext, useState, type ReactNode } from "react";
import { type Sub } from "./plexSubUrl";

// A one-way bridge so the always-mounted Header can host the Plex Discover ⟷ Browse toggle even though
// the sub-view state lives in (and is owned by) the plex-only PlexBrowse. PlexBrowse PUBLISHES its
// current top-level view + opener here (on mount and on view change) and clears it on unmount; the
// Header READS it to render the toggle beside the library-scope pill.
//
// Why a bridge and not a global sub-view provider: PlexBrowse's `useHistorySubview` REMOUNTS every time
// you enter the plex page, re-seeding the view from history (a page switch clears ?v + drops _sub, so
// each plex entry starts at the Discover root). Lifting that hook to an always-mounted provider would
// lose the remount and let the view go stale across navigation. Keeping it in PlexBrowse preserves the
// reseed; the bridge only mirrors the small slice the header needs.
export type PlexViewControls = {
  kind: Sub["kind"]; // the current top-level plex view — the header controls derive their state from it
  open: (v: Sub) => void;
};

const ReadCtx = createContext<PlexViewControls | null>(null);
const PublishCtx = createContext<(c: PlexViewControls | null) => void>(() => {});

export function PlexViewBridge({ children }: { children: ReactNode }) {
  const [controls, setControls] = useState<PlexViewControls | null>(null);
  return (
    <PublishCtx.Provider value={setControls}>
      <ReadCtx.Provider value={controls}>{children}</ReadCtx.Provider>
    </PublishCtx.Provider>
  );
}

export const usePlexViewControls = () => useContext(ReadCtx);
export const usePublishPlexView = () => useContext(PublishCtx);