import FullPageLayout from "@/layouts/FullPageLayout";
import CenterLayout from "@/layouts/CenterLayout";
import {Box, Stack, Typography, Card, CardContent, CardHeader, useTheme, useMediaQuery} from "@mui/material";
import { useEffect, useState } from "react";
import useRequest from "@/lib/app/hooks/useRequest";
import {useTranslations} from "next-intl";
import {GET_LOAN_STATISTICS} from "@/core/data/apiRoutes";

const DashboardFirstComponent = () => {
  const theme = useTheme();
  const t = useTranslations();
  const requestServer = useRequest({ auth: true, notification: false });
  const [data, setData] = useState(null);
  const isXL = useMediaQuery(theme.breakpoints.up('xl'));

  useEffect(() => {
    requestServer(
      `${GET_LOAN_STATISTICS}`,
      "get"
    )
      .then((res) => {
        setData(res.data.data);
      })
      .catch(() => {});
  }, []);

  if (!data) return "";

  return (
    <>
      <FullPageLayout>
        <CenterLayout>
            <Stack sx={{ display: 'flex', justifyContent: 'center', gap: '20px' ,width: '100%' ,  flexDirection: "row",padding: 3, alignItems: 'flex-end',}}>
                <Card sx={{height:"200px" ,  width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
                    <CardHeader
                        sx={{
                            height: '50px',
                            backgroundColor: 'rgba(8, 64, 112, 0.08)',
                            color: 'primary.main',
                            textAlign:'center',
                        }}
                        titleTypographyProps={{
                            variant: 'body1',
                            style: {
                                textAlign: 'center',
                                fontWeight: 'bold',
                            },
                            sx: {
                                [theme.breakpoints.down('xl')]: {
                                    fontSize: '12px',
                                },
                            }
                        }}
                        title={t("Dashboard.total_number_loan_offers")}
                    />
                    <CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent:'center', height: 'calc(100% - 50px)', padding: "0 !important"}}>
                        <Box
                            sx={{
                                borderBottom: '6px solid',
                                borderColor: 'primary.main',
                                borderRadius: '6px 6px 6px 6px',
                                width: '90%',
                                textAlign:'center',
                            }}
                        >
                            <Typography  variant={isXL ? 'h5' : 'h6'}  sx={{lineHeight: 1.5 , fontWeight:'bold'}}>
                                {Number(data.proposedCount).toLocaleString("en")}
                            </Typography>
                        </Box>
                        <Box component={'img'} sx={{width: '40px', height: '40px', mt:2}}
                             src={'/images/pie-chart.png'}/>
                    </CardContent>
                </Card>
                <Card sx={{height:"250px" ,  width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
                    <CardHeader
                        sx={{
                            height: '50px',
                            backgroundColor: 'rgba(8, 64, 112, 0.08)',
                            color: 'primary.main',
                            textAlign:'center',
                            fontSize: '14px',
                            fontWeight: 'bold',
                        }}
                        titleTypographyProps={{
                            variant: 'body1',
                            style: {
                                textAlign: 'center',
                                fontWeight: 'bold',
                            },
                            sx: {
                                [theme.breakpoints.down('xl')]: {
                                    fontSize: '12px',
                                },
                            }
                        }}
                        title={t("Dashboard.total_amount_proposed_loan")}
                    />
                    <CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent:'center', height: 'calc(100% - 50px)', padding: "0 !important"}}>
                        <Box
                            sx={{
                                borderBottom: '6px solid',
                                borderColor: 'primary.main',
                                borderRadius: '6px 6px 6px 6px',
                                width: '90%',
                                textAlign:'center',
                            }}
                        >
                            <Typography variant={isXL ? 'h5' : 'h6'} sx={{ lineHeight: 1.5, fontWeight: 'bold' }}>
                                {(Number(data.totalProposedAmount)/1000000).toLocaleString("en")}
                                <Box component="span" sx={{ fontSize: '9px' , paddingLeft: '3px'}}>
                                    میلیون ریال
                                </Box>
                            </Typography>
                        </Box>
                        <Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
                             src={'/images/rial.png'}/>
                    </CardContent>
                </Card>
                <Card sx={{height:"300px", width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
                    <CardHeader
                        sx={{
                            height: '50px',
                            backgroundColor: 'rgba(8, 64, 112, 0.08)',
                            color: 'primary.main',
                            textAlign:'center',
                            fontSize: '14px',
                            fontWeight: 'bold',
                        }}
                        titleTypographyProps={{
                            variant: 'body1',
                            style: {
                                textAlign: 'center',
                                fontWeight: 'bold',
                            },
                            sx: {
                                [theme.breakpoints.down('xl')]: {
                                    fontSize: '12px',
                                },
                            }
                        }}
                        title={t("Dashboard.total_number_requests")}
                    />
                    <CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent:'center', height: 'calc(100% - 50px)', padding: "0 !important"}}>
                        <Box
                            sx={{
                                borderBottom: '6px solid',
                                borderColor: 'primary.main',
                                borderRadius: '6px 6px 6px 6px',
                                width: '90%',
                                textAlign:'center',
                            }}
                        >
                            <Typography variant={isXL ? 'h5' : 'h6'} sx={{lineHeight: 1.5 , fontWeight:'bold'}}>
                                {Number(data.totalApprovedLoans).toLocaleString("en")}
                            </Typography>
                        </Box>
                        <Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
                             src={'/images/pie-chart.png'}/>
                    </CardContent>
                </Card>
                <Card sx={{height:"250px", width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
                    <CardHeader
                        sx={{
                            height: '50px',
                            backgroundColor: 'rgba(8, 64, 112, 0.08)',
                            color: 'primary.main',
                            textAlign:'center',
                            fontSize: '14px',
                            fontWeight: 'bold',
                        }}
                        titleTypographyProps={{
                            variant: 'body1',
                            style: {
                                textAlign: 'center',
                                fontWeight: 'bold',
                            },
                            sx: {
                                [theme.breakpoints.down('xl')]: {
                                    fontSize: '12px',
                                },
                            }
                        }}
                        title={t("Dashboard.total_amount_approved_loans")}
                    />
                    <CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent:'center', height: 'calc(100% - 50px)', padding: "0 !important"}}>
                        <Box
                            sx={{
                                borderBottom: '6px solid',
                                borderColor: 'primary.main',
                                borderRadius: '6px 6px 6px 6px',
                                width: '90%',
                                textAlign:'center',
                            }}
                        >
                            <Typography variant={isXL ? 'h5' : 'h6'} sx={{ lineHeight: 1.5, fontWeight: 'bold' }}>
                                {(Number(data.totalApprovedAmount) / 1000000).toLocaleString("en")}
                                <Box component="span" sx={{ fontSize: '9px' , paddingLeft: '3px' }}>
                                    میلیون ریال
                                </Box>
                            </Typography>
                        </Box>
                        <Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
                             src={'/images/rial.png'}/>
                    </CardContent>
                </Card>
                <Card sx={{height:"200px", width: '20%', boxShadow: "rgba(0, 0, 0, 0.15) 0px 5px 15px 0px", borderRadius: '5px' }}>
                    <CardHeader
                        sx={{
                            height: '50px',
                            backgroundColor: 'rgba(8, 64, 112, 0.08)',
                            color: 'primary.main',
                            textAlign:'center',
                            fontSize: '14px',
                            fontWeight: 'bold',
                        }}
                        titleTypographyProps={{
                            variant: 'body1',
                            style: {
                                textAlign: 'center',
                                fontWeight: 'bold',
                            },
                            sx: {
                                [theme.breakpoints.down('xl')]: {
                                    fontSize: '12px',
                                },
                            }
                        }}
                        title={t("Dashboard.number_approved_loans")}
                    />
                    <CardContent sx={{display: 'flex', flexDirection: 'column', alignItems: 'center' , justifyContent:'center', height: 'calc(100% - 50px)' , padding: "0 !important"}}>
                        <Box
                            sx={{
                                borderBottom: '6px solid',
                                borderColor: 'primary.main',
                                borderRadius: '6px 6px 6px 6px',
                                width: '90%',
                                textAlign:'center',
                                alignSelf: 'center',
                            }}
                        >
                            <Typography variant={isXL ? 'h5' : 'h6'} sx={{lineHeight: 1.5 , fontWeight:'bold'}}>
                                {Number(data.approvedCount).toLocaleString("en")}
                            </Typography>
                        </Box>
                        <Box component={'img'} sx={{width: '40px', height: '40px' , mt:2}}
                             src={'/images/pie-chart.png'}/>
                    </CardContent>
                </Card>
            </Stack>
        </CenterLayout>
      </FullPageLayout>
    </>
  );
};

export default DashboardFirstComponent;