Analytics

const getCachedRevenueData = cache(async (workspaceId: string) => {
  const [revenueData, stats] = await Promise.all([
    getWorkspaceMonthlyRevenue(workspaceId, 12),
    getWorkspaceDashboardStats(workspaceId),
  ]);

  // Calculate growth percentage for revenue
  const revenueGrowth =
    revenueData.length >= 2
      ? ((revenueData[revenueData.length - 1]?.revenue ?? 0) -
          (revenueData[revenueData.length - 2]?.revenue ?? 0)) /
        (revenueData[revenueData.length - 2]?.revenue || 1)
      : 0;

  return {
    revenueData,
    totalRevenue: stats.totalRevenue,
    growthPercentage: revenueGrowth * 100,
  };
});

async function RevenueChart({ workspaceId }: { workspaceId: string }) {
  const { revenueData, totalRevenue, growthPercentage } =
    await getCachedRevenueData(workspaceId);

  return (
    <ClippedAreaChart
      data={revenueData}
      totalRevenue={totalRevenue}
      growthPercentage={growthPercentage}
    />
  );
}

async function TicketSalesChart({ workspaceId }: { workspaceId: string }) {
  const { ticketData, totalTickets, totalRegistrations, growthPercentage } =
    await getCachedTicketData(workspaceId);

  return (
    <GlowingLineChart
      data={ticketData}
      totalTickets={totalTickets}
      totalRegistrations={totalRegistrations}
      growthPercentage={growthPercentage}
    />
  );
}

const { hasAccess, workspace, workspaceRole } = await checkWorkspaceRole(
  workspaceId,
  WorkspaceRole.MODERATOR,
);

if (!hasAccess || !workspace || !workspaceRole) {
  return (
    <PermissionDenied
      title="Analytics Access Restricted"
      message="You need at least Moderator permissions to view workspace analytics."
      requiredRole="Moderator or Admin"
    />
  );
}

function AnalyticsCharts({ workspaceId }: { workspaceId: string }) {
  return (
    <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
      {/* Each chart streams independently - no blocking */}
      <Suspense fallback={null}>
        <RevenueChart workspaceId={workspaceId} />
      </Suspense>
      <Suspense fallback={null}>
        <TicketSalesChart workspaceId={workspaceId} />
      </Suspense>
    </div>
  );
}

return (
  <div className="space-y-6">
    {/* Static content - automatically prerendered */}
    <Breadcrumbs items={[...]} />
    <div>
      <h2 className="text-3xl font-bold">Analytics</h2>
      <p className="text-muted-foreground">
        View analytics for {workspace.name}
      </p>
    </div>

    {/* Dynamic content - streams in without blocking */}
    <AnalyticsCharts workspaceId={workspaceId} />
  </div>
);