'use client';

import * as React from 'react';
import GetAllLessonCategoriesCount from '@/db/LessonCategories/GetAllCount';
import GetAllLessonTypesCount from '@/db/LessonTypes/GetAllCount';
import { GetAllUsersCount } from '@/db/Users/GetAllCount';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
import Grid from '@mui/material/Unstable_Grid2';
import { ArrowRight as ArrowRightIcon } from '@phosphor-icons/react/dist/ssr/ArrowRight';
import { Briefcase as BriefcaseIcon } from '@phosphor-icons/react/dist/ssr/Briefcase';
import { FileCode as FileCodeIcon } from '@phosphor-icons/react/dist/ssr/FileCode';
import { Info as InfoIcon } from '@phosphor-icons/react/dist/ssr/Info';
// import type { Metadata } from 'next';
import { ListChecks as ListChecksIcon } from '@phosphor-icons/react/dist/ssr/ListChecks';
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
import { useTranslation } from 'react-i18next';

// import { config } from '@/config';
import { AppChat } from '@/components/dashboard/overview/app-chat';
import { AppLimits } from '@/components/dashboard/overview/app-limits';
import { AppUsage } from '@/components/dashboard/overview/app-usage';
import { Events } from '@/components/dashboard/overview/events';
import { HelperWidget } from '@/components/dashboard/overview/helper-widget';
import { Subscriptions } from '@/components/dashboard/overview/subscriptions';
import { Summary } from '@/components/dashboard/overview/summary';
import ActiveUserCount from '@/components/dashboard/overview/summary/ActiveUserCount';

import { events as SampleEvents } from './SampleEvents';
import { messages as SampleMessages } from './SampleMessages';
import { SamplesubScriptions } from './SamplesubScriptions';

export default function Page(): React.JSX.Element {
  const { t } = useTranslation();

  const [lessonTypesCount, setLessonTypesCount] = React.useState(0);
  const [lessonCategoriesCount, setLessonCategoriesCount] = React.useState(0);
  const [usersCount, setUsersCount] = React.useState(0);

  async function fetchAllCount(): Promise<void> {
    setLessonTypesCount(await GetAllLessonTypesCount());
    setLessonCategoriesCount(await GetAllLessonCategoriesCount());
    setUsersCount(await GetAllUsersCount());
  }

  React.useEffect(() => {
    void fetchAllCount();
  }, []);

  return (
    <Box
      sx={{
        maxWidth: 'var(--Content-maxWidth)',
        m: 'var(--Content-margin)',
        p: 'var(--Content-padding)',
        width: 'var(--Content-width)',
      }}
    >
      <Stack spacing={4}>
        <Stack
          direction={{ xs: 'column', sm: 'row' }}
          spacing={3}
          sx={{ alignItems: 'flex-start' }}
        >
          <Box sx={{ flex: '1 1 auto' }}>
            <Typography variant="h4">{t('Overview')}</Typography>
          </Box>
          <div>
            <Button
              startIcon={<PlusIcon />}
              variant="contained"
            >
              {t('Dashboard')}
            </Button>
          </div>
        </Stack>
        <Grid
          container
          spacing={4}
        >
          <Grid
            md={4}
            xs={12}
          >
            <ActiveUserCount />
          </Grid>
          <Grid
            md={4}
            xs={12}
          >
            <Summary
              amount={lessonCategoriesCount}
              diff={15}
              icon={ListChecksIcon}
              title={t('lessonCategoriesCount')}
              trend="up"
            />
          </Grid>
          <Grid
            md={4}
            xs={12}
          >
            <Summary
              amount={lessonTypesCount}
              diff={15}
              icon={ListChecksIcon}
              title={t('lessonTypesCount')}
              trend="up"
            />
          </Grid>
          <Grid
            md={8}
            xs={12}
          >
            <AppUsage
              data={[
                { name: 'Jan', v1: 36, v2: 19 },
                { name: 'Feb', v1: 45, v2: 23 },
                { name: 'Mar', v1: 26, v2: 12 },
                { name: 'Apr', v1: 39, v2: 20 },
                { name: 'May', v1: 26, v2: 12 },
                { name: 'Jun', v1: 42, v2: 31 },
                { name: 'Jul', v1: 38, v2: 19 },
                { name: 'Aug', v1: 39, v2: 20 },
                { name: 'Sep', v1: 37, v2: 18 },
                { name: 'Oct', v1: 41, v2: 22 },
                { name: 'Nov', v1: 45, v2: 24 },
                { name: 'Dec', v1: 23, v2: 17 },
              ]}
            />
          </Grid>
          <Grid
            md={4}
            xs={12}
          >
            <Subscriptions subscriptions={SamplesubScriptions} />
          </Grid>
          <Grid
            md={4}
            xs={12}
          >
            <AppChat messages={SampleMessages} />
          </Grid>
          <Grid
            md={4}
            xs={12}
          >
            <Events events={SampleEvents} />
          </Grid>
          <Grid
            md={4}
            xs={12}
          >
            <AppLimits usage={80} />
          </Grid>
          <Grid
            md={4}
            xs={12}
          >
            <HelperWidget
              action={
                <Button
                  color="secondary"
                  endIcon={<ArrowRightIcon />}
                  size="small"
                >
                  {t('Search jobs')}
                </Button>
              }
              description={t('Search for jobs that match your skills and apply to them directly.')}
              icon={BriefcaseIcon}
              label={t('Jobs')}
              title={t('Find your dream job')}
            />
          </Grid>
          <Grid
            md={4}
            xs={12}
          >
            <HelperWidget
              action={
                <Button
                  color="secondary"
                  endIcon={<ArrowRightIcon />}
                  size="small"
                >
                  {t('Help center')}
                </Button>
              }
              description={t('Find answers to your questions and get in touch with our team.')}
              icon={InfoIcon}
              label={t('Help center')}
              title={t('Need help figuring things out?')}
            />
          </Grid>
          <Grid
            md={4}
            xs={12}
          >
            <HelperWidget
              action={
                <Button
                  color="secondary"
                  endIcon={<ArrowRightIcon />}
                  size="small"
                >
                  {t('Documentation')}
                </Button>
              }
              description={t('Learn how to get started with our product and make the most of it.')}
              icon={FileCodeIcon}
              label={t('Documentation')}
              title={t('Explore documentation')}
            />
          </Grid>
        </Grid>
      </Stack>
    </Box>
  );
}