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",
                                    sx: {
                                        textAlign: "center",
                                        fontWeight: "bold",
                                        [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",
                                    sx: {
                                        textAlign: "center",
                                        fontWeight: "bold",
                                        [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" }}>
                                            {t("million_rial")}
                                        </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",
                                    sx: {
                                        textAlign: "center",
                                        fontWeight: "bold",
                                        [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",
                                    sx: {
                                        textAlign: "center",
                                        fontWeight: "bold",
                                        [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" }}>
                                            {t("million_rial")}
                                        </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",
                                    sx: {
                                        textAlign: "center",
                                        fontWeight: "bold",
                                        [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;