'use client'

import { lazy, Suspense } from 'react'

import { AuthGuard } from '@/components/auth-guard'
import { useRoleGuard } from '@/hooks/useRoleGuard'

const SellerStatisticsDashboard = lazy(() =>
  import('@/components/seller-statistics/seller-statistics-dashboard').then((mod) => ({
    default: mod.SellerStatisticsDashboard,
  })),
)

function LoadingFallback() {
  return (
    <div className="flex items-center justify-center min-h-screen">
      <div className="text-center space-y-4">
        <div className="w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full animate-spin mx-auto"></div>
        <p className="text-white/60">Загрузка статистики...</p>
      </div>
    </div>
  )
}

export default function SellerStatisticsPage() {
  useRoleGuard('SELLER')

  return (
    <AuthGuard>
      <Suspense fallback={<LoadingFallback />}>
        <SellerStatisticsDashboard />
      </Suspense>
    </AuthGuard>
  )
}
