import { Suspense } from "react";
import { POSWorkspace } from "@/components/pos/pos-workspace";
import { POSPageSkeleton } from "@/components/pos/pos-skeleton";
import {
  listPOSProducts,
  type POSProductListUser,
} from "@/lib/pos/list-products";
import type { POSSettings } from "@/lib/pos/build-pos-settings";

interface POSPageShellProps {
  settings: POSSettings;
  user: POSProductListUser;
}

/**
 * The product query is the one slow part of the page, so it sits behind its own
 * Suspense boundary: the skeleton streams immediately and the populated grid
 * replaces it as soon as the database answers — no client-side loading round
 * trip, and no blank page while the query runs.
 */
export function POSPageShell({ settings, user }: POSPageShellProps) {
  return (
    <Suspense fallback={<POSPageSkeleton />}>
      <POSTerminalLoader settings={settings} user={user} />
    </Suspense>
  );
}

async function POSTerminalLoader({ settings, user }: POSPageShellProps) {
  const initialData = await listPOSProducts(user, {
    locationId: settings.posLocationId,
    allowVendorProducts: settings.vendorProductsEnabled,
  });

  return <POSWorkspace settings={settings} initialData={initialData} />;
}