import { lazyWithPreload } from "../lib/lazyWithPreload";
import { useMe } from "../lib/useMe";
import { useFeedFilters, useFeedFiltersActions } from "./feedFiltersContext";
import { useFeedView, useFeedViewActions } from "./feedViewContext";
import { useNavigation, useNavigationActions } from "./navigationContext";
import PersonalViewsModal from "./PersonalViewsModal";
import { useSavedViews } from "./savedViewsContext";

// The two module-registry pages that need per-render wiring (see moduleRegistry), split out of it so
// that file exports only data and this one only components (Fast Refresh). Their lazy chunks are
// exported alongside so the registry can attach each chunk's preload to the wrapper that renders it.
export const Feed = lazyWithPreload(() => import("./Feed"));

// The GLOBAL feed page: wires <Feed> to the app-wide feed filters / view / live-search. (The channel
// page renders <Feed> itself with its own channel-scoped filters, so those two never share state.)
export function FeedPage() {
  const me = useMe();
  const filters = useFeedFilters();
  const { setFilters } = useFeedFiltersActions();
  const view = useFeedView();
  const { setView } = useFeedViewActions();
  const { ytSearch } = useNavigation();
  const { enterYtSearch, exitYtSearch } = useNavigationActions();
  // The Personal Views modal lives at the feed-page level (always mounted while on the feed, unmounts
  // on navigation) rather than inside the collapsible filter rail — otherwise opening it from the
  // always-visible toolbar view chip while the rail is unpinned would render nothing and latch open.
  const { modalOpen } = useSavedViews();
  return (
    <>
      <Feed
        filters={filters}
        setFilters={setFilters}
        view={view}
        setView={setView}
        canRead={me.can_read}
        ytSearch={ytSearch}
        onYtSearch={enterYtSearch}
        onExitYtSearch={exitYtSearch}
      />
      {modalOpen && <PersonalViewsModal />}
    </>
  );
}