import { Category, DollarCircle, DocumentText, People } from 'iconsax-react'
import { type FC } from 'react'
import FoodSalesChart from './components/FoodSalesChart'
import RevenueChart from './components/RevenueChart'
import StatCard from './components/StatCard'
import { useGetStatistics } from './hooks/useStatsData'
import { formatFaNumber, formatPrice } from '@/helpers/func'
import PageLoading from '@/components/PageLoading'

const Statistics: FC = () => {

    const { data: statisticsData, isLoading } = useGetStatistics();

    if (isLoading) {
        return (
            <div className='p-6 max-w-[1600px] mx-auto flex justify-center items-center min-h-[400px]'>
                <PageLoading />
            </div>
        )
    }

    const stats = statisticsData?.data;

    return (
        <div className='p-6 max-w-[1600px] mx-auto'>
            {/* Stats Cards */}
            <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-6'>
                <StatCard
                    icon={<Category size={24} color='#6B7FED' />}
                    title='کالاها'
                    value={`${formatFaNumber(stats?.activeFoods)} عددی`}
                    color='#6B7FED'
                />
                <StatCard
                    icon={<People size={24} color='#6B7FED' />}
                    title='مشتریان'
                    value={`${formatFaNumber(stats?.totalClients)} مشتری`}
                    color='#6B7FED'
                />
                <StatCard
                    icon={<DocumentText size={24} color='#FF9A62' />}
                    title='سفارشات'
                    value={`${formatFaNumber(stats?.totalOrders)} سفارش`}
                    color='#FF9A62'
                />
            </div>

            {/* Charts Section */}
            <div className='grid grid-cols-1 lg:grid-cols-12 gap-6'>
                <div className='lg:col-span-8'>
                    <RevenueChart />
                </div>
                <div className='lg:col-span-4'>
                    <StatCard
                        icon={<DollarCircle size={24} color='#10B981' />}
                        title='درآمد'
                        value={stats?.totalRevenue ? formatPrice(stats.totalRevenue) : '۰ تومان'}
                        color='#10B981'
                    />
                    <div className='mt-5'>
                        <FoodSalesChart />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Statistics