import { CustomerPageShell } from "@/app/customer/_components/customer-page-shell";
import { Suspense } from "react";

import { ReportLoadingPanel } from "@/app/customer/[tenant]/reports/_shared/components/report-loading-panel";
import { CashflowView } from "./_components/cashflow-report/cashflow-view";
import { CUSTOMER_ROUTE_KEYS } from "@/config/customer-route-keys";
import { ReportPageGuard } from "@/app/customer/[tenant]/reports/_shared/components/report-page-guard";

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

export default async function CashflowReportPage({ params }: PageProps) {
  const { tenant } = await params;
  return (
    <CustomerPageShell
      pageLayout="viewport"
      className="min-h-0 overflow-hidden"
      contentClassName="min-h-0 flex-1 gap-0 overflow-hidden px-4 pt-3 pb-3 md:gap-0 lg:px-6"
    >
      <ReportPageGuard tenant={tenant} routeKeys={CUSTOMER_ROUTE_KEYS.cashflowReport} label="Cashflow Report">
        <Suspense fallback={<ReportLoadingPanel loading label="Loading cashflow…" />}>
          <CashflowView />
        </Suspense>
      </ReportPageGuard>
    </CustomerPageShell>
  );
}