import { Box } from '@mui/material'
import { useBrokerPortfolioHistory } from '@/entities/broker-account'
import { useBrokerAnalytics } from '@/entities/broker-analytics'
import { useBrokerOperations } from '@/entities/broker-operation'
import type { BrokerPortfolio } from '@/shared/api'
import { BrokerDashboardAllocationCard } from './BrokerDashboardAllocationCard'
import { BrokerDashboardAnalyticsCard } from './BrokerDashboardAnalyticsCard'
import { BrokerDashboardEventsCard } from './BrokerDashboardEventsCard'
import { BrokerPortfolioHistoryCard } from './BrokerPortfolioHistoryCard'

export function BrokerDashboard({
  accountId,
  portfolio,
}: {
  accountId: string
  portfolio: BrokerPortfolio
}) {
  const analytics = useBrokerAnalytics(accountId)
  const portfolioHistory = useBrokerPortfolioHistory(accountId)

  const eventsOps = useBrokerOperations(
    accountId,
    { categories: 'income,tax,fee', limit: 7 },
    { enabled: true },
  )

  return (
    <Box sx={{ display: 'grid', gap: 3 }}>
      <BrokerPortfolioHistoryCard
        data={portfolioHistory.data}
        portfolioValue={portfolio.totals.portfolio ?? undefined}
        isLoading={portfolioHistory.isLoading}
        isError={portfolioHistory.isError}
      />
      <BrokerDashboardAnalyticsCard
        data={analytics.data}
        isLoading={analytics.isLoading}
        isError={analytics.isError}
      />
      <BrokerDashboardAllocationCard portfolio={portfolio} />
      <BrokerDashboardEventsCard
        accountId={accountId}
        data={eventsOps.data?.items ?? []}
        isLoading={eventsOps.isLoading}
        isError={eventsOps.isError}
      />
    </Box>
  )
}