'use client'

// MUI Imports
import Grid from '@mui/material/Grid2'

// Component Imports
import DistributedBarChartOrder from '@views/dashboards/crm/DistributedBarChartOrder'
import EarningReportsWithTabs from '@views/dashboards/crm/EarningReportsWithTabs'

// Server Action Imports
import Loading from '../../../../../../components/layout/shared/Loading'
import { useDashboardAnalytics } from '../../../../../../services/queries/analytics'
import { DashboardReport, PaymentDataItem, ProductData, RecentSale } from '../../../../../../types/services/analytic'

const DashboardOverview = () => {
  const { data, isLoading } = useDashboardAnalytics()

  const formatDate = (dateString: any) => {
    return new Date(dateString).toLocaleDateString('id-ID', {
      month: 'short',
      day: 'numeric'
    })
  }

  const transformSalesData = (data: DashboardReport) => {
    return [
      {
        type: 'products',
        avatarIcon: 'tabler-package',
        date: data.top_products.map((d: ProductData) => d.product_name),
        series: [{ data: data.top_products.map((d: ProductData) => d.revenue) }]
      },
      {
        type: 'orders',
        avatarIcon: 'tabler-shopping-cart',
        date: data.recent_sales.map((d: RecentSale) => formatDate(d.date)),
        series: [{ data: data.recent_sales.map((d: RecentSale) => d.net_sales) }]
      },
      {
        type: 'payments',
        avatarIcon: 'tabler-credit-card-pay',
        date: data.payment_methods.map((d: PaymentDataItem) => d.payment_method_name),
        series: [{ data: data.payment_methods.map((d: PaymentDataItem) => d.total_amount) }]
      },
    ]
  }

  if (isLoading) return <Loading />

  return (
    <Grid container spacing={6}>
      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
        <DistributedBarChartOrder
          isLoading={isLoading}
          title='Total Customers'
          value={data?.overview.total_customers as number}
          avatarIcon={'tabler-users'}
          avatarColor='primary'
          avatarSkin='light'
        />
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
        <DistributedBarChartOrder
          isLoading={isLoading}
          title='Total Orders'
          value={data?.overview.total_orders as number}
          avatarIcon={'tabler-package'}
          avatarColor='info'
          avatarSkin='light'
        />
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
        <DistributedBarChartOrder
          isLoading={isLoading}
          title='Average Orders'
          value={data?.overview.average_order_value as number}
          avatarIcon={'tabler-trending-up'}
          avatarColor='warning'
          avatarSkin='light'
        />
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
        <DistributedBarChartOrder
          isLoading={isLoading}
          title='Total Sales'
          value={data?.overview.total_sales as number}
          avatarIcon={'tabler-currency-dollar'}
          avatarColor='success'
          avatarSkin='light'
        />
      </Grid>
      <Grid size={{ xs: 12, lg: 12 }}>
        <EarningReportsWithTabs data={transformSalesData(data!)} />
      </Grid>
    </Grid>
  )
}

export default DashboardOverview