import { createContext, useContext, useMemo, type ReactNode } from "react";
import { parseFeedView, type FeedView } from "../lib/feedView";
import { LS } from "../lib/storage";
import { usePref } from "../lib/usePref";

// Owns the feed's view mode (the card/row/tile density switcher), lifted out of App so both the feed
// page and the channel page read it via hooks instead of prop-drilling `view`/`setView` through App.
// Split State + Actions contexts, mirroring the other providers; composed in main.tsx around <App/>.
//
// The view mode is an account PREFERENCE, not a filter: it persists to the server on pick and is
// adopted from server prefs on login. usePref carries that server-sync (plus the localStorage mirror
// that seeds the first render synchronously) so this provider is just the two contexts over it.

interface FeedViewActions {
  setView: (v: FeedView) => void;
}

const StateContext = createContext<FeedView>("cards");
const ActionsContext = createContext<FeedViewActions>({ setView: () => {} });

export function useFeedView(): FeedView {
  return useContext(StateContext);
}
export function useFeedViewActions(): FeedViewActions {
  return useContext(ActionsContext);
}

export function FeedViewProvider({ children }: { children: ReactNode }) {
  // parseFeedView also maps the pre-0.45 "grid"/"list" values forward (idempotent for current values).
  const [view, setView] = usePref<FeedView>("view", "cards", {
    localKey: LS.feedView,
    parse: parseFeedView,
  });

  const actions = useMemo<FeedViewActions>(() => ({ setView }), [setView]);

  return (
    <ActionsContext.Provider value={actions}>
      <StateContext.Provider value={view}>{children}</StateContext.Provider>
    </ActionsContext.Provider>
  );
}