'use client';

import * as React from 'react';
// import type { Metadata } from 'next';
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 { ListChecks as ListChecksIcon } from '@phosphor-icons/react/dist/ssr/ListChecks';
import { Plus as PlusIcon } from '@phosphor-icons/react/dist/ssr/Plus';
import { Users as UsersIcon } from '@phosphor-icons/react/dist/ssr/Users';
import { Warning as WarningIcon } from '@phosphor-icons/react/dist/ssr/Warning';
import { useTranslation } from 'react-i18next';

// import { config } from '@/config';
import { dayjs } from '@/lib/dayjs';
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';

// TODO: remove me
// export const metadata = { title: `Overview | Dashboard | ${config.site.name}` } satisfies Metadata;

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

  // return <>helloworld</>;

  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}>
            <Summary amount={31} diff={15} icon={ListChecksIcon} title={t('Tickets')} trend="up" />
          </Grid>
          <Grid md={4} xs={12}>
            <Summary amount={240} diff={5} icon={UsersIcon} title={t('Sign ups')} trend="down" />
          </Grid>
          <Grid md={4} xs={12}>
            <Summary amount={21} diff={12} icon={WarningIcon} title={t('Open issues')} 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={[
                {
                  id: 'supabase',
                  title: 'Supabase',
                  icon: '/assets/company-avatar-5.png',
                  costs: '$599',
                  billingCycle: 'year',
                  status: 'paid',
                },
                {
                  id: 'vercel',
                  title: 'Vercel',
                  icon: '/assets/company-avatar-4.png',
                  costs: '$20',
                  billingCycle: 'month',
                  status: 'expiring',
                },
                {
                  id: 'auth0',
                  title: 'Auth0',
                  icon: '/assets/company-avatar-3.png',
                  costs: '$20-80',
                  billingCycle: 'month',
                  status: 'canceled',
                },
                {
                  id: 'google_cloud',
                  title: 'Google Cloud',
                  icon: '/assets/company-avatar-2.png',
                  costs: '$100-200',
                  billingCycle: 'month',
                  status: 'paid',
                },
                {
                  id: 'stripe',
                  title: 'Stripe',
                  icon: '/assets/company-avatar-1.png',
                  costs: '$70',
                  billingCycle: 'month',
                  status: 'paid',
                },
              ]}
            />
          </Grid>
          <Grid md={4} xs={12}>
            <AppChat
              messages={[
                {
                  id: 'MSG-001',
                  content: 'Hello, we spoke earlier on the phone',
                  author: { name: 'Alcides Antonio', avatar: '/assets/avatar-10.png', status: 'online' },
                  createdAt: dayjs().subtract(2, 'minute').toDate(),
                },
                {
                  id: 'MSG-002',
                  content: 'Is the job still available?',
                  author: { name: 'Marcus Finn', avatar: '/assets/avatar-9.png', status: 'offline' },
                  createdAt: dayjs().subtract(56, 'minute').toDate(),
                },
                {
                  id: 'MSG-003',
                  content: "What is a screening task? I'd like to",
                  author: { name: 'Carson Darrin', avatar: '/assets/avatar-3.png', status: 'online' },
                  createdAt: dayjs().subtract(3, 'hour').subtract(23, 'minute').toDate(),
                },
                {
                  id: 'MSG-004',
                  content: 'Still waiting for feedback',
                  author: { name: 'Fran Perez', avatar: '/assets/avatar-5.png', status: 'online' },
                  createdAt: dayjs().subtract(8, 'hour').subtract(6, 'minute').toDate(),
                },
                {
                  id: 'MSG-005',
                  content: 'Need more information about campaigns',
                  author: { name: 'Jie Yan', avatar: '/assets/avatar-8.png', status: 'offline' },
                  createdAt: dayjs().subtract(10, 'hour').subtract(18, 'minute').toDate(),
                },
              ]}
            />
          </Grid>
          <Grid md={4} xs={12}>
            <Events
              events={[
                {
                  id: 'EV-004',
                  title: t('Meeting with partners'),
                  description: '17:00 to 18:00',
                  createdAt: dayjs().add(1, 'day').toDate(),
                },
                {
                  id: 'EV-003',
                  title: 'Interview with Jonas',
                  description: '15:30 to 16:45',
                  createdAt: dayjs().add(4, 'day').toDate(),
                },
                {
                  id: 'EV-002',
                  title: "Doctor's appointment",
                  description: '12:30 to 15:30',
                  createdAt: dayjs().add(4, 'day').toDate(),
                },
                {
                  id: 'EV-001',
                  title: 'Weekly meeting',
                  description: '09:00 to 09:30',
                  createdAt: dayjs().add(7, 'day').toDate(),
                },
              ]}
            />
          </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>
  );
}