"use client";

import PageContainer from "./components/container/PageContainer";

import Iconify from "./components/iconify";
import { signIn, signOut, useSession } from "next-auth/react";
import { Grid, Typography, Container } from "@mui/material";
import SalesOverview from "./components/dashboard/SalesOverview";
import ProductPerfomance from "./components/dashboard/ProductPerformance";
import AppWidgetSummary from "./components/dataCard/app-widget-summary";
import AppWebsiteVisits from "./components/dashboard/Overview/app-website-visits";
import AppTrafficBySite from "./components/dashboard/Overview/app-traffic-by-site";
import AppConversionRates from "./components/dashboard/Overview/app-conversion-
rates";
import AppCurrentVisits from "./components/dashboard/Overview/app-current-visits";
import Image from "next/image";
const DashboardPage = () => {
const { data: session } = useSession();
if (session && session.user) {
return (
<PageContainer
id="hello"
title="Dashboard"
description="this is Dashboard"
>
<Container maxWidth="xl">
{/* Heading */}
<Typography
style={{ fontWeight: 700, lineHeight: 1.5, fontSize: "28px" }}
sx={{ mb: 5 }}
>
Hi, Welcome back {session.user.name} 👋
</Typography>

{/* Data Ribbons */}

{/* 1st Data Ribbons */}
<Grid container spacing={3}>
<Grid xs={12} md={4}>
<AppWidgetSummary
title="Monthly Sales"
total={714000}
color="success"
icon={
<Image
alt="icon"
src="/assets/icons/glass/ic_glass_bag.png"
width={55}
height={55}
/>
}
/>
</Grid>

{/* 2nd Data Ribbons */}

<Grid xs={12} md={4}>
<AppWidgetSummary
title="New Customer"
total={1352831}
color="info"
icon={
<Image
 alt="icon"
src="/assets/icons/glass/ic_glass_users.png"
width={55}
height={55}
/>
}
/>
</Grid>

{/* 3rd Data Ribbons */}

<Grid xs={12} md={4}>
<AppWidgetSummary
title="Total Orders"
total={1723315}
color="warning"
icon={
<Image
alt="icon"
src="/assets/icons/glass/ic_glass_buy.png"
width={55}
height={55}
/>
}
/>
</Grid>

{/* Charts */}

<Grid xs={12} lg={8}>
<AppWebsiteVisits
title="Top Monthly Visits"
subheader="(+43%) than last year"
chart={{
labels: [
"01/01/2003",
"02/01/2003",
"03/01/2003",
"04/01/2003",
"05/01/2003",
"06/01/2003",
"07/01/2003",
"08/01/2003",
"09/01/2003",
"10/01/2003",
"11/01/2003",
],
series: [
{
name: "Male",
type: "column",
fill: "solid",
data: [23, 11, 22, 27, 13, 22, 37, 21, 44, 22, 30],
},
{
name: "Female",
type: "area",
fill: "gradient",
data: [44, 55, 41, 67, 22, 43, 21, 41, 56, 27, 43],
},
{
 name: "Others",
type: "line",
fill: "solid",
data: [30, 25, 36, 30, 45, 35, 64, 52, 59, 36, 39],
},
],
}}
/>
</Grid>
<Grid xs={12} lg={4}>
<AppCurrentVisits
title="Monthly Visit as per Membership"
chart={{
series: [
{ label: "Silver", value: 4344 },
{ label: "Gold", value: 5435 },
{ label: "Platinum", value: 1443 },
{ label: "Casual", value: 4443 },
],
}}
/>
</Grid>

<Grid item xs={12} lg={12}>

<SalesOverview />
</Grid>

<Grid xs={12} lg={8}>

<AppConversionRates
sx={{ mt: 3, ml: 3 }}
title="Conversion Rates"
subheader="(+43%) than last year"
chart={{
series: [
{ label: "Seasonal Menu Promotion", value: 400 },
{ label: "Food Photography Contest", value: 430 },
{ label: "Happy Hour Specials", value: 448 },
{ label: "Loyalty Program", value: 470 },
{ label: "Themed Nights", value: 540 },
{ label: "Email Newsletter", value: 580 },
{ label: "Local Partnerships", value: 690 },
],
}}
/>
</Grid>
<Grid xs={12} lg={4}>
<AppTrafficBySite
sx={{ mt: 3, ml: 3 }}
title="Traffic by Social Media"
list={[
{
name: "FaceBook",
value: 323234,
icon: (
<Iconify
icon="eva:facebook-fill"
color="#5577F2"
width={32}
/>
 ),
},
{
name: "Google",
value: 341212,
icon: (
<Iconify
icon="eva:google-fill"
color="#DF3E30"
width={32}
/>
),
},
{
name: "Linkedin",
value: 411213,
icon: (
<Iconify
icon="eva:linkedin-fill"
color="#006097"
width={32}
/>
),
},
{
name: "Twitter",
value: 443232,
icon: (
<Iconify
icon="eva:twitter-fill"
color="#1C9CEA"
width={32}
/>
),
},
]}
/>
</Grid>

{/* ------------------------- row 1 ------------------------- */}

<Grid item xs={12} lg={12}>
<ProductPerfomance />
</Grid>
<Grid item xs={12} lg={12}></Grid>
</Grid>
{/* </Box> */}
</Container>
</PageContainer>
);
}
};

export default DashboardPage;