import { Box } from "@mui/material";
import { GeneralHealthCard } from "../../GeneralHealthCard/GeneralHealthCard";
import { TransactionsWaitingApproval } from "../../TransactionsWaitingApproval/TransactionsWaitingApproval";
import { FetchReport } from "../../FetchReports/FetchReports";
import { Documentation } from "../../Documentation/Documentation";
import { AccountIQ } from "../../AccountIQ/AccountIQ";
import { WhatsNew } from "../../WhatsNew/WhatsNew";
import { TransactionsOverView } from "../../TransactionsOverview/TransactionsOverview";
import { useEffect } from "react";

export const DashboardHomePage = () => {
  // useEffect to fetch data when the component mounts
  useEffect(() => {
    // Construct the URL with query parameters
    const url =
      "https://test-bo.paymentiq.io/paymentiq/backoffice/api/v2/metrics/txsummary?merchantId=100987998&fromDate=2025-06-29+19%3A10&toDate=2025-07-01+19%3A09";

    // Perform the fetch request inside useEffect
    const fetchData = async () => {
      try {
        // Start loading

        // Make the API request
        const response = await fetch(url, {
          method: "GET", // You can change this to 'POST' if necessary
          headers: {
            "Content-Type": "application/json",
            // Add any other headers you need here
          },
        });

        // Check if the response is OK (status code 200-299)
        if (!response.ok) {
          throw new Error(`Failed to fetch: ${response.status}`);
        }

        // Parse the JSON response
        const data = await response.json();
        console.log("[DATA]", data);

        // Update the state with the fetched data
        // setTransactions(data.result || []);
      } catch (err) {
        // Handle any errors that occurred during the fetch
        // setError("Failed to load data, please try again.");
        console.error("Fetch error:", err);
      } finally {
        // Set loading to false when the request is complete
        // setLoading(false);
      }
    };

    // Call the fetch function
    fetchData();
  }, []); // Empty dependency
  return (
    <>
      <Box sx={{ p: 2 }}>
        <GeneralHealthCard />
      </Box>
      <TransactionsOverView />
      <FetchReport />
      <TransactionsWaitingApproval />
      <Documentation />
      <AccountIQ />
      <WhatsNew />
    </>
  );
};