import dynamic from "next/dynamic";
import { Suspense } from "react";

import { CustomerPageShell } from "@/app/customer/_components/customer-page-shell";
import { CUSTOMER_ROUTE_KEYS } from "@/config/customer-route-keys";
import { ReportPageGuard } from "@/app/customer/[tenant]/reports/_shared/components/report-page-guard";

const ConsolidatedHoldingsView = dynamic(
  () =>
    import("./_components/consolidated-holdings-report/consolidated-holdings-view").then(
      (mod) => mod.ConsolidatedHoldingsView,
    ),
  { loading: () => <div className="p-6 text-muted-foreground text-sm">Loading consolidated holdings…</div> },
);

type PageProps = { params: Promise<{ tenant: string }> };

export default async function ConsolidatedHoldingsReportPage({ params }: PageProps) {
  const { tenant } = await params;
  return (
    <CustomerPageShell>
      <ReportPageGuard tenant={tenant} routeKeys={CUSTOMER_ROUTE_KEYS.consolidatedHoldingsReport} label="Consolidated Holdings Report">
        <Suspense
          fallback={<div className="p-6 text-muted-foreground text-sm">Loading consolidated holdings…</div>}
        >
          <ConsolidatedHoldingsView />
        </Suspense>
      </ReportPageGuard>
    </CustomerPageShell>
  );
}