/* eslint-disable @typescript-eslint/no-explicit-any */
import AdminDashboardLayout from '@/layouts/admin_layout'
import AdminWelcome from '@/components/admin/AdminWelcome'
import AdminAnalyticsWrapper from '@/components/admin/AdminAnalyticsCardWrapper'
import NewTicker from '@/components/shared/NewTicker'
import AdminHeaderBanner from '@/components/admin/AdminHeaderBanner'
import AdminNotice from '@/components/admin/AdminNotice'
import AdminStatsChart from '@/components/admin/AdminStatsChart'
import styles from "./home.module.scss"
import { usePage } from '@inertiajs/react'
import HomeChart from '@/components/dashboard/HomeChart'


const AdminOverview = () => {
   // Get the Inertia page props
    const { stats: { users = [], deposits = [], withdrawals = [] } = {}, totals = {} } = usePage().props as any;

  // Optional: make sure we have default empty arrays to avoid undefined errors
  const stats = {
    users: users ?? [],
    deposits: deposits ?? [],
    withdrawals: withdrawals ?? [],
  };

  console.log(users)
  return (
    <div className={ styles["home"] }>
      <AdminWelcome />
      <AdminNotice />
      <AdminHeaderBanner totals={totals} />
      <NewTicker />
      <AdminAnalyticsWrapper totals={totals} />
      <HomeChart />
      <AdminStatsChart 
        users={stats.users} 
        deposits={stats.deposits} 
        withdrawals={stats.withdrawals} 
      />
    </div>
  )
}

AdminOverview.layout = (page: React.ReactNode) => <AdminDashboardLayout children={page} title="Dashboard overview" />

export default AdminOverview