import { type FC } from 'react'
import { useGetDashboard, useGetOrderChart } from './hooks/useDashboardData'
import { useLocation } from 'react-router-dom'
import PageLoading from '../../components/PageLoading'
import Error from '../../components/Error'
import DashboardOverview from './components/DashboardOverview'
import ProductsCountSection from './components/ProductsCountSection'
import OrdersCountSection from './components/OrdersCountSection'
import UnreadCommentsSection from './components/UnreadCommentsSection'
import UsersCountSection from './components/UsersCountSection'
import OrdersChartSection from './components/OrdersChartSection'

const Dashboard: FC = () => {
    const location = useLocation()
    const { data, isLoading, error } = useGetDashboard()
    const { data: orderChartData } = useGetOrderChart()

    if (isLoading) {
        return (
            <div className="flex justify-center items-center min-h-[400px]">
                <PageLoading />
            </div>
        )
    }

    if (error) {
        return (
            <div className="flex justify-center items-center min-h-[400px]">
                <Error errorText="خطا در بارگذاری اطلاعات داشبورد" />
            </div>
        )
    }

    const renderDashboardContent = () => {
        const path = location.pathname

        if (path.includes('products-count')) {
            return <ProductsCountSection data={data?.results} />
        } else if (path.includes('orders-count')) {
            return <OrdersCountSection data={data?.results} />
        } else if (path.includes('unread-comments')) {
            return <UnreadCommentsSection data={data?.results} />
        } else if (path.includes('users-count')) {
            return <UsersCountSection data={data?.results} />
        } else if (path.includes('orders-chart')) {
            return <OrdersChartSection
                dashboardData={data?.results}
                orderChartData={orderChartData?.results}
            />
        } else {
            // نمایش داشبورد کلی
            return <DashboardOverview data={data?.results} />
        }
    }

    return (
        <div className="p-6">
            {renderDashboardContent()}
        </div>
    )
}


export default Dashboard