import { cx } from '@learnitive/base-utils';
import { APP_MAIN_CONTENT_PADDING } from '@learnitive/constants';
import { useCoreServices } from '@learnitive/context';
import { useAtomValue } from 'jotai';
import React from 'react';

export interface PageContentContainerProps {
  children: React.ReactNode;
  /**
   * If true, apply standard padding. Components like Editor
   * often manage their own padding (e.g., for drag handles).
   * @default true
   */
  applyPadding?: boolean;
  /**
   * If true, constrain content based on the editor width preference.
   * Non-editor pages with their own layout should opt out.
   * @default true
   */
  respectEditorWidthPreference?: boolean;
  /**
   * Optional test id applied to the container, so tests can assert which page
   * is mounted (e.g. that a note move never bounces through ws-home).
   */
  testId?: string;
  /**
   * Lock this page to the available application viewport. The page itself
   * stops scrolling; child panes own their scroll containers.
   */
  viewportLocked?: boolean;
}

/**
 * A container for the main page content, handling responsive width and padding.
 */
export function PageContentContainer({
  children,
  applyPadding = true,
  respectEditorWidthPreference = true,
  testId,
  viewportLocked = false,
}: PageContentContainerProps) {
  const coreServices = useCoreServices();
  const wideEditor = useAtomValue(coreServices.workbenchState.$wideEditor);

  return (
    <main
      data-testid={testId}
      className={cx(
        'B-app-page-content flex min-h-0 min-w-0 flex-1 flex-col gap-4',
        viewportLocked ? 'overflow-hidden' : 'overflow-y-auto',
        respectEditorWidthPreference &&
          !wideEditor &&
          'mx-auto w-full max-w-(--breakpoint-md)',
        applyPadding && APP_MAIN_CONTENT_PADDING,
      )}
    >
      {children}
    </main>
  );
}