import {
  loadBaselineMetrics,
  getCountByPropertyType,
  getPortfolioGoal,
  getReportingScenarios,
} from "@/app/portfolio/[slug]/(portfolio)/reporting/databaseFunctions";
import { parseReportingViewState } from "@/lib/reporting/viewState";
import { ReportingClientArea } from "./ReportingClientArea";

export default async function ReportingPage(props: {
  params: Promise<{ slug: string }>;
  searchParams: Promise<Record<string, string | string[] | undefined>>;
}) {
  const params = await props.params;
  const portfolioId = Number(params.slug);

  // The tag filter is URL-driven: read it here so the server-rendered baseline
  // (current-stock figures) reflects the tagged subset. Changing tags navigates,
  // re-running these queries and streaming the filtered figures back in.
  const tags = parseReportingViewState(await props.searchParams).tags;

  // Kick every query off in parallel but DON'T await here — the promises are
  // handed to the client area, which unwraps each with `use()` inside its own
  // Suspense boundary. So the page shell + scenario picker paint immediately and
  // each section streams in as its data lands, instead of the whole page
  // blocking on the slowest query (the old Promise.all).
  const baselinePromise = loadBaselineMetrics(portfolioId, tags);
  const propertyTypesPromise = getCountByPropertyType(portfolioId, tags);
  const portfolioGoalPromise = getPortfolioGoal(portfolioId);
  const scenariosPromise = getReportingScenarios(portfolioId);

  return (
    <div className="max-w-8xl mx-auto px-6 pb-12 pt-5">
      <ReportingClientArea
        baselinePromise={baselinePromise}
        propertyTypesPromise={propertyTypesPromise}
        scenariosPromise={scenariosPromise}
        portfolioGoalPromise={portfolioGoalPromise}
        portfolioId={portfolioId}
      />
    </div>
  );
}
