'use client';

/**
 * PageOrganizedHome - React island for the page-organizer-driven homepage.
 *
 * Chrome (TopBar, DesktopTopBar, BottomNav) is now handled at the Astro layer
 * via PublicAppShell in pages/index.astro. This component renders only the
 * body content: carousels, organized modules, and page overlays.
 *
 * Layout:
 *   lg:hidden  → mobile module list
 *   hidden lg:block → desktop module list
 */

import { GlobalCartDrawer } from '@/components/ui/domain/cart/GlobalCartDrawer';
import { CheckoutModal } from '@/features/checkout-modal/CheckoutModal';
import { PageRenderer } from '@/server/page-layout/renderer/PageRenderer';
import type { LoadedPage } from '@/server/page-layout/loader';
import { PreviewProvider } from './PreviewContext';
import { HydratedIsland } from '@/components/HydratedIsland';
import { WishlistProvider } from '@/features/wishlist/WishlistContext';
import type { DehydratedState } from '@tanstack/react-query';
import type { Locale } from '@/lib/i18n';

export interface PageOrganizedHomeProps {
  page: LoadedPage;
  /** When true, preview mode — empty rows show heading only so admins can verify ordering. */
  isPreview?: boolean;
  /**
   * When set, force rendering only that device's modules regardless of viewport breakpoint.
   * Used by the admin preview iframe so the desktop array renders even at narrow widths.
   */
  forceDevice?: 'mobile' | 'desktop' | null;
  /** Server-resolved locale — passed through to HydratedIsland to prevent Hebrew flash on EN pages. */
  locale?: Locale;
}

function Inner({ page, forceDevice = null }: PageOrganizedHomeProps) {
  return (
    <>
      <div className="pb-4">
        <WishlistProvider>
          {forceDevice === 'mobile' ? (
            <PageRenderer modules={page.mobile} />
          ) : forceDevice === 'desktop' ? (
            <PageRenderer modules={page.desktop} />
          ) : (
            <>
              {/* Mobile layout */}
              <div className="lg:hidden">
                <PageRenderer modules={page.mobile} />
              </div>
              {/* Desktop layout */}
              <div className="hidden lg:block">
                <PageRenderer modules={page.desktop} />
              </div>
            </>
          )}
        </WishlistProvider>
      </div>
      {/* Page-level overlays — must live in same React root as buy buttons */}
      <GlobalCartDrawer />
      <CheckoutModal />
    </>
  );
}

export function PageOrganizedHome(
  props: PageOrganizedHomeProps & { dehydratedState?: DehydratedState },
) {
  const { dehydratedState, locale, ...rest } = props;
  return (
    <HydratedIsland dehydratedState={dehydratedState} locale={locale}>
      <PreviewProvider isPreview={rest.isPreview ?? false}>
        <Inner {...rest} />
      </PreviewProvider>
    </HydratedIsland>
  );
}