"use client";
import { useEffect } from "react";
import { Range } from "react-date-range";
import { Box } from "@mui/material";
import { GeneralHealthCard } from "../../GeneralHealthCard/GeneralHealthCard";
import { TransactionsWaitingApproval } from "../../TransactionsWaitingApproval/TransactionsWaitingApproval";
import { TransactionsOverView } from "../../TransactionsOverView/TransactionsOverview";
import {
  type ITransactionsOverviewData,
  type IReviewTransactionsData,
} from "@/app/services/types";
import { dashboardService } from "@/app/services/dashboardService";

interface IDashboardHomePageProps {
  initialHealthData?: {
    success?: boolean;
    message?: string;
    total?: number;
    successful?: number;
    acceptance_rate?: number;
    amount?: number;
    atv?: number;
  } | null;
  initialStats?: Array<{
    label: string;
    value: string | number;
    change: string;
  }> | null;
  initialDateRange?: Range[];
  initialOverviewData?: ITransactionsOverviewData | null;
  initialReviewTransactions?: IReviewTransactionsData | null;
}

export const DashboardHomePage = ({
  initialHealthData,
  initialStats,
  initialDateRange,
  initialOverviewData,
  initialReviewTransactions,
}: IDashboardHomePageProps) => {
  // Initialize service with server data if available
  useEffect(() => {
    if (initialHealthData && initialOverviewData && initialReviewTransactions) {
      dashboardService.updateDashboardData({
        healthData: initialHealthData,
        overviewData: initialOverviewData,
        reviewTransactions: initialReviewTransactions,
      });
    }
  }, [initialHealthData, initialOverviewData, initialReviewTransactions]);

  return (
    <>
      {/* Conditional rendering of the Generic Modal, passing LoginModal as children */}
      <Box sx={{ p: 2 }}>
        <GeneralHealthCard
          initialHealthData={initialHealthData}
          initialStats={initialStats}
          initialDateRange={initialDateRange}
        />
      </Box>
      <TransactionsOverView initialOverviewData={initialOverviewData} />
      {/* <FetchReport /> */}
      <TransactionsWaitingApproval
        initialReviewTransactions={initialReviewTransactions}
      />
      {/* <Documentation />
      <AccountIQ />
      <WhatsNew /> */}
    </>
  );
};