import { Typography } from "@mui/material";
import { Box } from "@mui/system";
import React from "react";
import { useStyles } from "../dashboardStyles";
import SuperAdminTotals from "../Tiles/SuperAdminTotals";
import PaymentConfig from "./PaymentConfig";
import { getDashboardStats } from "../../../services/dashboard.services";

const SuperAdmin = () => {
  const classes = useStyles();
  const [isLoading, setIsLoading] = React.useState(true);
  const [data, setData] = React.useState({
    totalAccounts: 0,
    registrationRequest: 0,
    rejected: 0,
    registered: 0,
    paymentDue: 0,
  });

  const fetchDashboardStats = async () => {
    try {
      setIsLoading(true);
      const response = await getDashboardStats();
        const apiData = response?.data?.data || {};
        setData({
          totalAccounts: apiData?.totalClinics,
          registrationRequest: apiData?.totalUnderReviewClinics,
          rejected: apiData?.totalRejectedClinics,
          registered: apiData?.totalActiveClinics,
          paymentDue: apiData?.totalPaymentDueClinics,
          });
    } catch (error) {
      console.error("Error fetching data:", error);
    } finally {
      setIsLoading(false);
    }
  };

  React.useEffect(() => {
    fetchDashboardStats();
  }, []);

  return (
    <Box>
      {/* <PageHeader /> */}
      <Box className={classes.adminCompanies}>
        <Typography className={classes.adminCompaniesInfoText}>Clinics Info</Typography>
        <Box className={classes.companies}>
          <SuperAdminTotals isLoading={isLoading} data={data} />
        </Box>
      </Box>
      
      {/* Payment Configuration Section */}
      {/* <Box mt={4}>
        <PaymentConfig />
      </Box> */}
    </Box>
  );
};

export default SuperAdmin;
