import {Divider, Grid, Paper, Stack, Typography} from "@mui/material";
import {useTranslations} from "next-intl";
import Filter from "@/components/dashboard/reports/Filter";
import useChart from "@/lib/app/hooks/useChart";
import {GET_LOAN_EXPERTPROGRESS, GET_LOAN_REFERREDLOANS} from "@/core/data/apiRoutes";
import LoadingHardPage from "@/core/components/LoadingHardPage";
import AnalyticsIcon from "@mui/icons-material/Analytics";
import FunctionalityCharts from "@/components/dashboard/reports/LoanDetails/FunctionalityCharts";
import ReferredCharts from "@/components/dashboard/reports/LoanDetails/ReferredCharts";

const LoanDetails = () => {
    const t = useTranslations();

    const {
        errorReportList: errorReportList1,
        isLoadingReportList: isLoadingReportList1,
        reportList: reportList1,
        setFilterOption: setFilterOption1,
        mutate: mutate1
    } = useChart(GET_LOAN_EXPERTPROGRESS);

    // Use the useChart hook for the second API route
    const {
        errorReportList: errorReportList2,
        isLoadingReportList: isLoadingReportList2,
        reportList: reportList2,
        setFilterOption: setFilterOption2,
        mutate: mutate2
    } = useChart(GET_LOAN_REFERREDLOANS);

    return (
        <Paper elevation={2} sx={{width: "95%", mx: "auto", my: 2, pb: 2, background: "#f7f7f7e6"}}>
            <Filter title={t("reports.loan_details")}
                    filterItem={[{type: "province", type_fa: "استان", multiple: false},]}
                    setFilterOption={(fields) => {
                        setFilterOption1(fields);
                        setFilterOption2(fields)
                    }}
                    isLoadingReportList={isLoadingReportList1 || isLoadingReportList2}
                    mutate={() => {
                        mutate1();
                        mutate2()
                    }}
            />
            <Grid container sx={{justifyContent: {xs: "center", position: "relative"}}}>
                {isLoadingReportList1 || isLoadingReportList2 ? (
                    <Grid item xs={12} sx={{aspectRatio: "3/0.95"}}>
                        <LoadingHardPage
                            icon={<AnalyticsIcon sx={{width: "inherit", height: "inherit"}}/>}
                            loading={isLoadingReportList1 || isLoadingReportList2}
                            label={t("reports.loading_fetching_reports")}
                            width={100}
                            height={100}
                            sx={{position: "absolute", bgcolor: "#f7f7f7e6"}}
                        />
                    </Grid>
                ) : errorReportList1 || errorReportList2 ? (
                    <Grid item xs={12}
                          sx={{aspectRatio: "3/0.95", display: "flex", justifyContent: "center", alignItems: "center"}}>
                        <Typography variant="h6" sx={{
                            color: "#858585",
                            letterSpacing: "0.1rem"
                        }}>{t("reports.error_fetching_reports")}</Typography>
                    </Grid>
                ) : (
                    <Stack sx={{width: "100%"}}>
                        <FunctionalityCharts reportList={reportList1}/>
                        <Divider/>
                        <ReferredCharts reportList={reportList2}/>
                    </Stack>
                )
                }
            </Grid>
        </Paper>
    )
};

export default LoanDetails;
