'use client'

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

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

// Server Action Imports
import Loading from '../../../../../../components/layout/shared/Loading'
import { usePaymentAnalytics } from '../../../../../../services/queries/analytics'
import { PaymentDataItem } from '../../../../../../types/services/analytic'
import PaymentMethodReport from '../../../../../../views/dashboards/payment-methods/PaymentMethodReport'
import { Typography, TextField, useTheme } from '@mui/material'
import { useState } from 'react'
import { formatDateDDMMYYYY, formatForInputDate } from '../../../../../../utils/transform'

const DashboardPayment = () => {
  const theme = useTheme()

  const today = new Date()
  const monthAgo = new Date()
  monthAgo.setDate(today.getDate() - 30)

  const [filter, setFilter] = useState({
    date_from: formatDateDDMMYYYY(monthAgo),
    date_to: formatDateDDMMYYYY(today)
  })

  const { data, isLoading } = usePaymentAnalytics({
    date_from: filter.date_from,
    date_to: filter.date_to
  })

  if (isLoading) return <Loading />

  return (
    <Grid container spacing={6}>
      <Grid size={{ xs: 12 }}>
        <div className='flex gap-4 items-center justify-between'>
          <Typography variant='h1' className='text-3xl font-bold text-gray-900 mb-2'>
            Payments Analysis Dashboard
          </Typography>
          <div className='flex items-center gap-4'>
            <TextField
              type='date'
              value={formatForInputDate(data?.date_from || new Date())}
              onChange={e => {
                setFilter({
                  ...filter,
                  date_from: formatDateDDMMYYYY(new Date(e.target.value))
                })
              }}
              size='small'
              sx={{
                '& .MuiOutlinedInput-root': {
                  '&.Mui-focused fieldset': {
                    borderColor: 'primary.main'
                  },
                  '& fieldset': {
                    borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
                  }
                }
              }}
            />
            <Typography>-</Typography>
            <TextField
              type='date'
              value={
                data?.date_to
                  ? new Date(data?.date_to).toISOString().split('T')[0]
                  : new Date().toISOString().split('T')[0]
              }
              onChange={e => {}}
              size='small'
              sx={{
                '& .MuiOutlinedInput-root': {
                  '&.Mui-focused fieldset': {
                    borderColor: 'primary.main'
                  },
                  '& fieldset': {
                    borderColor: theme.palette.mode === 'dark' ? 'rgba(231, 227, 252, 0.22)' : theme.palette.divider
                  }
                }
              }}
            />
          </div>
        </div>
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
        <DistributedBarChartOrder
          isLoading={isLoading}
          title='Total Orders'
          isCurrency={false}
          value={data?.summary.total_orders as number}
          avatarIcon={'tabler-shopping-cart'}
          avatarColor='primary'
          avatarSkin='light'
        />
      </Grid>
      <Grid size={{ xs: 12, sm: 6, md: 4, lg: 3 }}>
        <DistributedBarChartOrder
          isLoading={isLoading}
          title='Total Payment'
          isCurrency={false}
          value={data?.summary.total_payments 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'
          isCurrency={true}
          value={data?.summary.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 Amount'
          isCurrency={true}
          value={data?.summary.total_amount as number}
          avatarIcon={'tabler-currency-dollar'}
          avatarColor='success'
          avatarSkin='light'
        />
      </Grid>
      <Grid size={{ xs: 12, lg: 12 }}>
        <PaymentMethodReport payments={data?.data as PaymentDataItem[]} />
      </Grid>
    </Grid>
  )
}

export default DashboardPayment